استخدم html css javascript لإنشاء صفحة البرنامج التعليمي لرسومات RIA الخاصة بك 1/2

أدخل RIADemo كاسم للمشروع.

حدد الخادم المطلوب تشغيله ومعيار Java ee.

اختر tomcat5.0، j2ee1.4 هنا. تقدم هذه المقالة أمثلة ولا تعتمد على الخادم، لأن html&css&javascript نفسها ثابتة، وسوف تصبح ملف html بعد الانتهاء. بالمعنى الدقيق للكلمة، يجب تشغيل برنامج الويب بواسطة خادم، ولا تزال Netbeans تتبنى مفهوم الإدارة هذا.
في هذه الخطوة، يمكنك النقر فوق "إنهاء" لبناء المشروع. والخطوة التالية هي تحديد إطار عمل هنا، من أجل البساطة والنقاء، لم يتم تحديد أي إطار عمل.
بعد إنشاء المشروع، يكون هيكل المشروع لمساحة عمل المشروع كما يلي:

نظرًا لأنه ثابت، فلن تحتاج إلى الانتباه إلى أي شيء خارج دليل صفحة الويب.
لتسهيل الإدارة، يجب إنشاء دليلين جديدين ضمن دليل صفحة الويب، inc والصور، وهو أمر بسيط للغاية ولن يتم وصفه بالتفصيل هنا.
المثال الأول، انتظر حتى يتم طلب الصفحة، ويكون التأثير كما يلي:

هذا المثال هو تنفيذ عملية على الصفحة الحالية، وتجميد الصفحة وعرض مربع الانتظار قبل مغادرة نتائج العملية أو إرجاعها. وتتمثل الوظيفة في مطالبة المستخدم بتحميل الصفحة. خاصة بالنسبة لبعض طلبات البيانات ذات الحجم الكبير، يمكن لواجهة المستخدم هذه أن تخفف من انزعاج العملاء الناجم عن فترات الانتظار الطويلة.
يوضح التحليل الموجز أن هذا المثال يتكون من نقطتين رئيسيتين.
1. العناصر الثابتة
2. متى يظهر المربع ومتى يختفي؟ واجهة المستخدم في هذا التأثير عبارة عن مربع تحميل على خلفية داكنة.
بالنسبة للعناصر الثابتة، بغض النظر عن مظهرها، فإن جوهرها دائمًا هو HTML وCSS وJavaScript، باستثناء عناصر التحكم المضمنة بالطبع، مثل الفلاش، وفي الواقع، لم تعد عناصر التحكم المضمنة ضمن نطاق العناصر الثابتة مثل HTML.
في هذا المثال، المربع الذي يتم تحميله هو في الواقع مجرد قسم يحتوي على صورة ذات تأثير تمرير ونص عادي، ومع ذلك، يتم تجميل القسم باستخدام CSS، ثم يتم دمجه مع خصائص صفحة الويب، ويتم استخدام JavaScript للتحكم في. عرض div وتختفي.
إذن، كيف يمكن إنشاء مثل هذا التأثير؟ من أجل شرح عملية الإنتاج بأكملها بوضوح، بغض النظر عن JavaScript في الوقت الحالي، قم بإنشاء div أولاً.
في دليل صفحة الويب، انقر بزر الماوس الأيمن فوق جديد -->html

حدد html وقم بتسمية ملف الفهرس
بعد إنشاء الصفحة، المادة الوحيدة المطلوبة هي صورة التحميل.gif مع تأثير التمرير. انسخ الصورة إلى مجلد الصور.
بعد ذلك، قم بإنشاء ملف CSS جديد، وانقر بزر الماوس الأيمن على المجلد inc، واختر جديد -> أخرى، وحدد Cascading Style Sheets في الدلائل الأخرى، كما هو موضح في الشكل:

قم بتسمية النمط، وانقر فوق "إنهاء"، وقم بإنشاء ملف CSS الذي تم إنشاؤه حديثًا من خلال هذه الخطوة تلقائيًا، حيث يقوم حرك المؤشر إلى نطاق ورقة الأنماط الجذرية بعرض نافذة منشئ النمط لـ CSS، وهناك أيضًا هي نافذة معاينة التأثير، كما هو موضح أدناه:

توفر نافذة المولد الموجودة على الجانب الأيمن من المحرر إعدادات واجهة المستخدم الرسومية للعديد من السمات وتقوم تلقائيًا بإنشاء التعليمات البرمجية المقابلة أسفل المحرر، على سبيل المثال، في لوحة الخطوط، يحدد المؤلف الخط المائل للنمط والسمك حدد اللون الغامق، ثم حدد التسطير، وحدد #ff0099 (نوع من اللون الأحمر) للون. عند تحديد اللون، سينبثق محدد اللون لتحديد اللون المقابل، وسيكون تأثير المعاينة كما يلي:

يقوم المحرر تلقائيًا بإنشاء الكود، ويعرض مربع المعاينة أيضًا التأثير بعد قيام Netbeans بذلك بشكل جيد جدًا.
تجدر الإشارة إلى أنه على الرغم من أن الكود الذي تم إنشاؤه بواسطة الأداة بسيط، إلا أنه بالتأكيد ليس مرنًا وسهل التحكم فيه مثل الكتابة اليدوية.
هنا، حدد نمط صندوق الانتظار الذي نحتاجه
.تحميل
{
border:2px Solid #a3bad9;/* نمط حدود كائن النمط المطبق*/
اللون:#003366 /* لون المحتوى في كائن النمط المطبق*/
الحشو:10px; /* المسافة بين المحتوى الموجود في كائن النمط المطبق وحدود النمط (أعلى، أسفل، يسار، يمين) */
هامش:0 /* المسافة بين كائن النمط المطبق والعناصر المحيطة به (أعلى، أسفل، يسار، يمين) */
z-index:2000 /* قيمة الإحداثي z لكائن النمط المطبق في صفحة الويب*/
width:205px; /* عرض كائن النمط المطبق*/
text-align:center /* توسيط المحتوى في كائن النمط المطبق*/
الموضع:مطلق /* يتم عرض موضع كائن النمط المطبق في الصفحة */
وزن الخط: غامق /* نمط الخط في كائن النمط المطبق*/
حجم الخط: 13px; /* حجم الخط في كائن النمط المطبق*/
}
إذا كان القراء مهتمين بالمعنى المحدد لكل سمة، فيمكنهم البحث عن معلومات لفهم أعمق، ولن أخوض في التفاصيل هنا.
بعد إنشاء CSS، قم بإضافة التعليمات البرمجية التالية إلى ملف Index.html الذي قمت بإنشائه للتو لاستيراد نمط CSS.

الانضمام إلى المنطقة

احفظ الملف، وانقر بزر الماوس الأيمن على ملف Index.html وحدد Run File

سينبثق المتصفح تلقائيًا، وسيكون تأثير العرض كما يلي:

يظهر مربع. يمكن للقراء الحذرين أن يجدوا أن واجهة المستخدم مختلفة قليلاً عن تلك الموضحة في البداية إذا قمت بإضافة الكود التالي إلى نمط التحميل المحدد للتو:
الخلفية: عنوان url أبيض (../images/block-bg.gif) تكرار-x؛ /* خلفية كائن النمط المطبق وتعيينه للتكرار أفقيًا*/
بالطبع، تحتاج أيضًا إلى إضافة صورة الخلفية block-bg.gif بعد إضافة صورة الخلفية، يكون التأثير كما يلي:

عند هذه النقطة، تم الانتهاء من واجهة المستخدم.
بعد ذلك، قم بكيفية جعل صفحة الويب مظلمة وغير قابلة للنقر عليها.
إن أبسط طريقة لتغميق صفحة الويب هي تغيير لون خلفية صفحة الويب إلى لون داكن، ولكن من الواضح أن هذا لا معنى له، لأنه بعد تغييره إلى لون داكن، لا يزال من الممكن النقر فوق العناصر الموجودة في الصفحة.
فكيف يتم تغميق الخلفية وجعل النقر مستحيلًا؟
عند تحليل مبدأ صفحات الويب الثابتة مرة أخرى، يجب تحقيق التغميق عن طريق ضبط اللون، ولتحقيق عدم إمكانية النقر، يمكن تحقيقه عن طريق استبدال الكائن الذي تم النقر عليه، أي أنه يتم إنشاء كائن على الكائن المراد النقر عليه. هذا الكائن شفاف، فعندما ينقر المستخدم، فإن ما ينقر عليه هو في الواقع كائن شفاف يحجب الكائن الأساسي، مما يعطي المستخدم وهمًا بأن النقرة غير صالحة، كما هو موضح أدناه:

إذا كان الكائن B شفافًا وبجوار الكائن A، وإذا حاول طرف ثالث الاتصال بالكائن A ولم يواجه سوى الكائن B، فستكون جميع جهات الاتصال ضد A غير صالحة.
في هذه المرحلة من التحليل، ما يتعين علينا القيام به هو إنشاء div بهذا التأثير الخاص، وفي التحليل النهائي، فإنه لا يزال إنتاجًا وتطبيقًا لـ CSS.
يمكن الحصول على تأثير الشفافية الداكنة من خلال سمة مرشح CSS وإعادة تعريف نمط جديد bgdiv
.bgdiv
{
الخلفية:#ccc /* لون الخلفية*/
العتامة:.3؛ /* الشفافية*/
عامل التصفية: ألفا (التعتيم = 30)؛ /* مرشح شفاف*/
الموضع:مطلق /* يتم عرض موضع كائن النمط المطبق في الصفحة */
z-index:1000 /* قيمة الإحداثي z لكائن النمط المطبق في صفحة الويب*/
width:500px; /* عرض كائن النمط المطبق*/
الارتفاع: 500 بكسل /*ارتفاع كائن النمط المطبق*/
top: 0px; /* المسافة بين كائن النمط المطبق وأعلى الصفحة*/
left: 0px; /* المسافة بين كائن النمط المطبق والنهاية اليسرى للصفحة*/
}

وفي منطقة الجسم أضف:
، قم بتشغيل الملف، ويكون التأثير كما يلي:

في هذه المرحلة، اكتمل تصميم واجهة المستخدم، لكن حجم القسم الذي نراه هو 500*500، وهو لا يملأ الصفحة بأكملها، ولم يتم توسيط مربع الانتظار، وكان التأثير مرئيًا بالفعل من البداية من الواضح أنه لا يمكن القيام بذلك بشكل مباشر، عند استخدامه فعليًا، نحتاج إلى الخلفية لملء الصفحة بأكملها، ويجب عرض مربع الانتظار في المنتصف، ونحتاج إلى أن نكون قادرين على التحكم في وقت ظهور التأثير ومتى يختفي.
ثم يجب إكمال هذه المهام بواسطة JavaScript.
يمكن لـ JavaScript التحكم في جميع العناصر الثابتة تقريبًا على الصفحة، ويتم تحقيق التأثيرات المذكورة أعلاه رسميًا من خلال التحكم في قسم الخلفية ومربع الانتظار.
في JavaScript، إن أبسط طريقة للحصول على عنصر على الصفحة هي تعيين قيمة لسمة ID للكائن الهدف، ثم الحصول عليها من خلال getElementbyId الخاص بـ JavaScript.
هنا، قم أولاً بتعيين قيمة لسمة معرف bgdiv، مثل:

دعونا نحل المشكلة الأولى أولاً، وهي ضبط حجم الطبقة لملء الصفحة بأكملها من خلال جافا سكريبت.
الدالة showbg()
{
var bgdiv=document.getElementById("bgdiv"); // احصل على كائن bgdiv
bgdiv.style.width=document.body.clientWidth; // اضبط عرض كائن bgdiv على عرض المنطقة المرئية من صفحة الويب
if (document.body.clientHeight>document.body.scrollHeight) // اضبط ارتفاع كائن bgdiv على ارتفاع المنطقة المرئية من صفحة الويب
bgdiv.style.height=document.body.clientHeight;
آخر
bgdiv.style.height=document.body.scrollHeight;
}
ما يجب توضيحه هنا هو أن كل من ClientWidh وscrollWidth يمثلان عرض المنطقة المرئية، والفرق هو أنه إذا كانت هناك أشرطة تمرير في صفحة الويب، فإن scollWidth أكبر من ClientWidth، لأن scollWidth يتضمن شريط التمرير إلى ؟؟ ؟؟؟؟؟؟، في حين أن ClientWidth لا يفعل ذلك، فقط الجزء المرئي.
في الوظيفة المذكورة أعلاه، يتم استخدام ClientWidth كعرض، لأنه وفقًا للمبادئ الأساسية لتصميم الويب، من غير المناسب تمامًا تصميم صفحة ويب تحتوي على شريط تمرير أفقي، لأن الماوس يمكنه التمرير لأعلى ولأسفل فقط، ولكن ليس لليسار إلى اليمين، لذا فإن أخذ ClientWidth هنا يعني ضمان عدم ظهور شريط تمرير أفقي في المشروع بأكمله.
يأخذ إعداد الارتفاع أدناه في الاعتبار التوافق مع أشرطة التمرير العمودية وبدونها.
يمكن للوظيفة المذكورة أعلاه التأكد من أن bgdiv المطلوب يمكنه ملء الشاشة بأكملها.

في مجلد inc، قم بإنشاء ملف جافا سكريبت جديد، وانسخ الوظيفة أعلاه فيه، وأضف الكود التالي إلى الصفحة لتقديم الوظيفة

لتسهيل العرض، أضف onload="showbg();" إلى علامة النص بعد تحميل الصفحة، يمكنك أن ترى أن bgdiv المعدل قد ملأ الصفحة بأكملها.
مبدأ ضبط موضع العرض لصندوق الانتظار مشابه.
وظيفة عرض الانتظار ()
{
showbg(); // عرض bgdiv
var Loading=document.getElementById("loaddiv");//احصل على كائن التحميل
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;// اضبط مسافة التحميل من الأعلى
loading.style.left=document.body.clientWidth/2-110;// اضبط المسافة بين التحميل والطرف الأيسر
}
قم باستدعاء showwait في حدث التحميل لعرض مربع الانتظار على خلفية شفافة داكنة.

ما يجب التأكيد عليه هنا هو سمة الموضع لسمة CSS، ويجب تعيين هذه السمة على مطلق حتى يكون الكود أعلاه فعالاً، لأنه يتم تعيين موضع الكود أعلاه وفقًا للموضع المطلق.

يتم عرض التأثير أعلاه بمجرد فتح الصفحة. إذا كنت تريد التحكم في عرضه، فأنت بحاجة إلى استخدام عرض سمات CSS. عندما تكون القيمة محظورة، سيتم عرضها، وعندما لا تكون موجودة لن يتم عرضها.

لقد أضفنا العرض: لا شيء إلى سمات CSS المذكورة أعلاه، وبالتالي لن يتم عرض التأثير عند فتح الصفحة.

ثم أضف bgdiv.style.display = "block" في وظيفة showbg؛

أضفloading.style.display="none" إلى وظيفة showwait؛

أضف عرضًا إلى منطقة الجسم في الصفحة وقم بتشغيل الصفحة، ويمكن رؤية رابط العرض فقط بعد النقر على رابط العرض، سيتم عرض التأثير الذي نحتاجه، كما هو موضح في الشكل:

الآثار التي تظهر لن تختفي. في دراستي اليومية، اكتشف المؤلف أيضًا ظاهرة عند النقر على رابط في الصفحة (أي إرسال طلب إلى الخادم)، عندما لا ينته الخادم من المعالجة ولا يعيد الصفحة إلى العميل. الصفحة نفسها لن تكون هناك تغييرات، وما يسمى بسرعة الشبكة البطيئة لا يعكسها أيضًا النقر عليها. عندما يكتمل الخادم، فإنه يعيد HTML إلى المستخدم وتبدأ الصفحة في التغيير. بعد ذلك، إذا تم تشغيل حدث showwait عند النقر فوق الارتباط، فسيظهر التأثير حتى ينتهي الخادم من معالجة الطلب ويتم إعادة توجيه الصفحة وتختفي.

على سبيل المثال، إذا قمنا بتغيير الكود المعروض للعرض، ثم قمنا بتشغيل الصفحة، ثم نقرنا على عرض، فيمكننا أن نرى أن مربع الانتظار يظهر، وعندما تختفي الصفحة، تظهر الصفحة الرئيسية لـ Sun.
دعونا ننظر إلى الوراء. في الواقع، لا يوجد شيء مميز في هذا المثال، كل ما في الأمر هو أن متطلبات HTML وCSS وجافا سكريبت عالية جدًا فقط إذا كنت على دراية بهذه العناصر الثابتة الثلاثة، يمكنك فهمها جيدًا. وهنا، هناك أيضًا متطلبات معينة للفنانين، وتجدر الإشارة إلى أن الصور التمريرية وصور الخلفية الخاصة بالانتظار ليست من صنع المؤلف، بل هي صور للإطار الإضافي تعتمد أيضًا على نمط CSS تحويلة.
ومن الجدير بالذكر أن محرر Netbeans 6.1 يتمتع بدعم سريع وغني لجافا سكريبت، وليس فقط دعم الكلمات الرئيسية، ولكن أيضًا يطالب بالمتصفحات المتوافقة، بل ويقدم بعض الأمثلة البسيطة.

تنفق هذه المقالة مساحة كبيرة لشرح مثال غير معقد والغرض من ذلك هو إعطاء القراء تحليلًا متعمقًا لكيفية تطوير RIA الخاص بهم من خلال عمليات التفكير والتطوير التفصيلية.

يمكن ملاحظة أنه لإنشاء هذا النوع من RIA، على الرغم من أنك لا تزال بحاجة إلى أساس فني معين وقدرات تصميم الصفحة، فإن خطوات الإنتاج الأساسية ليست أكثر من الخطوتين التاليتين:

1. قم بإنشاء واجهة المستخدم الخاصة بك باستخدام HTML وCSS.

2. ادرس بعناية وضع سلوك الصفحة واكتب جافا سكريبت للتحكم في واجهة المستخدم.

في المقالة التالية، سيقدم لك المؤلف مثالًا أكثر تعقيدًا وشمولاً، بما في ذلك مربعات الحوار المنبثقة والقوائم المنبثقة وطبقات المؤثرات الخاصة ونوافذ السحب.