واجهة المستخدم الرسومية Java GUI

١ما المقصود بواجهة المستخدم؟

الجزء من البرنامج الذي يتعامل معه المستخدم مباشرة، وهي نوعان:

٢مكتبة Swing

مكتبة رسومية في جافا لإنشاء واجهات المستخدم، وهي امتداد لمكتبة AWT لكنها أكثر تطورًا ومرونة، وتوفّر كلاسات لبناء واجهات مستقلة عن نظام التشغيل.

لوحة المكوّنات Palette في NetBeans

٣النافذة JFrame

الكلاس الأساسي لإنشاء نافذة في Swing، وتُعرض فيها مكوّنات الواجهة. ننشئها في NetBeans: زر أيمن على الحزمة‏ ← ‏New‏ ← ‏JFrame Form.

للاطلاع: إنشاء نافذة بالكود

import javax.swing.JFrame;public class Main {    public static void main(String[] args) {        // إنشاء نافذة (كائن من JFrame)        JFrame frame = new JFrame("نافذة تجريبية");         // تحديد حجم النافذة        frame.setSize(400, 300);         // تحديد الإجراء عند إغلاق النافذة        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);         // لتحديد مكان ظهور النافذة على الشاشة عند تشغيل التطبيق        // عرض في منتصف شاشة المستخدم بالضبط        frame.setLocationRelativeTo(null);        // جعل النافذة مرئية        frame.setVisible(true);    }}

٤JPanel و JLabel

• JPanel: حاوية داخل النافذة لترتيب المكوّنات (أزرار، تسميات، مربعات نص، قوائم، أو حتى Panels أخرى). تقسّم بها النافذة إلى أقسام، وتلوّن خلفيتها، وتعطيها تخطيطًا Layout خاصًّا.
• JLabel: كلاس لعرض نصوص أو صور ثابتة لا يمكن للمستخدم تعديلها.

٥مثال: نافذة الترحيب بالسحب والإفلات

1. أنشئ النموذج: زر أيمن على الحزمة‏ ← ‏New‏ ← ‏JFrame Form، واكتب اسمًا مثل GreetingForm.
2. اسحب المكوّنات: من Palette اسحب: Label للنص «الاسم:»، و Text Field، و Button، و Label ثانية للنتيجة.
3. غيّر النصوص: حدّد كل مكوّن، ومن Properties غيّر text: «ترحيب» للزر، وامسح نص الحقل.
4. برمج الحدث: انقر نقرًا مزدوجًا على الزر، فيفتح NetBeans الدالة jButton1ActionPerformed؛ اكتب فيها سطرين فقط.
5. شغّل: Run File (Shift+F6).

الكود الوحيد الذي تكتبه (داخل الدالة التي يولّدها NetBeans):

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {    String name = jTextField1.getText();    jLabel2.setText("مرحبًا " + name);}

• jTextField1.getText() يقرأ النص الذي كتبه المستخدم.
• jLabel2.setText(...) يغيّر النص الظاهر في التسمية.
• لا تعدّل الكود الرمادي initComponents()؛ يولّده NetBeans من تصميمك.

جرّبها هنا: نسخة تفاعلية تحاكي النافذة.

٦مشروع عملي خطوة بخطوة: محوّل درجات الحرارة

نبني تطبيقًا صغيرًا: يكتب المستخدم درجة الحرارة بالمئوي Celsius، ويضغط زر Convert، فتظهر الدرجة بالفهرنهايت Fahrenheit. نبنيه بالسحب والإفلات على مرحلتين: تصميم الواجهة، ثم برمجة الزر.

جرّب النافذة أعلاه: هذا ما ستبنيه في NetBeans.

١) إنشاء المشروع والنافذة

1. File‏ ← ‏New Project‏ ← ‏Java with Ant‏ ← ‏Java Application‏ ← ‏Next.
2. اكتب اسم المشروع CelsiusConverterProject، وألغِ تحديد Create Main Class، لأن النافذة نفسها ستكون نقطة تشغيل البرنامج، ثم Finish.
3. في نافذة Projects افتح Source Packages، ثم زر أيمن على <default package>‏ ← ‏New‏ ← ‏JFrame Form.
4. اكتب اسم الكلاس CelsiusConverterGUI، ثم Finish. إن تركت خانة Package فارغة يظهر تحذير لا يمنع العمل؛ والأفضل في مشاريعك كتابة اسم حزمة. تظهر النافذة فارغة في وضع التصميم Design.

٢) تعرّف على أجزاء شاشة التصميم

1. Palette (لوحة المكوّنات): فيها مكوّنات Swing؛ سنستخدم منها JLabel و JTextField و JButton.
2. Design Area (منطقة التصميم): النافذة التي تسحب إليها المكوّنات. أعلاها تبويبان: Design للتصميم، و Source لرؤية الكود المولَّد.
3. Properties (الخصائص): تغيّر منها خصائص المكوّن المحدد، مثل النص والخط واللون.
4. Navigator (المستكشف): قائمة بكل مكوّنات النافذة وأسماء متغيراتها.

٣) بناء الواجهة بالسحب والإفلات

1. حدّد النافذة JFrame، ومن Properties غيّر title إلى: Celsius Converter.
2. اسحب Text Field إلى أعلى يسار النافذة. تظهر خطوط إرشادية متقطعة تساعدك على المحاذاة.
3. اسحب Label وضعه يمين الحقل على السطر نفسه.
4. اسحب Button وضعه أسفل الحقل.
5. اسحب Label ثانية وضعها يمين الزر.

٤) ضبط الواجهة

1. انقر نقرًا مزدوجًا على كل مكوّن لتغيير نصه: امسح نص الحقل، واجعل الزر Convert، والتسمية الأولى Celsius، والثانية Fahrenheit.
2. حدّد الحقل والزر معًا (Shift مع النقر)، ثم زر أيمن‏ ← ‏Same Size‏ ← ‏Same Width ليصبحا بالعرض نفسه.
3. اسحب الزاوية السفلية اليمنى للنافذة لإزالة المساحة الفارغة، مع ترك مسافة بسيطة ليظهر العنوان كاملًا.
4. لتظهر النافذة في وسط الشاشة عند التشغيل: حدّد JFrame، ومن Properties افتح تبويب Code وفعّل Generate Center.

٥) برمجة الزر

1. غيّر أسماء المتغيرات إلى أسماء مفهومة: في Navigator زر أيمن على كل مكوّن‏ ← ‏Change Variable Name. الأسماء: tempTextField و celsiusLabel و convertButton و fahrenheitLabel.
2. زر أيمن على زر Convert‏ ← ‏Events‏ ← ‏Action‏ ← ‏actionPerformed (أو انقر عليه نقرًا مزدوجًا). يفتح NetBeans الدالة convertButtonActionPerformed فارغة.
3. اكتب داخلها كود التحويل التالي:

private void convertButtonActionPerformed(java.awt.event.ActionEvent evt) {    //Parse degrees Celsius as a double and convert to Fahrenheit.    int tempFahr = (int) ((Double.parseDouble(tempTextField.getText()))            * 1.8 + 32);    fahrenheitLabel.setText(tempFahr + " Fahrenheit");}

• tempTextField.getText() يقرأ ما كتبه المستخدم في الحقل نصًّا.
• Double.parseDouble(...) يحوّل النص إلى عدد عشري.
• * 1.8 + 32 قانون التحويل من المئوي إلى الفهرنهايت، و (int) يحذف الكسور ويحفظ الناتج في tempFahr.
• fahrenheitLabel.setText(...) يعرض النتيجة في التسمية الثانية.

٦) التشغيل

1. Run‏ ← ‏Run Project (أو F6). في أول تشغيل يسألك NetBeans عن الكلاس الرئيسي: اختر CelsiusConverterGUI ثم OK.
2. اكتب 40 واضغط Convert، فيظهر: 104 Fahrenheit.