👨🏽‍🍳 🖲️ 🎨 शुरुआत की आँखों के माध्यम से वेबिक्स जावास्क्रिप्ट लाइब्रेरी 👏🏻 👶🏿 🌖

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

पहला काम

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

नीचे दिया गया स्क्रीनशॉट संदर्भ इंटरफ़ेस - टीके दिखाता है, जिसे मुझे एक व्यावहारिक अभ्यास के रूप में "इकट्ठा" करना है।

चित्र 1

चरण 1. काम के माहौल की स्थापना

काम का माहौल बनाएं। मुझे फाइलों की आवश्यकता होगी:

index.html;
script.js;
data.js;
style.css;

Style.css फ़ाइल वैकल्पिक है, और आप इसके बिना कर सकते हैं, लेकिन मैं प्रक्रियाओं के अनुसार सख्ती से काम करना सीखता हूं, इसलिए हम इसे काम पर ले जाते हैं।

अब मैं पुस्तकालय को जोड़ता हूं। प्रलेखन में, एक वेबिक्स इंस्टॉलेशन गाइड है जो तीन कनेक्शन विधियों को प्रदर्शित करता है।

npm पैकेज मैनेजर का उपयोग करके डाउनलोड करें;
सीधे साइट से पैकेज डाउनलोड करें;
Webix CDN GPL फ़ाइलों के सीधे लिंक के माध्यम से।

मैं तीसरी विधि का उपयोग करता हूं, क्योंकि यह अधिक दृश्य है और index.html फ़ाइल में कोड की कुछ पंक्तियों के साथ किया जा सकता है:

<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css"> <script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>

यहां हम शेष फाइलों को उसी क्रम में कनेक्ट करते हैं जैसा कि उदाहरण में दिखाया गया है। ऐसा इसलिए है क्योंकि script.js फ़ाइल डेटा से संबंधित डेटा का उपयोग करती है। js.

 <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script> <link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css"> <link rel="stylesheet" href="style.css"> <title>My first page</title> </head> <body> <script src="data.js"></script> <script src="script.js"></script> </body> </html>

तकनीकी विशिष्टताओं (छवि 1) के अनुसार, मुझे डेटा के साथ एक तालिका बनानी होगी। मुझे यह डेटा data.js फ़ाइल से प्राप्त होगा, जिसमें मैं पहली बार इस तरह की वस्तुओं को लिखूंगा:

 var small_film_set = [ { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"}, { id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"}, { id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"}, { id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"}, { id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"}, { id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"} ];

चरण 2. प्रारंभिक। प्रोजेक्ट वायरफ्रेम

संपूर्ण Webix इंटरफ़ेस webix.ui () कंस्ट्रक्टर द्वारा बनाया गया है। यह जांचने के लिए कि सब कुछ कॉन्फ़िगर किया गया है और जैसा भी होना चाहिए, मैं स्क्रीन पर "हैलो वर्ल्ड!" स्ट्रिंग प्रदर्शित करूंगा।

मैं अंतर्निहित टेम्प्लेट टेम्पलेट इंजन का उपयोग करता हूं, जो हमारे लिए आवश्यक रिकॉर्ड के साथ एक तैयार-निर्मित घटक उत्पन्न करेगा।

 webix.ui({ template: "Hello world!" });

पुस्तकालय की मुख्य विशेषता लेआउट घटक है, जो आपको पृष्ठ को अन्य घटकों से पंक्तियों और स्तंभों में विभाजित करने की अनुमति देता है। इसके साथ, मैं हमारे पृष्ठ के कंकाल को परिभाषित करूंगा, जिसमें तीन लाइनें हैं:

शीर्ष लेख,
फ़ुटबाल
main (मुख्य भाग)

मैं यहां अंतर्निहित सीएसएस थीम को भी जोड़ता हूं।

कोड:

 webix.ui({ rows:[ {template:"Header"}, {template:"Main"}, {template:"Footer"} ] });

नीचे एक स्क्रीनशॉट है कि क्या हुआ। पंक्तियों के सरणी का उपयोग करते हुए, हमने तीन पंक्तियों को बनाया।

Fig.2

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

कोड:

 webix.ui({ rows:[ {template:"Header"}, {cols:[ {template:"List"}, {template:"Table"}, {template:"Form"} ]}, {template:"Footer"} ] });

परिणाम:

3 चित्र

चरण 3. एक हैडर बनाएँ

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

  view:"toolbar", css:"webix_dark", cols:[ { view:"label", label:"My app"}, {}, {height: 40, type:"icon", icon:"wxi-user", view:"button", label:"Profile", width:100, css:"webix_transparent"} ]

अगला, cols array का उपयोग करके, तीन कॉलम बनाए जाते हैं। पहले कॉलम में, घटक, दृश्य: "लेबल", स्थिर पाठ बनाता है, और लेबल कुंजी पाठ शीर्षक प्रदर्शित करता है।

दूसरा कॉलम स्पेसर है । यह सभी मुक्त स्थान को भरता है, और पृष्ठ के किनारों पर पहले और अंतिम तत्व को दबाता है।

तीसरा स्तंभ एक बटन है, जिसे दृश्य का उपयोग करके बनाया गया है: "बटन" घटक। चौड़ाई और ऊंचाई के गुण पिक्सेल में बटन की ऊँचाई और चौड़ाई निर्धारित करते हैं, और सेटिंग्स प्रकार: "आइकन" और आइकन: "wxi- उपयोगकर्ता" उस आइकन को प्रदर्शित करते हैं जो मुझे प्रलेखन द्वारा प्रदान की गई सूची से चाहिए।

परिणाम:

चित्र 4

बटन को पारदर्शी बनाने के लिए, मैं अंतर्निहित CSS वर्ग - "webix_transparent" उपयोग करता हूं।

चरण 4. सूची विजेट बनाएं

सूची विजेट एक मानक वेबिक्स विजेट है, और इसका उपयोग मेनू बनाने के लिए किया जाएगा। मेरा कार्य चयन का उपयोग करके इसे क्लिक करने योग्य बनाना है : सच्ची संपत्ति। इसके अलावा, इस विजेट में मैं क्लास - css: "list_color" का उपयोग करके अपनी शैली में परिवर्तन का उपयोग करता हूं ।

टेम्पलेट लिखने के बजाय : "सूची", हम निम्नलिखित कोड लिखते हैं:

 { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard",}, {value:"Users"}, {value:"Products"}, {value:"Location"} ] }, {view: "resizer"}, {template:"Table"}, {template:"Form"}

सूची विजेट में, डिफ़ॉल्ट रूप से स्क्रॉल का उपयोग किया जाता है, जिसे मैं कमांड के साथ बंद करता हूं - स्क्रॉल: गलत ।

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

 .list_color{ background-color: #EEEEEE; font-weight: 500; } .list_color .webix_selected{ background-color: #dddfe2; }

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

सूची विजेट में अंतिम स्पर्श के साथ, हम इसे और टेबल कॉलम, घसीट सीमा - {दृश्य: "रिसाइज़र"} के बीच सेट करते हैं। चौथे चरण का परिणाम:

चित्रा 5

चरण 5. एक तालिका बनाएं और दूसरी फ़ाइल से डेटा निकालें

आपको याद दिला दूं कि डेटा फ़ाइल data.js. से लिया गया है टेम्प्लेट के स्थान पर उन्हें तालिका के रूप में प्रदर्शित करने के लिए : "टेबल" लाइन, मैं निम्नलिखित कोड लिखता हूं:

  view:"datatable", id:"film_list", scroll:"y", autoConfig: true, data:small_film_set

कोड निम्नानुसार काम करता है: दृश्य: " डेटाटेबल " एक तालिका बनाता है, और ऑटोकॉन्फ़िग का उपयोग करके: सच छोटे_फिल्म_सेट सरणी की शुरुआत में बनाए गए डेटा के आधार पर कॉलम को कॉन्फ़िगर करता है। इस सरणी के पथ को लाइन - डेटा: smal_film_set द्वारा दर्शाया गया है।

स्टॉक स्क्रॉल: "y" क्षैतिज स्क्रॉल को हटा देता है, केवल ऊर्ध्वाधर एक को छोड़कर। परिणाम एक तालिका है जिसे स्तंभ शीर्षक पर क्लिक करके हल किया जा सकता है।

चित्रा 6

चरण 6. फॉर्म

संपत्ति देखें: "फ़ॉर्म" - एक विजेट "फ़ॉर्म" बनाता है। काम के बयान के अनुसार, इसमें इनपुट फ़ील्ड और बटन होते हैं जो तत्वों के सरणी में रखे जाते हैं : [{...}, ...] ।

निम्न कोड के साथ लाइन टेम्प्लेट: "टेबल" बदलें:

 view:"form", id:'film_form', width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title" }, { view:"text", name:"year", label:"Year" }, { view:"text", name:"rating", label:"Rating" }, { view:"text", name:"votes", label:"Votes" }, { margin:10, cols:[ { view:"button", id:"btn_add", minWidth:65, value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", minWidth:65, value:"Clear", click:clearForm} ] }, {} ]

प्रकार के साथ लाइन : "अनुभाग" संपत्ति का शीर्षक है। इनपुट फ़ील्ड संपत्ति द्वारा निर्धारित किए जाते हैं - दृश्य: "टेक्स्ट" , फ़ील्ड का नाम लेबल में लिखा जाता है। भविष्य में, फ़ॉर्म को मानों को पास करना होगा, इसके लिए दृश्य के साथ संयोजन में : "पाठ" संपत्ति, नाम: "..." संपत्ति सेट है।

विजेट एक बटन है, जिसे दृश्य द्वारा सेट किया गया है: "बटन" संपत्ति। बटन फॉर्म का अभिन्न हिस्सा नहीं है, और इसे स्टैंडअलोन तत्व के रूप में इस्तेमाल किया जा सकता है। जैसा कि मानक HTML इनपुट टैग में, बटन का नाम मान गुण द्वारा असाइन किया गया है। नीला रंग बिल्ट-इन css स्टाइल द्वारा सेट किया गया है : "webix_primary" ।

सरणी का अंतिम तत्व एक स्पेसर है, जो मुक्त स्थान को फुटर तक भरता है, जिसे स्क्रीन के नीचे दबाया जाएगा। इसका उपयोग प्रपत्र तत्वों की डिफ़ॉल्ट ऊंचाई के कारण किया जाता है, जिससे बाद के सभी तत्व दबाए जाते हैं। कोड परिणाम:

चित्र 7

अंतिम चरण

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

 cols:[ {height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"center_text"} ]

कोड दिखाता है कि टेम्प्लेट संपत्ति, पाठ के अलावा, आपको HTML टैग सेट करने की अनुमति देता है। पाठ को केंद्रित करने के लिए, मैंने एक कस्टम सीएसएस क्लास - "center_text" का उपयोग किया ।

 .center_text{ text-align:center; }

पृष्ठ का अंतिम परिणाम पूरी तरह से काम के बयान में घोषित के साथ पालन करना चाहिए (छवि 1)।

सामान्यकरण

इस उदाहरण में, वेबिक्स की सुविधाओं का केवल एक छोटा सा अंश उपयोग किया गया था। परिणाम दिखाता है कि कोड की केवल 60 लाइनों में, आप कई जटिल तत्वों के साथ एक पेज बना सकते हैं। तैयार किए गए पुस्तकालय समाधान और इसके घटकों के उपयोग में आसानी आपको शैलियों के साथ छेड़खानी समय बर्बाद नहीं करते हुए पूरी तरह से अलग पेज लेआउट को स्वतंत्र रूप से डिजाइन करने की अनुमति देती है।

शुरुआत की आँखों के माध्यम से वेबिक्स जावास्क्रिप्ट लाइब्रेरी