تعرفنا فى الجزء السابق عن تطبيقات الويب web application وذكرنا انه يتم عرض هذه التطبيقات عن طريق متصفح الانترنت وللتعرف على كيفية عمل هذه التطبيقات سوف نقوم بإنشاء تطبيق بسيط فإذا اردنا على سبيل المثال عمل نفس التطبيق الخاص بعملية القسمة والذى قمنا بإنشاءه فى الاجزاء السابقة وعمل هذ التطبيق كتطبيق ويب
نقوم باداراج عناصر التحكم اللازمة فنقوم بإدراج ثلاث مربعات نصيه textbox وذلك بالضغط المزدوج على العنصر ثلاث مرات
ونقوم بتحريك هذه العناصر الى مواضع مناسبة فى النموذج وذلك بالضغط مع السحب الى الموضع الذى نريده
والان نقوم بادراج ثلاث عنواوين labels فنضغط ضغط مزدوج على العنصر label ثلاث مرات
ونقوم بتحريك العناصر بجوار العناصر textbox المجاورة لها
والان نقوم بادراج مفتاح command button لإدراج عملية القسمة عند الضغط على هذا المفتاح فنضغط بالمؤشر ضغط مزوج على عنصر المؤشر button
ثم نحرك العنصر الى موضع مناسب داخل النموذج
وكما ذكرنا سابقا اننا يمكنا رؤيه وتغيير خواص العناصر من خلال النافذه properties فنختار العناصر العنوان label الاول فتظهر خواص هذا العنصر فى النافذه properties ولتغيير الكتابات التي تظهر العنصر نختار الكتابات فى الخانه المجاورة للخاصية text وندخل عنوان العنصر وليكن first number ونختار العنصر التالي ونغيير العنوان الى second number ونختار العنوان الذى يليه ونغير العنصر الي result
ولتغيير اسم المربع النصي Textbox الاول نختاره وننتقل الى الخاصية id ونختار الكتابات المجاورة لهذه الخاصية ونقوم بإدخال الاسم الجديد الذى نريده وليكن firstNo ونختار العنصر textbox التالي ونغيير اسمه الي secondNo ثم نختار العنصر الذي يليه ونغير اسمه الي result
والان نختار العنصر command button ونغير اسمه الى calculateDiv ونقوم بتغيير الكتابات التي تظهر عليه فى الخانة text الى calculate
ولكي تظهر العناصر بشكل متناسق فى النموذج نختار العناصر labels ونفتح القائمة format ومنها القائمة الفرعية align ونختار lefts لمحاذاه العناصر ناحية اليسار
ونختار make equal من القائمة الفرعية vertical spacing وذلك لتوزيع المسافة الرئيسية بالتساوي بين العناصر والان نختار العناصر textboxs ونفتح القائمة format ونختار left من القائمة align لمحاذاه العناصر جهة اليسار والان سنقوم بمحاذا كل من العناصر textboxs مع لأعلى العناصر labels المقابل لها من القائمة format واختار tops من القائمة align
وبعد الانتهاء من تنسيق العناصر داخل النموذج تتبقى عملية اضافة الكود الذى يعمل عملية القسمة حيث اننا نريد قسمة الرقم الذى سيتم ادخاله فى المربع النصي first number على الرقم الذي سيتم ادخاله فى المربع النصى second number واظهار الناتج فى المربع النصى result عند الضغط على مفتاح الامر calculateDiv وهو نفس الكود الذى قمنا بكتابته من قبل وكما لاحظنا اننا قمنا بتغير اسماء عناصر التحكم لتتناسب مع اسماء عناصر التحكم فى التمرين السابق ولذلك يمكننا نسخ هذا الكود السابق ولصقه داخل هذا البرنامج بدلا من اعادة كتابته مره اخرى فنضغط على المفتاح calculateDiv فننتقل الى محرر الكود
ونقوم بلصق الكود فى هذا الموضع وبذلك يكون الكود جهاز للعمل
ولشتغيل التطبيق نضغط على المفتاح start من الشريط العلوي فيتم تشغيل التطبيق
ويتم عرضه داخل متصفح الانترنت " انترنت اكسبلورر " فبإدخال الرقم الذى نريد قسمته فى المربع النصى first number وادخال الرقم المقسوم عليه فى المربع النصي second number والضغط على المفتاح calculate يظهر ناتج عملية القسمة فى المربع النصي result
رد مع اقتباس