HTML / जावास्क्रिप्ट में WinRT अनुप्रयोगों के विकास का परिचय। डेटा हैंडलिंग में सुधार

यह आलेख विंडोज 8. के ​​लिए HTML / JS में विकासशील WinRT अनुप्रयोगों की मूल बातें के लिए समर्पित सामग्रियों की श्रृंखला ( पहला भाग , दूसरा भाग ) जारी रखता है। इस भाग में हम डेटा डिस्प्ले प्राप्त करने और गुणवत्ता की विश्वसनीयता में सुधार करने की कोशिश करेंगे, साथ ही अनुबंधों के बारे में थोड़ी बात करेंगे।



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

आउटपुट प्रतिबंध

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

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

अंततः, हमारे मामले में, नवीनतम घटनाओं की पूरी तरह से जल्दी और पूरी तरह से दिखाने के बजाय, जिसके लिए यह पिछले 6-8 रिकॉर्ड प्रदर्शित करने के लिए पर्याप्त होगा, हम तुरंत उपयोगकर्ता के लिए समाचार के पूरे प्रवाह को नीचे लाते हैं। बड़ा डेटा सेट भी आपको पड़ोसी समूहों में जल्दी से जाने की अनुमति नहीं देता है - आपको बहुत लंबा स्क्रॉल करना होगा (बहुत आगे देखते हुए, मेरा कहना है कि सिमेंटिक जूम इस समस्या को आसानी से हल कर देता है)।

इस प्रकार, हमारी पहली प्राथमिकता पहली स्क्रीन पर डेटा प्रवाह को सीमित करना है।

ऐसा करने के लिए, पेज \ groupedItems \ groupedItems.js फ़ाइल खोलें ।

चर क्षेत्र में फ़ंक्शन की शुरुआत में, दो और बनाएं:

var groupedItems; var tilesLimit = 6; 

पहले में हम फ़िल्टर किए गए संग्रह को संग्रहीत करेंगे। दूसरा इंगित करता है कि कितने टाइल प्रदर्शित किए जा सकते हैं (आदर्श रूप से, इस तरह के मापदंडों को अलग-अलग सेटिंग्स फ़ाइलों या परियोजना मापदंडों का वर्णन करने वाली समान डेटा संरचनाओं में स्थानांतरित किया जाना चाहिए)।

अगला, निम्नलिखित पंक्ति खोजें:

 _initializeLayout: function (listView, viewState) { 

इस फ़ंक्शन को उस समय कहा जाता है जब पेज को इनिशियलाइज़ किया जाता है और यह निर्धारित किया जाता है कि उपयोग किए गए डिस्प्ले मोड के आधार पर स्क्रीन पर कौन सा डेटा प्रदर्शित होना चाहिए। Data.js फ़ाइल में वर्णित वैश्विक डेटा ऑब्जेक्ट का उपयोग डेटा स्रोत के रूप में किया जाता है।

फ़ंक्शन की शुरुआत में निम्नलिखित पंक्तियाँ जोड़ें:

  groupedItems = Data.items.createFiltered(function (item) { return item.index < tilesLimit; }).createGrouped( function groupKeySelector(item) { return item.group.key; }, function groupDataSelector(item) { return item.group; } ); 

आपको याद दिला दूं कि डेटा ऑब्जेक्ट की आइटम प्रॉपर्टी में डेटा का एक संग्रह ( WinJS.Binding.List ) होता है, जिसे एक या दूसरे RSS फ़ीड में सदस्यता द्वारा समूहीकृत किया जाता है।

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

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

इसके अलावा, एक ही फ़ंक्शन में, डेटा और डेटा के लिंक को बदलें।

  if (viewState === appViewState.snapped) { listView.itemDataSource = groupedItems.groups.dataSource; listView.groupDataSource = null; listView.layout = new ui.ListLayout(); } else { listView.itemDataSource = groupedItems.dataSource; listView.groupDataSource = groupedItems.groups.dataSource; listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" }); } 

नोट : इस पृष्ठ पर डेटा की अन्य घटनाओं से सावधान रहें। इस मामले में, हम उन्हें नहीं बदलते हैं, क्योंकि वे आंतरिक पृष्ठों पर जाते समय उपयोग किए जाते हैं, और ऊपर हमने डेटा द्वारा केवल एक फ़िल्टर बनाया है। लेकिन सामान्य स्थिति में, यदि आप डेटा स्रोत बदलते हैं, तो इसे हर जगह बदलने की आवश्यकता हो सकती है, या, अधिक सही ढंग से, डेटा के साथ काम करने की एक अलग परत को बाहर निकालना चाहिए।

प्रोजेक्ट चलाएँ:



बहुत बढ़िया! अब हम तुरंत सभी नए सिरे से देखते हैं।

अपना इंटरनेट कनेक्शन जांचें

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

इसके अलावा, यदि धारा अनुपलब्ध है, तो भी एक समस्या होगी।

इंटरनेट की उपलब्धता की जांच करने के लिए, js \ data.js फ़ाइल खोलें और इसमें निम्न फ़ंक्शन जोड़ें :

  function isInternetConnection() { var connectionProfile = Windows.Networking.Connectivity.NetworkInformation.getInternetConnectionProfile(); return (connectionProfile != null); } 

यहां हम नेटवर्क की वर्तमान स्थिति का पता लगाने के लिए WinRT की ओर मुड़ते हैं। यह पहले से ही अच्छी जानकारी है, हालांकि यह 100% गारंटी नहीं देता है कि वास्तव में इंटरनेट और आवश्यक स्ट्रीम तक पहुंच है।

अब एक फंक्शन जोड़ते हैं, जिसमें समस्या होने पर एरर मैसेज दिखाई देगा:

  function showConnectionError(msg, donotexit) { msg = (msg != undefined) ? msg : ""; var messageDialog = new Windows.UI.Popups.MessageDialog(msg, "Can not connect"); messageDialog.commands.append(new Windows.UI.Popups.UICommand("Ok", null, 1)); messageDialog.showAsync().done(function (command) { if (!donotexit && command.id == 1) { MSApp.terminateApp({ number: 0, stack: "", description: "No internet connection" }); } }); } 

यह फ़ंक्शन, WinRT API का उपयोग करते हुए, निर्दिष्ट त्रुटि संदेश प्रदर्शित करता है और, डिफ़ॉल्ट रूप से, यदि डोनोटेक्सिट ध्वज सेट नहीं किया जाता है (या यह गलत है), तो अनुप्रयोग समाप्त हो जाता है।

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

अगला चरण: कनेक्शन के लिए जांच शुरू करें; ऐसा करने के लिए, लाइन को बदलें

  list = getBlogPosts(list); 

निम्नलिखित के लिए:

  function tryUpdateData() { if (isInternetConnection()) { list = getBlogPosts(list); } else { showConnectionError("Please check your internet connection. "); } }; tryUpdateData(); 

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



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

RSS लिंक में से किसी एक को गलत के साथ बदलने का प्रयास करें और एप्लिकेशन लॉन्च करें (यहां हम मानते हैं कि सर्वर की प्रतिक्रिया इसी गलत लिंक होगी)।

एक अपवाद को संभालने के लिए, प्रॉमिस विवरण में आपको एक फ़ंक्शन जोड़ने की आवश्यकता होती है जिसे त्रुटि होने पर कहा जाता है। आंतरिक अनाम फ़ंक्शन (प्रतिक्रिया) {...} के तुरंत बाद, एक अल्पविराम से अलग की गई सूची जोड़ें :

  function (error) { showConnectionError("Can't get rss updates for " + feed.title + ". Used source: " + feed.url, true); } 

इस मामले में, हम एक त्रुटि संदेश प्रदर्शित करते हैं, लेकिन एप्लिकेशन को बंद नहीं करते हैं: शायद अन्य थ्रेड्स सामान्य रूप से प्रक्रिया करेंगे।

लिंक को गलत बनाने और एप्लिकेशन चलाने का प्रयास करें:



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

जानकारी साझा करना

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

पृष्ठ \ itemDetail \ itemDetail.js फ़ाइल खोलें। इवेंट हैंडलर को स्टोर करने के लिए शुरुआत में एक वैरिएबल जोड़ें:

  var sharingHandler; 

शुरुआत में या अंत के पास (WinJS.UI.Pages.define () के बाहर) निम्न कार्य भी जोड़ें :

1. setupSharing - डेटा ट्रांसफर के लिए पंजीकरण

  function setupSharing(item) { var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); sharingHandler = onSharingDataRequested.bind(item); dataTransferManager.addEventListener("datarequested", sharingHandler); } 

यहां हम WinRT के माध्यम से डेटा ट्रांसफर मैनेजर तक पहुंचते हैं और डेटा अनुरोध इवेंट हैंडलर को लटकाते हैं।

2. onSharingDataRequested - अनुरोध को संसाधित करने के लिए घटना

  function onSharingDataRequested(e) { var request = e.request; var item = this; var text = item.title; if (item.link) { text += "\n\r" + item.link; request.data.setUri(new Windows.Foundation.Uri(item.link)); } request.data.properties.title = text; request.data.properties.description = "Some awesome news on Windows!"; request.data.setText(text); } 

यहां हम यह वर्णन करते हैं कि हम प्राप्तकर्ता एप्लिकेशन को कौन सा डेटा पास करते हैं: लिंक, टेक्स्ट आदि। (डेटा ट्रांसफर का विवरण यहां देखा जा सकता है: सामग्री साझा करना और प्राप्त करना )।

बहुत अंत में तैयार फ़ंक्शन के अंदर, अनुबंध का समर्थन करने के लिए पंजीकरण कॉल जोड़ें:

  setupSharing(item); 

एप्लिकेशन लॉन्च करें, पोस्ट पर जाएं और आकर्षण के पैनल के माध्यम से समाचार को किसी अन्य एप्लिकेशन में स्थानांतरित करने का प्रयास करें:



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

ऐसा होने से रोकने के लिए, आपको डेटा हस्तांतरण प्रबंधक में ईवेंट हैंडलर रीसेट करना होगा। यह प्रत्येक पृष्ठ के प्रवेश द्वार पर या निकास पर इसके विपरीत किया जा सकता है। निम्नलिखित फ़ंक्शन जोड़ें:

  function clearContracts() { var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); dataTransferManager.removeEventListener("datarequested", sharingHandler); } 

यहां हम केवल संबंधित ईवेंट हैंडलर को हटाते हैं। कॉमा द्वारा अलग किए गए तैयार संपत्ति का वर्णन करने के बाद एक फ़ंक्शन को कॉल करने के लिए, अनलोड के लिए एक फ़ंक्शन जोड़ें:

  unload: function () { clearContracts(); } 

हो गया, अब डेटा ट्रांसफ़र वही काम करता है जहाँ उसे काम करना चाहिए।

हम लेख छापते हैं

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




समान फ़ाइल पृष्ठों में मुद्रित करने की क्षमता जोड़ने के लिए \ itemDetail \ itemDetail.js (यह हमारा प्रिंट संदर्भ है), आपको उसी तरह से उपयुक्त प्रबंधक की सदस्यता लेने की आवश्यकता है जैसे हमने साझा करने के लिए किया था। हैंडलर धारण करने के लिए एक चर जोड़ें :

  var printTaskHandler; 

एक प्रिंट अनुबंध पर हस्ताक्षर करने के लिए कार्य:

  function setupPrinting(item) { var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView(); printTaskHandler = onPrintTaskRequested.bind(item) printManager.addEventListener("printtaskrequested", printTaskHandler); } 

और घटना संचालकों:

  function onPrintTaskRequested(printEvent) { var printTask = printEvent.request.createPrintTask(this.group.title, function (args) { args.setSource(MSApp.getHtmlPrintDocumentSource(document)); }); } 

यहां आप प्रिंट विकल्पों को भी कॉन्फ़िगर कर सकते हैं और अतिरिक्त घटनाओं की सदस्यता ले सकते हैं,
उदाहरण के लिए, प्रिंट ईवेंट के अंत को संभालें।

बहुत अंत में तैयार फ़ंक्शन के अंदर, अनुबंध का समर्थन करने के लिए पंजीकरण कॉल जोड़ें:

  setupPrinting(item); 

और क्लीयरकॉन्ट्रैक्ट्स में प्रिंट अनुरोध हैंडलर को हटाना न भूलें:

  var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView(); printManager.removeEventListener("printtaskrequested", printTaskHandler); 

एप्लिकेशन लॉन्च करने और प्रिंट करने के लिए लेख भेजने का प्रयास करें:





यदि आप पर्याप्त रूप से अवलोकन कर रहे हैं, तो आपको तुरंत उस समस्या को देखना चाहिए जो उत्पन्न हुई है: केवल एक पृष्ठ मुद्रण के लिए भेजा गया है, और इस रूप में कि पृष्ठ स्क्रीन पर (क्षैतिज स्क्रॉलिंग के साथ) जैसा दिखता है।

वेब के लिए आप इस समस्या को कैसे हल करेंगे, इसके समान, यहां मीडिया क्वेरी और प्रिंटिंग के सीएसएस नियम हमारी सहायता के लिए आते हैं। (आप एक विशेष रूप से जनरेट किए गए पृष्ठ, टुकड़ा, iframe, आदि को भी प्रिंट कर सकते हैं)

प्रोजेक्ट में एक नया पृष्ठ \ ItemDetail \ print.css फ़ाइल जोड़ें, या बस इच्छित पृष्ठ (itemDetail.css) से जुड़ी सीएसएस फ़ाइल में नीचे कोड लिखें। इसमें निम्नलिखित पंक्तियाँ जोड़ें:

 @media print { /*   */ .itemdetailpage.fragment { -ms-grid-rows: 40px 1fr; } /*    */ header[role="banner"] { -ms-grid-columns: 40px 1fr !important; } /*   "" */ .win-backbutton { display:none; } /*      */ header[role="banner"] h1.titlearea { margin: 0px !important; font-size: 1em; text-transform: uppercase; } /*         */ .itemdetailpage.fragment, .itemdetailpage .content, .itemdetailpage .content article { height:auto !important; overflow: visible !important; } /*   */ .content { padding-left: 40px; } /*    */ .itemdetailpage .content article { column-width: auto; width: auto; margin-left: 0px; margin-top: 40px; } } 

हम एप्लिकेशन लॉन्च करते हैं और इसे प्रिंट करने के लिए भेजने का प्रयास करते हैं:


यह वर्तमान लेख को समाप्त करता है।

परियोजना

वर्तमान चरण में तैयार परियोजना यहाँ डाउनलोड की जा सकती है: http://aka.ms/win8jsreadertemplate_v2 ।

आगे

अगले भाग में, हम प्रदर्शन से निपटना जारी रखेंगे और देखेंगे कि अधिक जटिल टेम्पलेट्स का उपयोग कैसे करें और प्रासंगिक स्केलिंग के लिए समर्थन जोड़ें।

पिछले भागों

• टेम्प्लेट से डेटा एप्लिकेशन तक
• आवेदन स्टाइल