تعلم جافا سوينق - Java Swing Tutorial

هل أنت مستعد لتعلم Swing ؟

قبل أن تتعلم Swing يجب أن تتعلم الخوارزميات و لغة جافا للأسباب التالية:

  • الخوارزميات تعلمك المنطق البرمجي و هي أول شيء يجب أن يتعلمه المبرمج قبل تعلم أي لغة برمجة.

  • بما أنك تنوي تعلم المكتبة Swing فأنت بحاجة لتعلم لغة جافا التي هي أساس هذه المكتبة.

لا تقلق إذا لم يسبق لك أن تعلمتهما لأننا شرحنا الخوارزميات و لغة جافا من الصفر هنا.



إذاً تم إعداد هذه الدورة لتكون مرجعاً شاملاً لكل شخص تعلم الخوارزميات و لغة جافا من موقعنا و ينوي تعلم بناء تطبيقات سطح المكتب باستخدام المكتبة Swing.

ما هي المكتبة Swing ؟

في البداية, واجهة المستخدم تسمى Graphical User Interface في اللغة الإنجليزية و تختصر بـ GUI.
المقصود من واجهة المستخدم هو بناء برامج فيها واجهات رسومية كما في الصورة التالية.


المكتبة AWT هي أول مكتبة تم تطويرها لبناء واجهة المستخدم.
بعدها تم تطوير المكتبة Swing و التي بدورها تعتمد على المكتبة AWT.

كلا الحزمتين السابقتين تحتويان على كلاسات كثيرة يمكن إستخدامها لبناء واجهة المستخدم.
في هذه الدورة سنركز على الكلاسات الموجودة في المكتبة Swing و نستخدم فقط ما نحتاجه من المكتبة AWT.

بناء المكتبتين AWT و Swing

لتستخدم كلاسات المكتبة AWT عليك أن تفعل لهم import من هذا المسار java.awt.
لتستخدم كلاسات المكتبة Swing عليك أن تفعل لهم import من هذا المسار javax.swing.


الصورة التالية توضح لك كيف تم بناء المكتبتين AWT و Swing.

كلاسات الحزمة swing التي تستخدم لبناء واجهة المستخدم


كل كلاس من هذه الكلاسات يمثل شيء معين من الأشياء التي يمكن إضافتها في واجهة المستخدم.

أمثلة

  • الكلاس JFrame يستخدم لإضافة نافذة.

  • الكلاس JButton يستخدم لإضافة زر.

  • الكلاس JLabel يستخدم لإضافة عنوان أو صورة.

  • الكلاس JTextArea يستخدم لإضافة فقرة.

  • الكلاس JTextFielad يستخدم لإضافة مربع إدخال النصوص.

  • الكلاس JList يستخدم لإضافة قائمة.

  • الكلاس JTable يستخدم لإضافة جدول إلخ..


إذاً كل كائن ننشئه من كلاس موجود في المكتبة Swing يعطينا شيء معين يمكن إضافته في واجهة المستخدم.

في هذه الدورة ستتعرف على كل شيء يمكنك إضافته في النافذة خطوة خطوة.
في الأخير سنعلمك طريقة بناء تطبيقات و ألعاب باستخدام المكتبة Swing و عندها ستعرف فائدة كل شيء تعلمته سابقاً في مادة الخوارزميات و جافا.

الطريقة الصحيحة للتعلم

لا تحاول تعلم Swing ما لم تتعلم الخوارزميات و جافا قبلها لأنك قد تواجه صعوبة كبيرة في فهم الكود أحياناً حتى لو كان الكود مشروح بتفصيل و سهل الفهم.

قم بدراسة جميع الدروس بنفس الترتيب الموضوعين فيه لأننا شرحنا جميع الأفكار بشكل مترابط.

قم بتجربة الأمثلة الموضوعة في كل درس على الكمبيوتر, و حاول كتابة الكود من جديد بنفسك و تلاعب بالكود حتى تفهمه و تقتنع به أكثر.

في الأخير قم بدراسة التطبيقات والألعاب التي وضعناها لأنك ستتعلم منها كيف تستفيد من كل شيء تعلمته سابقاً و ستتعلم الكثير من الأشياء الجديدة.

بالنسبة للبرنامج الذي ستحتاجه لبناء التطبيقات, يمكنك إستخدام برنامج Netbeans الذي شرحنا طريقة تحميله, تنصيبه و إستخدامه في دورة جافا.

Java Swing طريقة إنشاء نافذة

مقدمة عن النوافذ

النافذة تسمى Frame و هناك كلاس خاص لإنشاء النوافذ إسمه JFrame.

لإنشاء نافذة هناك طريقتين يمكنك إعتماد إحداهما:

  1. من خلال إنشاء كائن من الكلاس JFrame.

  2. من خلال وراثة الكلاس JFrame, ثم إنشاء كائن من الكلاس الذي ورثه.

أمثلة حول طرق إنشاء نافذة في جافا Swing


المثال الأول طريقة إنشاء نافذة فارغة من خلال إنشاء كائن من الكلاس JFrame.

في المثال التالي ستتعلم طريقة إنشاء نافذة فارغة من خلال إنشاء كائن من الكلاس JFrame.

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

ستظهر لك النافذة التالية عند التشغيل.



المثال الثاني طريقة إنشاء نافذة فارغة من خلال وراثة الكلاس JFrame.

في المثال التالي ستتعلم طريقة إنشاء نافذة فارغة من خلال وراثة الكلاس JFrame.

Main.java
import javax.swing.JFrame;
 
public class Main extends JFrame {
 
    public Main() {                                     // نقوم بتجهيز كل شيء متعلق بالنافذة JFrame في كونستركتور الكلاس الذي يرث من الكلاس
        this.setSize(500, 400);                         // هنا قمنا بتحديد حجم النافذة. عرضها 500 و طولها 400
        this.setVisible(true);                          // هنا جعلنا النافذة مرئية
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);   // هنا جعلنا زر الخروج من النافذة يغلق البرنامج
    }
 
 
    public static void main(String[] args) {
        new Main();                            // أي قمنا بإنشاء نافذة Main هنا أنشأنا كائن من الكلاس
    }
 
}
		

ستظهر لك النافذة التالية عند التشغيل.


إنتبه: يمكن عدم وضع الكلمة this و سيعمل الكود أيضاً بشكل طبيعي.
وضعنا this فقط حتى لا تستغرب إذا رأيت أحد يضعها كلما كان يريد الإشارة إلى النافذة.


ملاحظة

في البرامج الكبيرة التي تحتوي على أكثر من نافذة, يفضل إنشاء كلاس خاص لكل نافذة.
أي ينصح بإعتماد الطريقة الثانية التي تقضي بوارثة الكلاس JFrame في حال كان البرنامج يحتوي على أكثر من نافذة.

لماذا لا يتم إغلاق البرنامج عند النقر على زر الخروج بشكل تلقائي؟


إفتراضياً, زر الخروج الذي تجده في أعلى النافذة لا يقوم بإغلاق البرنامج عند النقر عليه, بل يقوم فقط بإخفاء النافذة المفتوحة.
في حال أردت أن يتم إغلاق البرنامج كلياً عند النقر على زر الخروج, عليك إستدعاء الدالة setDefaultCloseOperation() كما فعلنا في الأمثلة السابقة.

سبب جعل البرنامج لا يغلق بشكل تلقائي عند النقر على زر الخروج هو أنك في البرنامج الواحد أحياناً قد تقوم بإظهار أكثر من نافذة في نفس الوقت و لكنك لا تريد عند النقر على زر الخروج الموجود في أي نافذة أن يغلق جميع النوافذ المفتوحة.


مثال

لنفترض أنه عندنا برنامج يتألف من نافذة رئيسية و ثلاث نوافذ مخفية.
هنا كل زر في النافذة الرئيسية يفتح نافذة جديدة عند النقر عليه. فمثلاً عند النقر على الزر Add new book سيفتح نافذة أخرى إلى جانب النافذة الرئيسية كما في الصورة التالية.

لماذا لا يتم إغلاق البرنامج عند النقر على زر الخروج بشكل تلقائي؟


بما أن زر الخروج الموجود في النافذة الرئيسية هو الوحيد الذي نريده أن يغلق البرنامج عندما يتم النقر عليه, يجب إستدعاء الدالة setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) لكائن الـ JFrame الذي يمثل النافذة الرئيسية في البرنامج فقط.

و هكذا عند النقر على زر الخروج الموجود في أي نافذة أخرى سيتم إخفاء النافذة التي تحتوي على الزر فقط و سيظل البرنامج شغلاً.

مفهوم مدير العرض ( Layout Manager )

فكرة الـ Layout Manager بشكل عامل هي تحديد كيف سيتم ترتيب الأشياء التي سيتم إضافتها في النافذة.
هناك عدة أنواع من الـ Layout Managers التي يمكنك إستخدامها لتحديد أماكن و أحجام الأشياء التي سيتم إضافتها في النافذة بشكل تلقائي.

كل Layout Manager تم تمثيله بكلاس خاص. ستتعرف على جميع هذه الكلاسات لاحقاً في الدورة.

الذي عليك معرفته في الوقت الحالي هو أنك في حال لم تقم بتحديد الـ Layout Manager الذي ستستخدمه النافذة, فإنها ستستخدم Layout Manager إسمه BorderLayout.
لذلك ستجد أن أي شيء تضيفه في النافذة يظهر في وسطها و من الناحية اليسرى ما لم تقم بتحديد الـ Layout Manager للنافذة بنفسك.
و في حال أضفت أكثر من شيء فيها سيتم وضع الأشياء التي تضيفها فوق بعضها البعض و بالتالي سيظهر فقط آخر شيء أضفته.

لذلك عليك دائماً تحديد طريقة ترتيب الأشياء التي ستضيفها في النافذة, و هنا يمكنك إما إستخدام أحد الـ Layout Managers أو عدم إستخدام Layout Manager من الأساس و عندها ستضطر إلى تحديد حجم و مكان كل شيء تضيفه في النافذة نفسك.

مفهوم الحدث (Event)

كلمة حدث تعني أنه تم التفاعل مع محتوى النافذة بأي شكل من الأشكال.
فمثلاً: تحريك الفأرة فوق النافذة يعتبر حدث, النقر على أي زر في النافذة يعتبر حدث إلخ..

كل حدث يمكن أن يحدث عندما يقوم المستخدم بالتفاعل مع النافذة و محتواها له إنترفيس خاص يمثله.
بهذه الطريقة نستطيع تنفيذ أي أوامر نريد على حسب التفاعل الذي قام به المستخدم.

ستتعرف أكثر على فكرة الأحداث و أنواعها من خلال التمارين التي ستجدها في الدروس اللاحقة.
ملاحظة: إذا ألقيت نظرة على قائمة الدروس ستجد أننا وضعنا قسم خاص للأحداث.


في الدرس التالي ستتعرف على الكلاس Component الذي يعتبر الكلاس الأساسي لأي شيء تم بناءه بواسطة المكتبة Swing.