دروس في البرمجه بلغة دلفي بالصوت والصوره 19 تصميم تطبيقات

هلا بكم إلى درس جديد من سلسلة دروس البرمجة بلغة دلفي بالصوت والصورة، في هذا الدرس إن شاء الله سوف نتعلم برمجة تطبيقات (IntraWeb). في البداية دعونا نتعرف على: ما هي (IntraWeb)؟
(IntraWeb) هي عبارة عن أداة تستخدم لتبسط عملية تطوير تطبيقات (Web server). حيث يمكن استخدام (IntraWeb) في بناء تطبيقات (Web server Applications) بنفس الطريقة التي تستخدم في بناء تطبيقات الواجهات الرسومية التقليدية (GUI Applications) بالضبط، وذلك باستخدام كائنات (Form). إضافة إلى انه يمكن كتابة الكود بواسطة لغة دلفي؛ وتقوم (IntraWeb) أوتوماتيكيا بتحويل عناصر البرنامج إلى (script) أو (HTML) عند الضرورة.
توفر (IntraWeb) مدى واسع من توافقية متصفحات الانترنت، حيث أن تطبيقات (IntraWeb) أوتوماتيكيا تكتشف متصفح المستخدم الافتراضي ومن ثم تقوم بتوليد (HTML) و(script) الذي يتلاءم مع ذلك المتصفح. إضافة إلى أنها تدعم متصفحات عديدة منها: (Internet Explorer) الإصدار 4 حتى الإصدار 6، ومتصفح (Netscape) الإصدار 4 و الإصدار 6، ومتصفح (Mozilla).

مكونات (IntraWeb)

احد مميزات (IntraWeb) أنها تستخدم نفس نوع الأدوات والتقنيات المستخدمة في تطوير مكتبة المكونات المرئية الاعتيادية (VCL). بحيث يمكن بناء واجهة المستخدم بوضع المكونات على (Form)، كما في التطبيقات الأخرى. ولا ننسى أن هناك عدد من الاختلافات المهمة التي يجب أخذها في الحسبان. فكائنات (Form) والأدوات المستخدمة في واجهات (IntraWeb) ليست هي نفسها المستخدمة في تطبيقات واجهات (non-Web GUI). فعند إنشاء (Form) أو استخدام أداة، يجب التأكد من استخدام مكونات (IntraWeb) بدلا من مكونات (VCL).
العديد من مكونات (VCL) لديها ما يناظرها في مكونات (IntraWeb). وبشكل عام، مكونات (IntraWeb) لديها نفس الاسم كما في مثيلاتها في (VCL)، ولكنها مسبوقة بالأحرف (IW). على سبيل المثال: الكائن (IWCheckBox) في (IntraWeb) هو المناظر للكائن (CheckBox) في (VCL). أيقونات مكونات (IntraWeb) في لوحة المكونات (Tool palette) تقريبا تشبه نظيراتها في (VCL)، مما يسهل إيجاد مكونات (IntraWeb) التي نحتاجها.

البرمجة باستخدام (IntraWeb)

إذا كنت تملك خبرة في كتابة تطبيقات واجهة المستخدم الرسومية (GUI) باستخدام أدوات تطوير (RAD)، إذا أنت تملك المهارة الأساسية اللازمة للبدء في بناء تطبيقات (IntraWeb). فطريقة التصميم الأساسية لواجهة المستخدم هي نفسها سواء في تطبيقات (IntraWeb) وتطبيقات (GUI) الاعتيادية: ببساطة اختر المكونات التي تحتاجها من لوحة المكونات (Tool palette) من ثم ضعها على (Form). بحيث يعكس شكل (Form) مظهر صفحة (Web) التي ستظهر للمستخدم. تختلف كائنات (IntraWeb Form) ومكونات (IntraWeb) عن نظيراتها في (VCL)، ولكنها تتشابه في تسمياتها.
على سبيل المثال، لنقل أننا نريد إضافة الكائن (Button) إلى (Form). في تطبيقات (VCL) الاعتيادية، يمكننا أن نجد الكائن (Button) في (Standard tool palette) ومن ثم نضعه في المكان المناسب على (Form). وعند تشغيل البرنامج يظهر الكائن (Button) في المكان الذي وضعناه فيه على (Form). أما بالنسبة لتطبيقات (IntraWeb)، الفرق الوحيد أننا نستخدم الكائن (IWButton) الموجود في (IW Standard tool palette). بالرغم من أن أيقونات الكائنين تبدوان متشابهتان تقريبا. ولكن الفرق الوحيد هو الأحرف (IW) الموجودة في أعلى اليمين لأيقونة الكائن (IntraWeb button).

إنشاء تطبيق (Web) جديد

الآن سوف نبدأ في تصميم تطبيق (IntraWeb). الخطوة الأولى في عملية إنشاء البرنامج هي إنشاء مشروع (Web) جديد باستخدام مكتبة المكونات المرئية (VCL). لإنشاء مشروع جديد اتبع الخطوات التالية:
اختر الأمر: (File > New > Other)، ومن ثم قم باختيار (VCL for the Web).
اختر (VCL for the Web Application Wizard) واضغط OK.
تظهر نافذة (VCL for the Web Application Wizard). في (Application Type) تأكد من اختيار (StandAlone Application)، وفي الخانة (Project Name) اكتب اسم المشروع ومن ثم اضغط OK.




بهذه الطريقة قمنا بإنشاء مكتبة مكونات مرئية (VCL) خاصة بتطبيق (Web) وجميع ملفات (Source Code) الخاصة بالمشروع تم تخزينها أوتوماتيكيا في (Project Directory). ونحن الآن جاهزون لتصميم واجهة المستخدم (Web User Interface).


إنشاء واجهة (Web)

اضغط على (Ctr + F12) لإظهار قائمة (Search from forms) واختر منها (IWForm1 (Unit1.pas)).
اضغط على (Form). وفي (Object Inspector). غير الخاصية (Title) إلى: "My first project"، هذا النص سوف يظهر على شريط العنوان لمتصفح الانترنت عند تشغيل البرنامج وإظهار الصفحة.
ضع الكائن (IWLabel) الموجود في (IW Standard Tool palette) على (Form). وغير الخاصية (Caption) إلى: "What is your name?". هذا النص سوف يظهر على (Form).
ضع الكائن (IWEdit) على (Form) تحت الكائن (IWLabel). ومن ثم فرغ الخاصية (Text) من النص.
ضع الكائن (IWButton) على (Form) تحت الكائن (IWEdit) غير الخاصية (Caption) إلى "OK".
وتصبح (Form) كما في الشكل الآتي:




اضغط (Save) لحفظ التغييرات التي قمنا به.

كتابة الكود في الحدث (OnClick) للكائن (Button)

الآن سوف نقوم بكتابة كود يقوم بإظهار مربع حوار عند الضغط على الزر (OK):
1. اضغط مرتين (Double-click) على الزر (OK)، سوف يتم إنشاء حدث فارغ في نافذة (Code Editor)، كما هو موضح هنا:

اقتباس:
procedure TIWForm1.IWButton1Click(Sender: TObject);
begin

end;

2. لنقم بإضافة الكود التالي:

اقتباس:
procedure TIWForm1.IWButton1Click(Sender: TObject);
var
s: string;
begin
s := IWEdit1.Text;
if Length(s) = 0 then
WebApplication.ShowMessage('Please enter your name.')
else
begin
WebApplication.ShowMessage('Hello, ' + s +'!');
IWEdit1.Text := '';
end;
end;

تشغيل التطبيق

الآن يمكننا اختبار تطبيق (IntaWeb) كالآتي:
1. اختر الأمر (Run). سوف يظهر خادم تطبيقات (IntaWeb) الموضح في الأسفل.




2. في نافذة خادم تطبيقات (IntaWeb) اختر الامر (Run > Execute). سوف يظهر التطبيق في نافذة متصفح الانترنت الافتراضي لديك. على سبيل المثال، الشكل التالي يوضح النتيجة في نافذة متصفح (Internet Explorer):




3. افترض أننا كتبنا النص التالي في (Edit Box): "Omar M. Fraes"، ومن ثم ضغطنا OK ستظهر نافذة الحوار التالية:




عند الانتهاء يمكنك إنهاء البرنامج بإغلاق نافذة متصفح الانترنت ومن ثم إغلاق نافذة خادم تطبيقات (IntaWeb).

وفي الختام ارجوا أن أكون قد وفقت في تقديم هذا الدرس، نلتقي في دروس أخرى إن شاء الله. شكرا...!

لتحميل ملف شرح فيديو:
http://rapidshare.com/files/365555573/Lesson_19_b.exe
لتحميل الدرس في ملف PDF:
http://rapidshare.com/files/365556693/Lesson_19.pdf

تحياتي...!
ـــــــــــــــــــــــــ ـــــــــــــــــــــــــ ـــــــــــــــــــــ
للاطلاع على الدروس السابقة على الروابط التالية:
الدرس 1: http://www.alhandasa.net/forum/showthread.php?t=193706
الدرس 2: http://www.alhandasa.net/forum/showthread.php?t=193843
الدرس 3: http://www.alhandasa.net/forum/showthread.php?t=194172
الدرس 4: http://www.alhandasa.net/forum/showthread.php?t=195538
الدرس 5: http://www.alhandasa.net/forum/showthread.php?t=196247
الدرس 6: http://www.alhandasa.net/forum/showthread.php?t=197185
الدرس 7: http://www.alhandasa.net/forum/showthread.php?t=199336
الدرس 8: http://www.alhandasa.net/forum/showthread.php?t=199949
الدرس 9: http://www.alhandasa.net/forum/showthread.php?t=200778
الدرس 10: http://www.alhandasa.net/forum/showthread.php?t=201879
الدرس 11: http://www.alhandasa.net/forum/showthread.php?t=202182
الدرس 12: http://www.alhandasa.net/forum/showthread.php?t=202559
الدرس 13: http://www.alhandasa.net/forum/showthread.php?t=203887
الدرس 14: http://www.alhandasa.net/forum/showthread.php?t=204354
الدرس 15: http://www.alhandasa.net/forum/showthread.php?t=204651
الدرس 16: http://www.alhandasa.net/forum/showthread.php?t=204768
الدرس 17: http://www.alhandasa.net/forum/showthread.php?t=207721
الدرس 18: http://www.alhandasa.net/forum/showthread.php?t=207826

ملحق 1: http://www.alhandasa.net/forum/showthread.php?t=202141
ملحق 2: http://www.alhandasa.net/forum/showthread.php?t=202181
ملحق 3: http://www.alhandasa.net/forum/showthread.php?t=202690
ملحق 4: http://www.alhandasa.net/forum/showthread.php?t=206510
_____________منقوووول