مزيكا 3 داى

www.m3day.mam9.com
مرحبا بكم فى بيتكم مزيكا 3 داى ارجو منكم التسجيل والمتابعة معنا جميعا

اهلا بجميع اعضاء وزوار المنتدى الكرام


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

    avatar
    ronaldo
    مزيكاوى حريف
    مزيكاوى حريف

    عدد المساهمات : 64
    تاريخ التسجيل : 04/10/2011

    دروس في البرمجة بلغة دلفي بالصوت والصورة (19) تصميم تطبيقات IntraWeb Empty دروس في البرمجة بلغة دلفي بالصوت والصورة (19) تصميم تطبيقات IntraWeb

    مُساهمة من طرف ronaldo في الجمعة أكتوبر 21, 2011 2:56 pm

    إنشاء تطبيقات خادم الشبكة (Web Server Applications) باستخدام (IntraWeb)

    أهلا بكم إلى درس جديد من سلسلة دروس البرمجة بلغة دلفي بالصوت والصورة، في هذا الدرس إن شاء الله سوف نتعلم برمجة تطبيقات (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).

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

    لتحميل ملف شرح فيديو:
    rapidshare.com Lesson_19_b.exe
    لتحميل الدرس في ملف PDF:
    rapidshare.com 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
    __________________

      الوقت/التاريخ الآن هو الخميس أبريل 02, 2020 10:39 am