اهلا بكم

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


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


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


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


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

الكود:

-fx-background-color:black;


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


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


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


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


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


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

الكود:

-fx-background-color:black;
-fx-background-radius: 25;
-fx-padding: 10;

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


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

الكود:

-fx-background-radius: 0 0 0 25;

الكود:

-fx-background-radius: 0 0 25 0;

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


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




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

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

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