ترميز واجهة مستخدم رسومية بسيطة من Java

واجهة مستخدم رسومية (GUI) بنيت باستخدام منصة Java NetBeans يتكون من عدة طبقات من الحاويات. الطبقة الأولى هي النافذة المستخدمة لتحريك التطبيق حول شاشة جهاز الكمبيوتر الخاص بك. يُعرف هذا باسم الحاوية عالية المستوى ، وتتمثل مهمتها في منح جميع الحاويات والمكونات الرسومية الأخرى مكانًا للعمل فيه. نموذجيًا لتطبيق سطح مكتب ، سيتم إنشاء هذه الحاوية عالية المستوى باستخدام

صف دراسي.

يمكنك إضافة أي عدد من الطبقات إلى تصميم واجهة المستخدم الرسومية الخاصة بك ، حسب درجة تعقيدها. يمكنك وضع المكونات الرسومية (على سبيل المثال ، مربعات النص ، والتسميات ، والأزرار) مباشرة في

، أو يمكنك تجميعها في حاويات أخرى.

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

هو الجد الذي يجلس في الأعلى ، ثم يمكن التفكير في الحاوية التالية على أنها الأب والمكونات التي يحملها كأطفال.

في هذا المثال ، سننشئ واجهة مستخدم رسومية باستخدام

تحتوي على اثنين

. الأول

سيعقد

. الثاني

سيعقد

. واحد فقط

(وبالتالي المكونات الرسومية التي يحتوي عليها) ستكون مرئية في كل مرة. سيتم استخدام الزر لتبديل رؤية الاثنين

instagram viewer

هناك طريقتان لإنشاء واجهة المستخدم الرسومية هذه باستخدام NetBeans. الأول هو كتابة كود Java الذي يمثل واجهة المستخدم الرسومية يدويًا ، والتي تمت مناقشتها في هذه المقالة. والثاني هو استخدام أداة NetBeans GUI Builder لبناء Swing GUIs.

للحصول على معلومات حول استخدام JavaFX بدلاً من Swing لإنشاء واجهة المستخدم الرسومية ، راجع ما هو JavaFX?

ملحوظة: الرمز الكامل لهذا المشروع في مثال Java Code لبناء تطبيق GUI بسيط.

إنشاء مشروع NetBeans

إنشاء جديد جافا المشروع التطبيقي في NetBeans مع فصل دراسي رئيسي ، وسنسمي المشروع

نقطة تحقق: في نافذة المشاريع ، يجب أن يكون NetBeans مجلد GuiApp1 عالي المستوى (إذا لم يكن الاسم غامقًا ، فانقر بزر الماوس الأيمن على المجلد واختر

). تحت ال

يجب أن يكون المجلد مجلد حزم المصدر مع

يسمى GuiApp1. يحتوي هذا المجلد على الفئة الرئيسية تسمى

جافا.

قبل إضافة أي كود Java ، أضف عمليات الاستيراد التالية إلى أعلى

الطبقة بين

الخط و

تعني عمليات الاستيراد هذه أن جميع الفئات التي نحتاجها لجعل تطبيق واجهة المستخدم الرسومية هذا سيكون متاحًا لنا للاستخدام.

ضمن الطريقة الرئيسية ، أضف هذا السطر من التعليمات البرمجية:

هذا يعني أن أول شيء يجب القيام به هو إنشاء جديد

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

الفئة ، لذا أضف طريقة جديدة:

في هذه الطريقة ، سنضع كل كود Java المطلوب لإنشاء واجهة المستخدم الرسومية ، مما يعني أن كل سطر من الآن فصاعدًا سيكون داخل

طريقة.

ملاحظة التصميم: ربما تكون قد رأيت رمز Java المنشور الذي يعرض الفصل (أي ،

) ممتدة من أ

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

الفصل هو إذا كنت بحاجة إلى جعل نوع أكثر تحديدًا من

(نلقي نظرة على

لمزيد من المعلومات حول عمل فئة فرعية).

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

. لخلق

الكائن ، استدعاء

البناء:

بعد ذلك ، سنقوم بتعيين سلوك نافذة تطبيق واجهة المستخدم الرسومية الخاصة بنا ، باستخدام الخطوات الأربع التالية:

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

2. قم بتعيين عنوان للنافذة بحيث لا تحتوي النافذة على شريط عنوان فارغ. أضف هذا السطر:

3. اضبط حجم النافذة ، بحيث تكون النافذة بحجمها لاستيعاب المكونات الرسومية التي تضعها فيها.

ملاحظة التصميم: خيار بديل لتحديد حجم النافذة هو استدعاء

طريقة

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

طريقة.

4. توسيط النافذة لتظهر في منتصف شاشة الكمبيوتر بحيث لا تظهر في الزاوية العلوية اليسرى من الشاشة:

إضافة جابانيلز

إنشاء الخطين هنا القيم من أجل

الكائنات التي سننشئها قريبًا ، باستخدام اثنين

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

أنشئ أول كائن JPanel

الآن ، لنقم بإنشاء الأول

موضوع. سيحتوي على

. يتم إنشاء الثلاثة عبر طرق المنشئ الخاصة بهم:

ملاحظات على الخطوط الثلاثة أعلاه:

ال
```
جابانيل
```
تم التصريح عن المتغير نهائي. هذا يعني أن المتغير يمكن أن يحمل فقط
```
جابانيل
```
التي تم إنشاؤها في هذا الخط. والنتيجة هي أنه يمكننا استخدام المتغير في فئة داخلية. سيصبح من الواضح لماذا نريد في وقت لاحق في الكود.
ال
```
جابل
```
و
```
JComboBox
```
تمرير القيم إليهم لتعيين خصائصهم الرسومية. ستظهر التسمية كـ "Fruits:" وسيحتوي مربع التحرير والسرد الآن على القيم الموجودة داخل
```
خيارات الفاكهة
```
أعلن الصفيف في وقت سابق.
ال
```
إضافة ()
```
طريقة
```
جابانيل
```
يضع مكونات رسومية فيه. أ
```
جابانيل
```
يستخدم FlowLayout كافتراضي مدير التخطيط. هذا جيد لهذا التطبيق لأننا نريد أن تكون التسمية بجوار صندوق التحرير والسرد. طالما نضيف
```
جابل
```
أولاً ، ستبدو جيدة:

إنشاء كائن JPanel الثاني

الثاني

يتبع نفس النمط. سنضيف أ

وتعيين قيم تلك المكونات لتكون "الخضروات" والثانية

مجموعة مصفوفة

. والفرق الآخر الوحيد هو استخدام

طريقة لإخفاء

. لا تنس أنه سيكون هناك

التحكم في رؤية الاثنين

. لكي يعمل هذا ، يحتاج المرء أن يكون غير مرئي في البداية. أضف هذه الخطوط لإعداد الثاني

سطر واحد جدير بالملاحظة في الرمز أعلاه هو استخدام

طريقة

. ال

القيمة تجعل القائمة تعرض العناصر التي تحتوي عليها في عمودين. يُسمى هذا "نمط الصحيفة" وهو طريقة لطيفة لعرض قائمة بالعناصر بدلاً من عمود عمودي أكثر تقليدية.

مضيفا اللمسات الأخيرة

العنصر الأخير المطلوب هو

للسيطرة على رؤية

س. تمرير القيمة في

يقوم المُنشئ بتعيين تسمية الزر:

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

يقوم مستمع الأحداث بإخبار التطبيق بما يجب فعله عند وقوع الحدث.

يستخدم فئة ActionListener "للاستماع" بنقرة زر من قبل المستخدم.

إنشاء مستمع الأحداث

نظرًا لأن هذا التطبيق يؤدي مهمة بسيطة عند النقر على الزر ، يمكننا استخدام فئة داخلية مجهولة لتحديد مستمع الأحداث:

قد يبدو هذا رمزًا مخيفًا ، ولكن عليك فقط تقسيمه لمعرفة ما يحدث:

أولا ، نسميها
```
addActionListener
```
طريقة
```
JButton
```
. تتوقع هذه الطريقة مثيل
```
ActionListener
```
class ، وهي الفئة التي تستمع للحدث.
بعد ذلك ، نقوم بإنشاء مثيل
```
ActionListener
```
فئة من خلال الإعلان عن كائن جديد باستخدام
```
جديد ActionListener ()
```
ثم توفير فئة داخلية مجهولة - وهي كل الكود داخل الأقواس المتعرجة.
داخل الطبقة الداخلية المجهولة ، أضف طريقة تسمى
```
العمل المؤدى()
```
. هذه هي الطريقة التي يتم استدعاؤها عند النقر فوق الزر. كل ما هو مطلوب في هذه الطريقة هو الاستخدام
```
setVisible ()
```
لتغيير رؤية
```
جابانيل
```
س.

أضف JPanels إلى JFrame

أخيرًا ، نحتاج إلى إضافة الاثنين

ق و

إلى

. بشكل افتراضي ، أ

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

يمكن أن تحتوي على مكون رسومي (NORTH ، {WEST ، CENTER ، EAST} ، SOUTH). حدد هذه المنطقة باستخدام

طريقة:

اضبط JFrame على مرئي

أخيرًا ، كل التعليمات البرمجية أعلاه ستكون بدون مقابل إذا لم نقم بتعيين

لتكون مرئية:

نحن الآن جاهزون لتشغيل مشروع NetBeans لعرض نافذة التطبيق. سيؤدي النقر فوق الزر إلى التبديل بين إظهار مربع التحرير والسرد أو القائمة.