محاضرات تصميم واجهة المستخدم 018-034 PDF

## المحاضرة الثانية **تصميم واجهة المستخدم** ### أسئلة المحاضرة الثانية **السؤال الأول :** أي الجمل الآتية صحيح وأيها خطأ : - نافذة النموذج Form هي الوعاء الذي يوضع فيه باقي أدوات البرنامج. - لا يظهر أثر الخاصية Enabled إلا بعد تنفيذ البرنامج. - لا يمكن تغيير خصائص الأدوات أثناء تشغيل البرنامج...

## المحاضرة الثانية **تصميم واجهة المستخدم** ### أسئلة المحاضرة الثانية **السؤال الأول :** أي الجمل الآتية صحيح وأيها خطأ : - نافذة النموذج Form هي الوعاء الذي يوضع فيه باقي أدوات البرنامج. - لا يظهر أثر الخاصية Enabled إلا بعد تنفيذ البرنامج. - لا يمكن تغيير خصائص الأدوات أثناء تشغيل البرنامج. - يجب تغيير خاصية Name لكل الأدوات حتى يعمل البرنامج بشكل جيد. - تستخدم الخاصية BackColor لتحديد لون النص الخاص بالأداة. **السؤال الثاني :** قم بوضع الأدوات علي نافذة النموذج كما تبدو في الشكل الأول ثم قم بتعديل خصائص الأدوات لتبدو كما في الشكل الثاني. - **الشكل الأول** - مستطيل به نص "العدد الأول" و "العدد الثاني" و "العدد الثالث" و "حساب" و "خروج" - **الشكل الثاني** - مستطيل به نص "العدد الأول" و "العدد الثاني" و "العدد الثالث" و "حساب" و "خروج" ثم اجعل لون الخلفية لأدوات العناوين باللون الأحمر ولون خلفية أدوات الكتابة باللون الأخضر. ## المحاضرة الثالثة **الأحداث Events** في هذا الدرس تتعرض إلى معنى الحدث Events وكيف تتم الاستجابة له من الأدوات، وعلاقة الأحداث بالتعليمات Codes بعد الانتهاء من هذا الدرس يجب أن تكون ملما بالموضوعات التالية - ما هو الحدث؟. - كيف تتم الاستجابة للحدث. - كيفية التعامل مع نافذة البرمجة . - أهم أحداث الماوس، واهم أحداث لوحة المفاتيح. - الحدث الافتراضي، وكيفية تغيير الحدث المطلوب كتابة التعليمات له . - كيفية كتابة التعليمات Codes ## المحاضرة الثالثة **Events الأحداث** ### ما هو الحدث Event)؟ بظهور نظام التشغيل Windows ظهر مفهوما جديدا في عالم البرمجة وهو وجود مجموعة من الأحداث Events يمكن حدوثها لأدوات البرنامج. - هناك أحداث يقوم بها المستخدم مستخدما الماوس مثل حدث (النقر Click) نقرة واحدة، أو الحدث (النقر المزدوج Double Click)، وهناك أيضا أحداث متعلقة بالضغط علي مفاتيح لوحة المفاتيح KEYPRESS. - كما انه هناك احداث لا تصدر عن المستخدم نفسه مثل حدث المؤقت Timer)، وهو حدث يقع كل فترة زمنية دون تدخل المستخدم. - كل أداة أو كائن في البرنامج لها مجموعة من الأحداث وليس حدث واحد، فمثلا مربع النص (Textbox) له العديد من الأحداث مثل Changed او Click او Keypress أو غيرها ....... بناء على ذلك فإن البرنامج هو مجموعات من الأوامر والتعليمات كل مجموعة يتم تنفيذها عند وقوع الحدث المرتبط بها. ### كيف تتم الاستجابة للحدث : مما سبق يفهم أن الحدث يتكون من عنصرين: الأول هو وقوع الحدث نفسه كالنقر بزر الماوس مثلا، والثاني هي الأداة أو الكائن عموما الذي يقع عليه الحدث مثل (زر الأمر (Button) أو (مربع النص Textbox). لذا فإن كل كائن في البرنامج له مجموعة من البرامج الصغيرة يطلق على كل منها اسم (إجراء Procedure)، وكل إجراء مرتبط بحدث معين بمعنى أن الأوامر والتعليمات الموجودة داخل الإجراء لا يتم تنفيذها إلا بوقوع الحدث. بالطبع كل إجراء يكون فارغ اى ليس به اى تعليمات وأوامر حيث تقوم أنت بكتابة التعليمات (Code) المطلوب تنفيذها عند وقوع الحدث. لفتح الإجراء الخاص بأداة أو كائن معين قم بالنقر المزدوج بالماوس علي الأداة أو الكائن المطلوب كتابة تعليمات له. **تمرين** - قم بوضع زر الأمر Button على نافذة البرنامج. - قم بالنقر المزدوج على الزر Button) لتظهر لك نافذة البرمجة كما يبين الشكل التالي: ``` Public Class Form1 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click التعليمات المطلوب تنفيذها عند وقوع الحدث Click End Sub End Class ``` - أول سطر (Public Class Form1) ، وآخر سطر (End Class) هما أمرين ثابتين يقع بينهما كافة الإجراءات الموجودة فى البرنامج الذي تقوم بتطويره. - السطر الذي يبدأ بكلمة (Private Sub) هو بداية الإجراء الذى تتعامل معه، ولكنه يضم العديد من الكلمات دعنا نوضحها. - Private Sub Button1_Click - هذا اسم الإجراء حيث أن كل إجراء له اسم، كلمة Sub كلمة Private تبين نوع الوصول للإجراء بمعنى أي أجزاء البرنامج يمكنها استخدام هذا الإجراء. - Button1 هو اسم الأداة متبوعا باسم الحدث ويفصل بينهما ()، وإذا قمت بتغيير اسم الأداة باستخدام خاصية Name فالطبع سوف يتغير اسم الإجراء. وسنتعرف على ذلك لاحقا - أما الجزء المحصور بين ( ) والذى يلى اسم الإجراء، فهو جزء (المعاملات Parameters) وهي مجموعة من الحقول يخزن بها بيانات يستقبلها الإجراء، ويختلف عدد هذه المعاملات من إجراء لآخر، وهذا الإجراء به معاملين، الأول اسمه (Sender) وهو (كائن Object) يخزن الأداة المسببة للحدث، والثانى اسمه (e) من النوع EventArgs وهو يجمع معاملات الحدث، وسنتعرف على ذلك بالتفصيل لاحقا. ### الكلمة Handles : بمعنى يجيب" وهى التى تجعل الإجراء يستجيب لحدث ما، ويليها اسم الأداة والحدث يفصل بينهما (۰) ، حيث يمكن جعل أوامر الإجراء تنفذ كاستجابة لعدة أحداث، وهنا يتم وضع الأدوات وأحداثها بعد كلمة Handles، ولكن بشكل افتراضي يقوم VB.NET بوضع اسم الأداة التى تم النقر المزدوج عليها فقط. ### كلمة End Sub تعنى نهاية الإجراء، وهذا يعنى أن التعليمات والأوامر المطلوبة يتم كتابتها بين السطرين )End Sub) (Private Sub ...... ## المحاضرة الثالثة **Events الأحداث** ### مربع الأحداث - **مربع الأدوات** : - يعرض هذا المربع أسماء الكائنات الموجودة علي النموذج، بما فيها اسم النموذج نفسه وتظهر الكائنات بالأسماء التي حددتها لها في الخاصية Name. - إذا كان لديك أكثر من أداة علي نافذة النموذج، يمكنك فتح المربع لعرض كل الأدوات واختيار الأداة التي تريد كتابة التعليمات لها . - **مربع الأحداث** - يعرض هذا المربع الأحداث الممكنة للأداة الحالية النشطة التى يظهر اسمها في مربع الأدوات)، ومحتويات هذا المربع تختلف حسب أحداث كل أداة. - إذا كنت تريد تغيير الحدث المطلوب كتابة تعليمات له، قم بفتح هذا المربع واختر الحدث المطلوب، فيتم فتح إجراء جديد لهذا الحدث. - هذا يعنى أنه إذا قمت بالنقر المزدوج على أداة وتم فتح الإجراء الخاص بالحدث الافتراضي فيمكنك تغيير الحدث من خلال مربع الأحداث. ### التنقل بين نافذة الكود ونافذة النموذج ستلاحظ عند فتح نافذة الكود يظهر لها تبويب خاص، وإذا أردت الانتقال مرة أخرى إلى نافذة النموذج تصميم البرنامج ) فقم بنقر التبويب الخاص به، ويمكن إغلاق اى نافذة بالنقر عليها بزر الماوس الأيمن ومن القائمة التي تظهر اختر الأمر (Close). ## المحاضرة الثالثة **Events الأحداث** ### الأحداث المشتركة كما يوجد خصائص مشتركة ( متواجدة) بين معظم الأدوات، هناك أحداث مشتركة أيضا تستجيب لها معظم الأدوات، في حين أنه توجد أحداث خاصة لبعض الأدوات، وإليك بعض هذه الأحداث المشتركة: #### أولا: أحداث ناتجة عن حركة الماوس : |اسم الحدث | معناه | وقت حدوثه |زر الماوس | |---|---|---|---| |Click | النقر مرة واحدة | يقع عند النقر فوق الأداة أو الكائن. | - | |DoubleClick| النقر المزدوج | يقع عند النقر نقرا مزدوجا فوق الأداة. | - | |MouseMove| حركة الماوس | يقع عند تحرك الماوس فوق الأداة. | - | |MouseDown| يقع أثناء ضغط زر الماوس وقبل أن ترفع يدك عن الماوس. | زر الماوس لأسفل | - | |MouseUp| يقع بعد عملية النقر. | زر الماوس الأعلي | - | #### ثانيا: أحداث السحب والإلقاء: | اسم الحدث | معناه | وقت حدوثه | |---|---|---| |Dragover | سحب فوق | يقع عندما يمر المستخدم فوق أداة وهو يسحب أداة أخرى بالماوس. | |DragDrop| إلقاء | يقع عندما يقوم المستخدم بوضع الأداة المسحوبة بالماوس في المكان المطلوب. | #### ثالثا: أحداث ناتجة عن لوحة المفاتيح: |اسم الحدث | معناه | وقت حدوثه | |---|---|---| |KeyPress | ضغط حرف | يقع عندما يقوم المستخدم بضغط حرف من لوحة المفاتيح. | |KeyDown | المفتاح لأسفل | يقع أثناء ضغط المفتاح الأسفل وقبل تحريره | |KeyUp | المفتاح لأعلي | يقع بعد ضغط المفتاح. | ### كيفية كتابة التعليمات Code - التعليمات التي يتم كتابتها في الإجراء الخاص بكل أداة هي التي تحدد وظيفته المطلوبة منه عند حدوث الحدث الخاص به. - لكل أداة مجموعة من الخصائص تعلمنا كيف يمكن تغييرها في مرحلة تصميم المشروع في الدرس السابق، وهنا نتعلم بإذن الله تعالي كيف يمكن تغييرها أثناء تنفيذ البرنامج وذلك عند وقوع حدث معين. - هناك قاعدة عامة لتغيير قيمة الخاصية لأي أداة أو كائن أثناء التنفيذ، وذلك بكتابة الكود كما يوضح الشكل التالي، حيث يكتب اسم الكائن، ثم (.) ، ثم اسم الخاصية، ثم علامة - ، ثم القيمة المطلوب تعيينها للخاصية مع مراعاة أن القيم الرقمية أو القيم المعروفة لدي VB مثل True او False تكتب كما هي، أما القيم الحرفية فتكتب بيني علامتي تنصيص مزدوجة. ``` ObjectName.PropertyName = New Value ``` - ObjectName : اسم الكائن أو الأداة المطلوب تغيير قيمة الخاصية لها. - Property Name : اسم الخاصية المراد تغيير قيمتها. - NewValue : القيمة الجديدة للخاصية. - النقطة التي تفصل اسم الكائن عن الخاصية تربط هذه الخاصية بالأداة المرادة فعلا، وذلك لاشتراك اسم الخاصية مع أكثر من أداة أخرى. **تمرين** - قم بفتح مشروعا جديدا ، وقم بوضع أداة Textbox علي نافذة النموذج. - قم بتغيير خاصية Text في نافذة الخصائص إلي القيمة Hello - قم بتنفيذ البرنامج بالضغط علي F5 لمشاهدة النتيجة. ## المحاضرة الثالثة **Events الأحداث** لكن إذا أردنا عند النقر نقراً مزدوجا DoubleClick) علي مربع النص - بعد تشغيل البرنامج طبعا - تظهر كلمة Welcome بدلا من Hello ، فلابد من تغيير قيمة الخاصية Text أثناء التشغيل. **ولكن كيف يمكن تغيير القيمة للخاصية Text؟** بتطبيق القاعدة علي التمرين السابق نقوم بعمل التالي : - في نافذة التصميم قم بالنقر المزدوج علي الأداة (Textbox) حتى يتم فتح نافذة الكود الخاصة بها. - من مربع الأحداث اختر الحدث DoubleClick. - بين السطرين الخاصين بكتابة الإجراء اكتب الكود التالي : ``` TextBox1.Text = "welcome" ``` ## المحاضرة الثالثة **Events الأحداث** - من مربع الخصائص قم بتعديل خصائص الأدوات الموجودة علي النافذة السابقة بناء علي القيم المبينة في الجدول التالي: | الأداة |الخاصية | القيمة | الغرض | |---|---|---|---| | Form1 | Text | Enter User Name | تغيير عنوان النافذة. | | Labell| Text | User Name | تغيير عنوان الأداة. | | TextBox1 | | - | اتركها فارغة. | | | Enabled | False | لعدم تمكين المستخدم من استخدام مربع النص. | | Button1 | Text | Ok | - | | Button2 | Text | Exit | - | ## المحاضرة الثالثة **Events الأحداث** - قم بضغط مفتاح F5 لتنفيذ البرنامج، قم بالنقر علي الزر (Ok) لقبول الاسم أو النقر على الزر (Exit) للخروج من البرنامج، فلن يفعل شيئا! لماذا ؟ - الإجابة: لأنك لم تحدد للزر ماذا يفعل عند النقر عليه، وذلك بكتابة التعليمات الخاصة بكل زر. - لكن قبل أن تقوم بكتابة التعليمات لا بد أن تعرف ما هو المطلوب من كل زر والمطلوب في هذا التمرين هو التالي: - عند النقر على زر (Ok) يتم تغيير خاصية Enabled للأداة (Textbox) إلي True لكي يستطيع المستخدم كتابة ما يريد. - عند النقر على زر (Exit) يتم الخروج من البرنامج وإغلاق النافذة. **لتنفيذ ما سبق برمجيا نقوم بعمل التالي:** - قم بالنقر المزدوج علي الأداة Buttonl أي زر (Ok) لفتح نافذة البرمجة، وفي الحدث (النقر Click) قم بكتابة الكود التالي: ``` TextBox1.Enabled =True ``` - قم بتكرار ما قمت به مع الأداة (Button2) أى الزر (Exit) واكتب الكود التالي: ``` End ``` - نفذ البرنامج بالضغط علي F5 وجرب ما صنعت، فعند تشغيل البرنامج يكون مربع النص غير متاح الكتابة فيه، وعند نقر الزر (OK) يصبح المربع متاح ويمكن الكتابة فيه، وعند نقر الزر (Exit) يتم إنهاء البرنامج. ## المحاضرة الثالثة **Events الأحداث** **تمرين** قم بإنشاء مشروع جديد من النوع (Windows Application) ، وقم بوضع الأدوات زرى أمر وأداة Label على النموذج، والمطلوب إظهار عنوان زر الأمر في الـ Label بمجرد مرور الماوس فوق أي زر منها . ### خطوات الحل : - )Windows Application( قم بإنشاء مشروع جديد من النوع - قم بوضع الأدوات زرى أمر، Label) لتبدو النافذة كما يبين الشكل التالي، وسنقوم بترك هذه الأدوات بالأسماء الافتراضية لها. - من خلال مربع الخصائص قم بتعديل خصائص هذه الأدوات لتكون كما يبين الجدول التالي: | الأداة |الخاصية | القيمة | الغرض | |---|---|---|---| | Button1 | Text | Welcome | - | | Button2 | Text | Majestic | - | |Labell | ForColor | أحمر | تغيير لون الكتابة | | | Font | | حجم خط ۱۲ | | | | | تكبير حجم الخط | - قم بالنقر المزدوج على زر الأمر الأول Button1 ، بالطبع سيتم فتح نافذة الكود ولكن في الحدث Click الخاص بالزر، وحيث أننا نريد أن يظهر اسم الزر في الـ Label عندما يتحرك الماوس فوق الزر فيجب اختيار الحدث Mouse Move من قائمة الأحداث، وفى الإجراء الخاص بهذا الحدث قم بكتابة الكود التالي: ``` Label1.Text = Button1.Text ``` - questo الكود يقوم بجعل الخاصية Text لأداة الـ Label هي نفس قيمة الخاصية Text لزر الأمر الأول. - بالممثل قم فى الحدث Mouse Move الخاص بالزر الثانى بكتابة الكود التالي: ``` Label1.Text = Button2.Text ``` - قم بتشغيل البرنامج، وقم بتحريك الماوس فوق كل زر وشاهد ما يحدث. ## المحاضرة الثالثة **Events الأحداث** ### أسئلة المحاضرة الثالثة **السؤال الأول:** أى الجمل التالية : صحيح وأيها خطأ : -(1) الأحداث دائما مرتبطة بوجود الأدوات. -(۲) توجد أحيانا أحداث خاصة لبعض الأدوات. -(۳) لتنفيذ البرنامج يتم الضغط علي مفتاح F7 من لوحة المفاتيح. -(٤) يمكن فتح نافذة البرمجة بالضغط مرتين متتاليتين علي الأداة. -(۵) تقوم لغة VB.NET بإعداد إجراء فارغ لكل حدث. **السؤال الثاني :** لديك Form عليه (مربع) نص Textbox) و (زر امر Button)، قم بتصميم برنامج لتنفيذ المهام التالية: -(۱) بمجرد تشغيل البرنامج يكون (مربع النص TextBox) غير متاح. -(۲) عند النقر على زر الأمر يصبح ( مربع النص TextBox) متاح. -(۳) عندما يتحرك الماوس فوق ( مربع النص (TextBox) تتغير محتوياته إلي "Welcome" العبارة ## المحاضرة الرابعة **التفاعل مع المستخدم** **Interaction with the user** في هذا الدرس نستعرض الغرض الأساسي من إنشاء تطبيقات الحاسب الآلي وهو التفاعل مع المستخدم، و يتم هذا التفاعل إما بقيام المستخدم بإدخال البيانات أو إظهار رسائل له وعليه التعامل معها، وغيرها من طرق التفاعل. بعد الانتهاء من هذا الدرس يجب أن تكون ملما بالموضوعات التالية: - معنى التفاعل مع المستخدم. - أداة الكتابة Textbox، وأهم خصائصها. - المقصود بالوسائل وكيفية استخدام وسائل الأداة TextBox - المقصود بكلمة Me وفيم تستخدم. - مربع الرسالة MsgBox ، وكيفية التحكم فى الأزرار والرموز التي تظهر عليه . - MessageBox.Show ## المحاضرة الرابعة **التفاعل مع المستخدم** إن الغرض الأساسي من إنشاء تطبيقات الحاسب الآلي هو التفاعل مع المستخدم سواء بالسماح له بإدخال البيانات أو بإظهار رسائل مثل رسائل التنبيه والتحذير. تعتبر النصوص من أهم المدخلات للكمبيوتر ، والنصوص لها من الخصائص ما يمكننا من التحكم فى شكلها مثل نوع الخط ولونه وحجمه ...... وكذلك النصوص لها بعض العمليات التي يمكن تنفيذها عليها كما تعلمنا في برامج Windows، مثل عملية (نسخ) (Copy) نص او (قص) (Cut جزء من النص، أو لصقه (Paste في مكان آخر وغيرها من العمليات الأخرى.. ### أداة الكتابة (مربع النص Textbox) - قمنا باستخدام هذه الأداة فى الدروس السابقة، وذكرنا أنها تستخدم لاستقبال أو عرض القيم من وإلي المستخدم، بمعنى إذا كنت تريد السماح للمستخدم بإدخال بيانات، أو كنت تريد عرض بيانات له فيجب استخدام هذه الأداة، وهذه الأداة يكاد لا يخلو منها برنامج. - كما تعلمنا فإن لكل أداة أو كائن) مجموعة من الخصائص Properties) و ( الأحداث Events) ، و الوسائل (Methods) تحدد شكله وسلوكه ووظائفه، ودعنا الآن نتحدث عن تلك العناصر المتعلقة بمربع النص. #### أولا: الخصائص Properties إذا قمت بوضع أداة مربع النص Textbox) علي نافذة النموذج فأنت قد تحتاج إلى بعض الخصائص للتحكم فى شكلها مثل الخصائص التالية: - أن يكون الـ Textbox سطر واحد أو أكثر من سطر، وفي حالة إذا ما كان أكثر من سطر فقد تحتاج إلي أشرطة تمرير Scrollbar). - قد تحتاج إلي تحديد حالة الأحرف بالنسبة لحروف اللغة الانجليزية، هل الحروف تظهر صغيرة أم كبيرة، بغض النظر عن الحالة التى قمت بكتابتها بها. - هل تريد استخدام المربع لإدخال كلمة مرور Password)، وإذا كنت تريد ذلك فمثل كل مربعات إدخال كلمات المرور لا تريد أن يظهر ما يتم كتابته أثناء الإدخال، ويظهر بدلا منها حرف آخر. - قد تحتاج إلي عرض قيمة للمستخدم لا يمكنه تعديلها ولكن يمكنه أن يقرأها فقط ."Readonly" - قد تحتاج إلى تغيير نوع وحجم الخط (Font) الذى يظهر أثناء الكتابة. #### الجدول التالي يبين أهم هذه الخصائص : |الخاصية | الاستخدام | |---|---| |RightToLeft | تستخدم لتحديد اتجاه الكتابة، حيث تعيين هذه الخاصية إلى (Yes) تجعل الاتجاه من اليمين، أما تعيينها إلى (No) فيجعلها من اليسار وهذا هو الوضع الافتراضي. | |CharacterCasing |الوضع الافتراضي لهذه الخاصية هو (Normal)، وهذا يعنى أن الحروف تظهر بنفس الحالة التي يتم كتابتها بها، وإذا أردت أن تظهر الأحرف كبيرة فقم بتعيين الخاصية إلى القيمة (Upper) ، ولإظهار الأحرف صغيرة قم بتعيين الخاصية إلى (Lower). | |Font | تستخدم لضبط نوع وحجم وتنسيق الخط، فعندما تتحرك إلى هذه الخاصية يظهر مربع به (...) بالنقر عليه يظهر مربع حوارى لضبط خصائص الخط. | |MaxLength | تستخدم لتعيين أقصي عدد من الحروف يمكن للمستخدم إدخالها في مربع النص. | |MultiLine | تستخدم لتحديد ما إذا كان مربع النص سطر واحد وهنا يتم تعيين هذه الخاصية إلى القيمة (False) وهو الوضع الافتراضي ام يكون متعدد الأسطر وهنا يتم تعيين الخاصية إلى القيمة (True). | |PasswordChar | تستخدم لجعل مدخلات مربع النص بمثابة ( كلمة مرور Password)، أى تظهر رموز بدل الحروف المدخلة. | #### ReadOnly الوضع الافتراضي لهذه الخاصية هو (False) ، ولجعل محتويات مربع النص لا يمكن تعديلها وإنما للقراءة فقط فقم بتعيين هذه الخاصية إلى القيمة (True). #### Scrollbars تستخدم للتحكم فى ظهور أشرطة التمرير في مربع النص، حيث القيمة (None) تعنى بدون أشرطة تمرير وهذا هو الوضع الافتراضى، قم بتعيين الخاصية إلى القيمة (Horizontal) لإظهار شريط تمرير أفقى، أو القيمة (Vertical) لإظهار شريط تمرير رأسي، أو القيمة (Both) لإظهار شريط راسي وآخر أفقى #### SelectedText هذه الخاصة لا يتم ضبطها وإنما تستخدم لمعرفة النص الذي تم تحديده فى مربع النص، وهذه الخاصية غير متاحة في مربع الخصائص وإنما يمكن استخدامها فقط عن طريق استخدام الكود... #### Text لوضع محتويات مربع النص أو لمعرفة محتوياته... #### TextAlign تستخدم لضبط محاذاة محتويات مربع النص، حيث يمكن تعيين هذه الخاصية إلى القيمة (Left, Right, Center) #### TextLength هذه الخاصية أيضا غير متاحة في مربع الخصائص وإنما يتم استخدامها من خلال الكود، حيث تستخدم هذه الخاصية لمعرفة عدد أحرف النص الذي تم إدخاله في مربع النص... #### ثانيا : الوسائل Methods - قد تحدد جزء معين من النص كما تصنع في برامج Windows المختلفة لإجراء أي عمل عليه مثل النسخ أو القص، وسوف تجد أن مثل هذه الأعمال ليست اختيارات للتحكم في شكل الأداة أو الكائن، وإنما هي مهام تنفذ عليه. - ومن هنا يمكن القول بأن هناك مجموعة من الوظائف والأفعال مصاحبة لكل (كائن Object)، وهذه الأفعال يطلق عليها (وسائل Methods). - قد تحدد جزء معين من النص كما تصنع في برامج Windows المختلفة لإجراء أي عمل عليه مثل النسخ أو القص، وسوف تجد أن مثل هذه الأعمال ليست اختيارات للتحكم في شكل الأداة أو الكائن، وإنما هي مهام تنفذ عليه. - ومن هنا يمكن القول بأن هناك مجموعة من الوظائف والأفعال مصاحبة لكل (كائن Object)، وهذه الأفعال يطلق عليها (وسائل Methods). #### الوسائل يتم استخدامها من خلال كتابة الكود، وليس لها نافذة خاصة كما في الخصائص، ويفهم من ذلك أنها تنفذ أثناء تشغيل البرنامج وليس فى مرحلة التصميم والشكل العام للكود الخاص باستخدام وسيلة كالتالي: ``` ObjectName. Method ``` - حيث ObjectName هو اسم الكائن المطلوب تنفيذ الوسيلة عليه، أما Method فهو اسم الوسيلة المطلوب تنفيذها على هذا الكائن. **دعنا نوضح ذلك بالمثال التالي :** - قم بإنشاء مشروع جديد، وقم بوضع Button ، TextBox 2. - قم بالنقر المزدوج على الزر الأول لفتح نافذة الكود، وفى الحدث الخاص بالزر قم بكتابة الكود التالي: ``` TextBox1.Hide() ``` - كذلك قم بالنقر المزدوج على الزر الثانى وقم بكتابة الكود التالي: ``` TextBox1.Show() ``` - الوسيلة Hide تقوم بإخفاء الكائن، أما الوسيلة Show فتقوم بإظهاره. - ستلاحظ في نافذة الكود أنه بمجرد كتابة اسم الكائن وهو هنا مربع النص، تظهر قائمة بأسماء خصائص الكائن والوسائل التى يمكنك تطبيقها عليه، وتلاحظ أن الخاصية لها رمز يد تحمل ورقة، أما الوسائل فلها رمز مكعب ذو لون بنفسجي فاتح. #### الوسيلتين السابقتين تنفذان على الكائن نفسه أو بمعنى أدق تقوم بإحداث فعل معين في الكائن مثل الإخفاء أو الإظهار ... وهناك العديد من الوسائل الأخرى التي تنفذ مهام على الكائن. #### لكن هناك وسائل تنفذ على إحدى خصائص الكائن أو تنفذ على الكائن وينتج عن تنفيذها قيمة، مثل نسخ النص فى مربع النص أو تحديده، ومثل هذه الخصائص تعمل كدالة الدالة هى أمر ينتج عنه قيمة لذا يجب عند كتابتها الا نذكر اسم الكائن فقط وإنما يذكر أيضا اسم الخاصية التي ستطبق عليها، ويكون شكل استخدام الوسيلة كالتالي: ``` ObjectName.PropertyName.Method ``` #### فمثلا في الـ Textbox السابق لتحويل الأحرف الصغيرة Lowercase) الموجودة به إلى أحرف كبيرة (Uppercase) نستخدم الوسيلة (ToUpper) ويكون شكل الأمر كالتالي، حيث أضفنا اسم الخاصية Text لأن هذه الوسيلة تنفذ على محتويات مربع النص وليس المربع نفسه. ``` TextBox1.Text.ToUpper ``` **تمرين** - قم بكتابة برنامج VB.NET يحتوي علي مربعى نص : الأول سطر واحد والثاني متعدد الأسطر (Multiline). - وكذلك تحتوى نافذة البرنامج سبعة أزرار (Button) لتنفيذ الأوامر المطلوبة لتكون نافذة البرنامج بالشكل التالي : - **Form1** - **Copy** - **Cut** - **Paste** - **Clear** - **Upper** - **Lower** - **Exit** #### الجدول التالي يوضح بعض الوسائل المهمة في التعامل مع أداة مربع النص نفسها. |الوسيلة | الاستخدام | |---|---| |AppendText | تستخدم لإضافة نص إلي النص الموجود في مربع النص فمثلا لإضافة النص "Welcome" إلى مربع النص Textbox1 يكتب الكود TextBox1.AppendText("Welcome"( ويمكن مثلا إضافة محتويات مربع النص TextBox3 إلى المربع TextBox1 بكتابة الكود التالي: TextBox1.AppendText(TextBox3.Text) | ## المحاضرة الرابعة **التفاعل مع المستخدم** #### Clear تمحو محتويات مربع النص، فمثلا الأمر التالي يقوم بمسح محتويات مربع النص TextBox1.Clear. #### Copy ترسل نسخة من الجزء الذي تم تحديده في مربع النص إلي )Clipboard الحافظة. #### Cut ترسل الجزء الذي تم تحديده في مربع النص إلي )Clipboard الحافظة، ويحذف بالطبع من مربع النص. #### Paste تضع نسخة من محتويات الـ Clipboard في مربع النص. #### SelectAll لتحديد النص الموجود في مربع النص بالكامل. #### Undo إلغاء آخر وظيفة تم إجراؤها علي النص الموجود في مربع النص. ### فمثلا في الـ Textboxسابق لتحويل الأحرف الصغيرة Lowercase) الموجودة به إلى أحرف كبيرة (Uppercase) نستخدم الوسيلة (ToUpper) ويكون شكل الأمر كالتالي، حيث أضفنا اسم الخاصية Text لأن هذه الوسيلة تنفذ على محتويات مربع النص وليس المربع نفسه. ``` TextBox1.Text.ToUpper ``` ## المحاضرة الرابعة **التفاعل مع المستخدم** #### (1) فكرة البرنامج - استخدام مربعي نص لإدخال بيانات في المربع الأول وينفذ عليه عمليات النسخ Copy) أو (القص Cut)، وعمليات تحويل النص إلي حروف كبيرة Upper)، أو (حروف صغيرة Lower). - تتم عمليات اللصق (Paste) في المربع الثاني. - عمليات المسح (Clear) تنفذ على كلا المربعين. - يمكن للمستخدم الخروج من البرنامج بالنقر على الزر Exit. #### (۲) تعديل الخصائص Properties في مرحلة التصميم قم بتعديل خصائص الأدوات المستخدمة، وذلك بتنشيط الأداة ثم اختيار الخاصية من نافذة الخصائص وتعديل قيمة الخاصية، ويبين الجدول التالي كل أداة والخصائص التى سيتم تعديل قيمتها، والقيمة الجديدة لها. | الأداة |الخاصية | القيمة | |---|---|---| |TextBox1| Name| txtFirstBox| | |MaxLength| 16| | |MultiLine| False| |TextBox2| Name| txtSecondBox| | |MultiLine| True| |Button1| Name| btnCopy| | |Text| Copy| |Button2| Name| btnCut| | |Text| Cut| |Button3| Name| btnPaste| | |Text| Paste| |Button4| Name| btnClear| | |Text| Clear| |Button5| Name| btnUpper| | |Text| Upper| |Button6| Name| btnLower| | |Text| Lower| |Button7| Name| btnExit| | |Text| Exit| #### (3) كتابة التعليمات Code - لن يقوم الزر (Copy) بأداة وظيفته بنسخ الجزء الذي يتم تحديده من النص إلي (الحافظة Clipboard) إلا بكتابة الأمر الخاص بذلك في مجيب الحدث Event Handler) الخاص بالزر وهكذا مع كل زر يجب كتابة الأمر أو الأوامر المطلوب تنفيذها عند النقر عليه. - لعمل ذلك قم بالنقر المزدوج علي الزر المطلوب كتابة تعليمات له، فتفتح نافذة البرمجة، وبالطبع سيظهر الإجراء الخاص بالحدث (Click)، وبين السطرين الخاصين بالتعليمات اكتب التعليمات كما تعلمت في الدرس الثالث. - دعنا الآن نقوم بكتابة التعليمات الخاصة بكل زر #### btnCopy زر الأمر - نستخدم لذلك الوسيلة)) Copy Method كما بيننا في جدول الوسائل السابق حيث تستخدم لنسخ الجزء المحدد في مربع النص، وحيث أننا نريد نسخ النص المحدد في المربع الأول والذى قمنا بتسميته (txtFirstBox) فسوف يكون الكود الخاص بهذا الزر كالتالي: ``` Me.txtFirstBox.Copy ``` #### btn Cut زر الأمر - هذا الزر سيقوم بقص النص، لذا نستخدم الوسيلة Cut لقطع الجزء المحدد من مربع النص الأول، لذا سيكون الكود الخاص بهذا الزر كالتالي: ``` Me.txtFirstBox.Cut ``` #### btnPaste زر الأمر - هذا الزر سيقوم بلصق النص السابق نسخه أو قصه، لذا سنستخدم الوسيلة Paste لتنفيذ عملية اللصق في مربع النص الثانى، وسيكون الكود الخاص بهذا الزر كالتالي: ``` Me.txtSecondBox.Paste ``` #### btnUpper زر الأمر - نستخدم الوسيلة ToUpper لجعل محتويات مربع النص الأول حروف انجليزية كبيرة، لذا يتم كتابة هذا الكود التالي: ``` Me.txtFirstBox.Text = Me.txtFirstBox.Text.ToUpper ``` - تلاحظ في هذا الكود أن الجزء الذى على يمين علامة (-) يقوم بتحويل نص مربع النص الأول إلى أحرف كبيرة، ولكن بالطبع لا يقوم بالتحويل وإعادة وضع النص في مربع النص، لذا فقد تم تخصيص الناتج إلى الخاصية Text الخاصة بمربع النص ليعاد وضع النص مرة أخرى فى المربع بعد تحويله. - هذا يشبه لو كنت تريد وضع ناتج جمع (۲) + (۳) فى مربع النص فهنا سوف تكون الصيغة الحسابية على يمين علامة (-) فيكون الكود Me.txtFirstBox = 2+3. #### btnLower زر الأمر - نستخدم الوسيلة ToLower لجعل محتويات مربع النص الأول حروف انجليزية صغيرة بالأمر التالي: ``` Me.txtFirstBox.Text = Me. txtFirstBox.Text.ToLower ``` #### btnExit زر الأمر - نكتب الأمر التالي مباشرة فى مجيب الحدث الخاص بالزر ``` End ``` #### btnClear زر الأمر - نستخدم الوسيلة Clear لمحو البيانات الموجودة في كلا المربعين بالأمر : ``` Me.txtFirstBox.Clear Me.txtSecondBox.Clear ``` - قم الآن بضغط F5 لتشغيل البرنامج وقم بكتابة نص فى مربع النص الأول، وقم بتجربة الأزرار، وتذكر فى زرى النسخ والقص تحديد نص من مربع النص. ## المحاضرة الرابعة **التفاعل مع المستخدم** #### لكن ما هي كلمة Me التي استخدمناها في الأوامر السابقة؟ - كلمة Me من الكلمات المحجوزة في لغة VB.NET وتشير إلي النموذج Form) الحالي، أو بمعنى آخر عندما نريد التعامل مع خصائص ووسائل النموذج الحالي نستخدمها. - كل الأدوات التى على نموذج هي تابعة له، وعندما تريد التعامل مع أداة ولا تتذكر اسمها جيدا فيمكنك كتابة كلمة Me يليها (.) فتظهر قائمة بأسماء عناصر التحكم التي على النموذج لاختيار العنصر المطلوب مباشرة، وبذلك توفر الوقت وتقليل أخطاء الكتابة. - هذه القائمة لا تحتوى فقط على أسماء عناصر التحكم التي على النموذج وإنما تحتوى على الخصائص والوسائل الخاصة به، لذا إذا أردت تغيير إحدى خصائص النموذج يجب كتابة الشكل التالي: ``` Me. ``` - هذه القائمة لا تحتوى فقط على أسماء عناصر التحكم التي على النموذج وإنما تحتوى على الخصائص والوسائل الخاصة به، لذا إذا أردت تغيير إحدى خصائص النموذج يجب كتابة الشكل التالي: ``` Me. Property Name = Value ``` - حيث Property Name هو اسم الخاصية الخاصة بالنموذج والمطلوب تغيير قيمتها، فمثلا لتغيير نص شريط عنوان النموذج باستخدام الكود ليكون كلمة "Welcome" نكتب الكود التالي. ``` Me.Text = "Welcome" ``` - في التمرين السابق كنا نسبق اسم الأداة بكلمة Me، ولكن يمكنك تجاهل كتابة هذه الكلمة وكتابة اسم