محاضرة تصميم واجهة المستخدم (User Interface) في VB.NET

## المحاضرة الثانية ### تصميم واجهة المستخدم User Interface - في هذا الدرس تتعرف على كيفية تصميم النافذة الرئيسية للبرنامج و ذلك من خلال صندوق الأدوات وضبط خصائص الأدوات . - بعد الانتهاء من هذا الدرس يجب أن تكون ملما بالموضوعات التالية: - صندوق الأدوات Toolbox وأهم الأدوات الموجودة فيه -...

## المحاضرة الثانية ### تصميم واجهة المستخدم User Interface - في هذا الدرس تتعرف على كيفية تصميم النافذة الرئيسية للبرنامج و ذلك من خلال صندوق الأدوات وضبط خصائص الأدوات . - بعد الانتهاء من هذا الدرس يجب أن تكون ملما بالموضوعات التالية: - صندوق الأدوات Toolbox وأهم الأدوات الموجودة فيه - كيفية وضع الأدوات على نافذة النموذج - تحريك الأدوات وتغيير حجمها - ضبط وتغيير خصائص الأدوات - بعض الخصائص المشتركة بين الأدوات - ضبط وتغيير الخصائص أثناء التشغيل ## صندوق الأدوات Toolbox - VB.NET يوفر مجموعة من أدوت التحكم من خلال صندوق (مربع) الأدوات، و يجب عليك اختيار الأداة طبقا للوظيفة المطلوبة منها، فمثلا إذا أردت توفير خانات يقوم مستخدم البرنامج بإدخال البيانات فيها فيجب استخدام أداة مربع النص Textbox). ## أدوات Tools أو عناصر التحكم Controls ### أهم الأدوات شائعة الاستخدام | اسم الالداة | الرمز | الوظيفة | |---|---|---| | Label | A | أداة العنوان لعرض النصوص الثابتة، والتي لا يمكن تعديلها أثناء تنفيذ البرنامج، مثل العناوين والنصوص التوضيحية. | | LinkLabel | A | مثل الأداة السابقة إلا أنها تستخدم لإظهار العناوين كارتباطات تشعبية مثل التي تراها في صفحات الويب. | | Button | ab | ينقر عليه المستخدم لتنفيذ أمر أو أوامر معينة، وبالطبع تكون أنت المسئول عن كتابة هذه الأوامر. | | Textbox | 10 | يستخدم لعرض نص يمكن تعديله، أو ليقوم مستخدم البرنامج بإدخال بيانات فيه . | | RichTextBox | 10 | يستخدم مثل الأداة Textbox إلا أنه يوفر العديد من المزايا والخصائص الإضافية والمتعلقة بالتعامل مع النصوص. | | Checkbox | | يسمح بالاختيار بين حالتي نعم / لا . | | RadioButton | | العرض مجموعة اختيارات لاختيار واحد منها فقط. | | GroupBox | | يعمل كحاوية لمجموعة من الأدوات الأخرى، بحيث يمكن التعامل معها وكأنها مجموعة واحدة. | | PictureBox | | لعرض الصور أو كوعاء للأدوات الأخرى. | | ListBox | | العرض قائمة منسدلة بعدة اختيارات وعلى المستخدم اختيار إحداها . | | ComboBox | | يسمح للمستخدم باختيار قيمة من قائمة منسدلة بها قيم محددة سلفا، أو إدخال قيمة غير موجودة في القائمة. | | Timer | | يتيح القيام بمهام معينة بناءا علي وقت معين يتم تحديده. | | HscrollBar | | شريط تمرير أفقى يسمح باختيار قيمة بناءا علي موضع الزر علي الشريط. | ## نافذة البرنامج Form - لابد من وجود وعاء يضم الأدوات المختلفة، وهذا الوعاء يسمى نافذة البرنامج أو (النموذج Form)، أى أن الأدوات تكون فوق النموذج. - عند تصميم برنامج جديد يظهر به نموذج فارغ تلقائيا، ولكن يمكن أن يحتوى البرنامج على أكثر من نموذج تتولى إضافتها عند الحاجة. - يمكنك إضافة نموذج جديد بفتح قائمة (Project)، واختر منها الأمر (Add Windows Form) ## إدراج الأدوات والتعامل معها ### وضع عنصر تحكم على النموذج - يمكنك وضع أي عنصر تحكم على النموذج باستخدام أحد هاتين الطريقتين: - قم بالنقر المزدوج علي الأداة المطلوبة من صندوق الأدوات، فتظهر في الركن الأيسر العلوي من النافذة، ويمكنك تعديل موضعها على النافذة في أي وقت لاحق. - قم بنقر الأداة المطلوبة من صندوق الأدوات، ثم تحرك إلى النموذج وقم بالنقر بالماوس حيث تريد وضعها علي النافذة Form ، وقم برسم الأداة كما تريد بالحجم المطلوب. ### تحديد عنصر أو عناصر تحكم - تحتاج إلى تحديد عنصر التحكم بغرض التعامل معه لتغيير حجمه أو حذفه أو تغيير خصائصه، ويتم تحديده بنقره نقرة واحدة فيظهر حوله مجموعة من المقابض. - إذا كان لديك عدة عناصر تحكم فيمكن تحديدها معا، وذلك بالتأكد من تنشيط Pointer من مربع الأدوات ثم تحرك إلى أى نقطة حول رمز (التحديد) هذه العناصر، واضغط زر الماوس وتحرك وكأنك ترسم مربع حولها، ويظهر بالفعل مربع وهمى أثناء الحركة، وعندما يشمل هذا المربع العناصر المطلوب تحديدها قم برفع إصبعك من على الماوس فيتم تحديدها. - يمكنك التحديد عن طريق نقر أول عنصر مطلوب تحديده، ثم قم بضغط مفتاح CTRL من لوحة المفاتيح واستمر في الضغط عليه ثم قم بنقر كل عنصر ترغب في تحديده بعد ذلك. - حتى النافذة Form نفسها يمكن تحديدها بالنقر عليها فتظهر حولها مقابض التحديد. ### تحريك عناصر التحكم وتغيير حجمها - لتغيير حجم عنصر تحكم قم بالنقر عليه لتحديده، ثم قم بسحب أي من المقابض الموجوده حوله، قم بدفع المقابض في اتجاه العنصر لتصغير حجمه، أو قم بسحبها للخارج لتكبير حجمه. - لتحريك عنصر قم بنقره مع الاستمرار في الضغط على زر الماوس الأيسر ثم قم بسحبه، وعندما تصل للمكان الذى تريد وضعه فيه قم برفع إصبعك من على زر ن الماوس، ويمكنك تحديد أكثر من عنصر وتحريكها معا. ### حذف عنصر تحكم - لحذف عنصر تحكم من فوق النافذة قم بتحديده اولا بالنقر عليه بزر الماوس ثم قم بضغط مفتاح Delete من لوحة المفاتيح، أو قم بنقره بزر الماوس الأيمن فتظهر قائمة مختصرة اختر منها (حذف Delete). ### تمرين - قم بوضع أداتي Label وبجوارها أداتي Textbox وأسفل منهما زري أمر Button كما هو موضح بالشكل التالي. - حاول تحريك أداتي Label لتكون كل واحدة بجوار أداة Textbox. - حاول حذف أحد الأزرار Button التي تم وضعها . ## Properties الخصائص - كل أداة من الأدوات وحتى نافذة البرنامج نفسها (Form) لها مجموعة من الخصائص والخصائص هي مجموعة اختيارات تستخدم للتحكم في مظهر وسلوك الكائن. - فمثلا من الخصائص التي تستخدم للتحكم فى مظهر أداة مثل (TextBox) الخاصية الخط Font لتحديد نوع وحجم الخط، والخاصية اللون ForeColor للتحكم في لون النص الموجود بالمربع . - ومن الخصائص التي تتحكم في سلوك أداة مثل (TextBox) ايضا الخاصية Multiline بمعنى متعدد الأسطر، وهذه الخاصية للتحكم هل مربع النص عند الكتابة يقبل أكثر من سطر أم لا. ### ضبط أو تغيير الخصائص - عموما عناصر التحكم أو حتى النموذج نفسه لها قيم افتراضية للخصائص فمثلا عندما تضع TextBox على النافذة يكون لون النص به اسود وحجم الخط (۸) ولكن بالطبع يمكنك تغيير هذه الخصائص إلى القيم التي تريدها، ويمكن ضبط الخصائص بإحدى طريقتين. - ضبط الخصائص أثناء تصميم البرنامج باستخدام نافذة الخصائص. - ضبط الخصائص اثناء تشغيل البرنامج باستخدام نافذة الكود (الأوامر). ### أولا: ضبط الخصائص أثناء تصميم البرنامج: - إذا لم تظهر نافذة الخصائص امامك فقم بضغط مفتاح F4 من لوحة المفاتيح، أو )Properties Window( واختر منها )View( قم بفتح قائمة - تذكر انه لضبط خصائص أي كائن يجب تحديد هذا الكائن أولا، ثم انتقل إلى مربع الخصائص. - في التمرين السابق قم بتحديد أى أداة من الأدوات التي تم وضعها على الـ Form وليكن أحد الأزرار الموجودة، ثم انتقل إلى مربع الخصائص حتى نتعرف على مكوناته وكيفية التعامل معه كما يبين الشكل التالي. ### قائمة الكائنات - كما يبين الشكل تتكون نافذة الخصائص من العناصر التالية: - قائمة الكائنات هى مربع يظهر به اسم ونوع الكائن الذى تم تحديده، وإذا قمت بنقر زر السهم الخاص بهذا المربع فسوف تظهر قائمة بكل الأدوات الموجودة على النافذة Form، وكذلك اسم هذه النافذة. - لاحظ أن هذا المربع يبين اسم الكائن، ونوعه، والنوع هو آخر كلمة في المربع حيث أن ما يسبقها هى الكائنات التي تتبعها الكائن المحدد كما سنعرف لاحقا. ### شريط العرض: - يمكن من خلاله عرض عرض الخصائص مرتبة حسب الاسم. - عرض الخصائص في ترتيب أبجدي حسب الاسم - عرضها في مجموعات، حيث كل مجموعة خصائص متشابهة يتم وضعها في مجموعة واحدة. ### قائمة الخصائص: - تعرض قائمة بالخصائص المتاحة للكائن المحدد، وستجد بعض الخصائص يسارها علامة (+) وهذا يعنى أن هذه مجموعة خصائص، وبالنقر على هذه العلامة تظهر أسفلها قائمة الخصائص التابعة لها، وتتحول علامة (+) إلى علامة (-)، وبالنقر عليها تختفى قائمة الخصائص التابعة لهذه المجموعة. ### قيمة الخاصية : - في هذا الجانب تظهر القيمة المخصصة لكل خاصية بجوارها، وبالطبع يمكنك تعديل هذه القيمة، وغالبا ما ستجد القيم المتاح تعيينها لكل خاصية تظهر في مربع قائمة، عند فتحه تظهر True and هذه القيم ويمكنك اختيار إحداها. . ### شرح الخاصية : - إذا قمت بالنقر على أى خاصية من مربع الخصائص فسوف يظهر في هذا الجزء شرح عن استخدام هذه الخاصية. ### تمرين - في التمرين السابق تعلمنا كيفية وضع الأدوات على نافذة البرنامج، ولكن انظر مرة | أخرى إلى شكل النافذة كما يبين الشكل التالى ستجد أن الأدوات التي تم وضعها عليها لا تعطي للمستخدم معني محدد لاستخدامها، ولذلك لا بد من تعديل شكلها و خصائصها لتعطى بيانا واضحا عن استخدامها . ### الخصائص المشتركة - كما ذكرنا كل أداة لها مجموعة من الخصائص، وهناك خصائص تجدها منفردة أى تجدها في بعض الأدوات ولا تجدها في بعضها، وهناك خصائص مشتركة أى ستجد أن هذه الخاصية موجودة فى معظم الأدوات، ونحن هنا سنستعرض بإذن الله تعالي لبعض الخصائص المشتركة والتي يكثر استخدامها. #### خاصية النص Text - إذا كنت تعرض مربع الخصائص وفقا للترتيب الأبجدى فابحث عن هذه الخاصية وفقا للترتيب، أما إذا كنت تعرض الخصائص فى مجموعات فستجد هذه الخاصية في Appearance المجموعة - تستخدم هذه الخاصية كما تعلمنا لتغيير عنوان الأداة أو النموذج أو لتحديد النص الذي يكون في العنصر. #### خصائص الألوان - تستخدم الخاصية (لون الأمامية (ForeColor) لتحديد لون الكتابة، أو بمعنى آخر لون النص الموجود في العنصر ، أما الخاصية لون الخلفية BackColor فتستخدم لتعيين لون الأداة نفسها. - إذا كنت تعرض الخصائص كمجموعات فستجد هاتين الخاصيتين في المجموعة .Appearance - عند استخدام أى من الخاصيتين فستجد أن المربع الذي يظهر لاختيار اللون منه مقسم إلى ثلاثة تبويبات التبويب (System) للاختيار من الألوان المستخدمة داخل النظام التبويب (Web) للاختيار من الألوان المستخدمة في صفحات الويب، أو يمكنك إنشاء ألوان مخصصة من خلال التبويب (Custom). #### BorderStyle خصية نمط الحد - تستخدم هذه الخاصية لإخفاء حدود الأدوات أو التحكم في شكلها، حيث توفر هذه الخاصية الاختيارات التالية: - None بلا حدود. - Fixedsingle يظهر حدود ثابتة للشكل. - Fixed3d يظهر حدود ثابتة ثلاثية الأبعاد. #### خاصية الظهور Visible - في بعض الأحيان تحتاج إلى وضع أدوات على نافذة البرنامج، ولكن هذه الأدوات تكون غير مرئية للمستخدم، أو قد تحتاج إلى إخفاء أداة وإعادة إظهارها عند اللزوم، ويتم ذلك باستخدام الخاصية Visible ، حيث أن قيم هذه الخاصية True بمعنى أن العنصر مرنى، أما إذا قمت بتغييرها على القيمة False فسوف يختفى العنصر. - لكن لاحظ أن تأثير هذه الخاصية لا يظهر إلا بعد تنفيذ البرنامج، وليس لها أي تأثير واضح أثناء التصميم. #### . خاصية التمكين Enabled - وأنت تعمل في برامج Windows المختلفة الم يظهر لك يوما زرا خافتا (ذو لون باهت) في إحدى النوافذ، ولا يستجيب لأي نقر منك عليه؟! - مثل هذه الأزرار يقال عنها أنها غير ممكنه، أى أنها تظهر أمامك ولكن غير متاح استخدامها. - يمكنك أيضا في البرامج التى تقوم بتصميمها بالتحكم هل الأداة ممكنة أى متاح استخدامها أم لا، وذلك من خلال الخاصية Enabled. - القيمة الافتراضية لهذه الخاصية هي True بمعنى أن الأداة متاح استخدامها (ممكنة) أما إذا أردت جعل أداة غير متاحة للاستخدام ( غير ممكنة فاجعل قيمة هذه الخاصية .False - هذه الخاصية لا تظهر نتيجتها إلا بعد تنفيذ البرنامج، وليس أثناء التصميم. #### خاصية الاسم Name - عندما تقوم بكتابة الأكواد في نافذة البرمجة، ستجد أنك ستقوم بالتعامل مع الأدوات وحتى النماذج Forms التي يحتويها البرنامج، ولذا يجب أن يكون لكل كائن من هذه الكائنات اسم حتى يتم التعامل معه بهذا الاسم. - يتم ذلك من خلال الخاصية (Name)، وإذا كانت نافذة الخصائص مرتبة في صورة مجموعات فسوف تجد هذه الخاصية في المجموعة (Design). - كل أداة لها اسم افتراضي هو الاسم الذي يظهر في صندوق الأدوات، فمثلا Button هو الاسم الذى يطلق على الزر الذى تقوم بوضعه على النموذج، ومربع النص له اسم Textbox، ولكن نظرا لأن الأداة قد تكون على النموذج عدة مرات فإنه يتم تسمية كل منها باسم يليه رقم مثل ۱، ۳،۲ وهكذا. - فمثلا عند وضع زر امر (Button) علي نافذة النموذج Form يخصص له اسم في الخاصية (Name) هو Button1 ، وإذا قمت بوضع زر آخر سيكون اسمه Button2 وهكذا. ### ثانيا: ضبط الخصائص أثناء تشغيل البرنامج - يمكنك تغيير خصائص الأدوات أثناء التشغيل عند الحاجة إلي ذلك، فمثلا ربما تريد إيقاف إتاحة أداة الخاصية (Enabled) عند حدوث حدث معين. - هناك خصائص لا يظهر نتيجة تغييرها إلا بعد تنفيذ البرنامج مثل خاصية Visible. - هناك أدوات تتغير خصائصها بإدخال البيانات، مثل خاصية Text للأداة TextBox تتغير بتغير قيمة الإدخال، فمثلا في المثال السابق بعد تشغيل البرنامج وإدخال قيمة في (مربع النص (TextBox) فإن الخاصية Text الخاصة به تتغير لتصبح قيمتها هي القيمة التي قمت بإدخالها. - إذا أردت لخاصية معينة أن تتغير أثناء التشغيل فإن ذلك يتم طبعا باستخدام الكود والذي يكون بالطبع ضمن البرنامج ويتم تنفيذه في لحظة معينة أو عند وقوع حدث معين تحدده أنت، والكود يجب أن يشمل اسم الأداة ثم اسم الخاصية يفصل بينهما (.) ثم نضع علامة (-) ثم نحدد القيمة المطلوبة للخاصية. - فمثلا لو لديك مربع نص اسمه TextBox1 ، ونريد تغيير الخاصية Text الخاصة به لتكون بها القيمة "My Computer" ، فسوف يتم كتابة الكود كالتالي: TextBox1.Text = "My Computer" ### تمرين - في النافذة السابقة: قم بتعديل خاصية Name لأداة زر الأمر خروج) إلى btnExit. - من عادات المبرمجين عند تسمية الكائنات استخدام بادنة مكونة من ثلاثة حروف تسبق الاسم لتعبر عن نوع الأداة أو الكائن ، فمثلا عند تسمية (زر الأمر Button) يبدأ بالأحرف btn ، وعند تسمية (مربع) نص Textbox) يبدأ بالأحرف txt وعند تسمية مربع العنوان (label) يبدأ بالأحرف Ibl وهكذا في بقية الأدوات، كما سيأتى بإذن الله عند كتابة أكواد البرمجة.