البرمجة المرئية وخصائصها وعناصرها

الفجول بيسك ( البرمجة المرئية ) Visual basic

1-1 المقدمة
صدرت لغة الـ v.basic عام 1991 ومنذ ذلك الحين والى الآن جرت عدة تعديلات عليها ومن إصداراتها v.basic version 6.0 والذي سنتكلم عنه في محاضراتنا التالية .أما الإصدارات الأحدث هي v.basic 7.0 وv.basic 8.0
تعمل لغة الـ v.basic تحت نظام التشغيل windows وتستخدم هذه اللغة في تصميم البرامج وبجدر بالمصمم أن يكون على دراية في كتابة البرامج وخصوصا البرمجة بلغة بيسك لان هناك تشابه كبير في الايعازات المستخدمة .
وتتكون البرمجة في الفيجول بيسك من مرحلتين :
المرحلة الأولى تسمى بالبرمجة المرئية visual))
المرحلة الثانية تسمى بالبرمجة المشفرة coding وهي سهلة التعلم مقارنة مع لغات البرمجة الأخرى مثل C++ ولغة جافا Java

تنصيب البرنامج : يعد برنامج الفجول بيسك واحد من مجموعة Microsoft visual studio

Microsoft visual basic

Microsoft visual c++
Microsoft visual j++
Microsoft visual FoxPro
(يحتوي على تعليمات مساعدة لجميع البرامج) MSDN
وتتم عملية تنصيب البرامج الأخرى وذلك عن طريق أيقونة setup
تشغيل البرنامج :
تتم عملية تشغيل البرنامج بعدة طرق منها.
ا-عن طريق سطح المكتب (بالنقر المزدوج على أيقونة v.basic الموجودة على سطح المكتب
ب- عن طريقstart programs Microsoft visual studio Microsoft visual basic
بعد تنفيذ إحدى الخطوات المذكورة أعلاه يظهر لنا مربع حوار وكما مبين في الشكل(1-1)





1
2
3



1
2
3

شكل (1-1)

وفي هذا الشكل يحتوي على الايعازات التالية :
new -1: وتعني فتح مشروع جديد إما من نوع :
ا- المشاريع القياسية standared.exe
ب-مشاريع تصميم الأدوات الإضافية active
ج- مشاريع تصميم المكتبات DLL
د- مشاريع قواعد المعطيات
هـ - مشاريع أخرى
Existing- 2 :- تستخدم لفتح مشروع سابق
Recent- 3 :- تستخدم لفتح مشروع تم العمل به مؤخرا.
في تعاملنا مع كتابة مشاريعنا الحالية نختار new ثم standard تظهر لنا بيئة تطوير v.basic من النوع القياسي .


1-2 بيئة التطوير المتكاملة في v.basic (IDE) (INTEGRRATED DEVELOPMENT ENVIROH MENT)
تبدو V.B في النظرة الأولى مزدحم بالعناصر والنوافذ اكثر من غيرها من التطبيقات. ويمكن تجاوز هذا الازدحام بالعناصر والنوافذ بفهم ودراسة واعية لكل من هذه العناصر والنوافذ ومن ثم سنجد أن الأمر اسهل مما نتصور وان استخدام هذه العناصر يوفرعلينا الكثير من الوقت والجهد في إنشاء التطبيقات .

1-3 نوافذ بيئة التطوير المتكاملة Integrated Windows Development Environment

شرح النوافذ :

1- نافذة المشروع PROJECT WINDOW
تظهر هذه النافذة شكل (1-2) محتويات التطبيق من نماذج ووحدات نمطية وغيرها من كائنات المشروع.
وتحتوي على شريط يتضمن ثلاث أيقونات هي :

Toggle folder

View object
View code

Toggle folder

View object
View code
TOGGLE FOLDER : تعمل على إظهار وإخفاء المجلدات
VIEW OBJECT : تظهر الكائن المحدد
VIEW CODE : تظهر نافذة البرمجة للكائن المحدد

الشكل (1-2)

2- نافذة النموذج FROM DESIGNER يمكن أن يتألف المشروع من عدد كبير من النماذج كما يمكن فتح نوافذ تصميم أكثر من نموذج بنفس الوقت






تحتوي هذه النافذة على النموذج الذي تقوم بتصميمه ووضع عناصر التحكم عليه وممكن أن يكون لدينا أكثر من نموذج (FROM) واحد . الشكل(1-3)

الشكل(1-3)

3- الأدوات الداخلية (عناصر التحكم ) TOOL BOX

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


كما يمكن إضافة عناصر تحكم إضافية وذلك بالنقر بالزر الأيمن للماوس على صندوق الأدوات ونختار component
فتظهر لنا نافذة تحتوي على مجموعة من العناصر نختار العنصر المطلوب ثم apply أو ok

الشكل(1-4)

4- نافذة البرمجة : CODE WINDOW

تستخدم هذه النافذة لكتابة التعليمات البرمجية التي تحدد سلوك وأسلوب عمل النماذج وعناصر التحكم
كما في الشكل (1-5)






يمكن للـ VB فتح نافذة برمجة لكل نموذج حيث يمكن فتح نافذة برمجة بالنقر المزدوج على أي عنصر تحكم داخل النموذج أو بالنقر المزدوج على سطح النموذج

الشكل (1-5)

5- نافذة الخصائص PROPERTIES
تحتوي هذه النافذة على مجموعة من الخصائص التي تحدد مواصفات عنصر التحكم.حيث تحدد كل خاصية ميزة معينة للعنصر كالطول والعرض ولون الخلفية انظر الشكل (1-6).
ولإظهار نافذة الـ PROPERTIES أما من أيقونة ال PROPERTIES في شريط المهام تعرض هذه النافذة خصائص العنصر المحدد , وعند انتقال التحديد إلى عنصر آخر ستظهر تلقائيا خصائص ذلك العنصر في النافذة
يتم فتح نافذة الخصائص من الإيقونة properties في شريط المهام أو بالنقر بالزر الأيمن على نافذة ال FORM ثم PROPERTIES أو بالضغط على مفتاح F4 .

الشكل (1-6)

1-4 الخصائص الشائعة في نافذة الخصائص Common Properties :
خاصية الاسم NAME
تعتبر هذه الخاصية من أهم الخصائص على الإطلاق وهي متوفرة لجميع العناصر دون استثناء وهي التي تحدد الاسم البرمجي للأداة مثلا :.نقوم عادة بتغير أسماء العناصر الافتراضية لوضع أسماء لها دلالات معينة فإذا أردنا مثلا تسمية صندوق نص Text1.text يحوي بداخله اسم زبون فالاسم المقترح في هذه الحالة هو TxtCustName حيث Txt تدل على نوع عنصر التحكم والـ CustName توضح أن صندوق النص مخصص لوضع اسم الزبون فيه.
ملاحظة:
1- يبدأ الاسم دائما بحرف وليس برقم
2-لا يزيد طول الاسم عن 40 حرف
4-لا يجوز استخدام النقطة والفراغ والفاصل
5- لا يجوز استخدام الكلمات المحجوزة مثل FUNCTION , WHILE, FOR
6- يفضل كتابة الاسم الذي يدل على وظيفة الأداة .

خاصية لون الأرضية

ومنها نحدد لون أرضية العنصر الذي تم تأشيره مثلا لو اشر form ونختار اللون الأصفر للأرضية عندئذ سوف يكون الـ form باللون الأصفر وهكذا لـ text أو label وتتم هذه العملية بالنقر المزدوج على المستطيل الواقع أمام كلمة back color فيظهر لنا مربع حوار يحتوي على عدة ألوان ثم نختار اللون المناسب .

خاصية العنوان caption

وهي عملية إعطاء عنوان للعنصر الذي تم وضعه في ال form مثلا إذا وضعنا عنصر command في الـ form نعطي له عنوان في حقل الـ caption وليكن كلمه جمع إذن ستوضع كلمة (جمع) فوق ذلك الـ command . وهذا العنوان لايدخل في العملية البرمجية


خاصية التمكين enabled
تأخذ هذه الخاصية كلمة true أو false وهي عملية تمكين خاصية الأداة لتي تتأثر بالحدث
( النقر أو حركة الماوس ).

خاصية الخط font

تستخدم هذه الخاصية بتحديد نوع وحجم الخط المستخدم في واجهة الـ form

خاصية لون الخط fore color

وهي تحديد لون الخط المراد الكتابة به على الـ form أو العنصر

خاصية السمك height

تحدد ارتفاع (سمك) العنصر على سطح الـ form

خاصية العرض width

تحدد عرض العنصر على سطح الـ form

خاصية اليسار left

تحدد مقدار بعد الطرف الأيسر للأداة عن الطرف الأيسر للـ form

10-خاصية الارتفاع top

تحدد مقدار بعد الطرف العلوي للأداة عن الطرف العلوي للـ form


11- خاصية الصورة picture

تستخدم هذه الخاصية لرفع صورة كخلفية على ال form والصور تكون من نوع ال jpg أو bmb أو bib أو ico حيث تحدد ال path للصورة عند استدعائها مثلا
\ House.jpg صور d:\
أي أن الصور موجودة على القرص d في دليل اسمه صور واسم الصورة هو house ونوعها jpg .

12- خاصية الإخفاء والإظهار visible

تستخدم لإظهار أو إخفاء الأداة أثناء التنفيذ حيث إن كلمة true للإظهار وكلمة false للإخفاء .

1-5 الأحداث Events

الحدث Event هو فعل يقوم به المستخدم مثل النقر على زر الفأرة ( click) فوق أداة من أدوات التحكم
مثلا command Button) ) يؤدي إلى تنفيذ إجراء معين مثل إنهاء تطبيق . وهذا الإجراء يكون مكتوبا بشكل كود (تعليمات) ضمن إجراء (procedure) يبدأ بجملة sub وينتهي بجملة (End Sub ) . والجدول التالي يبين بعض أنواع الأحداث الهامة في نظام الفيجول بيسك وعملها ومتى تحدث.

الحدث Event

عمله
متى يحدث
Click
النقر مرة واحد
يحدث عندما ينقر المستخدم فوق أداة معينة
DbClick
النقر المزدوج
يحدث عندما ينقر المستخدم نقرا مزدوجا فوق الأداة
Mouse Move
تحريك مؤشر الفأرة
يحدث عندما يحرك المستخدم م}شر الفأرة على الأداة
Mouse Down
زر الفأرة الأيسر
يحدث إثناء عملية النقر فوق زر الفارة
Mouse Up
زر الفأرة الأعلى
يحدث عند إفلات زر الفارة
Drag Drop
نقل
يحدث عند نقل الأداة من مكان لآخر
Key Press
ضغط حرف
يحدث عندما يضغط المستخدم احد الحروف من لوحة المفاتيح
Key Down
المفتاح الأسفل
يحدث أثناء ضغط المفتاح من لوحة المفاتيح وقبل تحريره
Key Up
المفتاح الأعلى
يحدث بعد ضغط المفتاح


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

1-6 نافذة النموذج Windows Form

يمثل النموذج Form الشكل (1-7) منطقة العمل الأساسية التي يتم فيها تصميم مشاريعك وتطبيقاته , وعليه تضاف الأدوات الأخرى مثل
صناديق النص والعنوان والصور وغيرها. ويمكن التحكم في خصائص النموذج مثل حجمه ولونه.
إن معظم تطبيقات الفيجول بيسك تتكون على الأقل من نموذج واحد . وفي مراحل متقدمة من الممكن استخدام أكثر من نموذج
في البرنامج الواحد. من الممكن الانتقال للنموذج المطلوب باستخدام طرق (Method) خاصة مثل طريقة الإظهار (Show)
لإظهار نموذج معين على الشاشة , وطريق الإخفاء (Hide ) لإخفاء النموذج من الشاشة.
لإضافة نموذج جديد للتطبيق باختيار العنوان (Add Form) من قائمة Project .

الشكل(1-7)

1-7 الأدوات الداخلية(عناصر التحكم) Tool Box
وهي عناصر هامة ومفيدة جدا وتستخدم في تكوين المشاريع . كما يمكن إضافة عناصر تحكم إضافية إلى صندوق الأدوات من عناصر التحكم الإضافية ActiveX control . يظهر الشكل التالي عناصر التحكم الأساسية كما انه يمكن التعرف على أسمائها من خلال نص المساعدة السريع tip text الذي يظهره ال v.basic عند وضع مؤشر الفارة فوق أحد عناصر التحكم


إضافة الأدوات الداخلية(عنصر تحكم )إلى النموذج ( form )
يضاف عنصر التحكم إلى الواجهة الـ form وذلك عن طريق
النقر المزدوج على أيقونة العنصر الذي نريد أضافته وسيقوم ال v. basic بوضع العنصر في منتصف النموذج .
نختار العنصر الذي نريد أضافته إلى النموذج من صندوق الأدوات وذلك بالنقر مرة واحدة على أيقونة العنصر ثم ننقر فوق النموذج في المكان الذي نريد وضع عنصر التحكم فيه ونقر بالزر الأيسر ونسحب الفارة بحيث يأخذ العنصر الحجم الذي نريده .

المؤشر pointer

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

التسمية label

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

صندوق النص text box

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

ومن أهم الخصائص هي text و max length (اكبر عدد من الحروف ) و multi line ( الكتابة في أكثر من سطر )إذا كانت الخاصية true. أما إذا كانت الخاصية false فلا تستطيع كتابة أكثر من سطر واحدalignment (المحاذاة ) و locked قفل صندوق النص وال password char . تستخدم لوضع كلمة السر على شكل رموز

الإطار frame

يستخدم الإطار لوضع مجموعة من العناصر داخله ومن أهم خصائص الإطار هي خاصية العنوان caption التي تكون عادة عنوان مجموعة العناصر الموجودة داخل الإطار .
لكي تجعل مجموعة العناصر داخل إطار واحد . يجب إنشاء الإطار أولا ثم وضع العناصر داخله.

زر الأمر command

يستخدم زر الأمر بشكل أساسي لتنفيذ تعليمات برمجية عند النقر عليه . ومن أهم خصائص زر الأمر :
Caption : إعطاء عنوان لزر الأمر . ولوضع تسطير تحت حرف معين من العنوان نسبقه بالحرف & مثلا لوضع خط تحت الحرف o لكلمة ok يكتب في حقل الـ caption ok &. فيصبح العنوان ok

Default : عندما تكون قيمة هذه الخاصية true فان الضغط على المفتاح enter من لوحة المفاتيح يماثل النقر على الزر بالفارة

Cancel : إذا كانت هذه الخاصية true يتم ربط زر الأمر بالمفتاح escape من لوحة المفاتيح .

صندوق التحقق check box

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


Alignment تحدد هذه الخاصية فيما إذا كان العنوان يظهر على يمين الصندوق 1-right 2-left

Value تأخذ هذه الخاصية إحدى القيم التالية :

o - إذا كان الصندوق غير محدد
إذا كان الصندوق محدد

إذا كان الصندوق رمادي

زر الأمر option button
يستخدم هذا العنصر في التطبيقات بشكل مجموعة داخل إطار تتألف من زرين أو أكثر ويمكن للمستخدم اختيار خيار واحد فقط من الخيارات المعروضة أمامه . أي لا يمكن أن يكون إلا عنصر واحد من المجموعة محددا.
فعند النقر على عنصر معين سوف يتم تحديده وعندها سوف يلغي التحديد عن العنصر المحدد سابقا .
أهم الخصائص
Caption : العنوان الذي يظهر بجانب الصندوق
Alignment : تحدد موقع العنوان إما على يمين الزر أو يسار الزر
0 – Left 1 - Right
Value : false إذا كان الزر غير محدد
True إذا كان الزر محدد

list box ( صندوق القائمة )

يقوم هذا العنصر بعرض قائمة من الخيارات ( العناصر ITEMS) أمام المستخدم . يمكن فرز قائمة العناصر بجعل خاصية sorted تساوي قيمة true . كما يمكن تعديل صندوق القائمة ليأخذ شكل متعدد الأعمدة وذلك باختيار عدد الأعمدة التي تريدها من الخاصية columns
أهم خصائص صندوق القائمة

List count عدد عناصر القائمة

List index رقم العنصر المحدد(يبدأ ترقيم العناصر من الصفر)
List (n) قيمة العنصر الذي رقمه n
Text العنصر المحدد من القائمة
Sorted مرتب true أو لا false
New index رقم آخر عنصر أضيف للقائمة
Top index تحدد رقم العنصر الموجود في أعلى القائمة

صندوق القائمة المنسدلة combo box

وهي الأداة التي تجمع بين مزايا صندوق النص وصندوق القائمة . حيث يمكن الكتابة فيها ، أو أن نختار عنصر من عناصرها
واهم خاصية فيها هي style حيث تحتوي على: : 0-dropdown combo إما أن يأخذ الرقم صفر (يمكن الكتابة في صندوق النص واختيار عنصر من القائمة )
أو أن يأخذ الرقم 1 (1- simple combo ) يمكن الكتابة في صندوق النص واختيار عنصر من القائمة . لكن تكون القائمة دائما ظاهرة

أو أن يأخذ الرقم 2 (2-dropdown combo ) لا يمكن سوى اختيار عنصر من القائمة .

صندوق الصورة picture box

يمكن وضع صورة في العنصر عن طريق خاصية ال picture مع ملاحظة إن هذا العنصر يقبل مختلف أنواع الصور (bmp, dib, emf, ico).

أشرطة الانزلاق scroll bar

يتضمن نوعين من الأشرطة
ا- h scroll bar شريط انزلاق أفقي
2-v scroll bar شريط انزلاق عمودي
يعمل على استعراض القيم المحصورة بين أدنى حد و أعلى حد ويتم الاستعراض بالنقر على الأسهم في طرفي الشريط .
أو بسحب القطعة المتحركة للشريط أو بالنقر في شريط الانزلاق
أهم الخصائص لشريط الانزلاق :
Min الحد الأدنى لقيمة شريط الانزلاق .
Max الحد الأعلى لقيمة شريط الانزلاق .
Value القيمة الحالية لشريط الانزلاق .
Small changeمقدار التغير في قيمة الـ value عند النقر على أسهم الانزلاق .
Large change مقدار التغير في قيمة الـ value عند النقر على شريط الانزلاق.
من أحداث شريط الانزلاق
Change تغير القيمة value بأي طريقة
Scroll تحريك القطعة المتحركة في شريط الانزلاق

صندوق قائمة السواقات drive list box

عبارة عن صندوق قائمة منسدلة combo box تعرض في قائمتها بشكل تلقائي محركات الأقراص الموجودة في قائمتها بشكل تلقائي محركات الأقراص الموجود في حاسب المستخدم

أهم خصائص السواقات :

Drive: اسم السواقة المختارة في قائمة السواقات .
فضلا عن بعض الخصائص الشبيهة بخصائص الـ combo box
أما أهم أحداث هذا العنصر
Change تغير السواقة المختارة من القائمة

صندوق قائمة المجلدات dir list box

تستخدم لعرض شجرة المجلدات للسواقة المحددة بالخاصية drive لهذا العنصر

أهم خصائص هذه القائمة

Path المسار المحدد من القائمة
C:\program files\ v.B
أهم أحداث هذا العنصر
Change تغير المسار داخل القائمة

صندوق قائمة الملفات file list box

تقوم هذه الأداة بعرض قائمة الملفات الموجودة في المجلد المحدد بالخاصية path لهذا العنصر

أهم خصائص صندوق الملفات :

pattern تحدد نوع الملفات المعروضة مثلا *.* تعني عرض جميع الملفات bmp .* تعني عرض جميع الملفات من نوع bmp فقط

المؤقت timer

يستخدم لتحديد الفترة الزمنية لإجراء حدث معين عند التنفيذ لا يظهر عنصر المؤقت على النموذج


أهم خاصية للمؤقت
interval منه نحدد الفترة الزمنية للمؤقت ويقاس الوقت بالملي ثانية أي أن كل ثانية = 1000 ملي ثانية . والحد الأعلى للوقت هو535 65 ملي ثانية
أي ما يعادل دقيقة وجزء من الدقيقة .
Enabled إذا كانت هذه الخاصية false فلا يعمل الوقت

الخط line :

يعمل على رسم خط أو مجموعة خطوط على سطح النموذج
واهم خاصية للخط :
Border color الذي منه نحدد لون الخط .
Border width عرض الخط .

الشكل shape

يستخدم لرسم مجموعة من الأشكال الهندسية على سطح النموذج مثل الدائرة والمستطيل , بيضوي ………... الخ .
واهم خاصية في الشكل :
Shape منه نحدد شكل الرسم وحسب الأرقام التالية:
شكل مستطيل 2- شكل مربع 3- شكل بيضوي 4- شكل دائري
Border color منه نحدد لون الحد للشكل
Back color منه نحدد لون داخل الشكل
Border width منه نحدد سمك الحد للشكل

الكائن OLE

مختصر كلمة object linking and embedding وتستخدم لأدراج كائنات خارجية في التطبيق مثل أدراج جدول excel أو برنامج للراسم أو أي تسجيل صوتي .
عند وضع OLE على النموذج تظهر الواجهة التالية كما في الشكل (1-8) :-

الشكل (1-8)

إما أن تختار create new لإنشاء كائن جديد
أو تختار create from file لفتح برنامج مخزون مسبقا .
خصائص OLE
Display as icon يعمل على إظهار الأيقونة للبرنامج الذي فتح عن طريق OLE مثل أيقونة الرسام أو الـ video . أو
البيانات data
يستخدم هذا العنصر للتعامل مع جدول في قاعدة البيانات .