أداة الكتابة Edit Box

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

برنامج آلة حاسبة بسيط

تستعمل أداة الكتابة Edit Box فى استقبال وإظهار البيانات ولتوضيح ذلك نصمم برنامج بسيط يستقبل قيمتين فى خانتى Edit box وبالضغط على زر أوامر يكتب البرنامج الناتج فى الخانة الثالثة كما فى الشكل3 -1

ويمكن لك أن تفتح ملف البرنامج من vcex2من الفهرس chp2 وتنفذه وتجرب استعماله أو تتابع خطوات تصميم البرنامج كما يلى:

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

1. من القائمة الرئيسية اختر Fileثم NEW ثمProject wark space كما فى الشكل 3-2

واضغط على OK تحصل على شكل 3-3

2. شكل 3-3 عبارة عن صندوق حوار يطلب اسم البرنامج اكتب اسم البرنامج وليكن vcex2 ثم انقر Create تحصل على شكل 3 - 4

3. شكل 3 - 4 هو أول خطوة لتحديد مواصفات المشروع (البرنامج) اختر Dialog Based (كما بالشكل )ثم NEXT تحصل على شكل 3-5

4. حدد الاختيارات كما بالشكل واكتب عنوان للمشروع وليكن Simple Calculator ثم اضغط NEXT تحصل على الشكل 3-6 .

حدد الاختيارات كما فى الشكل ثم اضغط NEXT تحصل على الشكل 3-7 وهو الخطوة الرابعة والأخيرة فى تحديد مواصفات البرنامج .

5. شكل 3-7 يخبرنا أن VC++ سوف ينشأ لنا فصيلتان بالأسماء المعروضة اضغط على Finish للموافقة على هذه الأسماء تحصل على شكل 3-8

شكل 3-8 مواصفات البرنامج النهائية

6. شكل 3-8 هو الشكل النهائى فى خطوات تصميم البرنامج وهو مواصفات البرنامج كما اخترناها و للموافقة على ذلك اضغط OK فيقوم VC++ بانشاء هذا البرنامج والملفات التى تم الاشارة اليها ويعود VC++ الى بيئة البرنامج .

تعديل البرنامج

7. المطلوب الآن هو تعديل شكل صندوق الحوار بما يوافق شكل البرنامج المطلوب كما فى شكل 3-1 لتحقيق ذلك من صندوق ملفات المشروع انقر زر موارد البرنامج تحصل على صندوق موارد البرنامج كما فى الشكل (3-9)

8. ثم انقر مرتين على Dialog ثم انقر مرتين على VCex2-Dialog IDD- تحصل على شكل صندوق الحوار كما فى شكل3-10.

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

9. اسحب أداة الكتابة Edit Box من صندوق الأدوات الموجود على يمين صندوق الحوار وضعها على صندوق الحوار ،كرر هذه العملية ثلاث مرات لتحصل على ثلاثة أدوات للكتابة (Edit Box) الأولى والثانية لكتابة القيم المطلوب اجراء عمليات الجمع والطرح عليها. والثالثة لتظهر فيها نتيجة العملية (راجع صندوق الأدوات فى شكل 2-19 فى الفصل الثانى ) فتحصل على الشكل (3-11).

10. اسحب أداة عنوان (Static Text) والموجودة فى صندوق الأدوات بالرمز === (وتستعمل لكتابة كلمات على صندوق الحوار ولا يجرى عليها عمليات) وضعها على صندوق الحوار وغير عنوانها إلى NO1 وذلك بالنقر مرتين عليها وكتابة كلمة NO1 أمام خاصية CAPTION -كرر ذلك ثلاث مرات لتحصل على ثلاث أدوات عناوينها RES:, NO2:, NO1:, كما فى شكل (3-12).

11. اسحب أداة زر أوامر وضعه على صندوق الحوار وغير خاصية Caption له الى الاشارة + كرر هذه العملية خمسة مرات لتحصل على شكل (3-13).

تسهيل عدة أزرار فى الجزء السفلى من شاشة التصميم تساعد على سرعة التصميم وقد أشرنا اليها فى الفصل الثانى .

12. شكل 3-13 هو الشكل المطلوب لبرنامج الآله الحاسبة احفظ تغيرات البرنامج الان.

(لو أنك قمت بتنفيذ هذا البرنامج عند هذه المرحلة سوف تحصل على برنامج الآلة الحاسبة ولكن عند الضغط على أى زر وليكن الجمع فلن يؤدى البرنامج شىء لأننا لم نكتب الأوامر التى تحقق العمليات بعد وهذا ما سوف نراه فى الفقرة التالية).

أوامر البرنامج

13. بعد تخليق البرنامج وتعديله بالشكل المطلوب يتم كتابة الأوامر التى تحقق البرنامج كما يلى :

أولا:- اعطاء متغيرات الأدوات الكتابة .

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

_ ولاعطاء متغير لأداة الكتابة الأولى .اضغط باصبعك على مفتاح Ctrl وفى

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

-فى خانة اسم المتغير member variable name ) ) اكتب m1.

-فى خانة نوع المتغير (variable type )اختار int ومعناه رقم صحيح وذلك كما فى الشكل )3-15 ) ثم انقر ok.

-كرر هذه الخطوات مع أداة الكتابة الثانية والثالثة بحيث تأخذ أداة الكتابة الثانية متغير باسم m2 وأداة الكتابة الثالثة متغير باسم m3 وكلها من النوع int وللتاكد من الحاق المتغيرات بأدوات الكتابة اضغط مفتاحى Ctrl + w تحصل على صندوق حوار class wizard انقر على الاختيار member variable فى أعلى الشاشة تحصل على الشكل (3-16) وهو صندوق المتغيرات وبه المتغيرات الملحقة بأدوات الكتابة.

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

ملحوظة :

عند تحديد نوع المتغير تحصل على مجموعة من أنواع المتغيرات المناسبة لمعظم العمليات ولك أن تحدد نوع المتغير حسب نوع القيمة المستعملة مع هذا المتغير والجدول التالى يوضح لنا أنواع المتغيرات واستخدامات .

نوع المتغير	الاستخـــــــــــــــــــــــــــــــدام
C string	للتعامل مع الكلمات (القيم الحرفية)
int	للتعامل مع الأرقام الصحيحة
uint	للتعامل مع القيم الصحيحة مع اهمال اشارة الرقم
long	القيم الصحيحة ذات الأرقام الكبيرة التى تتعدى 2 بايت
float	القيم الحقيقية (التى تحتوى على علامة عشرية)
double	القيم الحقيقية الكبيرة التى تتعدى 4 بايت
BYTE	للتعامل مع حرف واحد
Bool	القيم المنطقية وهى التى تأخذ احدى قيمتين صفر أو واحد
COLEDate/time	للتعامل مع متغير من نوع تاريخ أو وقت
OLE Currency	للتعامل مع المتغير حسب نوع المدخلات

جدول بأنواع البيانات المستعملة

ثانيا:كتابة دوال أزرار الأوامر

بعد اعطاء متغيرات لأدوات الكتابة نقوم بكتابة دوال أزرار الأوامر التى تقوم بجمع وطرح وضرب وقسمة القيم الموجودة فى أدوات الكتابة واظهارها فى الأداة الثالثة وذلك كما يلى :-

- اضغط مفتاحى Ctrl + w تحصل على صندوق حوار Class Wizard

14. فى صندوق حوار Class Wizard اضغط على Message Maps تحصل على شكل (3-17( .

15 . (ابدأ فى كتابة الأوامر التى تحقق زر الأوامر الأول وهو عملية الجمع (+)اضغط بالفأرة على IDC - button 1 ثم اضغط على Bn-Clicked ثم Add function نحصل على صندوق حوار بالاسم المقترح للدالة كما فى الشكل (3-18) .

اضغط OK فيتم انشاء دالة بهذا الاسم تنفذ عند النقر على الزر الأول ثم انقر Edit Code لكتابة سطور الدالة و اكتب السطور التالية :-

1:UpdateData (TRUE) ;

2:m3 = m1 + m2 ;

3:UpdateData (FALSE) ;

بعد كتابة سطور الدالة تحصل على الشكل (3-19).

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

فى السطر رقم 1 الدالة ( ) Update Data تقوم بنقل البيانات من خانة الكتابة إلى المتغير المصاحب لها وذلك لإرسال المعامل TRUE.

فى السطر 2 يتم جمع محتويات المتغيرات m1,m2 ووضع النتيجة فى المتغيرm3 .

فى السطر رقم 3الدالة Update Data ( FALSE ) تقوم بنقل البيانات من المتغيرات الى خانات الكتابة وبالتالى يتم نقل القيمة الموجودة فى المتغير m3 وهى نتيجة جمع المتغيرات m1,m2 الى أداة الكتابة الثالثة وهى أداة ظهور النتيجة وبالتالى يكون عمل دالة زر الأوامر الأولى هى :

1. نقل محتويات خانات الكتابة الى المتغيرات.

2. إجراء عملية الجمع على المتغيرات ووضع النتيجة فى المتغير m3.

3. اعادة قيم المتغيرات الى خانات الكتابة لتحصل على النتيجة .

ملحوظة

بالنسبة لكاتب برامج بلغة Visual Basic يمكن أن تعتبر المتغير المصاحب لخانة الكتابة هو خاصية Text المصاحبة لخانة الكتابة الموجودة فى Visual Basic حيث كنا نتعامل مع خانة الكتابة بالصورة Text1.text فكانت Text تشير لمحتوى خانة الكتابة بالمثل يشير المتغير الى محتوى خانه الكتابة.

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

15. كرر الخطوة رقم 14 مع زر الطرح والضرب والقسمة لكتابة الدالة التى تنفذ عند الضغط على كل زر من هذه الأزرار.

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

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

1:UpdateData (TRUE) ;

2:m3 = m1 - m2 ;

3:UpdateData (FALSE) ;

سطور دالة الضرب

1:UpdateData (TRUE) ;

2:m3 = m1 * m2 ;

3:UpdateData (FALSE) ;

سطور دالة القسمة

1:UpdateData (TRUE) ;

2:m3 = m1 / m2 ;

3:UpdateData (FALSE) ;

16. بالمثـل اكتـب الدالـة الخاصـة بـزر الخـروج مـن البرنامـج (Exit) وهـى كما يلى :

Message Box(“thank you for using our program..”);

On OK ();

بهذا نكون قد كتبنا جميع الأوامر احفظ هذه التغيرات.

17. الآن نفذ البرنامج لتشاهد النتيجة وذلك كما يلى :

- اختر build ثم Bulid exe ثم Execuate أو Ctrl + F5

تحصل على نتيجة تنفيذ البرنامج كما فى الشكل 3-20

جرب استعمال البرنامج بكتابة رقم فى خانة الكتابة الأولى ورقم فى خانة الكتابة الثانية ثم بالضغط على زر أوامر عملية الجمع + ترى النتيجة فى الخانة الثالثة كرر العمل مع زر الطرح والضرب والقسمة وفى النهاية اضغط على زر الخروج تحصل على صندوق حوار برسالة شكرا كما فى شكل 3-21 ثم ينتهى البرنامج.

محرر نصوص بسيط

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

افتح ملف البرنامج (VCex3. mde) من الفهرس chpt3قم بتنفيذ البرنامج(المفتاحين ctrl+f5) تحصل على نتيجة التنفيذ كما فى الشكل (3-22)

والشكل (3-22) عبارة عن برنامج من نوع صندوق حوار Dialog Based

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

أيضا على ثلاث أدوات أزرار أوامر الأول مكتوب عليه كلمة clear عند النقر عليه يتم مسح محتويات أداة الكتابة و الثانى يقوم بتنفيذ عملية النسخ (copy ) و زر الأوامر الثالث يقوم بتنفيذ عملية اللصق (past ) جرب استعمال البرنامج وفى النهاية انقر زر الأوامر Exitثم تابع معنا خطوات تصميم البرنامج.

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

1. ابدأ برنامج جديد بالخطوات المعتادة وهى file ثمnew ثم

project workspace ثم okتحصل على صندوق لكتابة اسم البرنامج اكتب اسم البرنامج وليكن vcex3 ثم انقر على create .

3. تحصل على الخطوة الاولى رقم 1 فى خطوات تحديد مواصفات البرنامج

اختار Dialog based وهو البرنامج من نوع صندوق حوار كما سبق ثم انقرعلى next.

4. تحصل على الخطوة رقم 2 وهى بعض الامكانيات التى يوفرها البرنامج، اترك الاختيارات الافترضية كما هى ثم انقر على next.

5. تحصل على الخطوة رقم 3 وفيها تحديد نوع مكتبة الربط بالبرنامج وكذلك سؤال هل تريد تعليقات على سطور البرنامج اترك الاختيارات الافتراضية كما هى ثم انقر على next .

6. تحصل على الخطوة رقم 4 وفيها الفصائل التى يخلقها VC++ للبرنامج انقر على finish.

7. تحصل على شاشة بمواصفات البرنامج الذى يخلقه VC++ انقر على ok

فيتم تخليق برنامج بهذه المواصفات كما سبق .

تعديل البرنامج

بعد تخليق برنامج بالمواصفات الاولية يتم التعديل فيه حتى يوافق الشكل المطلوب كما يلى :-

8. من صندوق ملفات البرنامج انقر زر موارد البرنامج ثم انقر كلمة vcex3Resources مرتين تحصل على شجرة بموارد البرنامج

9. اختار dialog وانقر عليها مرتين ثم انقر Idd-vcex3-dialog

مرتين تحصل على الشكل المبدئى لصندوق حوار البرنامج .

10. احذف جميع الادوات الموجودة على صندوق الحوار كما سبق (انقر مرة واحدة على الاداة ثم اضغط مفتاح del ). تحصل على صندوق حوار بدون أدوات .

11. ابدا فى تصميم الشكل المطلوب للبرنامج ,انقر مرة واحدة على أداة الكتابة (edit box ) فى صندوق الادوات ثم انقر مرة واحدة داخل صندوق الحوار فيتم وضع ادة كتابة على صندوق الحوار .

12. غير حجم اداة الكتابة لتصلح للكتابة حتى تصبح كما فى شكل (3- 23).

13. انقر بالفارة مرتين على اداة الكتابة داخل صندوق الحوار تحصل على صندوق الخصائص انقر زر styles يتغير الشكل ويعطى صندوق الخصائص

مجموعة أخرى من الخصائص اضبط هذه الخصائص بحيث تطابق شكل (3-24)

فى هذا الشكل تم ضبط خاصية Multiline على أنها true وذلك بالنقر مرة واحدة فى خانة الاختبار المقابلة لها وذلك للسماح للمستخدم بكتابة اكثر من سطر فى هذه الاداة ,وكذلك خاصية Horizental scroll للسماح

للمستخدم بالتحرك افقيا خلال السطور وكذلك خاصية vertical scroll

للتحرك راسيا والخاصيتان auto hscroll ,auto vscroll ليتم تحرك السطور افقيا وراسيا عند استعمال , scroll barوبعد ضبط الخصائص اضغط مفتاح Enter.

14. بعد ضبط خصائص أداة الكتابة لابد من تعريف متغير للأداة حتى يتم التعامل مع هذه الأداة عن طريق هذا المتغير وذلك كما يلى :-

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

على صندوق تعريف متغير و اكتب اسم للمتغير وليكن ms1 واترك باقى الاختيارات كما هى فى شكل (3 - 25).

15. وقع أربعة أدوات أزرار أوامر من صندوق الأدوات على صندوق الحوار

كما سبق ليصبح صندوق الحوار كما فى شكل (3-26).

16. غير عناوين ازرار الاوامر وذلك بالنقر مرتين على الاداة تحصل على صندوق الخصائص انقر زرgeneral ثم غير خاصيةcaption إلى الكلمة

المطلوبة بحيث يعطى البرنامج الشكل (3 -27) وبهذا تم تصميم شكل البرنامج

وتغير الخصائص ويبقى كتابة الاوامر التى تحقق أزرار الأوامر.

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

17. اضغط مفتاحى Ctr+W تحصل على شاشة classwizard

كما فى الشكل (3-28) وهو صندوق حوار يحتوى على الأدوات التى يحتوى

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

18. من صندوق العناصر (obiect ids ) اختار الأداة الأولى وهى :

IDC -Button1 وهو زر الأوامر الأول الذى يقوم بمسح محتويات أداة الكتابة ومن صندوق الرسائل (Messages) اختار BN-CIICKED ثم انقر زر Add function تحصل على صندوق اضافة دالة وبه الاسم المقترح كما فى الشكل( 3 -29 )

19 - انقر زر ok للموافقة على اسم الدالة الافتراض وهو onButton1

ثم انقر زر Edit code وابدا فى كتابة السطور التالية :-

1-ms1.SetSel(0,-1);

2-ms1 . ReplaceSel (“ “);

شرح السطور :

فى السطر رقم 1 الدالة SetSel( ) تقوم بالاشارة الى الكتابة التى تم اختيارها

داخل اداة الكتابة .

فى السطر رقم 2 الدالة ( " " ) ReplaceSel تقوم باستبدال الكتابة بمسافة فيتم مسحها وهذه هى وظيفة زر الأوامر الأول (مسح محتويات أداة الكتابة).

20. كرر الخطوة رقم 19 مع باقى ازرار الاوامر الباقية بحيث تكتب دالة

لكل زر أوامر واكتب سطور كل دالة كما يلى :-

دالة زر الاوامر copy

1- ms1 . SetSel(0,-1)

2- ms1 . copy ( ) ;

فى السطر رقم 2 تقوم الدالة copy بنسخ ما تم اختياره من كتابة ووضع نسخة

فى حافظة برنامج النوافذ(clipboard).

دالة زر الاوامر paste

1-ms1.SetSel(0,-1);

2-ms1.Paste ();

فى السطر 2 الدالة Paste () تقوم بلصق محتويات حافظه برنامج النوافذ

إلى أداة الكتابة مكان المؤشر .

- دالة زر الاوامر exit

1- message box (“thank you for using our prog - “);

2- OnOk( ) ;

ترجمة وتنفيذ البرنامج

21. من القائمه الرئيسية اختارbuild تم build vcex2.exe وانتظر قليلاحتى يتم ترجمة وربط البرنامج.

- من قائمة build اختار execuete vcex3.exeتحصل على نتيجة تنفيذ لبرنامج كما فى شكل (3-30). جرب استعمال البرنامج.

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

برنامجك بسهولة مثل عملية cut , paste , copy وغيرها لأن Paste , Copy دوال فى الفصيلة ( edit ) التى عرفناها لأداة الكتابة. وهناك كثير من الدوال الأخرى المفيدة سوف نتناولها فى فقرات أخرى.