مصدر المقال: عشاق الكمبيوتر الكاتب: تشانغ جيان
من يعرف كمية الرمل والحجر التي استخدمت لبناء برج بابل؟ من يعرف كم من الأيام والليالي استغرق بناء روما؟ الشيء الوحيد الذي نعرفه هو أنه بدون الطوب والحجارة، لن يكون هناك سور عظيم يمتد آلاف الأميال؛ وبدون تراكم الصخور والطين، لن تكون هناك أهرامات أبدية. يمكن ملاحظة أن إعداد المعرفة الأساسية أمر بالغ الأهمية بالنسبة لنا لتعلم أي شيء، لذا، دعونا نبدأ بفهم بعض الوظائف الأساسية لـ Swing ونبدأ مشروعنا العظيم لبناء روما!
مقدمة
مقهى جافا مفتوح منذ فترة طويلة. إذا كنت تحب مذاق فنجان قهوة جافا، تذكر أن تزوره كثيرًا. هذه المرة، قمنا بإعداد كوب كبير من القهوة العطرية للجميع - بناءً على تطوير لعبة "Lianliankan"، سنتعلم معك كيفية استخدام Swing in Java عندما تتذوق فنجان القهوة هذا بعناية، سوف أفعل ذلك اكتشفت أن Java لا تتمتع فقط بنكهة فريدة لفنجان قهوتي، بل تعلمت أيضًا كيفية تطوير الألعاب الاحترافية، إنها حقًا الأفضل في كلا العالمين.
لإعطائك نظرة خاطفة، الصورة أدناه هي لقطة شاشة للعبة. يمكنك تنزيل اللعبة لتجربتها (تنزيل برنامج اللعبة؛ تنزيل الملف المصدر)، ثم استخدام java -jar kyodai.jar لتشغيلها في وضع سطر الأوامر. بالإضافة إلى ذلك، يمكنك أيضًا الانتقال إلى صفحتي الرئيسية http://www.ismyway.com لتنزيل الإصدار المستقل وإصدار الهاتف المحمول من هذه اللعبة للعب التجريبي (انظر الشكل 1).
لقد قدمت Java Cafe معرفة AWT من قبل، فما الفرق بين Swing وAWT؟ ربما يكون أي شخص يدرس Java قد سمع أو شاهد مصطلحات عناصر التحكم ذات الوزن الثقيل وعناصر التحكم خفيفة الوزن، وهي ما نشير إليه عادةً باسم عناصر التحكم ذات الوزن الثقيل، وSwing عبارة عن عنصر تحكم خفيف الوزن. نعلم جميعًا أن شعار Java هو "الكتابة مرة واحدة، والتشغيل في أي مكان"، الأمر الذي يتطلب أيضًا استخدام كود Java النقي قدر الإمكان في برامجنا. لسوء الحظ، تعتمد AWT على واجهة النظام الأساسي الأصلي، لذلك قد تبدو الواجهات المصنوعة باستخدام AWT مختلفة قليلاً في أنظمة التشغيل المختلفة. Swing مختلف تمامًا. Swing مكتوب بلغة Java خالصة، لذلك يمكن للواجهة المكتوبة بلغة Swing أن تضمن نفس المظهر على جميع الأنظمة الأساسية. إليك خدعة أخرى: في JDK، لتسهيل التمييز، تبدأ جميع عناصر تحكم Swing بحرف كبير J، مثل JButton (المعادل المقابل في AWT هو Button)، بحيث يمكنك بسهولة التمييز بين عناصر تحكم Swing وعناصر تحكم AWT.
تجربة التأرجح الأولى
بالنسبة لأولئك الذين يرغبون في تعلم برمجة Swing، قمنا بإعداد بعض النصائح خصيصًا لك. أولاً، من الضروري للغاية تنزيل الكود وقراءته. نظرًا لأن هذا برنامج تعليمي حول Swing، فإننا نحاول فقط شرح بعض المحتويات المرتبطة بـ Swing قدر الإمكان، ولن تتم تغطية المحتويات غير المرتبطة بـ Swing بشكل عام، مثل جزء الخوارزمية. ثانيًا، نظرًا لضيق المساحة، من المستحيل كتابة كل جزء من الكود بالكامل هنا، لذلك تحتاج أيضًا إلى مقارنته بالكود الكامل. أخيرًا، من أجل تسهيل التركيز على تعلم Swing للجميع، قمنا أيضًا بوضع الموارد اللازمة لتطوير اللعبة في ملف التنزيل، بعد التنزيل، يمكنك تجميعه وتشغيله والاطلاع على نتائج التنفيذ.
1. حاوية المستوى الأعلى
ما هي حاوية المستوى الأعلى؟ عندما نستخدم جافا لبرمجة الرسومات، أين يتم رسم المخططات؟ نحتاج إلى حاوية يمكنها توفير رسم رسومي. تسمى هذه الحاوية بحاوية المستوى الأعلى. يمكنك أيضًا اعتبارها نافذة. حاوية المستوى الأعلى هي الأساس لبرمجة الرسومات، ويجب تضمين جميع الأشياء الرسومية في حاوية المستوى الأعلى. في Swing، لدينا ثلاث حاويات عالية المستوى يمكن استخدامها، وهي:
・JFrame: يستخدم لتصميم التطبيقات المشابهة لنموذج النافذة في أنظمة Windows.
・JDialog: يشبه JFrame، فيما عدا أنه يتم استخدام JDialog لتصميم مربعات الحوار.
・JApplet: يستخدم لتصميم تطبيقات Java التي يمكن تضمينها في صفحات الويب.
إذا أردنا استخدام Swing لإنشاء برنامج فئة النافذة، فيجب أن يبدو الكود الخاص بنا كما يلي:
استيراد javax.swing.*;
الطبقة العامة KyodaiUI
يمتد JFrame {
…
}
2. الضوابط
عناصر التحكم هي العناصر الأساسية التي تشكل واجهة التطبيق، الأزرار ومربعات النص وأشرطة التقدم وما إلى ذلك، كلها عناصر تحكم. يمكن تقسيم عناصر التحكم (هنا نناقش عناصر التحكم المرئية فقط) إلى عناصر تحكم في الحاوية وعناصر تحكم غير موجودة في الحاوية. من المفهوم حرفيًا أن عنصر التحكم في الحاوية هو عنصر تحكم خاص يمكن أن يحتوي على عناصر تحكم أخرى. على سبيل المثال، عنصر تحكم JPanel في Java هو عنصر تحكم في الحاوية، ويمكننا أيضًا وضع عناصر تحكم غير حاوية في JPanel - عناصر تحكم الحاوية مثل الأزرار ومربعات النص في JPanel. ضع العديد من عناصر تحكم JPanel فيها (تجدر الإشارة إلى أن حاوية المستوى الأعلى هي أيضًا عنصر تحكم من نوع الحاوية. يحتوي كل تطبيق نافذة على حاوية مستوى أعلى واحدة فقط ويمكن أن يحتوي عليها. وبعبارة أخرى، لا يمكن تضمين حاوية المستوى الأعلى في عناصر تحكم أخرى).
هناك العديد من عناصر التحكم في الحاوية في Java، بالإضافة إلى JPanel المذكورة للتو، هناك أيضًا JTabbedPane، وJScrollPane، وما إلى ذلك. وتشمل عناصر التحكم غير الحاوية JButton، وJLabel، وJTextField، وما إلى ذلك. إذا كنت بحاجة إلى إضافة عنصر تحكم إلى عنصر تحكم نوع الحاوية، فيمكنك استخدام طريقة add(Component comp) لتحقيق ذلك، مثل:
لوحة JPanel = new JPanel();
زر JButton = جديد JButton();
Panel.add(button);
3. التخطيط
ما هو التخطيط؟ التخطيط هو نظام إدارة واجهة يستخدم في Java للتحكم في ترتيب عناصر التحكم وموضعها. سيشعر الأشخاص الذين استخدموا لغات تطوير البرمجة المرئية الأخرى دائمًا أن تصميم واجهة Java غريب عندما يتعاملون معها لأول مرة: لا توجد طريقة WYSIWYG لتعيين إحداثيات التحكم! ومع ذلك، اتضح أن نظام إدارة التخطيط الذي توفره Java نفسه يمكنه أيضًا تلبية احتياجاتنا بشكل جيد، وله المزيد من المزايا في الأداء عبر الأنظمة الأساسية.
التخطيطات شائعة الاستخدام هي:
・BorderLayout: نظام إدارة يقسم الواجهة إلى مناطق علوية وسفلية ويسارية ويمينية ووسطى في تخطيط BorderLayout، يمكنك فقط وضع 5 عناصر تحكم كحد أقصى إذا كان هناك أكثر من 5 عناصر تحكم، فمن المستحسن استخدامها أنظمة التخطيط الأخرى.
・GridLayout: GridLayout هو نظام لإدارة التخطيط يقوم بتقطيع واجهة المستخدم إلى تخطيط يشبه رقعة الشطرنج. إذا أردنا تصميم برنامج آلة حاسبة مشابه للبرنامج الذي يأتي مع Windows، فإن GridLayout هو بلا شك الخيار الأفضل.
・FlowLayout: يختلف FlowLayout عن النوعين المذكورين أعلاه من أنظمة إدارة التخطيط. في FlowLayout، لا يتعين عليك تحديد مكان وضع كل عنصر تحكم، ما عليك سوى إضافة عناصر التحكم إلى FlowLayout، وسيقوم FlowLayout بترتيبها وفقًا لذلك الترتيب الذي تضيف به عناصر التحكم سيتم التفافه تلقائيًا إذا لم تكن هناك مساحة كافية.
بعد أن حصلنا على فهم أساسي لأنظمة إدارة التخطيط هذه، فلنبدأ معًا في تصميم الواجهة. بعد مراقبة إعدادات "Lianliankan" بعناية في ألعاب QQ، يمكننا أن نجد أن الواجهة بأكملها مقسمة إلى ثلاث مناطق. الجزء العلوي هو منطقة قائمة النظام، والمنطقة الأكبر هي منطقة ألعاب المستخدم، وهناك أيضًا تفاعل المستخدم المناطق، كل منطقة تتكون من عدة ضوابط.
مع وجود الكثير من الضوابط، من أين نبدأ؟ نظرًا لأنه يمكن وضع عناصر تحكم أخرى في عنصر تحكم الحاوية، فنحن نحتاج فقط إلى تحديد عنصر التحكم في الحاوية لوضعه أولاً. الآن بعد أن عرفنا عدد عناصر التحكم في الحاوية التي نحتاج إلى استخدامها، فلننتقل إلى اختيار نظام إدارة التخطيط. هل تستخدم تخطيط الشبكة؟ يبدو الأمر قسريًا بعض الشيء، باستخدام FlowLayout؟ هل هناك خيار أفضل؟ بالمناسبة، أعتقد أنك فكرت في BorderLayout، كما هو موضح في الشكل 2 أدناه.
قبل البدء، يجب على الجميع الانتباه إلى أن تصميم الواجهة يجب أن يأخذ في الاعتبار الحجم أولاً، سواء كان حجم واجهة البرنامج الرئيسية أو حجم كل منطقة. إذا لم يتم تصميم الحجم المناسب، فسيكون ذلك كبيرًا جدًا ومن المؤلم تغييره في المستقبل.
وفيما يلي البرنامج المصدر المقابل:
import java.awt.*;
استيراد javax.swing.*;
الطبقة العامة KyodaiUI تمتد JFrame {
واجهة كيودا العامة () {
this.setSize(780, 500); // اضبط حجم النموذج على 780*500
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setResizable(false); // لا يمكن تغيير حجم النموذج
this.setTitle("Lianliankan"); // قم بتعيين العنوان
JPanel ToolBar = new JPanel();
toolBar.setBackground(Color.white);
toolBar.setPreferredSize(new Dimension(780, 48));
JPanel actionPanel = new JPanel(); // إنشاء عنصر تحكم جديد في نوع JPanel
actionPanel.setBackground(Color.yellow);//تعيين لون الخلفية
actionPanel.setPreferredSize(new Dimension(160, 380)); //ضبط الحجم
JPanel contentPanel = new JPanel();
contentPanel.setBackground(Color.blue);
contentPanel.setPreferredSize(new Dimension(620, 380));
this.getContentPane().add(toolBar, BorderLayout.NORTH);
this.getContentPane().add(actionPanel, BorderLayout.EAST);
this.getContentPane().add(contentPanel, BorderLayout.CENTER);
}
public static void main(String[] args) throws HeadlessException {
KyodaiUI kyodaiUI = new KyodaiUI();
kyodaiUI.show();
}
}
دعونا نلقي نظرة على كيفية عمل البرنامج أعلاه. أولاً، يشير امتداد JFrame إلى أنه موروث من JFrame، وهو عنصر التحكم الأساسي في الحاوية ذات المستوى الأعلى. في الواقع، في JDK، عناصر التحكم التي تبدأ بالحرف J هي عناصر تحكم Swing. ثم قم بتعيين خصائص الحاوية، ومن بينها، يتم استخدام setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) لإخبار جهاز Java الظاهري بإغلاق عملية النافذة عندما ينقر المستخدم على الزر "إغلاق" في الزاوية اليمنى العليا من النموذج. إذا لم تقم بذلك، ستجد أنه على الرغم من أنه يمكنك النقر لإغلاق النافذة، إلا أن البرنامج لا يخرج. في التعليمة البرمجية التالية، نضيف ثلاث حاويات لوحة إلى حاوية المستوى الأعلى. تجدر الإشارة إلى أنه في AWT، يمكننا كتابته مباشرة كـ add(toolBar, BorderLayout.NORTH)، ولكن في Swing، يجب كتابته كـ getContentPane() add(toolBar, BorderLayout.NORTH)، وإلا سيختفي البرنامج خطأ.
يمكنك الآن تجميعها وتشغيلها لمعرفة ما إذا كانت هي نفس نتيجة التشغيل الخاصة بي (انظر الشكل 3)؟
4. الحدود
على الرغم من أننا نستخدم ألوانًا أمامية مختلفة لتمييز المناطق المختلفة، إلا أنه لا يوجد أي إحساس بالتسلسل الهرمي. سيكون الأمر أكثر جمالًا مع الحدود.
في Java، يمكن لجميع عناصر التحكم Swing التي تبدأ بـ J استخدام طريقة setBorder لتعيين الحدود لنفسها. هناك أنواع عديدة من الحدود، الخطية، والمرتفعة، والمقعرة، والفارغة، ويمكنك حتى دمجها بحرية لتكوين أسلوبك الخاص. يجب إنشاء جميع الحدود باستخدام الطرق الثابتة المتوفرة في javax.swing.BorderFactory، مثل:
حدود الحدود = BorderFactory.createBevelBorder(BevelBorder.LOWERED,
لون جديد (45، 92، 162)،
لون جديد (43، 66، 97)،
لون جديد (45، 92، 162)،
لون جديد (84، 123، 200))؛
الآن، نقوم بتغيير toolBar.setBackground(Color.white) إلى toolBar.setBorder(border) هل ظهر التأثير ثلاثي الأبعاد بالفعل؟
القتال العملي - اكتب اسمك
الآن لدينا واجهة عمل، على الرغم من أنها لا تستطيع فعل أي شيء، فلا داعي للذعر، فلم يتم بناء روما في يوم واحد.
لنقم الآن بتوفير قائمة "حول" في منطقة القائمة لعرض معلومات البرنامج ألا تريد أن يعرف الآخرون اسمك؟ يوفر التأرجح نفسه زر تحكم جاهزًا JButton، نحتاج فقط إلى إنشاء زر جديد: JButton about = new JButton("about"); كيف يجب وضع هذا الزر في منطقة القائمة بدلاً من أي مكان آخر؟ يمكننا إضافة الكود التالي: toolBar.add(about); مرحبًا، لماذا لا توجد استجابة عند الضغط على الزر؟ وذلك لأنك لم تخبر البرنامج بما يجب فعله عند النقر فوق الزر. لإضافة استجابة حدث إلى زر، تحتاج أولاً إلى استخدام about.addActionListener(this) لإخبار البرنامج بالاستماع إلى الأحداث عند الضغط على الزر، نظرًا لأن ActionListener عبارة عن واجهة برنامج، علينا أيضًا القيام ببعض الشيء تعديل إعلان الفئة: يمتد الفصل العام KyodaiUI JFrame بتنفيذ ActionListener {...} الغرض من تنفيذ واجهة ActionListener هو إخبار البرنامج بأنني أريد التعامل مع الأحداث. بالطبع، أخيرًا علينا إضافة الكود للرد على الحدث:
إجراء باطل عام (ActionEvent e) {
إذا (e.getSource() == حول) {
JOptionPane.showMessageDialog(هذا، "اسمي"، "حول"،
JOptionPane.INFORMATION_MESSAGE);
يعود ؛
}
}
من بينها، يمثل e.getSource() عنصر التحكم الذي يقوم حاليًا بتشغيل الحدث نظرًا لوجود أكثر من عنصر تحكم في برنامجنا غالبًا، فقد تولد عناصر التحكم هذه أحداثًا، لذلك يجب علينا استخدام هذه الطريقة للعثور على عنصر التحكم الذي أنشأ الحدث.
ملخص
دعونا نراجع ما تعلمناه اليوم: أولاً، نحن نفهم حاوية المستوى الأعلى، ونعلم أيضًا أن عناصر التحكم مقسمة إلى عناصر تحكم حاوية وعناصر تحكم غير حاوية، وأخيرًا، تعاملنا أيضًا مع الأزرار الحدث قليلا.
وغني عن القول أنك تتعلم وتتدرب مع تقدمك، لذا دعني أتركك مع بعض الواجبات المنزلية الصغيرة لمساعدتك على تعزيز ما تعلمته اليوم: الزر الذي أضفناه أعلاه موجود في منتصف شريط القائمة وهو ليس جميلًا. من فضلك ضعه في جربه على اليسار أو اليمين.
أخيرًا، أود أن أقدم لك بعض المواد المرجعية الأفضل:
●إنشاء واجهة المستخدم الرسومية باستخدام JFC/Swing
http://java.sun.com/docs/books/tutorial/uiswing/index.html
●رسومات ثنائية الأبعاد
http://java.sun.com/docs/books/tutorial/2d/index.html
●JDK API
http://java.sun.com/j2se/1.4.2/docs/api/index.html