Dummies के लिए SAPUI5 भाग 5: एक संपूर्ण चरण-दर-चरण व्यायाम

परिचय और पुनर्कथन

पिछले ब्लॉग पोस्ट में , हमने एक डेटाबेस रिकॉर्ड को हटाने के लिए ड्रिल-डाउन (विवरण का विवरण) का दूसरा स्तर और ओडटा और ODataModel (v2) के साथ बातचीत करने का तरीका सीखा।

इस कवायद में क्या शामिल होगा

ब्लॉग पोस्ट की इस श्रृंखला के भाग 5 के साथ, हम सीखेंगे कि एक डायलॉग के भीतर एक सिम्पलफार्म कैसे बनाया जाए जो हमें सेल्स ऑर्डर आइटम की जानकारी अपडेट करने की अनुमति देगा।

डेटाबेस ऑर्डर को अपडेट करने से पहले हमें यह जांचना होगा कि उपयोगकर्ता द्वारा टाइप की गई हर चीज हमारे अवरोधों को सत्यापित करती है।

• ODataModel : हमने पहले ही इसका उपयोग अपने बिजनेस पार्टनर, सेल्स ऑर्डर और सेल्स ऑर्डर आइटम के बारे में सर्वर-साइड जानकारी प्रदर्शित करने के लिए किया है। हमने इसका उपयोग डेटाबेस रिकॉर्ड को हटाने के लिए भी किया है। अब हम इसका उपयोग करने के लिए जा रहे हैं, जो रिकॉर्ड सबमिट विधि को अपडेट करने के लिए या रीसेटचेंज विधि के साथ हमने जो किया है उसे हटा दें।
• एक्सप्रेशन बाइंडिंग : SAPUI5 बाइंडिंग सिंटैक्स की वृद्धि, जो कस्टम फ़ॉर्मेटर फ़ंक्शंस के बजाय अभिव्यक्ति प्रदान करने की अनुमति देता है
• SimpleForm : एक लेआउट जो उपयोगकर्ताओं को पिक्सेल-पूर्ण रूप बनाने की अनुमति देता है

इसलिए हमारा मुख्य कार्य उपयोगकर्ता को बिक्री आदेश आइटम को संपादित करने और उन परिवर्तनों को प्रस्तुत करने की अनुमति देता है (यदि बनाया गया है) बैकएंड सिस्टम में।

यहां उन चीजों की एक सूची दी गई है जिन्हें आपको अंतिम परिणाम प्राप्त करने के लिए करना है:

• नोट मान प्रदर्शित करने के लिए तालिका में एक नया कॉलम जोड़ें (यह वह क्षेत्र है जिसे हम अपडेट करने जा रहे हैं)
• उत्पाद का नाम सक्रिय करें ( titleActive = "true" ) और शीर्षक सूची घटना को संभालें
• हमारे SimpleForm वाले डायलॉग के अंदर एक फ़्रैगमेंट बनाएं
• SimpleForm में हमारे प्रत्येक विक्रय आदेश आइटम फ़ील्ड के लिए एक लेबल / इनपुट जोड़ी होगी
• नोट एक को छोड़कर सभी इनपुट फ़ील्ड संपादन योग्य नहीं होंगे
• यदि उपयोगकर्ता द्वारा टाइप किया गया नोट केवल शून्य से अधिक है, तो संवाद का सहेजें बटन सक्षम करें
• सभी उपयोगकर्ता परिवर्तनों को सबमिट करते हुए सेव बटन को संभालें!

कोड देते हैं

यूआई / यूएक्स

हमने पहले ही ब्लॉग पोस्ट की इस श्रृंखला में UI / UX के बारे में बहुत सारी बातें की हैं। जैसा कि आप पहले ही समझ चुके हैं कि यह मेरे लिए एक महत्वपूर्ण विषय है। एक अच्छा यूएक्स दिन के अंत में एक बड़ा अंतर ला सकता है जिससे एंड-यूज़र को अपने प्रदर्शन को बढ़ावा देने और अपने द्वारा की जाने वाली समग्र त्रुटियों को कम किया जा सके।

इसलिए आपको हमेशा, उपयोगकर्ता को हमेशा फीडबैक देना चाहिए। स्पष्ट, सहज, अच्छी तरह से बनाई गई प्रतिक्रिया

उदाहरण के लिए इस स्क्रीन को लें:

सहेजें बटन अक्षम क्यों है? उपयोगकर्ता कार्य को पूरा क्यों नहीं कर सकता है?

एक अच्छा यूएक्स उपयोगकर्ता को स्पष्ट रूप से प्रतिक्रिया देता है। आपको हमेशा ये सवाल पूछना चाहिए:

• क्या उपयोगकर्ता को पता है कि उसे कुछ आवश्यक जानकारी याद आ रही है?
• क्या उपयोगकर्ता समझ सकता है कि कौन सी जानकारी गायब है या उसके अमान्य मान हैं?
• मैं उन त्रुटियों को ठीक करने के लिए उपयोगकर्ता की मदद कर रहा हूं?
• जब उपयोगकर्ता ने त्रुटि ठीक कर ली है तो मैं सही ढंग से उसे प्रतिक्रिया वापस दे रहा हूं (हरा हाइलाइट, सहेजें बटन सक्षम करें)

तो अब उपयोगकर्ता जानता है कि उसे क्या करना चाहिए। क्या होता है जब उसने सही नए नोट का मूल्य टाइप किया हो और "सेव" बटन पर क्लिक किया हो?

• हम जांचते हैं कि उपयोगकर्ता ने कुछ परिवर्तन प्रस्तुत किए हैं (मॉडल में परिवर्तित मूल्य)। अगर कोई बदलाव नहीं होता है तो हम केवल उपयोगकर्ता को सचेत करते हैं अन्यथा हम अपनी बुलेट-पॉइंट सूची को कार्य करने के लिए रखते हैं
• डायलॉग को व्यस्त अवस्था में सेट करें
• सबमिटचेंज के साथ सभी परिवर्तनों को वितरित करने के लिए रूपरेखा पूछें
• सफलता या त्रुटि के मामले में कॉलबैक सुनें
• ठीक या त्रुटि संदेश के साथ उपयोगकर्ता को दृश्य प्रतिक्रिया प्रदान करें
• नए मानों के साथ तालिका अपडेट करें (SAPUI5 द्वारा स्वचालित रूप से की गई)

उपयोगकर्ता सत्यापन

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

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

validateNote: function(oEvent) { var oResourceBundle = this.getView().getModel("i18n").getResourceBundle(); var sValue = oEvent.getParameter("value"); var oSource = oEvent.getSource(); if( sValue && sValue.trim().length > 0 ) { oSource.setValueState(ValueState.Success); oSource.setValueStateText(null); } else { oSource.setValueState(ValueState.Error); oSource.setValueStateText(oResourceBundle.getText("errorEmptyNote")); } } 

अपडेट ओडटा मॉडल रिकॉर्ड

यहाँ हमारे व्यायाम का मुख्य भाग आता है। जब उपयोगकर्ता सहेजें बटन पर क्लिक करता है तो हम अपने कंट्रोलर की तरफ एक विधि निष्पादित करने जा रहे हैं।

 onSalesOrderItemDialogSave: function(oEvent) { var controller = this; var oResourceBundle = this.getView().getModel("i18n").getResourceBundle(); var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length; var oModel = this.getView().getModel(); if( oModel.hasPendingChanges() ) { controller._oEditDialog.setBusy(true); oModel.submitChanges({ success: function(oData) { MessageBox.success( oResourceBundle.getText("saveSaleItemSuccess"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller._oEditDialog.setBusy(false); controller._oEditDialog.close(); }, error: function(oError) { MessageBox.error( oResourceBundle.getText("saveSaleItemError"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller._oEditDialog.setBusy(false); controller._oEditDialog.close(); } }); } else { MessageBox.success( oResourceBundle.getText("saveSaleItemNoChanges"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller._oEditDialog.close(); } } 

कोड बहुत सरल है और हमें कई मापदंडों को निर्दिष्ट करने की आवश्यकता नहीं है। याद रखने वाली एकमात्र चीज़ सबमिटचेंज को निष्पादित करना है, अगर मॉडल में कुछ बदलाव करने हैं अन्यथा आपका डायलॉग अनंत में व्यस्त स्थिति में होगा क्योंकि सफलता / त्रुटि कॉलबैक (मुझे एक फ्रेम बग के लिए लगता है) नहीं कहा जाएगा।

निष्कर्ष और आगे क्या है?

यदि आप अंतिम परिणाम देखना चाहते हैं तो आप सीधे हमारे GitHub प्रोजेक्ट की चरण_5 शाखा में जा सकते हैं।

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

लेकिन घबराइए नहीं, हम कुछ हफ़्ते की बात कर रहे हैं! समाप्त करने के लिए आपके पास बहुत सारे अभ्यास हैं!

प्रतिक्रिया की जरूरत है

आप इस श्रृंखला के बारे में क्या सोचते हैं? क्या आप कुछ विशिष्ट SAPUI5 पहलू पर अधिक ध्यान केंद्रित करना चाहते हैं?

इसे नीचे टिप्पणी अनुभाग पर लिखें! सभी को हैप्पी कोडिंग!