Tuesday, 1 July 2008

Asp.Net 2

إن شاء الله الدرس ده هنتعرف فيه على صندوق الادوات بصورة اكبر (toolsbox)
ان شاء الله احنا عايزين النهاردة نعمل صفحة ويب
فيها انك تدخل الاسم بتاعك والحالة بتاعتك بدأت ولا لسة ولا خلصت
وكمان القسم اللي انت شغال فيه ايه
وعايزين لو المستخدم نسي يكمل بعض البيانات المطلوبة يطلع ليه تنبيه
ويقوله ان الحقل ده مطلوب اكماله
يلا نشوف مع بعض كده هنعمل ايه
طبعا هنفتح visual studio 2005
وبعدين نختار new web site
زي اما انا شرحت في الدرس السابق
وبعدين هنبدأ في صفحة Design
هنلاقي طبعا في اقصي يسار الشاشة toolbox وهو صندوق الادوات
وفي اقصى اليمين هنلاقي اليمين هنلاقي properties bar وهو شريط الخصائص



ولكل أداة خصائص تختلف وتتفق مع بعض خصائص الادوات الاخرى
وهنلاقي شريط الادوات مقسم إلى



هنشتغل النهاردة ان شاء الله على كما Standard ,Validation
كما هو واضح بالصورة هنبدأ نشتغل على بعض الادوات الموجودة فيهم



يا جماعة ده هيكون شكل الـ form وانا هشرح فيه جزء جزء بس عشان اللي هشيشتغل يبقى عارف هو بيعمل ايه



هنبدأ بوضع labels وهي تستخدم لاظهار بيانات فقط وليس لإدخال بيانات
هنضع label على الـ form إما بالضغط عليه مرتين في شريط الادوات أو بالضغط مرة والسحب إلى الـform
هنضع label1 ونغير اسمه الظاهر للمستخدم عن طريق الخاصية text الموجودة في شريط الخصائص
ونخليها Name ولو عايزين نغيره اسمه الباطن الذي تستخدمه انت المبرمج نغيره عن طريق الخاصية ID في شريط الخصائص
وهكذا نضع lablel2 ونغير اسمه الظاهر للمستخدم ونجعله Status وlabel3 ونغير اسمه إلى Dept
ونضع TextBox ونضعه امام الاسم (Name)
ملحوظة :
لكي تجعل الادوات حرة الحركة على (form) من (layout->Position->auto-position option)هيظهر مربع حواري كما بالصورة نضع علامة صح على (Change positioning to the following.......)نختار منها absolutely positioned

وبعد كده هنضع في form أداة اسمها DropDownList دي اداة احنا كلنا عارفينها بنشوفها لما بنسجل في اي منتدي او اي موقع وهنضعها امام status وهنروح على الخاصية ID في شريط الخصائص statusDropDownList
بيطلب منك تختار نوعك male or female وشكلها


طيب احنا بقى عايزين نضع العناصر بتاعتنا اللي المفروض هنختار منها
ننشط الاداة dropdownlist هنلاقي علامة زي علامة play في اي برنامج مشغل صوتيات نضغط عليها هتظهر لنا قائمة نختار منها "edit items" هيظهر لنا المربع الحواري الآتي




وبعد كده هنضع أداة اسمها RadioButton موجودة في toolbox نضع منها RadioButton1 , RadioButton2
على الـ form وهنسمي احدهما accounting والآخر Marketing ونضعهما امام Dept
بس فيه حاجة هنا لو احنا عملنا الاتنين RadioButton من غير من نضعهم في جروب واحد هيبقى متاح ليا اني اختار الاتنين "RadioButton" بتستخد لتيتح اختيار واحد للمستخدم وليس اكثر
ولكي نضعهم في جروب واحد في خاصية اسمها GroupName موجودة في شريط الخصائص


وطبعا عشان نظهر خصائص اي اداة موجودة على الـ form بنشط الاداة اولا وبعد كده هنلاقي خصائصها ظهرت وكمان اسمها اللي موجود في IDوهو غير ظاهر للمستخدم ولكن ظاهر للمبرمج
طبعا زي ما احنا عارفين عشان نظهر خصائص اي اداة لا بد من تنشيطها اولا حتى يظهر اسمها في شريط الخصائص
marketingRadioButtonزي ما احنا شايفين في الصورة دي خصائص زر راديو اسمه
صورة



وبعدين هنضع button على الform وهنسميه"Ok"
هنضع كمان Label4 أمام status وكمان label5 بجوار Ok button
ونذهب على خاصية text في شريط الخصائص ونخليها فاضية اي نمسح الكلام المكتوب بها وده لـ label4,5
ونروح كمان نضع اداة اسمها "HyperLink" ونروح على شريط الخصائص ونغير الـtext ونضع لينك الموقع في"
NavigateUrl"



وبكده يبقى احنا مش عايزين اي حاجة من toolbox Standard
نبدأ بقى في toolbox Validation
هنلاقى اداة اسمها RequiredFieldValidator نضعها على الـ Form
ونذهب غلى شريط الخصائص هنلاقي بقى خصائص مختلفة
أول حاجة هنغيرها "ErrorMessage" هنخليها "Name Is Required"وبعد كده نروح على خاصية "Text" ونخليها "*"
وبعدين كما نروح على الخاصية "ControlToValidate" ونختار منها "nameTextBox" كما هو مبين



وبعدين هنروح على اداة كمان اسمهاCompareValidator ونضعها على الـ Form
ونروح على "ErrorMessage" ونخليها "Status Is Required" وبعد كده نروح على خاصية "Text" ونخليها "*"
وبعدين كما نروح على الخاصية "ControlToValidate" ونختار منها "DropDownList"
ونروح على "Operator" ونخليه "Not equal" ونروح على الخاصية ValueToCompare ونخليها "Select one ..." كما هو مبين


وفي أداة كما اسمها "ValidationSummary" هنضعها على الfrom ونخلي شكل الـ Form زي ما احنا شايفين في الصورة كده





وبعد كده بقى هنضغط على الزر "Ok" مرتين متتاليتن هتظهر لنا صفحة الاكواد وهنكتب فيه كما هو مبين



وبكده يبقى احنا خلصنا عملية انشاء الصفحة نبدأ بقى التنفيذ كده من خلال الضغط على F5
هيكون شكل الصفحة كالآتي



ولو ضغطنا على الزر Ok بدون اكمال الفراغات سيظهر الآتي



وبعد اكمال البيانات المطلوبة هيظهر الآتي



وبعد كده لو عايزين More Information
هنضغط على اللينك وانا كنت كاتب في NavigateUrl ->www.google.com عشان كده هيفتح عندي جوجل
لو انت عايز تكتب لينك اي موقع تاني من حقك تكتب اللي انت عايزه وهتظهر معايا الصفحة دي



وبكده يبقى انتهي الدرس التاني
وانتظروا الدرس الثالث ان شاء الله
واتمنى من الله ان اكون قد افدتكم

No comments: