دليل شامل لإنشاء واجهات المستخدم الرسومية (GUI) في NetBeans Java
تعتبر واجهة المستخدم الرسومية (GUI - Graphical User Interface)
جزءاً أساسياً من معظم تطبيقات سطح المكتب الحديثة، حيث توفر طريقة
تفاعلية وبصرية للمستخدمين للتفاعل مع البرنامج. في عالم تطوير Java،
تُعد مكتبتا Swing و AWT (Abstract Window Toolkit) من الأدوات الرئيسية
لإنشاء هذه الواجهات. يبرز Apache NetBeans IDE كواحد من
أفضل بيئات التطوير المتكاملة (IDE) لتطوير تطبيقات Java، ليس فقط لقدراته
القوية في كتابة الكود وتصحيح الأخطاء، بل أيضاً لامتلاكه أداة بصرية رائعة
تُعرف بـ GUI Builder (أو Matisse GUI Builder سابقاً) التي تسهل بشكل كبير
عملية تصميم وبناء واجهات المستخدم الرسومية دون الحاجة لكتابة كل سطر كود يدوياً.
يهدف هذا المقال إلى تقديم دليل شامل حول كيفية الاستفادة من أدوات NetBeans
لإنشاء واجهات المستخدم الرسومية الجذابة والوظيفية لتطبيقات Java.
خطوات إنشاء واجهات المستخدم الرسومية (GUI) في NetBeans
1. فهم أساسيات واجهات المستخدم الرسومية في Java (Swing & AWT):
قبل الغوص في NetBeans GUI Builder، من المهم فهم المكونات الأساسية
لواجهات المستخدم الرسومية في Java :
1- AWT (Abstract Window Toolkit) : هي مجموعة المكونات الأصلية لـ Java GUI.
تعتمد على المكونات الأصلية لنظام التشغيل (heavyweight components)،
مما يعني أن مظهرها وسلوكها قد يختلف قليلاً بين أنظمة التشغيل المختلفة.
على الرغم من أنها ما زالت موجودة، إلا أنها نادراً ما تُستخدم لتطوير واجهات كاملة في الوقت الحالي.
2- Swing : هي الجيل الثاني من أدوات Java GUI. تُبنى على AWT
ولكنها توفر مجموعة أغنى وأكثر مرونة من المكونات (lightweight components).
هذه المكونات "تُرسم" بالكامل بواسطة Java نفسها، مما يضمن مظهراً وسلوكاً متسقاً
عبر أنظمة التشغيل المختلفة (Look and Feel).
معظم أدوات NetBeans GUI Builder تركز على مكونات Swing.
* مكونات Swing الأساسية:
- JFrame: النافذة الرئيسية للتطبيق.
- JPanel: حاوية تُستخدم لتجميع المكونات الأخرى وتنظيمها.
- JButton: زر للتفاعل.
- JLabel: لعرض نص أو صورة غير قابلة للتعديل.
- JTextField / JTextArea: حقول إدخال النص.
- JComboBox: قائمة منسدلة للاختيار.
- JCheckBox / JRadioButton: مربعات اختيار أو أزرار اختيار.
- JTable / JList: لعرض البيانات في جداول أو قوائم.
2. بدء مشروع Java GUI في NetBeans :
للبدء في إنشاء واجهتك الرسومية، اتبع الخطوات التالية في NetBeans:
* إنشاء مشروع جديد :
اذهب إلى File -> New Project....
- اختر Java with Ant أو Java with Maven (حسب تفضيلك لنظام البناء).
- اختر Java Application ، اضغط Next.
* تسمية المشروع وإعداداته :
- أدخل Project Name (مثال: MySwingApplication).
- اختر Project Location.
* هام: تأكد من تحديد مربع Create Main Class وإعطاء اسم لفئة البدء
(مثال: com.mycompany.myswingapplication.Main).
- اضغط Finish.
3. استخدام NetBeans GUI Builder (Visual Editor) :
بمجرد إنشاء المشروع، ستحتاج إلى إضافة نموذج (Form) جديد لواجهة المستخدم الرسومية.
* إضافة JFrame Form:
- في نافذة Projects، انقر بزر الماوس الأيمن على حزمة المصدر
(Source Packages أو com.mycompany.myswingapplication).
- اختر New -> JFrame Form....
- أدخل Class Name (مثال: MyMainFrame) ، اضغط Finish.
* التعرف على بيئة GUI Builder:
عند فتح MyMainFrame.java (أو أي نموذج GUI آخر)، ستلاحظ
ثلاث علامات تبويب رئيسية في الجزء العلوي من نافذة المحرر:
- Design: هذا هو محرر الواجهة الرسومية البصرية (Visual Editor).
هنا ستقوم بسحب وإسقاط المكونات وتصميم واجهتك.
- Source: لعرض وتحرير كود Java الذي تم إنشاؤه تلقائياً بواسطة GUI Builder،
بالإضافة إلى الكود الذي تكتبه يدوياً لمعالجة الأحداث.
- History: لتتبع التغييرات في الملف.
* بالإضافة إلى ذلك، ستلاحظ الأجزاء الرئيسية التالية:
- Palette (لوحة المكونات): تقع عادةً على الجانب الأيمن أو الأيسر، وتحتوي
على جميع مكونات Swing (مثل JButton, JLabel, JTextField, JPanel)
التي يمكنك سحبها وإسقاطها على النموذج.
- Inspector (المفتش): يقع عادةً أسفل لوحة المكونات، ويعرض الشجرة الهرمية
لمكونات الواجهة (مثل JFrame, JPanel, JButton)، مما يسهل التنقل بينها وتحديدها.
- Properties (الخصائص): يقع أسفل المفتش، ويعرض خصائص المكون
المحدد حالياً (مثل النص على الزر، لون الخلفية، الحجم، الخط)، مما يتيح لك تعديلها بسهولة.
- Customizer (المخصص): يظهر أحياناً لبعض المكونات المعقدة لتكوينها بشكل أكثر تفصيلاً.
4. خطوات عملية لتصميم واجهة رسومية بسيطة :
لنصمم واجهة بسيطة تحتوي على حقل نص وزر، وعند النقر على الزر يظهر النص في رسالة ترحيب.
* سحب وإسقاط المكونات في وضع Design:
- من Palette، اسحب JLabel وضعه على الـ JFrame.
- اسحب JTextField وضعه بجانب الـ JLabel.
- اسحب JButton وضعه أسفل حقل النص.
* تعديل خصائص المكونات (باستخدام نافذة Properties):
- حدد الـ JLabel. في نافذة Properties، قم بتغيير خاصية text إلى "ادخل اسمك:".
- حدد الـ JTextField.
- قم بتغيير خاصية text إلى نص فارغ (امسح أي نص افتراضي).
- انقر بزر الماوس الأيمن عليه واختر Change Variable Name...، ثم
اكتب nameTextField (هذا سيسهل الوصول إليه برمجياً) ، حدد الـ JButton ،
- قم بتغيير خاصية text إلى "ترحيب".
- انقر بزر الماوس الأيمن عليه واختر Change Variable Name...، ثم اكتب welcomeButton.
* إضافة معالج الأحداث (Event Handler):
انقر نقراً مزدوجاً على welcomeButton في وضع Design. سيؤدي هذا إلى
نقلك تلقائياً إلى وضع Source وإنشاء دالة معالج الحدث
welcomeButtonActionPerformed.
داخل هذه الدالة، اكتب الكود التالي:
Java
private void welcomeButtonActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
String userName = nameTextField.getText(); // الحصول على النص من حقل الإدخال
javax.swing.JOptionPane.showMessageDialog(this, "أهلاً بك يا " + userName + "!"); // عرض رسالة ترحيب
}
--
* تشغيل التطبيق :
لتشغيل تطبيقك، انقر بزر الماوس الأيمن على MyMainFrame.java
في نافذة Projects واختر Run File.
أو، تأكد من أن MyMainFrame هو الكلاس الرئيسي في المشروع من خلال خصائص المشروع.
5. إدارة التخطيط (Layout Management):
تُعد إدارة التخطيط جزءاً حيوياً لضمان أن واجهتك الرسومية تبدو جيدة
وتستجيب بشكل صحيح لأحجام النوافذ المختلفة ، NetBeans GUI Builder يستخدم
نظام تخطيط يسمى GroupLayout افتراضياً.
* GroupLayout: هو نظام تخطيط مرن وقوي يسمح لك بإنشاء تخطيطات معقدة.
يقوم NetBeans بتوليد كود GroupLayout تلقائياً بناءً على كيفية وضعك للمكونات.
يمكنك ملاحظة الخطوط المتقطعة الزرقاء عند سحب المكونات، والتي
تساعدك على محاذاة المكونات وتحديد المسافات بينها.
* نصائح لتخطيط أفضل :
- المسافات البادئة (Indentation) والمحاذاة: استخدم المؤشرات البصرية في
NetBeans (الخطوط الزرقاء) لمحاذاة المكونات بشكل صحيح.
- الحاويات (Panels): استخدم JPanel لتجميع المكونات ذات الصلة.
هذا يساعد في تنظيم الواجهة ويجعل التخطيط أسهل.
- تغيير نوع التخطيط: يمكنك تغيير نوع التخطيط لحاوية معينة (مثل JPanel)
بالنقر بزر الماوس الأيمن عليها واختيار Set Layout. على الرغم من أن
GroupLayout هو الافتراضي، يمكنك الاختيار من FlowLayout, BorderLayout
, GridLayout, BoxLayout, وغيرها.
6. ميزات متقدمة في NetBeans GUI Builder:
- محرر الخصائص (Properties Editor): يمكنك تعديل كل خاصية ممكنة
للمكونات من هنا، بما في ذلك الألوان، الخطوط، الأبعاد، أزرار الاختيار
(Radio Buttons)، ومربعات الاختيار (Check Boxes).
- المُخصِّصون (Customizers): لبعض المكونات المعقدة مثل JTable أو JList،
يوفر NetBeans مُخصِّصات بصرية تتيح لك تكوينها بسهولة دون الحاجة لكتابة كود معقد.
- معالج الأحداث (Event Handling): بالإضافة إلى النقر المزدوج على الزر،
يمكنك النقر بزر الماوس الأيمن على أي مكون واختيار Events لترى جميع
الأحداث التي يمكن التعامل معها (مثل Mouse Clicked, Key Typed, Window Closing).
- دعم المكونات المخصصة: يمكنك دمج المكونات المخصصة التي تقوم بإنشائها
بنفسك (Custom Components) في لوحة المكونات (Palette) لاستخدامها في تصاميمك.
* الخلاصة:
يوفر NetBeans IDE أداة GUI Builder قوية وبديهية تُسهل بشكل كبير
عملية إنشاء واجهات المستخدم الرسومية لتطبيقات Java باستخدام مكتبة Swing.
من خلال السحب والإسقاط، وتعديل الخصائص، وإدارة الأحداث، يمكن للمطورين، حتى المبتدئين،
بناء واجهات تفاعلية وجذابة بكفاءة عالية. بينما يقوم NetBeans بتوليد جزء كبير
من كود الواجهة تلقائياً، يظل لديك التحكم الكامل في إضافة المنطق الخاص بك
ومعالجة الأحداث، مما يجعله أداة متكاملة وفعالة لتطوير تطبيقات سطح المكتب في Java.
ابدأ بالتجربة واستكشاف مختلف المكونات والميزات لتحقيق أقصى استفادة من هذه الأداة القوية.
 في NetBeans Java تعتبر واجهة المستخدم الرسومية (GUI - Graphical User Interface) جزءاً أساس…){kind=link}