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

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

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

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

इस ब्लॉग पोस्ट की श्रृंखला के भाग 2 के साथ, हम सीखेंगे कि हमारे टेबल्स और सूची में डेटा के साथ कैसे संपर्क करें। हम सीखेंगे कि स्मार्ट तरीके से डेटा को कैसे फ़िल्टर और सॉर्ट करें।

• स्थानीय डेटा को संभालने के लिए JSONModel बनाएँ
• हमारे JSONModel में एक डिफ़ॉल्ट आकार सेट करें
• FilterBar : UI नियंत्रण जो किसी क्वेरी के लिए मानों को पॉप्युलेट करने के लिए उपयोगकर्ता के अनुकूल तरीके से फिल्टर प्रदर्शित करता है
• सॉर्ट और समूह डेटा को संभालने के लिए एक व्यू सेटिंग्स डायलॉग बनाने के लिए XML फ़्रैगमेंट का उपयोग करें
• डेटा को फ़िल्टर और सॉर्ट करें
• उपयोगी जानकारी प्रदर्शित करने के लिए हमारी तालिका में एक सूचना टूलबार जोड़ें

कोड देते हैं

FilterBar

पहली चीज जो हम करना चाहते हैं वह यह है कि उपयोगकर्ताओं को हमारी टेबल पर प्रदर्शित बिजनेस पार्टनर सूची को फ़िल्टर करने की अनुमति दी जाए। अधिकांश समय हमारे पास वास्तव में एक बड़ा डेटा होता है (हमारा बिजनेस पार्टनर सेट 13880 रिकॉर्ड से बना होता है) प्रदर्शित करने के लिए सेट किया गया है और उपयोगकर्ता कुछ उपयोगी जानकारी के आधार पर उन सभी रिकॉर्डों को फ़िल्टर करना चाहता है।

अंगूठे का नियम: आपकी तालिका / सूची में प्रदर्शित नहीं की गई जानकारी के टुकड़ों के लिए फ़िल्टर इनपुट प्रदर्शित न करें

ऐसा करने के लिए आपको अपनी तालिका के ऊपर एक फ़िल्टरबार जोड़ने की आवश्यकता है। यह UI नियंत्रण केवल SAPUI5 पर उपलब्ध है न कि OpenUI5 में।

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

चार अलग-अलग फ़िल्टर जोड़ें:

• ID: इनपुट जो BusinessPartnerID विशेषता को फ़िल्टर करेगा
• नाम: इनपुट जो CompanyName विशेषता को फ़िल्टर करेगा
• स्ट्रीट: इनपुट जो करेगा
• देश: पता / देश विशेषता को फ़िल्टर करने के लिए ( देश कोड सूची JSON ) का चयन करें

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

फिल्टर एक दूसरे के साथ अनन्य होना चाहिए। यदि उपयोगकर्ता ने कंपनी के नाम में "SAP" और देश कोड में "IT" जोड़ दिया है, तो आपकी तालिका को किसी क्वेरी के लिए फ़िल्टर करना चाहिए

मुझे "एसएपी" और एक देश कोड के साथ "दे" के बराबर नाम वाले सभी बिजनेस पार्टनर दें

JSONModel

हमने पहले ही कहा कि SAPUI5 में आपको विभिन्न प्रकार के मॉडल बनाने हैं:

• ODataModel v2: ओडटा प्रोटोकॉल (संस्करण 2) के आधार पर मॉडल कार्यान्वयन। इसका उपयोग तब किया जाता है जब आपको ओडटा सेवा के साथ बातचीत करने की आवश्यकता होती है।
• JSONModel : JSON डेटा के लिए मॉडल कार्यान्वयन। इसका उपयोग ज्यादातर स्थानीय / अस्थायी डेटा को संभालने के लिए किया जाता है

हमारे अभ्यास के लिए, मेरा सुझाव है कि आप फ़िल्टर डेटा स्टोर करने के लिए एक JSONModel बनाएं और दूसरा देश कोड स्टोर करने के लिए। जब आपने अपने मॉडल फ़ोल्डर के अंदर एक स्थानीय JSON फ़ाइल बनाई है, तो आप आसानी से उन्हें _manifest.json_that से आयात कर सकते हैं जब आपका ऐप शुरू हो जाएगा तब जानकारी को पूर्व लोड करने के लिए सभी तर्क को संभाल लेंगे।

फ़िल्टर

new sap.ui.model.Filter (vFilterInfo, vOperator?; vValue1 ?, vValue2?)

फ़िल्टर एक शक्तिशाली उपकरण है, यह आपको जटिल OData क्वेरी बनाने के लिए विभिन्न फ़िल्टर मिश्रण करने की अनुमति देता है जो तब बैकएंड साइड में SQL में अनुवादित होगा।

1. पहला पैरामीटर वह कॉलम नाम है जिसे आप फ़िल्टर करना चाहते हैं। आप "पता / स्ट्रीट" जैसी विस्तारित संपत्ति से एक कॉलम भी निर्दिष्ट कर सकते हैं
2. दूसरा पैरामीटर वह ऑपरेशन है जिसे आप अपने फ़िल्टर पर लागू करना चाहते हैं। आप FilterOperator प्रलेखन पर सभी संभव संचालन पा सकते हैं।
3. तीसरा और चौथा पैरामीटर क्वेरी मान है जिसे उपयोगकर्ता द्वारा इनपुट किया गया है और जिसे आप फ़िल्टर करना चाहते हैं।

फ़िल्टर का दूसरा निर्माण आपको AND और OR फ़िल्टर बनाने के लिए फ़िल्टर को मिलाने की अनुमति देता है।

new sap.ui.model। फ़िल्टर (फ़िल्टर, बीएंड)

आपके द्वारा अपना अंतिम फ़िल्टर बनाने के बाद आप इसे टेबल बाइंडिंग पर लागू कर सकते हैं।

क्रमबद्ध करें और समूह

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

new sap.ui.model.Sorter (sPath, bDescending?; vGroup ?, fComComatorator?)

1. पहला पैरामीटर (फ़िल्टर के लिए) ओडटा विशेषता है जिसे आप सॉर्ट करना चाहते हैं
2. दूसरा पैरामीटर (बूलियन) एक अवरोही या आरोही तरीके से डेटा सॉर्ट करेगा
3. तीसरा पैरामीटर एक बूलियन हो सकता है (यदि आप डेटा को फिर से संगठित करना चाहते हैं) या एक फ़ंक्शन (मैं इसे एक पल में समझाऊंगा)।
4. अंतिम पैरामीटर वैकल्पिक है और आपको फ़ंक्शन परिणाम के आधार पर स्थानीय (OData पर नहीं) कस्टम सॉर्ट करने की अनुमति देता है

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

• SAPUI5 द्वारा कुंजी का उपयोग यह समझने के लिए किया जाएगा कि क्या रिकॉर्ड एक ही कुंजी मूल्य वाले समूह में पहले से ही मौजूद है
• समूह नाम दिखाने के लिए UI बनाने के लिए SAPUI5 द्वारा पाठ का उपयोग किया जाता है

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

एक कस्टम फ़ंक्शन के बिना "CreatedAt" विशेषता के लिए सिर्फ समूह की कोशिश करें और देखें कि क्या होता है;)

सॉर्टिंग और ग्रुपिंग: यूआई / यूएक्स

किसी उपयोगकर्ता को आपकी तालिका / सूची में डेटा को सॉर्ट और समूह करने की अनुमति देने का सबसे अच्छा तरीका है ViewSettingsDialog का उपयोग करना।

इसे परिभाषित करना और कॉन्फ़िगर करना बहुत आसान है और आपको बहुत नियंत्रण देता है। ViewSettingsDialog एक Fragment के अंदर एम्बेडेड है और यह एक संवाद / पॉपओवर के रूप में प्रदर्शित होता है।

आमतौर पर, जब आप इस तरह एक संवाद प्रदर्शित करना चाहते हैं, तो आपको बस एक फ़ाइल में अपने टुकड़े की परिभाषा बनाने की आवश्यकता होती है (जैसे ViewSettingDialog.fragment.xml) और लोड जब उपयोगकर्ता तालिका के ऊपर बटन पर क्लिक करता है।

जब हम फ्रैगमेंट के बारे में बात कर रहे होते हैं तो हमें दो चीजों पर बहुत ध्यान देने की आवश्यकता होती है:

• संसाधनों का पुन: उपयोग
• जीवनचक्र निर्भरता

वे दोनों आपको पुन: बर्बाद करने और मेमोरी लीक न बनाने की अनुमति देते हैं (और आप वास्तव में उनसे निपटना नहीं चाहते हैं!)।

तो:

1. केवल जरूरत होने पर एक नया sap.ui.xmlfragment बनाएं (जब संदर्भ रखने वाला चर शून्य या नष्ट न हो) अन्यथा इसे पुन: उपयोग करें और संवाद खोलें
2. यदि आवश्यक हो तो संवाद को तबाह करना याद रखें जब संवाद अलग-अलग अंशों के लिए या नियंत्रक के निकास घटना पर एक ही चर का उपयोग कर रहे हों

जानकारी टूलबार

InfoToolbar एक टूलबार है, जिसे ListBase (तालिका द्वारा विस्तारित किया गया वर्ग) द्वारा नियंत्रित किया जाता है और आमतौर पर हेडर के नीचे प्रदर्शित किया जाता है (यह InfoToolbar एकत्रीकरण के अंदर है)। यह बहुत उपयोगी है जब आप जानकारी के कुछ टुकड़ों को दिखाना चाहते हैं जिन्हें हाइलाइट करने की आवश्यकता है।

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

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

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

अभ्यास के अगले भाग में, हम स्प्लिटएप और मास्टर-डिटेल लेआउट की अवधारणा को पेश करेंगे, ताकि आप बेहतर तरीके से कुछ नए दस्तावेज़ पढ़ना शुरू करें;)