أنا مطور مبتدئ في المقدمة. الآن أنا أدرس والتدريب في شركة تكنولوجيا المعلومات مينسك. يحدث تعلم أساسيات الويب من خلال مكتبة
Webix JS
كمثال وأريد أن أشارك تجربتي المتواضعة وحفظها كبرنامج تعليمي صغير لمكتبة واجهة المستخدم المثيرة للاهتمام.
المهمة الثالثة
أواصل تطوير وظيفة التطبيق الذي تم إنشاؤه باستخدام مكتبة Webix. في المقالات السابقة ، اكتشفت كيفية
إنشاء واجهة تطبيق وكيفية
التفاعل مع النموذج . في هذه المقالة ، أفكر في المهام التالية:
تم وصف تشغيل عناصر واجهة التعامل
والتخطيط في المقالات السابقة.
يمكنك تحميل
الرابط المصدر.
التطبيق النهائي يمكن العثور عليها
هنا .
الخطوة 1. تقسيم المشروع إلى وحدات
لتجنب حدوث تشويش في الكود ، من الموثوق به تقسيم المشروع إلى وحدات. للقيام بذلك ، سوف أقوم بإنشاء الملفات التالية ونقل رمز القطعة إليها:
- header.js - أداة شريط الأدوات ؛
- aside.js - قائمة القطعة ؛
- table.js - القطعة Datatable .
- form.js - شكل القطعة ؛
- footer.js - عنصر مع النص: "البرنامج ...".
في الملفات الجديدة ، يحدث وصف تكوينات عنصر واجهة المستخدم في متغير ...
const footer = { height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"bottom-link" }
يتم تضمين الملفات التي تم إنشاؤها في ملف index.html بالترتيب التالي:
<body> <script src="functions.js"></script> <script src="users_module.js"></script> <script src="products_module.js"></script> <script src="data.js"></script> <script src="header.js"></script> <script src="table.js"></script> <script src="form.js"></script> <script src="aside.js"></script> <script src="footer.js"></script> <script src="script.js"></script> </body>
يتم دمج الوحدات النمطية الناتجة في ملف script.js ، والذي يحتوي الآن على رمز تهيئة تطبيق بسيط وموجز.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, table, form ] }, footer ] });
الخطوة 2. علامات التبويب والتبديل بينهما
في الحالات التي لا توجد فيها مساحة خالية كافية على الصفحة ، أو إذا كنت بحاجة إلى فصل محتويات التطبيق بشكل موضوعي ، فمن المنطقي استخدام علامات التبويب.
يتم التبديل بين علامات التبويب بواسطة مكون
Multiview . يتيح لك هذا المكون إنشاء العدد اللازم من علامات التبويب في التطبيق ويعرض علامة واحدة فقط في وقت معين.
سننشئ معاينة متعددة في ملف aside.js:
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", template:"Users" }, { id:"products", template:"Products" } ] }
يحتوي صفيف الخلايا على رمز علامات التبويب. يجب إضافة كل علامة تبويب بمعرف حتى يمكن الوصول إليها وعرضها. يحتوي الآن Multiview على ثلاث علامات تبويب ، يتم نقل أولها ، والتي تم إنشاؤها قبل ذلك ، الجدول والنموذج.
في ملف script.js ، أقوم باستبدال عناصر واجهة مستخدم "الجدول والنموذج" بوحدة متعددة.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, multi ] }, footer ] });
يتم لعب دور التبديل بين علامات التبويب بواسطة عنصر واجهة المستخدم
List . أحتاج إلى فتح علامة التبويب المناظرة بالنقر فوق عناصرها.
للراحة ، سأقوم بتعيين عناصر عنصر واجهة تعامل
القائمة على نفس المعرف مثل علامات تبويب المعاينة المتعددة.
const aside = { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard", id:"dashboard"}, {value:"Users", id:"users"}, {value:"Products", id:"products"} ], on:{ onAfterSelect:function(id){ $$(id).show(); } } }
عندما تنقر فوق عنصر عنصر واجهة مستخدم
List ،
يتم تشغيل
onAfterSelect ، داخل المعالج الذي نحصل عليه من معرف العنصر المحدد ونظهر علامة التبويب التي تحمل الاسم نفسه ، والوصول إليه بواسطة المعرف - هم ، كما تتذكر ، متماثلون.
مثال:
! المهم
سيتم تنفيذ المزيد من إجراءات البيانات مع تشغيل الخادم المحلي.
الخطوة 3. علامة التبويب "لوحة المعلومات" - إعداد الجدول
حتى هذه المرحلة ، استخدم المشروع جدولًا تم إنشاء حقوله تلقائيًا. في حالة الرغبة في حذف عمود أو إضافة عمود جديد ، يتم استخدام إعدادات الجدول. للقيام بذلك ، في عنصر واجهة مستخدم
Datatable ، يجب استبدال خاصية
التكوين التلقائي : true بمصفوفة
الأعمدة بالإعدادات لكل عمود.
const table = { view:"datatable", id:"film_list", scroll:"y", select:true, url:"data/data.js", hover:"myhover", columns:[ { id:"rank", header:"", width:50, css:"rank"}, { id:"title", header:"Film title", fillspace:true}, { id:"year", header:"Released", width:100}, { id:"votes", header:"Votes", width:100}, { id:"rating", header:"Rating", width:100} ] }
- تشير قيمة الخاصية id إلى حقل عنصر البيانات الذي سيتم عرضه في هذا العمود ؛
- خاصية الرأس في العنصر هي رأس العمود ؛
- يتم تعيين جميع الأعمدة على عرض ثابت ، لكن الثاني منها يستخدم خاصية fillspace ، والتي تتيح لعمود العنوان شغل كل المساحة الحرة.
يتم استخدام إعدادات CSS المخصصة في الجدول: يتم تعيين مؤشر التحويم للخطوط ويتم تغيير الخلفية في العمود الأول. يتم تحديد جميع الإعدادات مسبقًا في ملف style.css وستحتاج فقط إلى إدراج اسم الفصل.
أيضًا ، أحتاج إلى مزيد من البيانات للجدول ، لذلك سأقوم بتحميلها من data / data.js بالإشارة إليها باستخدام خاصية
url .
النتيجة:
الخطوة 4. علامة التبويب "المستخدمون" - رسم قائمة ومخطط
في علامة التبويب الثانية ، سوف أقوم بإنشاء قائمة ومخطط. للقيام بذلك ، في العنصر Multiview الثاني ، سأشير إلى اسم الوحدة النمطية - "المستخدمون".
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", template:"Products" } ] }
بالنسبة إلى التطبيقات المصغّرة ، سأقوم بإنشاء ملف
users_module.js جديد.
قائمة تُفهم القائمة على أنها عنصر واجهة مستخدم
قائمة ؛ لقد تم استخدامها مسبقًا عند إنشاء القائمة. يجب أن تتكون أسطر القائمة من أسماء المستخدمين وأسماء الدول.
قائمة رمز القطعة:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { template:"Chart" } ] }
يتم استخدام مجموعة الصفوف لتقسيم مساحة العمل إلى جزأين. سيتم استخدام الجزء الثاني للمخطط.
في خاصية القالب ، بين علامات # ، يتم تحديد حقل يتم الحصول على قيمته من عنصر البيانات الذي تم تحميله من ملف users.js.
النتيجة:
الرسم البياني . تدعم المكتبة أنواع
المخططات الشائعة: الخط ، الدائرة ، الرادار ، دونات ، العمود ، إلخ. يتم إنشاء جميعها بواسطة أداة
المخطط . تحدد الطريقة التي سيبدو بها المخطط خاصية
الكتابة .
سأستبدل
template:”Chart” إعداد
template:”Chart” برمز عنصر واجهة المستخدم:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { view:"chart", type:"bar", value:"#age#", url:"data/users.js", xAxis:{ template:"#age#", title:"Age" } } ] }
- ضبط
type: "bar" يعين نوع شريط المخطط ؛ - يتم تمرير اسم الحقل إلى القيمة ، ويُشار إليه بالضرورة في `# ... #`. هذه هي ميزة القطعة الرسم البياني.
- يحدد إعداد xAxis المعلومات التي سيتم عرضها أسفل المخطط على طول المحور X ؛
- يشير القالب إلى أنه تحت خطوط المخطط ستكون هناك أرقام العمر ؛
- يحتوي العنوان على اسم المخطط -
"Age" .
نتيجة رسم القائمة والرسم البياني:
الخطوة 5. علامة التبويب "المنتجات" - جدول الشجرة
لتهيئة هذا المكون ، سأقوم بإنشاء ملف
products_module.js ، وفي العنصر الثالث من عنصر واجهة تعامل Multiview ، سأشير إلى اسم الوحدة النمطية "منتجات".
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", rows:[products] } ] }
لإنشاء جدول شجرة ، استخدم أداة
Treetable . يجب أن يحتوي أحد أعمدة عنصر واجهة المستخدم على القالب المطلوب -
{common.treetable ()} ، وإلا فسوف نحصل على جدول قياسي بدلاً من
عرض شجرة. يسمح لك القالب برسم عناصر مميزة على الفور:
- أيقونة نشطة لطي / توسيع السجلات المتداخلة ؛
- أيقونات الملفات / المجلدات
- المسافة البادئة اعتمادا على مستوى الإدخالات.
const products = { view:"treetable", scrollX:false, columns:[ { id:"id", header:"", width:50 }, { id:"value", header:"Title", fillspace:true, template:"{common.treetable()} #title#" }, { id:"price", header:"Price", width:200 } ], select:"row", url:"data/products.js" }
يتم ملؤها المكون treetable مع البيانات التسلسلية ، والتي سأحصل عليها من ملف products.js.
النتيجة:
يمكن العثور على التطبيق الناتج
هنا .
تعميم
خطوة بخطوة ، يكمل التطبيق ميزات جديدة. كانت المرحلة المهمة فصل الكود إلى وحدات. ساعد الفصل في تجنب الالتباس في التعليمات البرمجية وساعد في تنظيم واجهة متعددة الصفحات. كان من المثير للاهتمام معرفة عناصر واجهة تعامل Webix الجديدة في شكل مخططات وقوائم قابلة للتحرير بحرية. كان كل شيء بسيطًا أيضًا ، كل شيء متناغم أيضًا.