الـدرس الثـانـي

الـدرس الثـانـي

بيئة التطوير المتكاملة IDE + النماذج Forms + الأدوات Tools + الخصائص Properties

* ملاحظة: سيتم التعامل مع الاختصارات بشكل متكرر ومن أهم هذه الاختصارات مايلي:
VS.Net = Visual Studio.Net
VB.Net = Visual Basic.Net
IDE = Integrated Development Environment

====================================

في درس اليوم عزيزي الدارس  سندخل إلى بيئة التطوير المتكاملة أو ماتسمى بـ Integrated Development Environment  واختصارها هو IDE.

أولا: مـاهي الـ IDE ؟

باختصار, هي الواجهة المرئية Interface  للـ VS.Net حيث يمكنك كتابة برامجك وعمل تطبيقاتك بلغة VB.Net. وتتيح لك الـ IDE العديدِ من الأدواتِ المرئيّةِ، كمصمّم القوائمِ الرئيسية Menu Designer، الذي يساعدكُ على إنشاءِ القوائمِ الرئيسية Menus، وتحديدِ أسمائها وخواصّها، وما يندرج تحتها من أوامر Commands و قوائم فرعية Submenus، كلّ ذلك بطريقةٍ مرئيّة (أي باستخدام الفأرةِ Mouse ولوحةِ المفاتيحِ Keyboard ونافذة الخصائص Properties Window، بدلا من كتابةِ كود لذلك وسنرى ذلك لاحقا)

كما تحتوي بيئةُ التطوير كذلك على الأدواتِ التي تُمكّنك من تصميمِ Design وتنفيذ Execute وتصحيح أخطاء Debug برامجك.

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

صفحة البداية Start Page

عندما تفتح VS.NET لأوّل مرّة، ستطالعك صفحة البداية.

اضغط الاختيار "My Profile"، حتّى يمكنَك أن تحدّد خياراتك الأوّليّة باختيار لغة البرمجةِ التي ستعمل بها.. اختر "مبرمج فيجيوال بيزيك" Visual Basic Developer في مربع "الملمح" Profile، وستجدُ أنَّ المربعينِ الآخرينِ قد تم ملؤهما آليًّا.. يمكنُكَ أن تتركَ القيمَ الافتراضيّةَ في باقي الخاناتِ.

كما يمكنُكَ أن تحدّدَ ما سيحدثُ عن فتحِ VS.NET، عن طريقِ القائمةِ المنسدلة "في بدء التشغيل" At Startup أسفلَ الصفحة.. لديك الخياراتُ التالية:

- اعرض صفحة البداية Show Start Page: (يجب اختـيـاره-- لظروف المـقرر)

حيثُ ستظهرُ صفحةُ البدايةِ في كلِّ مرّةٍ تفتحُ فيها VS.NET.

- افتح آخر مشروع Load Last Loaded Solution:

حينما تجدُ نفسَكَ غارقًا لشهورٍ وأسابيعَ في تطويرِ برنامجٍ ضخم، اخترْ هذا الاختيارَ لفتحِ مشروعِكَ تلقائيًّا كلما فتحت VS.NET.

- اعرض مربع حوار "فتح مشروع" Show Open Project Dialog Box:

في كلِّ مرّةٍ تفتحُ فيها VS.NET، سيظهرُ لك مربع حوار "فتح مشروع"، حيثُ يمكنُكَ أن تختارَ المشروعَ الذي تريدُ فتحَه.

- اعرض مربع حوار "مشروع جديد" :Show New Project Dialog Box

في كلِّ مرّةٍ تفتحُ فيها VS.NET، سيظهرُ لك مربع حوار "مشروع جديد"، حيثُ يمكنُكَ أن تختارَ نوعَ المشروعِ وتحدّد اسمَه.. ننصحُك بتجنّبِ هذا الاختيار.

- اعرض بيئةَ التطوير فارغةً Show Empty Environment:

ستبدأ VS.NET ببيئةٍ فارغة، وعليك أن تفتحَ أو تنشئَ المشاريعَ التي تريدُ التعاملَ معها.

*إنَّ الخيارَ الأكثر شيوعًا هو الخيارُ الأوّل، حيثُ إنَّ صفحةَ البدايةِ تعرضُ آخرَ أربعة مشاريعَ تمَّ فتحُها، بالإضافةِ لزرّي "مشروع جديد" و"فتح مشروع".

ولكي ترى صفحةَ البدايةِ، فإنَّ عليكَ أن تحدّد خيار Get Started

أمّا باقي الخيارات، فهي تُشيرُ لمواقع VS.NET على الإنترنت، حيثُ توجدُ أحدثُ المعلوماتِ عن المنتجات، وكذلك أحدثُ المقالاتِ والوثائق، وحزمُ الخدمات.

وعليك ما بينَ الحينِ والآخرِ، أن تحاولَ تحديثَ نسختِك من VS.NET.

أمّا خيار Web Hosting، فإنّه يقودُ لصفحةٍ تحتوي على معلوماتٍ عن مواقع الخدمات التي تدعّم ASP.NET..

عند اختيارك Get Started كما هو موضح أعلاه, سوف تظهر لك الصفحة التالية:

إنشاء مشروع جديد

في الشكل أعلاه, الخيار رقم (1) يعرض لك آخر أربعة مشاريع تم فتحها ويقابلها تواريخ التعديل الخاصة بكل مشروع. اضغط الآن على زر New Project المعلّم بالرقم 2 في الصورة أعلاه  لفتح مشروع جديد وبالتالي الدخول إلى بيئة التطوير IDE.

الصورة أدناه توضح لك الخطوة الثانية:


كما في الصورة أعلاه, تأكد من أن الخيار Visual Basic Projects مظلل كما في المربع العلوي الأيسر والمسمى Project Types وبعد ذلك قم باختيار Windows Application كما في الدائرة رقم 1.
ومن خانة Name يمكنك وضع الاسم الذي تريد لمشروعك وبإمكانك حفظه في المكان الذي تريد عبر خانة Location.
الآن اضغط على زر OK لكي تشاهد ماهو الـ Windows Application? انظر الصورة أدناه:

في الصورة أعلاه, هذا هو الـ Windows Application . مايهمنا في هذه الصفحة هو ماتم ترقيمه بالأرقام 1-2-3 حيث أن الرقم 1 يشير إلى الـفورم Form الذي بإمكانك أن تضيف إليه ماتريد من أدوات Tools(ستتعرف عليها في الرقم 3) وله العديد من الخصائص properties (ستتعرف عليها في الرقم 2) وهذا الفورم هو ماستشاهده عند تنفيذك للبرنامج. قد تبدوا الأمور معقدة بعض الشيء! أليس كذلك؟ لكن ثق تماما أنها أسهل وأيسر مما تتصور وسوف تتأكد من ذلك بمجرد تنفيذك لمشروعك الأول. وإن كنت من مبرمجي الفيجوال بيزك فأعتقد بأن ماسنشرحه في هذا الدرس ليس بجديد عليك لكن هذا لايعفيك من قراءة الدرس وفهمه بشكل جيد.
الآن اضغط على الأزرار المشار إليها بالأرقام 2 و 3 في الصورة أعلاه وستظهر لك الأشكال التالية:

الرقم 1 يشير إلى صندوق الأدوات ToolBox حيث ستظهر لك قائمة بعشرات الأدوات المختلفة أو ماتسمى بـ(عناصر التحكم), ولن نتطرق إلا إلى مانحتاجه منها في منهج الدورة وهي ثلاث أو أربع أدوات في هذا الدرس ومثلها في درس آخر. أما بقية الأدوات لمن أراد معرفة وظائفها فبكل بساطة عليه بوضع الفأرة عليها والضغط على زر F1. هل تعلم عزيزي الدارس أن العديد من المشاريع الكبيرة والضخمة قد لاتستخدم أكثر من عشر أدوات(عناصر تحكم)! فالعبرة ليست بالعدد.
بالنسبة لقائمة الأدوات فهي تختفي بمجرد إزالة الفأرة من عليها, ولإعادتها بإمكانك الضغط على الزر رقم 1 مرة أخرى أو الضغط على الزر رقم 3 الموضح في الرسم أعلاه فكلاهما سواسية.
الرقم 2 يشير إلى مربع الخصائص Properties والذي يحتوي على عشرات الخصائص المتعلقة بكل أداة. وأكثر مايهمنا من الخصائص هما
(Name) و Text حيث أن Name هو اسم الأداة الذي يتم التعامل معه داخل البرنامج(سيتضح لاحقا بشكل أكبر) أما Text فهو النص المكتوب على الأداة والذي سيتم عرضه في التنفيذ.

عزيزي الدارس, لن نتطرق إلى جميع الأدوات المتاحة لكثرة عددها ولأنها تحتاج إلى وقت طويل للغاية لشرحها أجمع, لكننا سنشرح أهم ثلاث أدوات و أكثرها شيوعا واستخداما.
أما أهم الأدوات (عناصر التحكم) التي سنتعامل معها هي:
Label و Button  و Text Box
قم بالضغط على كل واحدة من الأدوات الثلاث على حده, ومن ثم سحبها وإفلاتها Drag & Drop في الفورم Form  وضعها في المكان الذي تريد وبإمكانك أيضا النقر مرتين Double click على الأداة التي تريد.
 والصورة التالية ستوضح لك بشكل أكبر:
أعتقد بأن الشكل أعلاه أصبح مألوفا ومفهوما لديك. فالـ Label عبارة عن عنوان يكتب في أي مكان من الفورم بحسب الحاجة أما
 الـ TextBox فهي مساحة تسمح لك بإدخال وكتابة ماتريد من نصوص, أما الـزر Button فأوضح من أن يشرح.
من مربع الخصائص أنصحك بتغيير الاسم الموجود في خانة (Name) إلى اسم أسهل ويمكنك تذكره فيما بعد بكل يسر وسهولة. فبالضغط مرة واحدة بزر الفأرة الأيسر على أية أداة يمكنك مشاهدة مربع الخصائص الخاص بها والتحكم بها كما تريد. يمكنك أيضا التحكم بألوان النصوص والخلفيات ونوعية الخط وحجمه..الخ وكل ذلك من خلال مربع الخصائص.
لقد قمتُ بإجراء بعض التعديلات على الشكل أعلاه, بإمكانك القيام بها بكل يسر وسهولة, شاهد الصورة أدناه وحاول التطبيق.

الفورم بعد التنفيذ:



بإمكانك تنفيذ الفورم أعلاه عبر خطوتين هما:
أولا: من قائمة Build اختر Build Solution لبناء برنامجك وتفحص الأخطاء وتأكد بأن برنامجك خالٍ من الأخطاء كما في الشكل أدناه والذي سيظهر لك في أسفل الصفحة:
الخطوة الثانية تتم بالذهاب إلى قائمة Debug واختيار الأمر Start أو بالضغط مباشرة على زر F5.
-بإمكانك اختصارا الضغط مباشرة على زر F5 وسيتم عمل debug تلقائيا وإظهار النتيجة.
بالطبع هذه الأدوات غير مرتبطة بأية أحداث, أي عند الضغط على زر Button1 الموجود في شاشة التنفيذ فلن تحصل على أية نتيجة! السبب بكل بساطة لأنك لم تقم بربط الأداة بحدث معين. في الدروس القادمة بمشيئة الله سندخل إلى مايسمى بالـ Class Library وستعرف كيف تتعامل مع الأكواد  البرمجية,  وربط الأدوات بماتريد من أحداث وعمليات بحسب حاجتك إليها.

* انتهى الدرس الثاني *