السلام عليكم
كنت أريد أن أتحدث عن خصائص ألأدوات في هذا الدرس ولكن وجدت أنها بسيطة وواضحة ومن عنده لبس في خاصية فليقم بكتابة الخاصية وسأقوم بشرحها له .
الخصائص لمن نسيتها هي الصورة رقم 4 في الثالة في الدرس الأول
بخصوص خصائص الأدوات فجميع من استخدم الفيجوال بيسك من إصداراته القديمة 1-6 حتى إصدارات الدوت نت أو حتى الفيجوال سي شارب .... أو أي فيجوال .... يعرف خصائص الأدوات
أريد أن أطمئنكم بأنه بامكانكم أن تستخدموا النماذج الجاهزة ( القوالب ) في مشروعكم لترتاحوا من عناء التصميم وهذا ما سنشرحه لاحقا .
الدرس هذا يلزم قبله الكثير من الدروس في المصطلحات والمفاهيم ولكنني أجلتها للدروس القادمة لأنها دروس جافة وأيضا حتى تشعروا أنكم أنجزتم شيء عملي في هذه اللغة .
سنبدأ بمشروع جديد
وسنقوم بسحب بعض الأدوات
ولكن كما نرى فإن الأدوات المسحوبة لا يمكن تحريكها ووضعها في أي مكان في نافذة العمل ( طبعا هذا هو الأساس ).
ولكن إذا أي أحد منكم عنيد ويريد أن يحرك الأداة كما يريد فعليه أن يختار الأداة ثم يذهب إلى Layout =====>Position ===> Absolute
مشروعنا اليوم في الأساس يعتمد على أدوات التحقق Validation وأدوات التحقق موجودة ضمن المجموعة Validation
هذه الأدوات تريح الكثير في العمل وفي اختصار الوقت
فمثلا لو أردنا أن يتم التسجيل في الموقع وفي أثناء إدخال بيانات المستحدم نسي حقلا ما أن يدخله
ثم قام المستخدم بالنقر على زر التسجيل
فهل سيتم إرسال البيانات إلى السيرفر وعند الوصول إلى الحقل الفارغ سيتم إرسال رد من السيرفر أن هنالك حقلا فارغ ؟؟؟ طبعا هذا إضاعة لوقت المستخدم وأيضا ضغط زائد على السيرفر من غير فائدة
الحل هنا أن تكون الصفحة بتاعتنا بتفهم كثير وتقول أنك لم تدخل البريد الإلكتوني مباشرة ومن دون إرسال البيانات إلى السيرفر
سأقوم بتغيير المحاذاة إلى العربية قبل أن أبدأ وهي كالتالي
نضغط في أية مكان فارغ في نافذة العمل بالزر الأيمن ومن القائمة المنسدلة نختار Style
===>Text===>Text Directon ===>Right to Left
سنبدأ الآن بوضع أدواتنا في الجدول الذي أنشأته كالتالي
نقوم بكتابة محتويات الجدول
ثم سنضع باقي الأدوات وسنرتبهم كالتالي
تستطيع أن تضيف المزيد من الصفوف في الجدول وذلك بالذهاب لآخر صف والنقر من الكيبورد على Tab
ثم سنقوم بإضافة أسماء الدول الآن من نافذة العمل ومن دون الأكوادفيجوال بيسك
سنقوم بسحب DropDownList من الأدوات
ثم سنقوم بادخال العناصر إليها
وذلك بالنقر على المثلث الصغير أعلى الأداة ثم اختيار Edith Items
سنجعل الخاصية الخاصة بالعنصر اختر دولة .... Selected من False إلى True لجعلها العنصر المختار دائما
نرى أن أداة القائمة المنسدلة أصغر من الصندوق النصي فكيف سنقوم بجعلها نفس الطول
طبعا مايكروسوفت لم تنسى هذا الأمر
قم بتحديد الأداة التي تريد أن تغير حجمها أولا ثم وبالضغط على زر Ctrl من الكيبورد اختار الأداة التي تريد تغيير الحجم إليها نلاحظ أن الأداة الأولى أصبح عليها مربعات صغيرة سوداء أما الأداة الثانية فأصبحت مربعاتها بيضاء ثم من أشرطة الأدوات نختار ما الذي نريد أن نفعله بالضبط في حجم الأداة
ثم من شريط أدوات layout سنختار الخيار الظاهر بالصورة
وهنالك الكثير من الخيارات مثل :
جعلها نفس الطول
نفس العرض
نفس الطول والعرض
نفس البداية
نفس الإرتفاع .....
ثم سنسحب RadioButtonList1 ونقوم بوضع عنصرين فيه كالأداة السابقة وهما ذكر و أنثى
الآن سنقوم بوضع أدواتنا ( أدوات التحقق )
معلومة هامة
وهي أن أدوات التحقق عبارة عن جافا سكريبت فلو قام المتسخدم بتعطيل الجافا سكريبت من المتصفح فلن تكون مفعلة
سأقوم بسحب الأدوات في العمود الثالث كالتالي
الأداة RegularExpressionValidator هي للتحقق من طريقة كتابة النص كأن يكون في البدابة اسم خالي من الأرقام ولكن يحتوي على رموز ثم بعد ذلك رمز ثم اسم بمعني أن تكتب أنت ما تريد للتحقق منه على طريقتك
الأداة Validation Summary وهي تجمع جميع أخطاء التحقق التي وقعت ( سنرى ما معنى هذا في النهاية )
طبعا إذا قمت بتشغيل الصفحة الآن سيظهر لك خطأ بعد أن قمت بسحب أدوات التحقق ولم تقم باختيار الأداة المراد التحقق منها.
ثاني أداة هي RequiredFieldValidator
وهي للتحقق من أن النص مدخل أو لا في أداة الصندوق النصي مثلا .
وما يهمنا في خصائصها التالي
الخاصية Control To Validate ومنها نستطيع أن نحدد الصندوق النصي الذي نريد التأكد منه ولنقم باختيار الصندوق المقابل لخانة الاسم
الخاصية Text ومنها نحدد النص الظاهر عند قطع عملية التحقق ( ونضع غاليا * )
الخاصية Error Message والنص المدخل هنا سيظهر في Validation Summary
الأداة الثانية هي CompareValidator
نرى في كثير من المواقع أن خانة ادخال كلمة المرور لا تكون لوحدها ولكن يكون أيضا خانة تأكيد كلمة المرور وهذه الأداة تتأكد من تطابق النصين
طبعا لها نفس خصائص الأداتين السابقين بالإضافة ( إذا كنت ذكي ستعرف ما الجديد لوحدك )
بالإضافة إلى خاصية Control To Compare وفيها نحدد الصندوق الثاني الذي نريد التحقق منه سأقوم باختيار الصندوق النصي المقابل لخانة تأكيد كلمة المرور
وسأضع الخاصية Control To Validate على الصندوق المقابل لخانة كلمة المرور
وأيضا سنستخدم نفس الأداة عند التحقق من الدولة لكن بتغيير صغير
قم بسحب أداة CompareValidator أمام أداة القائمة المنسدلة ثم اذهب لخصائصها وقم بعمل التالي
من لخاصية Control To Validate سنختار اسم القائمة المنسدلة المقابلة لخانة الدولة
وسنقوم بتغيير الخاصية Opertator إلى Not Equal أي لا يساوي
وسنقوم في خاصية Value To Compare بوضع العنصر الذي لا نريد اختياره وسيكون ( اختر دولة ....) وهنا ملاحظة مهمة جدا وهي بجب توافق نفس اسم العنصر المختار مع نفس القيمة المدخلة هنا وأنا أفضل أن نقوم بنسخ ولصق القيمة لتفادي حدوث مشاكل
ونفس الشي نسحب نفس الأداة مقابل الجنس ونختار من خاصية Opertator الخيار Equal ونكتب في القيمة value نكتب ذكر
بقي لنا آخر أداة وهي Range Validator ومن اسمها نحدد المدى المطلوب أي من ____ إلى ___
سنقوم باختيار القائمة المنسدلة المقابلة لخانة العمر في الخاصية Control To Validate للأداة طبعا نسيت أن أقول لكم بما أنني لم أقم بتغيير أسماء الأدوات فسيكون الاختيار DropDownList2
وفي الخاصية Maximum Value سنحدد أكبر قيمة للعمر وستكون 60 ( المسنين ممنوع يدخلوا الموقع ) وفي الخاصية Minimum Value سنضع القيمة 20 سنة ( فقط للبالغين )
ما حدش قال لي طيب إنتا إنسيت إنك ما وضعت الأرقام في القائمة المنسدلة
طبعا بالامكان كما قمنا بادخال أسماء الدول في القائمة المنسدلة الأولى بوضع أرقام العمر في القائمة المنسدلة للعمر ولكن هذا سيكلف الكثير من الوقت
وإذا كانت لديك خلفية ولو برمجية بسيطة فستفهم ما معنى هذا الكود
قم بالنقر المزدوج في أي مكان فارغ في منطقى العمل ليظهر لنا حدث بدء تحميل الصفحة
حدث تحميل الصفحة هو أهم حدث في الصفحة ويتم استدعاءه بعد أن إنشاء كافة الأدوات وفيه نضع معظم أكوادنا ( لنا وقفة طويلة مع الأحداث والبرمجة كائنية التوجيه)
كود:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim i As Byte
For i = 13 To 80
DropDownList2.Items.Add(i.ToString)
Next
End Sub
وهذا اختصار كبير للوقت حيث قلنا في الكود السابق أن يضيف عناصر إلى القائمة المندسلة بنفس قيم العداد
الآن سنقوم بتشغيل الصفحة وسنقوم بالنقر على موافق من دون ادخال أية نصوص وسنلاحظ التالي
ثم إذا أردنا عرض رسائل الخطأ
كل ما علينا هو سحب أداة Validation Summary
ووضع في خاصية كل أداة تحقق رسالة الخطأ Error Message
وعند تعبئة كافة الحقول نلاحظ أن الصفحت تطلب السيرفر.
رابط الدرس
http://khalilme.net/L/l2/l2.zip
تم الانتهاء من الدرس الثاني بإذن الله
أخوكم خليل من فلسطين
رد مع اقتباس
