[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة

من طرف **أحمد مناع** الخميس فبراير 07, 2019 8:28 pm

اهلا بكم

فى مقال سابق تعرفنا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] حتى نتمكن من تصميم تطبيقات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] باستخدام Scene Builder لذلك فى هذا المقال سنبدء بتنفيذ اول تطبيق لك من خلال Scene Builder وهى تصميم الة حاسبة

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-17.21.33-240x300

1_قم بتشغيل برنامج Scene Builder لتفتح لك النافذة التالية واختر منها empty

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة 799495995

2_من خلال السحب و الافلات قم باضافة حاوية من نوع AnchorPane الى النافذة

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة 2812752

3_ نقوم باضافة أربعة حاويات افقية HBox إلى الحاوية AnchorPane الخاص بنا حتى نتمكن من وضع أزرار أفقيا. للقيام بذلك ، اسحب HBox من حاويات في أعلى يمين Scene Builder....كما بالشكل التالى :

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-20.52.13

من الصعب للغاية معرفة مكان وضعك الحاويات الافقية HBOXES لأنها تاخذ نفس اللون مع الحاوية الام AnchorPane. لذلك سنقوم تغيير مؤقت لون الخلفية للحاويات HBox ويتم ذلك من خلال نافذة الخائص من الجانب الايسر حيث يتم تحديد الخاصية Style ومن خلالها نقوم بكتابة شفرة css لتغير لون الخلفية التالية :

الكود:: -fx-background-color:black;

كما فى الشكل التالى :

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة 679187478

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-21.20.25

4_نقوم بعد ذلك بإضافة الأزرار لتحمل ارقام و عمليات الالة الحاسبة إلى HBoxes عن طريق سحب الزر من نافذة الادوات

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة 2812750

كرر العملية حتى تحصل على جميع الازار المطلوبة كما فى الشكل التالى :

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-21.37.56

5_لدينا الآن مجموعة من الأزرار جنبا الى جنب.لكن يمكنك إضافة بعض التباعد بين الأزرار. انقر فوق أحد HBoxes أسفل AnchorPane ثم على الجانب الأيسر من Scene Builder ، قم بتغيير التباعد كما فى الشكل التالى :

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-21.45.30

6_الآن دعنا نغير النص والألوان وحجم الخط لأزرارنا. انقر فوق الزر الذي تريد تحريره ، على الجانب الأيسر من Scene Builder ، حدد خصائص وقم بتحرير خصائص الزر كما هو مفضل لك

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-22.15.29

7_ كما يمكنك تنسيق الحاوية الام AnchorPane من خلال تحديها واستخدام شفرات css التالية :

الكود:: -fx-background-color:black; -fx-background-radius: 25; -fx-padding: 10;

ليظهر بالشكل التالى :

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-22.40.16

كما يمكنك التعديل على حواف أزرار Zero و Add. من خلال شفرات css ليظهر بحواف منحرفة كما فى الشكل التالى :

الكود:: -fx-background-radius: 0 0 0 25;

الكود:: -fx-background-radius: 0 0 25 0;

ليظهر بالشكل التالى :

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-23.30.24

الان قد انتهينا من التصميم من خلال الامر preview من شريط القوائم يمكنك عرض التصميم ليظهر بالشكل التالى :

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Screen-Shot-2015-05-13-at-23.19.46-211x300

الى اللقاء فى مقال قادم لنتعلم سويا كيفية توليد ملف fxml و استخدامة فى تطبيقات الجافا و برمجة الالة الحاسبة

من طرف **زهراء** الإثنين فبراير 18, 2019 3:34 pm

جزاكم الله خيرا أخى [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

من طرف hamabn الأحد يونيو 21, 2020 2:45 pm

شكراً لك
سوال ماهي متطلبات javax

1	#الحديثة
2	#الدورات
3	#موقع_لي_نور_الإلكتروني
4	#java
5	#datagridview
6	#استثمار
7	#الامارات
8	#الشارقة
9	#سكن
10	#عقار

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة

رد: [JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة

رد: [JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة

مواضيع ذات صلة