💏 🐠 🧑🏽‍🤝‍🧑🏽 शुरुआत की आँखों के माध्यम से वेबिक्स जावास्क्रिप्ट लाइब्रेरी। भाग 3. मॉड्यूल, आरेख, ट्री टेबल 📨 👼 🛩️

मैं एक शुरुआती फ्रंट-एंड डेवलपर हूं। अब मैं मिन्स्क आईटी कंपनी में अध्ययन और प्रशिक्षण ले रहा हूं। वेब-यूआई की मूल बातें सीखना वेबिक्स जेएस लाइब्रेरी के साथ एक उदाहरण के रूप में होता है और मैं अपने दिलचस्प अनुभव को साझा करना चाहता हूं और इसे इस दिलचस्प यूआई लाइब्रेरी के लिए एक छोटे ट्यूटोरियल के रूप में सहेजना चाहता हूं।

तीसरा काम

मैं वेबिक्स लाइब्रेरी का उपयोग करके बनाए गए एप्लिकेशन की कार्यक्षमता को विकसित करना जारी रखता हूं। पिछले लेखों में, मुझे लगा कि एप्लिकेशन इंटरफ़ेस कैसे बनाया जाए और फॉर्म के साथ कैसे इंटरैक्ट किया जाए । इस लेख में, मैं निम्नलिखित कार्यों पर विचार करता हूं:

मॉड्यूल में परियोजना का विभाजन;
उनके बीच टैब और स्विचिंग ;
तालिका सेटिंग;
ड्राइंग सूची और चार्ट ;
एक ट्री टेबल बनाना।

पिछले लेखों में सूची और लेआउट विजेट के संचालन का वर्णन किया गया है।

आप स्रोत लिंक डाउनलोड कर सकते हैं।

तैयार आवेदन यहां पाया जा सकता है ।

चरण 1. परियोजना को मॉड्यूल में विभाजित करना

कोड में भ्रम से बचने के लिए, प्रोजेक्ट को मॉड्यूल में तोड़ना अधिक विश्वसनीय है। ऐसा करने के लिए, मैं निम्नलिखित फाइलें बनाऊंगा और उनमें विजेट कोड ट्रांसफर करूंगा:

शीर्ष लेख .js - टूलबार विजेट;
अलग। js - सूची विजेट;
table.js - विजेट डेटा योग्य;
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 को अलग से बना देंगे। js फ़ाइल:

 const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", template:"Users" }, { id:"products", template:"Products" } ] }

कक्ष सरणी में टैब के लिए कोड होता है। प्रत्येक टैब को एक आईडी के साथ जोड़ने की आवश्यकता होती है ताकि इसे एक्सेस और प्रदर्शित किया जा सके। अब मल्टीव्यू में तीन टैब होते हैं, जिनमें से पहले को स्थानांतरित किया जाता है, इससे पहले बनाया गया है, तालिका और फ़ॉर्म।

Script.js फ़ाइल में, मैं टेबल और फॉर्म विजेट को मल्टी मॉड्यूल के साथ बदल देता हूं।

 webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, /*table, form*/multi ] }, footer ] });

टैब के बीच स्विच की भूमिका सूची विजेट द्वारा निभाई जाती है। मुझे इसके तत्वों पर क्लिक करके खोलने के लिए संबंधित टैब की आवश्यकता है।

सुविधा के लिए, मैं सूची विजेट के तत्वों को मल्टीव्यू टैब के समान आईडी पर सेट करूंगा।

 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(); } } }

जब आप सूची विजेट के एक तत्व पर क्लिक करते हैं, onAfterSelect चालू हो जाता है, जिसके हैंडलर के अंदर हम चयनित तत्व की आईडी प्राप्त करते हैं और उसी नाम के टैब को दिखाते हैं, इसे आईडी द्वारा एक्सेस करते हैं - वे, जैसा कि आपको याद है, समान हैं।

एक उदाहरण:

महत्वपूर्ण!
आगे चलकर स्थानीय सर्वरों के साथ डेटा कार्रवाई की जाएगी।

चरण 3। "डैशबोर्ड" टैब - तालिका सेटअप

इस बिंदु तक, परियोजना ने एक तालिका का उपयोग किया था जिसके क्षेत्र स्वतः उत्पन्न हुए थे। मामले में जब आप किसी कॉलम को हटाना चाहते हैं या नया जोड़ना चाहते हैं, तो टेबल सेटिंग्स का उपयोग किया जाता है। डेटाटेबल विजेट में, ऐसा करने के लिए, AutoConfig : प्रत्येक कॉलम के लिए सेटिंग्स के साथ कॉलम सरणी के साथ सच्ची संपत्ति को बदलना होगा।

 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} ] }

आईडी गुण मान उस डेटा आइटम के क्षेत्र को इंगित करता है जिसे इस कॉलम में प्रदर्शित किया जाएगा;
तत्व में हेडर की संपत्ति कॉलम हेडर है;
सभी कॉलम एक निश्चित चौड़ाई पर सेट किए गए हैं, लेकिन उनमें से दूसरा भराव क्षेत्र का उपयोग करता है, जो शीर्षक कॉलम को सभी खाली स्थान लेने की अनुमति देता है।

कस्टम सीएसएस सेटिंग्स का उपयोग तालिका में किया जाता है: रोवर को पंक्तियों के लिए सेट किया जाता है और पृष्ठभूमि को पहले कॉलम में बदल दिया जाता है। सभी सेटिंग्स को style.css फ़ाइल में पूर्वनिर्धारित किया गया है और आपको केवल कक्षा का नाम सम्मिलित करने की आवश्यकता है।

इसके अलावा, मुझे तालिका के लिए अधिक डेटा की आवश्यकता है, इसलिए मैं इसे url संपत्ति का उपयोग करके इंगित करते हुए डेटा / डेटा से लोड करता हूं।

परिणाम:

चरण 4. "उपयोगकर्ता" टैब - एक सूची और आरेख खींचना

दूसरे टैब में, मैं एक सूची और एक आरेख बनाऊंगा। ऐसा करने के लिए, दूसरे मल्टीव्यू तत्व में मैं मॉड्यूल के नाम को इंगित करूंगा - "उपयोगकर्ता"।

 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" } ] }

पंक्तियों के सरणी का उपयोग कार्यक्षेत्र को दो भागों में विभाजित करने के लिए किया जाता है। दूसरे भाग का उपयोग चार्ट के लिए किया जाएगा।

टेम्प्लेट गुण में, # संकेतों के बीच, एक फ़ील्ड निर्दिष्ट किया जाता है, जिसका मान उन डेटा तत्व से लिया जाता है जो उपयोगकर्ताओं से लोड किए जाते हैं। जेएस फ़ाइल।

परिणाम:

चार्ट । लाइब्रेरी सामान्य चार्ट प्रकारों का समर्थन करती है: लाइन, सर्कल, रडार, डोनट, कॉलम, आदि। ये सभी चार्ट विजेट द्वारा बनाए गए हैं। चार्ट जिस तरह से दिखेगा वह प्रकार की संपत्ति को परिभाषित करता है।

मैं template:”Chart” प्रतिस्थापित करूँगा 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" चार्ट के बार प्रकार को सेट करता है;
फ़ील्ड का नाम मान के लिए दिया गया है, और यह `# ... #` में आवश्यक रूप से इंगित किया गया है। यह चार्ट विजेट की एक विशेषता है;
एक्सएक्सिस सेटिंग यह निर्धारित करती है कि एक्स अक्ष के साथ चार्ट के नीचे कौन सी जानकारी प्रदर्शित की जाएगी;
टेम्पलेट इंगित करता है कि चार्ट लाइनों के तहत उम्र के अंक होंगे;
शीर्षक में चार्ट का नाम शामिल है - "Age" ।

सूची और चार्ट खींचने का परिणाम:

चरण 5. "उत्पाद" टैब - ट्री टेबल

इस घटक को शुरू करने के लिए, मैं products_module.js फ़ाइल बनाऊंगा, और मल्टीव्यू विजेट के तीसरे तत्व में मैं मॉड्यूल "उत्पादों" के नाम का संकेत दूंगा।

 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 फ़ाइल से मिलेगा।

परिणाम:

परिणामी आवेदन यहां पाया जा सकता है ।

सामान्यकरण

कदम से कदम, आवेदन नई सुविधाओं से पूरित है। एक महत्वपूर्ण चरण कोड को मॉड्यूल में अलग करना था। पृथक्करण ने कोड में भ्रम से बचने में मदद की और एक बहु-पृष्ठ इंटरफ़ेस को व्यवस्थित करने में मदद की। नए वेबिक्स विजेट्स को आरेख और स्वतंत्र रूप से संपादन योग्य तालिका सूचियों के रूप में सीखना दिलचस्प था। सब कुछ सरल भी था, सब कुछ सामंजस्यपूर्ण भी।

शुरुआत की आँखों के माध्यम से वेबिक्स जावास्क्रिप्ट लाइब्रेरी। भाग 3. मॉड्यूल, आरेख, ट्री टेबल