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

اذهب الى الأسفل

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة Empty [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  و استخدامة فى تطبيقات الجافا و برمجة الالة الحاسبة

ـــــــــــــــــــ التوقيع ــــــــــــــــــــ
سبحان الله وبحمدة .....سبحان الله العظيم
أحمد مناع
أحمد مناع
.
.

تاريخ التسجيل : 15/02/2011
المساهمات : 994
النقاط : 201782
التقيم : 118
الدولة : مصر
الجنس : ذكر

http://egy-tech.forumegypt.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

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

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

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

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


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى