👶🏻 🤟🏾 👶 शुरुआत की आँखों के माध्यम से वेबिक्स जावास्क्रिप्ट लाइब्रेरी। भाग 2. रूपों के साथ काम करना 👵🏾 💅🏼 🎅🏻

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

दूसरा काम

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

सत्यापन पढ़ें और बनाएं ;
मोल्ड की सफाई ;
बटन क्लिक प्रसंस्करण ;
इंटरैक्टिव संदेश और पुष्टिकरण खिड़कियां ;
तालिका में प्रपत्र डेटा जोड़ें ।

लेख के साथ काम करने वाला मुख्य विजेट फॉर्म है । इसके अतिरिक्त, इसे प्रलेखन में पढ़ा जा सकता है।

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

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

चरण 1. तालिका में नया डेटा जोड़ना।

कोड को पढ़ने और प्रोजेक्ट को तार्किक ब्लॉकों में विभाजित करने की सुविधा के लिए, मैं एक फंक्शन्स.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); }

वेबिक्स लाइब्रेरी में किसी तत्व तक पहुंचने के लिए , $ $ विधि का उपयोग करें , जिसमें तत्व आईडी पारित हो जाता है। उपरोक्त कोड में, $$("film_form") निर्माण का उपयोग करके फॉर्म को एक्सेस किया जाता है।

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

मूल्य "Add new" "button" साथ विजेट "button" पर क्लिक करके इस फ़ंक्शन को कॉल करने के लिए, मैं क्लिक संपत्ति सेट करता हूं।

 margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear"} ]

परिणामस्वरूप, प्रपत्र से डेटा तालिका में जोड़ा जाना चाहिए:

चरण 2. प्रपत्र की वैधता। पॉपअप संदेश

नया डेटा जोड़ने से पहले, इनपुट फ़ील्ड की जानकारी को सत्यापित (सत्यापित) किया जाना चाहिए। सत्यापन को मान्य () विधि द्वारा ट्रिगर किया जाता है , जिसे मैं डेटा के साथ काम करने से तुरंत पहले 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: "…" के मूल्यों से मेल खाना चाहिए name: "…" फॉर्म तत्वों की संपत्ति। पूर्वनिर्धारित नियम webix.rules.isNotEmpty और webix.rules.isNumber शीर्षक, रेटिंग और वोट संपत्तियों में सेट किए जाते हैं, वर्ष में एक फ़ंक्शन होता है जो उपयोगकर्ता नियमों को परिभाषित करता है ।

सफलता पर नियम सही होने चाहिए और गलती पर झूठे। जब नियम के सभी गुण सत्य हो जाते हैं तो फॉर्म सत्यापन को पारित कर देगा। अन्यथा, सत्यापन विफल होने वाले क्षेत्रों को लाल रंग में हाइलाइट किया जाएगा।

परीक्षा परिणाम:

चरण 3. त्रुटि संदेश

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

फ़ील्ड में अमान्य संपत्ति सेट हो सकती है , इसका मान त्रुटि संदेश के साथ पाठ है। सत्यापन विफल होने पर यह संदेश फ़ील्ड के नीचे दिखाई देगा।

कोड:

 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 हैंडलर का उपयोग कर सकता हूं। यदि उत्तर सकारात्मक है, तो .then हैंडलर में मैं दो तरीके कहूंगा: स्पष्ट () - फ़ॉर्म फ़ील्ड साफ़ करने के लिए, और क्लीयर वेलिडेशन (), जो सत्यापन त्रुटि लेबल हटाता है।

अंतिम क्रिया "Clear" कॉल "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 ।

सामान्यकरण

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