أنا مطور مبتدئ في المقدمة. الآن أنا أدرس والتدريب في شركة تكنولوجيا المعلومات مينسك. يحدث تعلم أساسيات الويب من خلال مكتبة
Webix JS
كمثال وأريد أن أشارك تجربتي المتواضعة وحفظها كبرنامج تعليمي صغير لمكتبة واجهة المستخدم المثيرة للاهتمام.
المهمة الثانية
في
المهمة الأخيرة
، قمت بإنشاء صفحة باستخدام مكتبة Webix. والآن أحتاج إلى تعيين المنطق التالي لتفاعل المستخدم مع النموذج:
الأداة الرئيسية التي ستعمل معها المقالة هي
النموذج . بالإضافة إلى ذلك ، يمكن قراءتها في
الوثائق .
يمكنك تحميل
الرابط المصدر.
يمكن العثور على التطبيق التجريبي الناتج
هنا .
الخطوة 1. إضافة بيانات جديدة إلى الجدول.
من أجل راحة قراءة الكود وتقسيم المشروع إلى كتل منطقية ، سأقوم بإنشاء ملف jobs.js والإشارة إلى المسار إليه في ملف index.html. في ذلك ، سوف أقوم بتعيين الوظائف المسؤولة عن سلوك التطبيق.
<body> <script src="data.js"></script> <script src="functions.js"></script> <script src="script.js"></script> </body>
في الملف الجديد ، أقوم بإنشاء وظيفة
addItem ، التي تضيف بيانات جديدة إلى الجدول:
const addItem = () =>{ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); }
للوصول إلى عنصر في مكتبة Webix ، استخدم
الطريقة $$ ، والتي يتم تمرير معرف العنصر إليها. في التعليمة البرمجية أعلاه ، يتم الوصول إلى النموذج باستخدام
$$("film_form") .
تعمل وظيفة addItem كما يلي: أحصل على البيانات الحالية من النموذج من خلال طريقة getValues وأكتبها إلى متغير item_data . باستخدام هذه البيانات ، أقوم بإنشاء سجل جديد في الورقة باستخدام طريقة الإضافة .
للاتصال بهذه الوظيفة من خلال النقر على عنصر واجهة المستخدم
"button" مع قيمة
"Add new" أقوم بتعيين خاصية
النقر .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear"} ]
نتيجة لذلك ، يجب إضافة بيانات النموذج إلى الجدول:
الخطوة 2. التحقق من صحة النموذج. رسالة منبثقة
قبل إضافة بيانات جديدة ، يجب التحقق من صحة المعلومات من حقول الإدخال. يتم بدء التحقق من الصحة
بواسطة طريقة Validate () ، والتي سأتصل بها داخل وظيفة
addItem مباشرة قبل العمل مع البيانات. سأضع هنا أيضًا رمزًا لرسالة منبثقة حول التحقق من الصحة بنجاح.
يتم إنشاء رسالة بسيطة في Webix بواسطة وظيفة
webix.message () ، والتي تأخذ نص الرسالة كمعلمة. سوف تظهر رسالة في الزاوية اليمنى العليا.
const addItem = () =>{ if($$("film_form").validate()){ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); webix.message("Validation is successful!"); } }
وظيفة تعمل مثل هذا. داخل الشرط If ، نصل إلى النموذج ونستدعي طريقة التحقق من الصحة () . في حالة نجاح الاختبار ، تُرجع الطريقة بشكل صحيح ويتم تنفيذ التعليمات البرمجية بشكل أكبر. بعد إضافة البيانات إلى الجدول ، يتم استدعاء وظيفة مع الرسالة - "Validation is successful!" .
رسالة منبثقة:
أحتاج الآن إلى إنشاء كائن
قواعد في عنصر واجهة تعامل
النموذج . من الضروري لوظيفة
التحقق من الصحة () التحقق من المعلومات من جميع حقول النموذج للتأكد من مطابقتها للمعايير المحددة.
شروط التحقق من الصحة بنجاح ستكون كما يلي:
- يجب ألا يكون حقل العنوان فارغًا ؛
- يجب ألا تقل سنة الحقل عن 1970 وأكثر من السنة الحالية ؛
- يجب ألا يكون حقل التصنيف صفراً ؛
- يجب أن يكون حقل الأصوات أكبر من 1 وأقل من 1،000،000.
بعد ذلك ، سيكون رمز مصدر عنصر واجهة تعامل
النموذج مع قواعد التحقق من الصحة مثل هذا:
view:"form", id:"film_form", width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ], rules:{ title: webix.rules.isNotEmpty, rating(value){ if(webix.rules.isNumber(value)){ return true; } }, votes(value){ return value < 1000000 && value >= 1; }, year(value){ return value>=1970 && value <= new Date().getFullYear(); } }
يجب أن تتطابق خصائص كائن القواعد مع قيم
name: "…" خاصية عناصر النموذج. يتم تعيين
قواعد webix.rules.isNotEmpty و webix.rules.isNumber
المعرفة مسبقًا في خصائص العنوان والتصنيف والتصويت ، في السنة توجد وظيفة تحدد
قواعد المستخدم .
يجب أن تعود القواعد عند النجاح وخطأ في الخطأ. سيتم تمرير النموذج التحقق من الصحة عند إرجاع كافة خصائص كائن القواعد صحيحاً. وإلا ، سيتم تمييز الحقول التي تفشل في التحقق من الصحة باللون الأحمر.
نتيجة الاختبار:
الخطوة 3. رسالة خطأ
تم تعيين القواعد ، والآن أحتاج إلى آلية لعرض رسالة خطأ لإعلام المستخدم بأن البيانات التي تم إدخالها لا تفي بالمعايير المحددة. للقيام بذلك ، يمكنك تمييز الحقل باللون الأحمر وإضافة رسالة خطأ.
يمكن أن تحتوي الحقول على
مجموعة خاصية
invalidMessage ؛ حيث تكون قيمتها هي النص مع رسالة الخطأ. ستظهر هذه الرسالة أسفل الحقل في حالة فشل التحقق من الصحة.
كود:
elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ]
النتيجة:
الخطوة 4. تنظيف النموذج
لمسح النموذج ، يجب عليك إنشاء دالة تسمى بواسطة الزر
"Clear" . وهي أيضًا مسؤولة عن إخراج رسالة تحذير ، وفي حالة الاستجابة الإيجابية ، ستقوم بمسح البيانات المدخلة وإعادة تعيين مؤشر الخطأ.
رسالة تحذير:
سأدعو وظيفة
clearForm وأكتب الكود التالي فيه:
function clearForm(){ webix.confirm({ title:"All data will be lost!", text:"Are you sure?" }).then( () => { $$("film_form").clear(); $$("film_form").clearValidation(); } )};
يتم استخدام طريقة رد الاتصال
webback.confirm ({...}) لإطار التأكيد ، الذي يقبل كائنًا به الخصائص التالية:
النص والعنوان . منذ ترجع الطريقة الوعد ، يمكنني استخدام المعالج
.then . إذا كانت الإجابة "نعم" ، فسأقوم في معالج .this بالاتصال بطريقتين: clear () - لمسح حقول النموذج ، و clearValidation () ، مما يؤدي إلى إزالة ملصقات خطأ التحقق من الصحة.
الإجراء الأخير هو ربط استدعاء الوظيفة بالزر
"Clear" .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ]
يمكن الاطلاع على الكود والعرض التوضيحي هنا -
snippet.webix.com/17w1dodb .
تعميم
من المصدر ، كان من الواضح أن كود المقال السابق بسيط للغاية ، ولكن مع تطور المشروع ، أصبح تدريجياً أكثر تعقيدًا ، ويزداد عدده. لكي لا تضيع في حدود سطور التعليمات البرمجية ، يصبح من المهم الحفاظ على سهولة القراءة والبساطة في البنية. مثال للتفاعل مع نموذج يصف الطرق الأساسية فقط ، ولكن من الواضح أيضًا أنه لمنح ديناميات الصفحة ، يقدم webix رمزًا صغيرًا وقابل للقراءة وبديهية. بالمقارنة مع جافا سكريبت الخالص ، فإن حجمه يتضاعف في أحسن الأحوال