GUI جافا - الدرس الرابع : (jComboBox) و (jToggleButton) و (jSpinner) و (JTextArea)

[Mr.Ahmad]

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

---------------------------------------------------------------------------
* مــا شاء الله تبارك الله *
الحمد لله عدد ما خلق , الحمد لله ملء ما خلق , الحمد لله عدد ما في السموات وما في الأرض , الحمد لله عدد ما أحصى كتابه ، والحمد لله على ما أحصى كتابه ، والحمد لله عدد كل شيء والحمد لله ملء كل شيء .

اللهم صل على محمد وعلى آل محمد كما صليت على إبراهيم وعلى آل إبراهيم إنك حميد مجيد . اللهم بارك على محمد وعلى آل محمد كما باركت على إبراهيم وعلى آل إبراهيم إنك حميد مجيد.

لا إله إلا الله وحده لا شريك له الملك وله الحمد وهو على كل شيء قدير .

سبحـــــــان الله وبحمده ... سبحــان الله العظيم
---------------------------------------------------------------------------

المدخل إلى البرمجة باستعمال الواجهات الرسومية (GUI) بلغة الجافا بواسطة NetBeans

الدروس السابقة :
GUI جافا - الدرس الأول : إنشاء نافذة (JFrame) وإنشاء زر (JButton)
GUI جافا - الدرس الثاني : إنشاء طابع نصي (JLabel) و صندوق نص (JTextField)
GUI جافا - الدرس الثالث : برمجة آلة حاسبة بسيطة (Calculator) وفهم أكواد النافذة

GUI جافا - الدرس الثالث : (jComboBox) و (jToggleButton) و (jSpinner) و (JTextArea)

في هذا الدرس إن شاء الله سنتعلم كيفية إنشاء صندوق التحرير والسرد (jComboBox) .
-
و زر التبديل (jToggleButton) أي الزر الذي له حالتان إما On أي مُختار (مُحدد) أو Off أي غير مُختار (غير محدد) .
-
وكذلك سنتعلم عنصر اسمه (jSpinner) وهو يشبه القائمة أو العداد ولكن يتم اختيار القيمة عن طريق تدوير القائمة إلى الأعلى أو الأسفل , وكذلك يمكنه جعله كعداد أي عندما نضغط إلى الأعلى يتم زيادة الرقم وعندنا نضغط إلى الأسفل يتم إنقاص الرقم .
-
وكذلك سنتعلم بإذن الله التعامل مع صندوق النص متعدد الأسطر (JTextArea) , وهو يشبه صندوق النص العادي (JTextField) , ولكن ما يميزه عنه أنه متعدد الأسطر .

أي سنعمل إن شاء الله مثل هذا التطبيق :

-=-=-=-=-=-=-=-=-=-=-=-=-
نبدأ الشرح باسم الله :

1- نقوم بعمل مشروع جديد , ثم نقوم بإنشاء نافذة جديد , ثم نغير عنوان النافذة إلى أي عنوان :

-=-=-=-=-=-
2- نقوم بإدراج عنصر صندوق نص لاسم السلعة , وكذلك طابع نصي يوضح الغرض من صندوق النص هذا :

-=-=-=-=-=-
3- نقوم بإدراج عنصر صندوق التحرير والسرد (jComboBox) للدولة مصنعة السلعة , وكذلك طابع نصي يوضح الغرض منه :

-=-=-=-=-=-
4- نقوم بإدراج عنصر صندوق نص لسعر السلعة , وكذلك طابع نصي يوضح الغرض من صندوق النص هذا :

-=-=-=-=-=-
5- نضيف اثنين زر تبديل (JToggleButton) , واحد للخصم بحيث إن تم تحديده يتم الخصم من السلعة بحسب ما يدخله المستخدم من نسبة الخصم , وإن لم يتم تحديده فلن يتم الخصم من السلعة , وزر التبديل الثاني نجعله للتحديد أن السلعة متوفرة الآن , وإن لم يتم تحديده فهذا يعني أن السلعة غير متوفرة الآن :

-=-=-=-=-=-
6- نقوم بإدراج عنصر jSpinner)) ليحدد لنا نسبة الخصم , وكذلك طابع نصي يوضح الغرض من هذا العنصر :

-=-=-=-=-=-
7- نقوم بإدراج زر عادي (JButton) ونضبط مكانه :

-=-=-=-=-=-
8- نقوم بإدراج عنصر صندوق النص متعدد الأسطر (JTextArea) :

-=-=-=-=-=-
9- قبل كتابة الكود , لنوضح أسماء عناصر النافذة :

-=-=-=-=-=-
10- نقوم بإنشاء حدث الضغط على الزر (jButton1) :

-=-=-=-=-=-

التكملة في الرد التالي إن شاء الله ...

[Mr.Ahmad]

11- نقوم بكتابة أثنين method (طريقتين) , الأولى واسمها (hideDis) ولا تُرجع قيمة , تقوم هذه الطريقة بإخفاء العناصر الخاصة بالخصم من السلعة , والطريقة (showDis) تقوم بإظهارها .
بحيث سنستخدم هذه الطريقتين (methods) عند كتابة كود حدث زر التبديل (tB_Dis) , بحيث إن كان الزر مُختار (on) نستدعي الطريقة showDis وإذ كان الزر غير مُختار (off) نستدعي الطريقة hideDis .

-=-=-=-=-=-
12- نقوم بإنشاء حدث الضغط على زر التبديل (tB_Dis) الخاص بتحديد نسبة الخصم للسلعة . بحيث إن كان زر التبديل هذا غير مُختار (off) سنقوم بإخفاء العناصر الخاصة بتحديد نسبة الخصم باستدعاء الطريقة hideDis)) التي كتبناها قبل قليل . وإن كان الزر مُختار (on) نقوم بإظهار العناصر الخاصة بتحديد نسبة الخصم باستدعاء الطريقة (showDis) التي كتبناها قبل قليل .
أي سنكتب كود في حدث الضغط على زر التبديل (tB_Dis) يقوم بفحص هل الزر مُختار (on) ؟ بحيث إن كان مختار يتم استدعاء الطريقة showDis وإلا (أي كان off) يتم استدعاء الطريقة hideDis .

-=-=-=-=-=-
13- بعد كتابة طريقة حدث الضغط على زر التبديل (tB_Dis) , سيعمل الكود عند وقوع الحدث وهو الضغط على زر التبديل . ولكن زر التبديل (tB_Dis) لم نجعله افتراضياً مُختار (on) . وعند تشغيل البرنامج ستظهر جميع عناصر النافذة وكذلك ستظهر عناصر النافذة الخاصة بالخصم لأنه لم يتم بعد تنفيذ حدث الضغط على زر التبديل (tB_Dis) لعدم وقوع الحدث وهو الضغط عليه . لذلك لنخفي عناصر الخصم عند بداية تشغيل البرنامج , عن طريق استدعاء الطريقة hideDis في مُشيد الفئة (Constructor Class) :

-=-=-=-=-=-
14- لنجرب الآن البرنامج , لنتأكد من سلامة ما تم برمجته قبل الإكمال في كتابة الأكواد المتبقية :

-=-=-=-=-=-
15- بقي الآن لنا كتابة كود طريقة حدث الضغط على الزر (jButton1) الخاص بعرض النتيجة , ولكن قبل كتابة كود طريقة حدث الضغط على الزر , نقوم بكتابة طريقة (method) اسمها (doDis) نُمرر لها سعر السلعة ونسبة الخصم التي نريدها ثم تقوم بإرجاع قيمة السلعة بعد الخصم :

-=-=-=-=-=-
16- نقوم الآن بكتابة كود طريقة حدث الضغط على الزر (jButton1) , بحيث نريد عند الضغط على الزر يظهر لنا تفاصيل السلعة في صندوق النص متعدد الأسطر بهذا الشكل :

لنكتب الكود الآن :

-=-=-=-=-=-
17 – نجرب البرنامج الآن :

-=-=-=-=-=-

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

-=-=-=-=-=-

لمن أراد تحميل المشروع :
http://www.4shared.com/file/LMZgJjgu...esson_GUI.html

أو في المرفقات .

---------------------------------------------------------------------------

اللهم بارك لنا فيما علمتنا وأنفعنا به .
لا تنسونا من دعائكم .

[technosh]

يشررفني .. اني رديت عليك اوول واحد :) ...

دررس طويل وشكله ممتـــــــــع جداً ومتعووب عليه ...

ياجعل ربي ما يحرم اقدامك الجنــة :) ..

[زهرة البنفسج]

جزاك الله الخير يامستر أحمد...
أنا اشتغلت عليه ووصلت إل الخطوة 11

[technosh]

هذا تطبيقي مستر أحمـد :) ..

وخليت اسم المنتج اختياري يقدر يختاره اليوزر ... وبرضه يقدر يكتب :) ..

[technosh]

زهرة البنفسج شفت صورتك وشفت اغلاط كثيرة بكودك :( .. وضاق صدري ..

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

وضبطت لك صورتين ع الطاير .. قلت لو انك ملخبطة أو شئ :) .. مع انه شرح مستر احمد .. كافي ووافي .. الله يعطيه الف عـآفية ..

[Mr.Ahmad]

المشاركة الأصلية كتبت بواسطة technosh هذا تطبيقي مستر أحمـد :) .. وخليت اسم المنتج اختياري يقدر يختاره اليوزر ... وبرضه يقدر يكتب :) ..

ما شاء الله تبارك الله .
تطبيق رائع أخي "technosh" .
بارك الله فيك .

[Mr.Ahmad]

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

المشاركة الأصلية كتبت بواسطة technosh زهرة البنفسج شفت صورتك وشفت اغلاط كثيرة بكودك :( .. وضاق صدري .. ادري انك لسسا ما كملتيه .. بس الافضل انك تبداين ترسمين الواجهة قبل لا تدخلين ع الكود وضبطت لك صورتين ع الطاير .. قلت لو انك ملخبطة أو شئ :) .. مع انه شرح مستر احمد .. كافي ووافي .. الله يعطيه الف عـآفية ..

نعم , مثل ما قال لك الأساتاذ "technosh" .
صممي أول الواجهة بعد ذلك قم بكتابة الكود .
لأن كتابتك للكود أول لا يمكن , لأن كائنات العناصر لم يتم إنشاءها , فكيف يتم التأشير على عنصر غير موجود ,

بالتوفيق .

[زهرة البنفسج]

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

[زهرة البنفسج]

الحمدلله اشتغل البرنامج معايا
مع إني كنت في الأول مسويتها تمام
بس ماأدري فين الخطأ عندي
المهم حذفته و سويت برنامج جديد
و هذي الصور: