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

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

पिछली ब्लॉग पोस्ट में , हमने सीखा कि कैसे अपनी टेबल को फ़िल्टर, सॉर्ट और ग्रुप करें। यह हर CRUD एप्लिकेशन का एक मूलभूत पहलू है क्योंकि अधिकांश समय उपयोगकर्ताओं को सैकड़ों सैकड़ों रिकॉर्डों से निपटना पड़ता है।

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

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

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

कोड देते हैं

• एक App.view.xml बनाएं जहां हम अपनी स्प्लिटऐप कंट्रोल डालेंगे और कुछ नहीं
• नए एप्लिकेशन दृश्य का उपयोग करने के लिए मैनिफ़ेस्ट .json फ़ाइल कॉन्फ़िगर करें और दो मार्ग बनाएं (लक्ष्य के साथ) जिसका उपयोग मास्टर और विवरण नेविगेशन दोनों के लिए किया जाएगा
• एक BusinessPartnerList.xml.view बनाएं और होम.व्यू.xml की सामग्री की सभी सामग्री यहां ले जाएं
• FilterBar निकालें और एक सूची में एक तालिका परिवर्तित करें। घबराएं नहीं, अब तक आपने जो कुछ भी सीखा है, उसका उपयोग विस्तार पृष्ठ के अंदर किया जाएगा
• जब उपयोगकर्ता BusinessPartner आइटम पर क्लिक करता है, तो विस्तार पृष्ठ पर नेविगेशन जोड़ें
• चयनित भागीदार से संबद्ध ऑब्जेक्टहेडर और SaleOrders (एक तालिका में) में भागीदार जानकारी (जो सूची आइटम में जोड़ी नहीं जा सकी) प्रदर्शित करने के लिए BusinessPartnerDetail.view.xml पृष्ठ बनाएँ।

SplitApp

स्प्लिटएप एक सही नियंत्रण है जिसका उपयोग आपको मास्टर-डिटेल एप्लिकेशन बनाने के लिए करना होता है।

स्प्लिटएप उपयोगकर्ता उपकरणों के आधार पर अपने व्यवहार को अनुकूलित करेगा। डेस्कटॉप और टैबलेट पर, यह दोनों पृष्ठों को प्रदर्शित करेगा बजाय यह केवल एक पृष्ठ प्रति समय प्रदर्शित करेगा यदि उपयोगकर्ता स्मार्टफोन का उपयोग कर रहा है।

manifest.json

अब आपको कॉन्फ़िगरेशन फ़ाइल को अपडेट करने के लिए क्या करना होगा:

• rootView: हमें अभी बनाए गए नए App.view.xml का उपयोग करने के लिए viewName को अपडेट करने की आवश्यकता है
• रूटिंग / कॉन्फिगरेशन: हमें वर्तमान स्प्लिटऐप आईडी के साथ controlId मान को अपडेट करने की आवश्यकता है
• रूटिंग: हमें मास्टर और डिटेल पेज के लिए रूट जोड़ना होगा। प्रत्येक मार्ग के लिए, हमें एक लक्ष्य दृश्य बनाने की भी आवश्यकता है।

यहाँ एक उदाहरण है कि आपके पास अंतिम परिणाम के रूप में क्या होना चाहिए

मार्ग और लक्ष्य तत्व के प्रत्येक कॉन्फ़िगरेशन क्षेत्र को समझने के लिए आपको वॉकथ्रू के नेविगेशन और रूटिंग अनुभाग का पालन करना चाहिए।

BusinessPartnerList

यह हमारा मास्टर पेज होगा, जिसमें लिस्ट में दिए गए BusinessPartner रिकॉर्ड होंगे। सूची से ऊपर, आपको हमेशा एक सूची को फ़िल्टर करना चाहिए ताकि मानक लिस्ट इटमेंम में प्रदर्शित मूल्यों के साथ एक सूची को फ़िल्टर किया जा सके।

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

यह है कि आपको इसे कैसे संभालना चाहिए:

onItemPress: function(oEvent) { var oItem = oEvent.getParameter("listItem"); var sBusinessPartnerID = oItem.getBindingContext().getProperty("BusinessPartnerID"); this.getOwnerComponent().getRouter().navTo("TargetBusinessPartnerDetail", { BusinessPartnerID: sBusinessPartnerID }, !Device.system.phone ); } 

आइटम बाइंडिंग संदर्भ से BusinessPartnerID प्राप्त करें (वह ID BusinessPartnerSet की प्राथमिक कुंजी है, इसलिए यह कुछ महत्वपूर्ण है जिसका उपयोग भागीदार विवरण तक पहुंचने के लिए किया जाएगा)।

BusinessPartnerID को एक पैरामीटर के रूप में पास करते हुए हमारे विवरण पृष्ठ पर फ्रेमवर्क राउटर की नेवी विधि के माध्यम से नेविगेट करें (आपने अपने मैनिफ़ेस्ट में इस मार्ग को परिभाषित किया है? क्या आपको याद है?)

BusinessPartnerDetail

हम अपने बिजनेस पार्टनर के डिटेल पेज पर हैं। एक महत्वपूर्ण बात यह है कि जब फ्रेम दृश्य लोड करता है और रिश्तेदार नियंत्रक सही मार्ग लोड होने पर हमारे तर्क को संलग्न करता है। ऐसा करने के लिए हमें अपने BusinessPartnerDetail नियंत्रक के onInit कोड में कुछ कोड लागू करने की आवश्यकता है:

 onInit: function () { var oRouter = sap.ui.core.UIComponent.getRouterFor(this); oRouter.getRoute("TargetBusinessPartnerDetail").attachMatched(this.__onRouteMatched, this); }, __onRouteMatched: function(oEvent) { var that = this; this.getView().bindElement({ path: "/BusinessPartnerSet('" + oEvent.getParameter("arguments").BusinessPartnerID + "')", events : { dataRequested: function () { that.getView().setBusy(true); }, dataReceived: function () { that.getView().setBusy(false); } } }); } 

ऐसा करना महत्वपूर्ण है अन्यथा हमारे पास बाइंडमेंट के माध्यम से भागीदार विवरण को लोड करने के लिए आवश्यक BusinessPartnerID तक पहुंच नहीं होगी।

बाइंडमेंट हमारे विचार को नए पथ "/ BusinessPartnerSet ('12345678') के लिए हमारे बंधन को" ले जाने "की अनुमति देता है, जिसमें साझेदार विवरण के लिए सापेक्ष मूल्य शामिल हैं।

डिटेल पेज में, हम एक ObjectHeader में पार्टनर डिटेल जानकारी (जो हम लिस्ट के अंदर नहीं दिखा सकते) दिखाना चाहेंगे।

ObjectHeader के नीचे हम एक BusinessPartner से जुड़ी सभी SaleOrder (XML के अंदर नेविगेशनProperty ToSalesOrder को देखें) को दिखाने के लिए एक तालिका प्रदर्शित करेंगे।

प्रत्येक SaleOrder के लिए हम प्रदर्शित करेंगे:

• नोट (ObjectIdentifier) ​​के साथ आर्डर
• LifecycleStatusDescription (ObjectStatus, रंग एक सूत्र द्वारा नियंत्रित किया जाएगा)
• BillingStatusDescription (ObjectStatus, रंग एक सूत्र द्वारा संभाला जाएगा)
• DeliveryStatusDescription (ObjectStatus, रंग एक सूत्र द्वारा संभाला जाएगा)
• GrossAmount (देश मुद्रा को सही ढंग से संभालने के लिए ObjectNumber)
• नेटअमाउंट (ObjectNumber देश की मुद्रा को सही ढंग से संभालने के लिए)
• TaxAmount (देश मुद्रा को सही ढंग से संभालने के लिए ObjectNumber)
• बनाया (अच्छी तरह से स्वरूपित)

तालिका में उपयोग किए गए UI नियंत्रण के बारे में ध्यान दें:

• ObjectIdentifier एक डिस्प्ले कंट्रोल है जो उपयोगकर्ता को किसी विशिष्ट ऑब्जेक्ट को आसानी से पहचानने में सक्षम बनाता है। ObjectIdentifier शीर्षक ऑब्जेक्ट की प्रमुख पहचानकर्ता है और अतिरिक्त टेक्स्ट और आइकन का उपयोग इसे अन्य वस्तुओं से अलग करने के लिए किया जा सकता है।
• ObjectStatus आपको स्टेटस वैल्यू के आधार पर टेक्स्ट को कलर करने देता है जो एरर, वार्निंग, सक्सेस या कोई नहीं हो सकता।
• ObjectNumber नियंत्रण किसी वस्तु के लिए संख्या और संख्या इकाई गुण प्रदर्शित करता है। उपयोगकर्ता को ऑब्जेक्ट के बारे में अतिरिक्त अर्थ प्रदान करने के लिए सिमेंटिक रंगों का उपयोग करके संख्या प्रदर्शित की जा सकती है। यह मूल्य और मुद्रा या संख्या और यूओएम को संयोजित करने के लिए बहुत उपयोगी है

निष्कर्ष और भाग 4 में आगे क्या है?

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

अगले भाग में, हम अपने SaleOrder के SaleOrderItem में एक दूसरा ड्रिल-डाउन नेविगेशन जोड़ेंगे और एक DELETE ऑपरेशन जोड़ेंगे!