جولة فى الفجوال بيسك

الدرس الأول 

 التعرف على واجه البرنامج و بعض الخصائص

الانطباع الأول : عندما تفتح الفيجوال لأول مرة و كل مرة ستفتحه فيما بعد ستظهر لك النافذة الأولى دائما وهي نافذة المشروع الجديد (New Project) وستجد فيها ثلاثة تبويبات الأولNew لبدأ مشروع جديد و هو ما سنختاره والثاني Existing وهو لفتح مشروع مصمم مسبقا أي لفتح مشروع سابق و الثالثRecent وهي قائمة بآخر المشاريع المصممة . المهم من التبويب New اختر مشروع من النوع Standard EXE أي قياسي وهو ما سنعمل به ويكون محدد مسبقا أما المشاريع الأخرى فلن تلزمك حاليا (تلك للمتقدمين).

ثم اختر Open و الآن ها أنت في مشروعك الأول و لأول مرة يكون الفيجوال غير منظم نسبيا فيظهر لك نوافذ غير ضورية مثلاً إذا وجدت نافذة يعنوان Form Layout أغلقها لأنها لن تلزمنا و أهم شيء أن يكون هناك نافذة Tool Box أي العناصر و نافذة الخصائص Properties و هناك نافذة قد لاتظهر وهي نافذة الProject Explorer قد تظهر فيها عدد الصفحات أو النوافذ التي سنصممها.. ويمكنك إظهار هذه النوافذ من القائمة View و ستجدها بأسمائها.. و الآن بعد أن نظمت واجهة اللغة فلنبدأ.

النوافذ: في بداية كل مشروع قياسي سيقوم الفيجوال تلقائيا بإضافة نافذة لمشروعك وهي ما يسمى بلغة الفيجوال بال Form النموذج والآن لا حظ هذه الفورم وتأملها أليست مثل النوافذ التي نراها .. الآن حاول التحكم بأبعادها من خلال الإحدثيات الخاصة بها في أطرافها ..لا حظ أنها تأخذ الحجم الذي تريده .. وحتى حجم الشاشة بأكملها إن أردت .. و لكنها منقطة من الداخل أليس كذلك لا تخف فهى تظهر فى نافذة التصميم فقط .. و الآن نريد تجرية برنامجنا .. اضغط على F5 من لوحة المفاتيح و لاحظ ها هو مشروعك الآول بين يديك ولكن كمستخدم وليس كمبرمج وهذه الطريقة دائما لتجربو المشروع . (ملاحظة : يمكنك تشغيل المشروع أيضا بالنقرعلى رمزStart من شريط الأدوات العلوي ..أو من القائمة Run ثم Start..) و الآن أغلق المشروع من زر الإغلاق في الأعلى (أن قلت المشروع و ليس الفيجوال). ستلاحظ أنه قد عاد إلى وضع التصميم و الفورم المنقطة..الآن لاحظ اسمها Form 1 لماذا هل هناك Form2؟؟ سيصبح هناك Form 2الآن من القائمة Project اختر Add Form ستظهر لك نافذة لإضافة عدة أنواع من الصفحات اختر المحددة وهي Form ثم Open. و الآن لاحظ ها قد صار المشروع مكون من نافذتين وهكذا .. طبعاً الأنواع الأخرى لن نتطرق لها الآن . لا حظ أنه يمكن التنقل بين الفورم Form 1 و الفورم  Form 2 من خلال نافذة ال Project Explorer لذلك طالبتك بإظهار هذه النافذة في البداية.. و الآن لنترك أمر الفورم وعددها وننتقل للتعديل على الفورم نفسها.

الخصائص

(من دون توسع لأن لها درس خاص): عندما تقوم بوضع الفأرة داخل الفورم و النقر ستلاحظ في نافذة Properties  أن خصائص الفورم قد ظهرت و بالترتيب فمثلا قم بتعديل الخاصية Caption وهي تعني عنوان الفورم إلى النص الذي تريده حتى ولو كان بالعربية وستلاحظ تغيير عنوان الForm فورا إلى النص الذي أدخلته.. ملاحظة : لاتقم بتعديل الخاصية Name للفورم أو أي عنصر ستعلمه لاحقاُ لأن الفيجوال يتعامل معه على هذا الأساس. أيضا عدل الخاصية BackColor أي لون الخلفية إلى اللون الذي تريد و لاحظ أنه تغيير لون الفورم إلى اللون المحدد .. أيضا عدل الخاصة BorderStyle و هي خيارات إلى أحد الخيارات جربها واحد واحد ولا حظ إطار الفورم Form.. وجرب النتيجة لكل خيار منها.. و الآن حتى درس الخصائص حاول أن تجرب بعض منها لكي تعرف مهمته وهذه الخصائص طبعاُ نفسها لكل Form.

العناصر و الأدوات

انتقل الآن إلى صندوق الأدوات Tool Box والذي يحوي رموز قد تكون مألوفة بالنسبة لك...ستجد أن الرمز المختار تلقائيا هو رمز الفأرة Pointer و الآن سنتعرف على هذه الأدوات جربها واحدة واحدة من الأعلى: اختر أي عنصر وقم برسمه على الفورم بداخلها طبعاُ ثم أذا أردت غير أبعاده كما تغيير أعاد الفورم عن طريق التحكم بأطرافه ..

الأداة Picture Box: أداة لعرض الصور بداخلها جرب أن تضع صورة بداخلها عن طريق النقر عليها لمرة واحدة ثم اتجه لنافذة الخصائص حيث ستجد خصائصها ومن الخاصية Picture اختر صورة من عندك.. من عيوبها انه لا يمكنك تعديل حجم الصورة.

 الأداة Label: لوضع نص يداخلها غير قابل للتعيدل من قبل المستخدم ..غير الخاصية Caption من خصائصها ثم اكتب ماتريد و لاحظ تغيير النص إلى ما كتبته حتى ولو بالعريبة.

الأداة TextBox: أداة نص قابل للتعديل من قبل المستخدم ..لا تملك خاصية Caption ولكن عوضاُ عنها عدل بالخاصية Text ولاحظ كيف سيتغير النص بداخلها ..شغل المشروع (F5) وجرب أن تغير النص فيها كمستخدم.

الأداة Frame: مجرد صندوق لجمع عدد من العناصر للدلالة على مهمة معينة ارسمها على الفورم وستعرف مهمتها وحدك غير أيضا الخاصيةCaption لما تريد...

الأداة Command(هام): وهو أشهر أداة أي الزر وهو غني عن التعريف .. قم أيضاُ يتغيير الخاصية Caption لما تريد ..

الأداة Check صندوق اختيار .. ويمكن فيها اختيار أكثر من عنصر.

الأداة Option: اختيرا اجباري .. وفيها يلزم اختيار عنصر واحد فقط.

الأداة Combo : تعرض عدة اختيارات بواسطة ادراج السهم المصاحب لها.

الأداة ListBox: تعرض عدة اختيارات ويظهر بها شريط تمرير. 

الأداة Timer : تقوم بعمل المنبه حيث تستخدم فى اضافة مدة زمنية لعملية معينة.

 الأداة Shape: مجرد أشكال..

الأداة Image: لعرض الصور أيضا لكنها تتميز عن الPictureBox بأنها تقبل التعديل فى حجم الصور. 

الأداة Hscrollbar : لعمل شريط تمرير أفقى.

الأداة Vscrollbar : لعمل شري تمرير رأسى.

الأداة Line : لرسم خط.

الأداة Drive list : تعرض أسماء محركات الأقراص الموجودة بجهازك.

الأداة Dir list : ترتبط بالأداة السابقة ، تعرض أسماء المجلدات الموجودة بمحرك الأقراص المحدد سابقا.

الأداة File list : ترتبط بالأداة السابقة ، تعرض أسماء الملفات الموجودة بالمجلد المحدد سابقا.

الأداة Data : تستخدم لربط البرنامج مع قواعد بيانات Access.

الأداة ole : للاستعانة بتطبيقات خارجية.

 حفظ المشروع : بعد هذا التصميم كله تريد حفظ مشروعك بالامتداد vbp ليكون قابل للتعديل الآن من القائمة File خذ الأمر Save Project As... عندها حدد مكان الحفظ و سيقوم المشروع بسؤالك عن حفظ الفورم Forms واحدة واحدة ..

 **********************************************

الدرس الثاني : الخصائص

 توجد على يمين شاشة الفيجوال وستجد كلمات كثيرة منها قابل للتعديل المباشر أو اختيارالمحدد(مثلا True -False) و سأكتب هنا مهمتها:

Name : اسم الاداة ويتعامل الفيجوال مع الأداة بهذا الاسم فلو كتبت كود لها عليك كتابة اسمها لذلك يفضل إبقاء اسمها كما هو مثلا -Picture-Text - Label.
Alignment : تحديد محازاة النص، في اليمين او الشمال او في الوسط.
Appearance: تحديد شكل الاداة اما بشكل عادي او بشكل ثلاثي الابعاد.
Autosize: اذا كانت True يعني ان الاداة ستتخذ حجم تلقائي يناسب محتوياتها كما في الpicture.
Backcolor : لون الخلفية للأداة.
BackStyle: شكل الخلفية اما شفاف او ملون.
BorderStyle : نوع الإطار قد يكون غائر أو منبسط .
Caption : العنوان او النص
Datafield : حقل قواعد البيانات
DataFormat: هيئة قواعد البيانات، اما نص او رقم ...الخ
DataMember : تحديد عضو محدد من قواعد البيانات اذا كانت قواعد البيانات تحتوي على عدة اعضاء.
DragIcon : الايقونة المستخدمة اثناء السحب.
DragMode : نظام السحب .
Enabled : تمكين الاداة، فهي عادة True ، ولكن عندما تكون False تكون الاداة بلون رمادي وغير قابلة للاستخدام أي غير مفعلة..
Font : نوع الخط وحجمه.
ForeColor : لون الخط.
Height : ارتفاع الاداة.
Left : موقع الاداة الافقي,
LinkItem : لتحديد البيانات التي سوف تمرر لقواعد البيانات الوجهة اثناء استخدام DDE للتخاطب مع برنامج اخر.
LinkMode : نظام الربط، ايضا لقواعد البيانات.
MouseIcon : ايقونة الماوس عند التمرير و الضغط.
MousePointer : مؤشر الماوس و حتى يعمل الذي حددته غير الخاصية
إلى custom.
OLEDropMode : نظام الافلات في برامج اخرى,
RighToLeft : تستخدم في البرامج العربية لتحويل الاداة من اليمين الى اليسار.
TabIndex : ترتيب الاداة من حيث التنقل بالضغط على الزر Tab.
Tag : تستخدم لتخزين اي بيانات اضافية,
ToolTipText : تحديد النص الذي سيظهر عند ايقاف الماوس فوق الاداة.
Top: تحديد مكان الاداة العامودي.
Visible : اظهار و اخفاء الاداة.
Width : عرض الاداة.
WordWrap: تحديد اذا ماكانت الاداة سوف تتمدد لاتساع النص الموجود فيها.

و هناك خصائص أخرى منها :

خصائص عنصر الForm:
Picture: صورة الخلفية و لإزالتها كل ما عليك هو حذف النص داخل الخانة Picture التي تأخذ اسم Bitman.
Windows State: حالة الForm عند التشغيل وهناك ثلاث خيارات:
Maximiz: تكبير على ملىء الشاشة .
Minimize: مصغرة.
Normal : أي الحجم الذي حددته أنت عند التعديل على الفورم.
StartUpPosition : لتحديد موضع الفورم عند التشغيل في منتصف الشاشة أو غير ذلك..
Icon : أقونة الفورم في الأعلى بدل من أيقونة الفيجوال التقليدية و سيأخذ البرنامج نفس الأيقونة عندما تحوله إلى تنفيذي EXE.
ControlBox : أي يتحكم في الأزرار الثلاثة العلوية (إغلاق - تصغير - تكبير) سواء تظهر أو لات ظهر عن طريق الTrue و ال False جرب.

خصائص عنصر الImage:
picture: هو الصورة التي ستحتويها.
Stretch: وهي لاحتواء الصورة بكاملها و ذلك بحجم الimage.

خصائص عنصر الText:
Locked:أي لا يسمح للمستخدم بالكتابة بداخلها فقط النسخ.
Passward: أي شكل الأحرف في مربع لكلمة السر مثل (*أو x).
Max lengh: أقصى عدد من الحروف لكتابته في الText فمثلا لو كتبت 5 لن يقبل الText أكثر من 5 مدخلات . ولو كتبت صفر سيقبل عدد غير منتهي .
MultiLine : أي إذا كان False لا يسمح بأكثر من سطر واحد للكتابة أما إذا كان True فيسمح بعدة أسطر مثل المفكرة.

خصائص عنصر الPicture:
AutoSize: يقوم بأخذ حجم الصورة الطبيعي مهما كانت .
AutoRedraw : لن تتمكنوا من فهم هذه الخاصية إلا بعد التعمق في الفيجوال لذلك لنتركها الآن وتذكروا أنها يوماً ما ستحل لكم مشكلة كبيرة كما حصل معي في تصميم برامج الGraphics.

 **********************************************

الدرس الثالث : الكـود و التعامل معه

الكود هو الأمر الكتابي الذي سيقرأه الvb لكي ينفذه الجهاز بأوامر خاصة و كيفية و ضعه سهلة افتح الvb ثم ضع زر(مثلا) بالضغط على رمز Command و رسمه على الفورم(Form) ثم اانقر عليه نقر مزدوج باليساري أو انقر باليميني على ال Command ثم اختر View Code و ستظهر لك نافذه بيضاء تسمى نافذة الكود Code وفيها السطرين التاليين:

Private Sub Command1_Click()

End Sub

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

Private Sub Command1_Click()
End
End Sub

ولا تخف إذا كنت قد حذفت أحد الأسطر او الأحرف فقط اضغط على Ctrl +z لكي يتم التراجع عن آخر الخطوات أريأتم ذكاء الفيجوال و تستطيعون التراجع إلى عدد كبير من التراجعات و ليس مرة واحدة.
و الآن جرب البرنامج و انقر على الCommand 1 و لاحظ أغلق البرنامج هاهو أول أمر نكتبه قد عمل ..و الآن عد لنافذة الكود و لنكتب كود لا يفهمه الكود متقصدين ذلك لنرى ردة فعل الفيجوال..اكتب مثلا بدل كلمة End اكتب
Endo
و شغل البرنامج و انقر مرة أخرى على الComman1 ماذا حصل؟؟ لقد ظهر صندوق ‏نص يخبرك بأن مترجم الفيجوال لم يفهم ماذا كتبت أي أن الفيجوال لا يستطيع قراءة هذا الكود.. طيب اضغط على زر موافق لاحظ كيف أنه علم لك الخطأ بالون الأزرق و عنوان الكود باللون الأصف ..ألم أقل لك أن الفيجوال ذكي لقد كشف الخطأ و حدده لك طبعاً من المستحيل أن تجد الخطأ وحدك في برنامج يحوي مئات الأسطر مثلا..الآن احذف هذه الكلمة ثم عد ولكتب كلمة End ولا حظ كيف عاد البرنامج يعمل بشكل طبيعي ..
و الآن لنأخذ كود آخر مثل كود صندوق النص البسيط اكتب بين السطرين بدل كلمة End بجيث يصبح الكود بالشكل التالي:

Private Sub Command1_Click()
MsgBox ("Wellcome!!!")
End Sub

لاحظ صندوق النص في الفيجوال نسميه Msgbox اليس واضح من التسمية و كتبنا بين القوسبن () النص الذي نريده و في الفيجوال دائما عندما نريد كتابة نص نكتبه بين القوسين " "
مثلا:"Wellcome "
و الآن جرب البرنامج ولا حظ النتيجة ..بعدها إذا حبيت تعدل على النص كما تريد أو تكتب حتى بالعربي ..

والآن لنتعرف على نوع آخر من الأحداث فالCommand قام بتنفيذ الكود بعد ان نقرنــا عليه ولكن مذا لو أردنا أن ينفذ الحدث عند المرور بالماوس فوقه أو بعد الانتهاء من النقر هذه هي مهمة الأحداث لا حظ في شاشة الكود من الأعلى يوجد قائمتين منسدلتين(Combo بلغة الفيجوال) الولى من أعلى اليسار وهي تقومبنقلك من كود عنصر إلى كود عنصر آخر مثلا من كود الCommand 1 إلى كود الCommand 2 و حتى للفورم و هناك قسم General وهو قسم التصريحات العامة ولكن هذا لا يهمنا الآن ..الآن انتقل للقامئة في الأعلى من اليمين و لاحظ ماكتب فيها ..Click-MuseMove-KeyPress.
الآن انتقل للحدث MouseMove و انقر عليه و لاحظ كيف تغير شكل الكود العام بدل:

Private Sub Command1_Click()

End Sub

إلى

Private Sub Command1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)

End Sub

(طبعا xو y وغيرها باراميترات لن نتعرض لها الآن..)
الآن ضع بين هذين السطرين الكود

Private Sub Command1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
MsgBox ("By Eiad")
End Sub

نفهم الكود أليس كذلك.
هذه هي الاحداث و سأكتب هنا توضيح عنها:
Click : عند النقر.
DragDrop: عند الجر.
KeyPress: عند النقر من لوحة المفاتيح.
MouseDown: بعد الانتهاء من النقر بالماوس.
و الآن ضع Textعلى الفورم و انقر عليها مرتين للدخول إلى كودها و ها نحن نرى حدثاُ جديدا وهو:
Change: أي عند الكتابة فيها.
الآن انقر على الفورم Form نقرتين لأن للفورم أيضاُ كود ولاحظ ايضاً أحداث جديدة :
Load:أي عند التشغيل فور البدء.
Unload: عند إغلاق الفورم.
Resize: عند تغيير الحجم عن طريق الأطراف.
DblClick: نقر مزدوج.
Initialize: البدء ...و الباقي لا يهمنــا.
و اللآن لتجري الحدث Load في الفورم :
ضع الكود في الحدث Form Load كما يلي :

Private Sub Form_Load()
MsgBox ("By Eiad")
End Sub

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

تطبيق الكود على العناصر:
ضع زر Command على الفورم و في الحدث Click(بعد أن تعرفنــا على الأحدثا سنتعامل معها بشكل دائم)
اكتب Form1 ثم . أي نقطة فلاحظ قد ظهرت لك قائمة اقرءها ولاحظ أليس هذه الكلمات مؤلوفة نعم إنها خصائص الفورم و قد قلنـا سابقــا أنه يمكن تعديلها من الكود نفسه لا حظ ضع الكود التالي:

Private Sub Command1_Click()
Form1.Caption = " Wellcome"
End Sub

و الآن شغل البرنامج قد أخذنــا سابقا أن الCaption تدل على العنوان فعندما تنفذ الأمر ستلاحظ أن عنوان الفورم قد تغيير إلى كلمة Wellcome أو أي كلمة تكتبها في الكود حتى ولو بالعربي ..
الآن لنعود للكود ونفهمه أليس واضحا لنترجمه (الفورم2.عنوانها="أهـــلا") وكأنه يتكلم كلام عادي أليس سهل و كذلك الأمر مع الألوان... لنجرب تجربه أخرى...
أولا عليك معرفة رقم اللون....كيف ذلك؟؟
انسخ الرقم الموجود داخل اللون مثلا &H80000008& يدل على اللون الأسود والآن بعد أن اختر اللون المناسب اذهب للCommand و ضع الكود في الحدث Click على الشكل:

Private Sub Command1_Click()
Form1.BackColor = &H80000008
End Sub

و الآن أكيد أنكم بدأتم تفهموا هذه الأكواد وهي مجرد تحكم بالخصائص .. وعليكم الآن أن تحاولوا أن تكملو االكودات على حسب ما فهمتم فعدل على العنوان و اللون و الحجم Width و Height0.
الانتقال من فورم إلى أخرى:
سننتقل إلى كود آخر وهو كود الانتقال إلى صفحة أخرى مثلا افتح مشروع جديد و أضف إلى اثنين Form.
وضع في الفورم الأولى زر Command و ضع فيه الكود التالي:(في مرحلة قادمة لن أكتب كل الكود و إنما محتواه فقط و لكم أنتم حرية وضعه في أي عنصر ):

Private Sub Command1_Click()
Form1.Hide
Form2.Show
End Sub

و جرب البرنامج و لاحظ واذا حصل لقد اختفت الفورم1 و ظهرت الفورم 2 ..لا حظوا الكود أليس واضحا
حيث Hide تعني إخفاء و Show تعني إظهار و هذه ترجمة الكود
الفورم1.إخفاء
الفورم2.إظهار
و النقطة . عنصر اساسي في كل كود لمعرفة المهمة والفصل بين العنصر و المهمة ..
والآن ماذا لو اردنا أن تظهر الفورم 2فقط دون إخفاء الفورم 1...لاحظ الكود:

Private Sub Command1_Click()
Form2.Show
End Sub

لاحظ الفورم 2 ظهرت ولم تختفي الفورم 1 (أنتم حتى الآن فهمانين علي 100%  الأكواد واضحة أليس كذلك )

تطبيقات على الكود:
تطبيق 1:
أضف للمشروع Commad وText وضع في الCommand الكود التالي(لن أحدد الحدث وتركت لك حرية الاختيار ضع الكود حيث تشاء):

Text1.Text = Time

حيث أن الكلمة Time هي دالة يتعرف عليها الفيجوال على أنها الوقت ...إما إذا أردت التاريخ استبدل الكلمة Time ب Date ..فيصبح الكود:

Text1.Text = Date

تطبيق 2:
تصميم برنامج حاسبة بدائية:
أضف للمشروع ثلاث عناصر Text أربعة عناصر Commadn و قم بتسميتها على أسماء العمليات الحسابية الأربعة ( جمع - طرح - ضرب - قسمة) وقم بتتريب هذه العناصر بشكل متناسق .. وستكون ال Text1و الText2 هما الذان سنكتب فيهما الرقمين المراد جمعهما أو ضربها ...و في الText3 سيكون ناتج العملية.
و الآن في الزر (جمع) ضع الكود :

Text3.Text = Val(Text1.Text) + Val(Text2.Text)

حيث val تعني أخذ القيمة العددية فقط في الText وليس النص الموجود فيها ..
(ملاحظة : لا تكتب في الTextأي نص أكتب فقط أرقام لأنه إذا كتبت نص سيحدث خطأ و هذا يتطلب معالجة الأخطاء وهذا درس آخر..)
وفي الزر (طرح ) ضع الكود التالي:

Text3.Text = Val(Text1.Text) - Val(Text2.Text)

لاحظ استبدلنا إشارة ال + ب - فحصلنا على عملية الطرح سهل اليس كذلك..
و الآن في زر (الضرب) ضع الكود :

Text3.Text = Val(Text1.Text) * Val(Text2.Text)

فقط استبدلنا ال+ ب * .
و في الزر (قسمة) ضع الكود :

Text3.Text = Val(Text1.Text) / Val(Text2.Text)

و الآن جرب البرنامج و قم بإدخال عددين وجرب العمليات الأربعة ..ها قد صممنا حاسبة.