صناديق الاختيارات List and combo Boxes

فى هذا الفصل نشرح كيفية عرض مجموعة اختيارات مثل اسماء اشخاص فى صندوق قائمة List Box أو Combo Box ونرى أيضا الفرق بينهما ومتى نستخدم كلاً منهما و ذلك من خلال امثلة هذا الفصل .

يستخدم كلا من صندوق القائمة List Box والصندوق المركب Combo box فى عرض مجموعة اختيارات مع امكانية تحديد اختيار من هذه المجموعة مثل عرض رتب الضباط أو عرض أسماء الموظفين مع امكانية تحديد احداها .

برنامج صندوق قائمه List Box

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

افتح ملف البرنامج vcex6من الفهرس chpt5 ونفذه او تابع خطوات التصميم وفى الحالتين تحصل على الشكل رقم 5-1

clip_image001

فى الشكل رقم 5-1 يوجد صندوق قائمة (List Box) يحتوى على مجموعة إختيارات و يمكن إضافة عنصر جديد اليه بكتابة هذا العنصر فى خانه الكتابة الموجودة أمامه ثم بالضغط على زر الأوامر الذى يشير بالشكل ¬ ، وكذلك عند الضغط بالفأرة مرتين داخل صندوق القائمه على أى عنصر يتم عرض هذا العنصر فى صندوق رساله ، وعند النقر على زر الأوامر المسمى List Count تحصل على عدد عناصر صندوق القائمه جرب استعمال البرنامج ثم تابع خطوات تصميم البرنامج .

خطوات تصميم البرنامج

1. إبدء تطبيق جديد وذلك باختيار File ثم New ثم workspace Project واكتب اسم للتطبيق وليكن vcex6ثم اضغط create

2. اختار dialog based ثم اكمل باقى الخطوات المعتادة حتى تضغط على زر الأوامر Finsh او اختار finsh فى هذه الخطوة فتحصل على تطبيق مبنى على صندوق حوار Dialog based System كما سبق فى الأمثلة السابقه.

3. من صندوق ملفات البرنامج وباستخدام الفأرة اختار زر موارد البرنامج ثم انقر مرتين على vcex6Resuources ثم على Dialog ثم علىvcex6 __DIALOG DCوهو صندوق الحوار المبدئى الذى ينشئه لنا VC++.

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

5. اسحب صندوق قائمه (List box) وهو الشكل === (راجع الفصل الثانى شكل 2-19) من صندوق الأدوات وضعه على صندوق الحوار وحدد مساحته كما فى الشكل 5-2.

clip_image002

6. اسحب أداتى كتابة (Edit box) وزرى أوامر واداتى عنوان وضعهم على صندوق الحوار مع تغير عناوين زرى الأوامر واداتى العنوان كما فى الشكل 5-3.

clip_image003

إعطاء متغيرات للأدوات

7. فى هذا المثال يوجد صندوق قائمه (List Box) وأداة كتابة (Edit) ولابد من اعطائهم متغيرات حتى ننمكن من التعامل معهما ويتم ذلك بنفس الخطوات السابقه كما ما يلى :-

-اضغط المفتاحين Ctrl+W للوصول إلى Class Wizard ثم Member Variables ثم الأداة IDC-List1 ثم Add Variable واكتب اسم المتغير mlist واجعل Category (مجموعة)من نوع Control والنوع ClistBox (Type) ثم ok.

-اضغط باصبعك على مفنتاح Ctrl ثم انقر مرتين على أداة الكتابة العليا تحصل على صندوق اضافة متغير.

-اكتب اسم للمتغير وليكن m1 من نوع Cstring .

-كرر الخطوة السابقة مع أداة الكتابة الثانية واعطها متغير بالاسم m2 من نوع int .

لاحظ : فى هذا المثال بمجرد تحديد المتغير Mlist من مجموعة Control بأخذ النوع Clist box أى أصبح هدف من فصيله Clistbox لأنه متغير لأداة من نوع list box .

كتابة الاوامر

-اعطاء صندوق القائمة عناصر ابتدائيه

8. لوضع عناصر فى صندوق القائمة (List box) بحيث تظهر بمجرد تشغيل البرنامج اتبع مايلى :-

- اضغط ctrl+w للوصول الى Classwizard ثم Massage Maps.

- من صندوق العناصر اختار vcex6 dlg وهو ملف صندوق حوار البرنامج.

- ومن صندوق الرسائل ( messages ) اختار الرسالة WM-InitDialog وهى رسالة تصدر للبرنامج عند بداية تحميل صندوق الحوار ثم انقر Edit code ندخل الى ملف البرنامج والى الداله ( ) Ontinit Dialog التى تنفذ عند تحميل صندوق الحوار وا كتب فيها السطور التالية:

// TO DO : Add extra intlization here

mLst. AddString (“String one“) ;

mLst. AddString (“String one”);

mLst. AddString (“String three”);

فى هذه السطور استخدمنا الداله AddString ( ) لإضافة عناصر إلى صندوق القائمه الذى عرفنا له متغير بإسم mList وأضفنا على الترتيب العبارات one String two ,String ،three String .

يمكن لك ان تضيف أى عنصر بهذه الداله وهىمعرفة فى الفصيلة Clistbox كما توجد دوال آخرى أعضاء فى هذه الفصيلة نستخدم بعضها فى هذا المثال( ويمكن أن تعرف هذه الدوال من اختيار المساعدهhelp والبحث عن Clist box.)

اذا أردت مشاهدة نتيجة البرنامج حتى الأن نفذ البرنامج سوف تشاهد صندوق القائمة وبه ما اضفته من عناصركما فى الشكل 5-4.

clip_image004

تحديد عنصر من صندوق القائمة

فى الفقره السابقة راينا كيفية اضافة عناصر (اختيارات ) الى صندوق الاختيارات وفى هذه الفقرة نرى كيفية تحديد العنصر الذى يختاره المستخدم بالفأرة من عناصر صندوق القائمة وذلك كمايلى :-

اضغط المفتاحين ctrl + w للوصول الى class wizard ثم Massage Maps ثم IDC-List1 ثم LBN-DBLIC K ثم Add fanction ثم ok ثم Edit code واكتب السطور التى تنفذ عند النقر بالفأرة على أحد عناصر صندوق القائمة وهى السطور التالية :-

char stex [ 50] ;

mList. GetText (mList.GetCurSel( ),stext) ;

MessageBox (stext) ;

شرح سطور الداله

فى هذه السطور . تم الأعلان عن متغير حرفى بالأسم stext.

وتم إستدعاء الداله ( ) GetText التى تقوم بنسخ العنصر الذى اختاره المستخدم والذى تحدده الدالة GetCurSel() الى المتغير stext وفى النهاية تقوم الداله MessageBox بعرض هذا العنصر.

إضافه عنصر الى صندوق القائمة

11. فى الخطوة السابقة رأينا كيفية قراءة عنصر من عناصر صندوق القائمة وعرضه على الشاشة وفى هذه الخطوة نرى العكس ، اى كيف يمكن كتابة عنصر فى اداه كتابة وإضافته الى صندوق القائمة وذلك كما يلى :-

كتابه داله زر اضافة عنصر لصندوق القائمه

لكتابة الداله التى تحقق اضافه عنصر لصندوق القائمة اضغط على المفتاحين ctrl+w واختار Massage maps ثم IDC-Bution1 وهو زر الأوامر الأول الذى يضيف عنصر لصندوق القائمة ثم BN-Clicked ثم ADD FUNCTION ثم OK ثم EDIT CODE واكتب سطور الداله التالية.

// TO DO : Add your contrul notification handler code here

1:UpdateData (TRUE) ;

2: mList. AddString (m1);

3:m2=mlist.GetCount();

4:UpdateData (FALSE) ;

شرح سطور الدالة

فى هذه السطور استعملنا الداله ( ) UpdateData بالمعامل TRUE لنقل محتويات اداه الكتابه (Edit box) إلى المتغير المصاحب وهو m1 ثم استعملنا الداله AddString ( ) التى سبق شرحها لإضافه عنصر الى صندوق القائمة ولكن معامل هذه الداله هو m1 اى ماكتبه المستخدم فى خانه الكتابة.

فى السطر رقم 4 تم استدعاء الدالة GetCount () التى تعيد عدد عناصر صندوق القائمه ويتم وضعه فى المتغير m2 الذى يعرض العدد فى اداة الكتابة الثانية وفى النهاية تم استدعاء UpdateData لنقل محتويات المتغيرات الى أدوا تها.

عرض الدوال الأعضاء فى فصيلة Clistbox

قبل أن ننتقل الى الخطوة الأخيرة من هذا المثال نرى كيفية عرض الدوال الأعضاء فى الفصيله Cistbox وذلك لوجود عدد من الدوال الأعضاء المفيدة عند التعامل مع صندوق القائمة (List box) وذلك كما يلى :-

- من القائمة الرئيسية من الاختيار help ثم search و فى صندوق البحث اكتب الكلمة Clistbox ثم تابع خطوات البحث تحصل على عدد كبير من الدوال التى يمكن استعمالها مع صندوق الاختيارات list box

من هذه الدوال الداله GetCount ( ) التى تعيد عدد عناصر صندوق القائمة والتى استخدمناها فى الفقرةالسابقة كما فى الشكل 5-5.

clip_image005

ملحوظه

فى حالة تصميم صندوق الحوار يمكن تغير خاصية اداة الكتابة الثانية IDC2 - Edit وجعلها Read Only وبهذا لايمكن للمستخدم من تغير محتواها ولكن تستخدم لأظهار القيم فقط.

-اكتب دالة زر الاوامر exit كما سبق

- وبعد الأنتهاء من كتابة سطور الدوال ابدأ الأن فى تحويل البرنامج الى نسخه تنفيذية وذلك بالضغط على المفتاحين ctrl +F5 ، جرب إضافه عنصر جديد الى صندوق القائمة وجرب النقر على أى عنصر ومشاهدة النتيجه ويظهر ذلك من شكل 5-6.

clip_image006

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

ثانياً : صندوق القائمة من نوع Combo Box

يسمح صندوق القائمة من نوعCombo Box بعرض مجموعة إختيارات نستطيع تحديد احداها كما فى صندوق من نوع list box ويزيد عليه بأنه يسمح لنا بالكتابه وكأنك تكتب فى خانه كتابه عادية وبالتالى فإن صندوق القائمة من نوع Combo Box عبارة عن صندوق قائمة من نوع Listbox بالإضافه إلى أداة كتابة Edit box لذلك يسمى الأداه المركبه كما يختلف فى طريقة عرض الاختيارات حيث تختفى الاختيارات داخل الصندوق وهو منطوى وعند النفر عليه تظهر الاختيارات.

ويتم التعامل معه كما يتم التعامل مع List box حيث يتم إضافه عناصر اليه وقراءة عناصر منه ومعرفه عدد العناصر ولكن يختلف فى وجود خانه الكتابة والمثال التالى يوضح كيفية التعامل مع Combo Box.

برنامج صندوق قائمة من نوع combo box

فى هذا المثال نوضح كيفية إضافه عناصر وكيفية قراءة عناصر من صندوق القائمة Combo Box ، افتح ملف البرنامج vcex7 من الفهرس chpt5 أو تابع خطوات تصميم البرنامج وفى الحالتين تحصل على نتيجه التنفيذ كما فى الشكل5-7

clip_image007

ومن الشكل تلاحظ وجود صندوق قائمة combo box عند النقر بالفأرة على زر السهم الخاص به تنسدل صندوق القائمة وتظهر به الأختيارات أو العناصر الموجودة به وعند النقر على احداها بالفأرة بننقل هذا العنصر الى خانه النص الموجود بصندوق القائمة الى خانه الكتابة المجاورة وهذه بعض العمليات التى نحتاجها عند استعمال صندوق القائمة،والآن تعالى معنا الى خطوات تصميم هذا البرنامج .

خطوات تصميم البرنامج

1. ابدأ برنامج جديد وذلك بإختيار File ثم New ثم workspace projeoct ثم اكتب اسم البرنامج وليكنvcex7 ثم create.

2. حدد نوع التطبيق كما سبق من نوع dialog based ثم انقر NEXT.

3. تابع الخطوات حتى النهاية حتىتنقر على Finish وبالتالى تحصل على تطبيق مبدئى مبنى على صندوق حوار كما سبق.

4. من صندوق الملفات أنقر بالفأرة على زر موارد البرنامج ثم انقر مرتين على vcex7 Resources ثم على Dialog ثم على IDC-vcex7 Dialog تحصل على الشكل الأولى لصندوق الحوار الذى انتجه لك VC++ احذف الأدوات الغبر مرغوب فيها وذلك بالنقر مرة واحده على الأداة ثم الضغط على مفتاح Del.

5. ابدأ تصميم الشكل مطلوب للبرنامج بسحب الأدوات المطلوبة من صندوق الأدوات ، اسحب اداة صندوق القائمة combo box (راجع الفصل الثانى شكل 2-19) وضعها على صندوق الحوار كما فى الشكل 5-8

clip_image008

ملحوظة

لمعرفة أسماء الأدوات الموجودة فى صندوق الأدوات قف بالفأرة على الأداة تظهر رسالة صغيرة بإسم هذه الأداه كما فى شكل 5-9.

clip_image009

6. إنقر بالفأرة على السهم الموجود فى الطرف الأيمن من صندوق القائمة combo box فتظهر المساحة التى تظهر فيها عناصر صندوق القائمة إثناء التشغيل غيرها او تركها كما هى.

7. اسحب اداه كتابة وزرى أوامر وضعها على صندوق الحوار وغير العناوين كما فى الشكل 5-10بهذا نكون قد وصلت الى الشكل المطلوب للبرنامج ولكنه لايعمل.

clip_image010

إعطاء متغيرات للأدوات

8.فى هذا البرنامج يوجد صندوق قائمه و أداه كتابة وللتعامل معهما لابد من أعطائهما متغيرات ولتحقيق ذلك اضغط على المفتاحين Ctrl+W ثم انقر Member Variables ثم انقر IDC-Combo1 ثم انقر Add Variable تحصل على صندوق اضافة المتغير اكتب اسم المتغير Com وحدد Category من نوع Control تحصل على النوع Ccombo box ثم اضغط Ok ، بالمثل اعطى أداه الكتابة IDC-Edit1 متغير بالاسم m2واترك النوع String كما هو ثم اضغط Ok للموافقه ثم Ok للخروج من Class Wizard.

وضع عناصر إبتدائيه فى صندوق القائمه

9.لوضع عناصر إبتدائيه فى صندوق القائمه لتظهر بمجرد تشغيل البرنامج إتبع ما يلى :

- اضغط على Ctrl+W للوصول إلى Class Wizard

- انقر Message Maps ومن صندوق الادوات اختر cvcex7dlg ومن صندوق الرسائل اختار WM_INITDIALOGثم اختار الداله OnInit Dialog ( )وذلك من صندوق الدوال الموجود فى الجزء السفلى، ثم انقر Edit Code للكتابة فى هذه الداله.

ملحوظة

تنفذ سطور الداله OnInit Dialog ( ) بمجرد تنفيذ البرامج التى تبنى على صندوق حوار.

- اكتب السطور التاليه

// TODO : Add extra inialization here

Com. Add string ( “ string one “ );

Com. Add string ( “ string two “ );

Com. Add string ( “ string one “ );

شرح السطور

فى هذه السطور استعملنا الداله AddString ( ) لإضافة عناصر إلى صندوق القائمه Com مع ملاحظه أننا نكتب هذه السطور بعد سطر التعليق التالى:

// ToDo : Add extra initlization here بمعنى اكتب القيم الإبتدائيه هنا.

n احفظ التغيرات ثم قم بتنفيذ البرنامج عند هذه المرحلة تحصل على البرنامج وبه صندوق القائمه الذى يحتوى على العناصر التى كتبتها تظهر عند النقر على السهم الأيمن فى

صندوق القائمه كما فى الشكل 5-11.

clip_image011

قراءة عنصر من صندوق القائمه

كما تم فى برنامج صندوق القائمه List box ورأينا كيف يتم قراءة عنصر من عناصر القائمه ونسخ هذا العنصر إلى خانه كتابة بنفس الأسلوب ترى كيف نحقق ذلك مع صندوق القائمه COMBO BOX وذلك عند الضغط على زر الأوامر >=== وذلك كما يلى :

- اضغط المفتاحين Ctrl+W ثم Message Maps ثم IDC-Button1 ثم BN-Clicked ثم Add Function ثم Ok ثم Edit Code واكتب سطور الداله التاليه :

Char Ctext [50];

Com.GetWindowText (Ctext,25);

m2 = Ctext;

UpdateData (FALSE);

شرح سطور الداله

فى هذه السطور تم الاعلان عن متغير حرفى هو Ctext ثم باستعمال الداله GetWindowText ( ) تم نسخ العنصر الذى يختاره المستخدم إلى المتغير Ctext ثم نسخ هذا العنصر فى المتغير m2 المصاحب لاداة الكتابه وباستدعاء الداله UpdateData ( ) بالمعامل FALSE يتم نقل محتوى المتغير2 m إلى خانه الكتابه فيظهر العنصر الذى تم اختياره فى خانة الكتابة المقابلة.

-بالمثل اكتب سطور دالة الاوامر Exitكما سبق.

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

build ® Bulid EXE ® EXECUTE

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

clip_image012

ملحوظة: يحتوى صندوق القائمه من combo على عدد كبير من الدوال يمكن لك ان تتطلع عليها وذلك باختيار help ثم search تكتب combo ثم members ثم تتابع خطوات البحث تحصل على عدد كبير من الدوال مثل Getcountوغيرها .

التسميات: