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

इस लेख के साथ, हम विंडोज 8 के लिए HTML / JS में WinRT- एप्लिकेशन को विकसित करने की मूल बातें के लिए समर्पित सामग्रियों की एक श्रृंखला खोल रहे हैं। हम क्रमिक रूप से लगभग खाली टेंपलेट से एक सर्वर पार्ट और लाइव टाइल्स के साथ पूर्ण-खाली एप्लिकेशन में जाएंगे।

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

टेम्पलेट से एप्लिकेशन बनाना

विजुअल स्टूडियो 2012 खोलें, एक नया प्रोजेक्ट बनाने के लिए चुनें ( फ़ाइल -> नया -> प्रोजेक्ट ... )। इसके बाद, टेम्प्लेट में, जावास्क्रिप्ट -> विंडोज स्टोर में प्रोजेक्ट चुनें। संकेत दें कि आप ग्रिड ऐप टेम्पलेट का उपयोग करेंगे।



किसी भी प्रोजेक्ट का नाम दर्ज करें, उदाहरण के लिए, रीडर ऐप ।

प्रोजेक्ट संरचना की जाँच करें:

1. package.appxmanifest - एप्लिकेशन मैनिफ़ेस्ट जिसमें मुख्य सेटिंग्स, उपयोग की गई विशेषताएं, एप्लिकेशन नाम, टाइल और अन्य पैरामीटर का वर्णन है;
2. default.html - औपचारिक अनुप्रयोग प्रारंभ पृष्ठ;
3. Pages \ groupedItems - सामग्री समूहों की प्रस्तुति के लिए पृष्ठ के लिए html-, js- और css- फ़ाइलों के साथ फ़ोल्डर (आरंभ पृष्ठ में लोड);
4. पृष्ठ \ groupDetail - एक धारा के अनुरूप समाचार का एक समूह (एक आरएसएस-स्ट्रीम में प्रविष्टियां) प्रदर्शित करने के लिए पृष्ठ के लिए HTML-, js- और सीएसएस-फ़ाइलों वाला एक फ़ोल्डर;
5. Pages \ itemDetail - html-, js- और css- फाइल वाले फोल्डर पृष्ठ के प्रत्येक समाचार को अलग-अलग प्रदर्शित करते हैं;
6. js \ data.js - js-file जिसमें डेटा के साथ काम का वर्णन है (जिसमें डेमो डेटा वायर्ड है);
7. js \ default.js - एप्लिकेशन को प्रारंभ करने के लिए आवश्यक घटनाओं का वर्णन करता है;
8. js \ navigator.js - पृष्ठों और इसके लिए आवश्यक घटनाओं और वस्तुओं के बीच संक्रमण के तर्क का वर्णन करता है;
9. images \ logo.png - वर्ग टाइल के लिए उपयोग की जाने वाली छवि;
10. images \ smalllogo.png - ऑपरेटिंग सिस्टम में एप्लिकेशन को सूचीबद्ध करते समय उपयोग की जाने वाली छवि, उदाहरण के लिए, जब खोज या साझा करने के लिए एप्लिकेशन खोजते या चुनते हैं;
11. छवियाँ \ splashscreen.png - बूट छवि आवेदन खोलते समय प्रदर्शित;
12. images \ storelogo.png - एप्लिकेशन स्टोर इंटरफ़ेस (विंडोज स्टोर) में उपयोग की जाने वाली छवि।

इसके अलावा, डिफ़ॉल्ट रूप से, WinJS पुस्तकालय परियोजना से जुड़ा है, जिसमें अंधेरे और प्रकाश विषयों और सहायक कार्यों और जावास्क्रिप्ट में वस्तुओं के लिए शैलियों के सेट शामिल हैं।

F5 , हरे तीर को दबाकर या डीबग -> डिबगिंग प्रारंभ करके एप्लिकेशन को प्रारंभ करने का प्रयास करें ।



जानें कि आवेदन कैसे काम करता है:

• एकल ग्रे टाइल या समूह शीर्ष लेख पर क्लिक करने का प्रयास करें।
• भीतरी पृष्ठों में बैक बटन पर क्लिक करने का प्रयास करें।
• ऐप को स्नैप्ड मोड में डालने का प्रयास करें।

Visual Studio पर लौटें और डीबग करना बंद करें ( Shift + F5 , एक लाल वर्ग या चयन करें डीबग -> मेनू से डीबग करना बंद करें )।

डेटा स्रोतों की जगह

Js \ data.js फ़ाइल खोलें। यह कई महत्वपूर्ण कार्यों और वस्तुओं की घोषणा करता है जो हम भी उपयोग करेंगे।

पहला कदम कोड की लाइनों से छुटकारा पाना है जो नमूना डेटा उत्पन्न करता है। ऐसा करने के लिए, निम्न पंक्तियों को हटा दें :

1. सूची में डेटा डालें:
   
   

   // You can add data from asynchronous sources whenever it becomes available. generateSampleData().forEach(function (item) { list.push(item); }); 

   
   
   
2. नमूना डेटा उत्पन्न करना:
   

     // Returns an array of sample data that can be added to the application's // data list. function generateSampleData() { var itemContent = "<p>Curabitur class … "; var itemDescription = "Item Description: Pellente…"; var groupDescription = "Group Description: Lorem …"; … return sampleItems; } 

यदि आप एप्लिकेशन चलाते हैं, तो यह काम करना जारी रखेगा, केवल इसमें कोई डेटा नहीं होगा। डीबग करना बंद करें और data.js फ़ाइल पर वापस लौटें। आइए संक्षेप में इसकी संरचना से गुजरते हैं ताकि आगे की क्रियाओं को समझा जा सके:

 var list = new WinJS.Binding.List(); 

एक सूची बनाई गई है जिसका उपयोग प्रदर्शन के साथ डेटा को जोड़ने के लिए किया जाएगा। इसमें हम उन सूचनाओं के ब्लॉक में प्रवेश करेंगे जिन्हें हम स्क्रीन पर प्रदर्शित करना चाहते हैं।

 var groupedItems = list.createGrouped( function groupKeySelector(item) { return item.group.key; }, function groupDataSelector(item) { return item.group; } ); 

सूची के आधार पर, एक समूहित संग्रह बनाया जाता है, जब विशेष कार्यों की सहायता से बनाया जाता है, तो यह इंगित किया जाता है कि संग्रह के तत्वों को अलग-अलग समूहों में कैसे विभाजित किया गया है।

 WinJS.Namespace.define("Data", { items: groupedItems, groups: groupedItems.groups, getItemReference: getItemReference, getItemsFromGroup: getItemsFromGroup, resolveGroupReference: resolveGroupReference, resolveItemReference: resolveItemReference }); 

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

शेष 4 फ़ंक्शंस ( getItemReference , getItemsFromGroup , solutionGroupReference और solutionItemReference ) का उपयोग ऑब्जेक्ट्स की तुलना करने के लिए किया जाता है, एक ही समूह से संबंधित तत्वों के सबसेट को पुनः प्राप्त करते हैं, समूह को कुंजी और तत्व के आधार पर विशिष्ट पहचानकर्ताओं के समूह द्वारा निर्धारित करते हैं।

अब हमारे अपने डेटा को जोड़ने का समय है। स्रोत के रूप में हम बाहरी आरएसएस फ़ीड का उपयोग करेंगे।

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

फ़ाइल की शुरुआत में वापस जाएं और लाइन के बाद "सख्त उपयोग करें" उन ब्लॉगों का वर्णन करें जिनसे आप जानकारी प्रदर्शित करेंगे:

  var blogs = [ { key: "ABlogging", url: "http://blogs.windows.com/windows/b/bloggingwindows/rss.aspx", title: 'Blogging Windows', rsstitle: 'tbd', updated: 'tbd', dataPromise: null }, { key: "BExperience", url: 'http://blogs.windows.com/windows/b/windowsexperience/rss.aspx', title: 'Windows Experience', rsstitle: 'tbd', updated: 'tbd', dataPromise: null }, { key: "CExtreme", url: 'http://blogs.windows.com/windows/b/extremewindows/rss.aspx', title: 'Extreme Windows', rsstitle: 'tbd', updated: 'tbd', dataPromise: null }]; 

हमारे द्वारा निर्दिष्ट प्रत्येक ब्लॉग (सामग्री समूह) का वर्णन करने के लिए:

• कुंजी महत्वपूर्ण है (चूंकि समूहों की छंटाई कुंजी द्वारा होगी, हमने समूह की शुरुआत में एक स्पष्ट छँटाई कार्य के लिए लैटिन अक्षर भी जोड़े - यह एक वास्तविक परियोजना में अधिक सुरुचिपूर्ण तरीके से किया जा सकता है),
• आरएसएस फ़ीड के लिंक - url ,
• स्ट्रीम का नाम - शीर्षक ,
• कुछ स्टब्स:
  
  • ब्लॉग का असली नाम rsstitle है ,
  • अद्यतन तिथि ( अद्यतन ),
  • dataPromise को पॉइंटर - इस स्ट्रीम को डाउनलोड करने और इसे संसाधित करने के लिए एक "वादा"।
  
  

कंप्यूटर पर डेटा को लिंक करने के लिए, उन पर जानकारी डाउनलोड की जानी चाहिए। ऐसा करने के लिए, लाइन के बाद var सूची = नया WinJS.Binding.List (); एक नया getBlogPosts फ़ंक्शन जोड़ें , जो सिर्फ लोडिंग से निपटेगा :

 function getBlogPosts(postsList) { blogs.forEach(function (feed) { //  Promise feed.dataPromise = WinJS.xhr( { url: feed.url } ).then( function (response) { if (response) { var syndicationXML = response.responseXML || (new DOMParser()).parseFromString(response.responseText, "text/xml"); processRSSFeed(syndicationXML, feed, postsList); } } ); }); return postsList; } 

इस फ़ंक्शन में, हम सभी ब्लॉगों के माध्यम से एक लूप में जाते हैं, प्रत्येक लिंक के लिए WinJS.xhr फ़ंक्शन के माध्यम से , XMLHttpRequest अनुरोध के चारों ओर एक अतुल्यकालिक वादा आवरण बनाते हैं और परिणाम प्राप्त करने के बाद (तब) हम प्रसंस्करण प्रक्रिया में प्रसंस्करण के लिए प्राप्त प्रतिक्रिया को पास करते हैं, जिसका हम नीचे वर्णन करेंगे।

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

स्ट्रीम को संसाधित करने के लिए, नीचे एक और फ़ंक्शन जोड़ें - processRSSFeed :

  function processRSSFeed(articleSyndication, feed, postsList) { //   feed.rsstitle = articleSyndication.querySelector("rss > channel > title").textContent; //         var published = articleSyndication.querySelector("rss > channel > item > pubDate").textContent; //      var date = new Date(published); var dateFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter( "day month.abbreviated year.full"); var blogDate = dateFmt.format(date); feed.updated = ": " + blogDate; //   getItemsFromRSSFeed(articleSyndication, feed, postsList); } 

इस फ़ंक्शन में, हम इस तथ्य का लाभ उठाते हैं कि इनपुट में हमारे पास एक ज्ञात संरचना (RSS 2.0) के साथ XML फ़ाइल है जिसे आप DOM मॉडल का उपयोग करके नेविगेट कर सकते हैं, विशेष रूप से, क्वेरीसेलेक्टर फ़ंक्शन, जिसके उपयोग से आप प्राप्त दस्तावेज़ से आवश्यक डेटा निकाल सकते हैं।

हम WinRT एपीआई के माध्यम से उपलब्ध वैश्वीकरण कार्यों का उपयोग करके अंतिम अद्यतन तिथि के प्राप्त पाठ मान को वांछित प्रारूप में बदल देंगे।

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

नीचे दिए गए फ़ंक्शन को जोड़ें :

 function getItemsFromRSSFeed(articleSyndication, feed, postsList) { var posts = articleSyndication.querySelectorAll("item"); //       var length = posts.length; for (var postIndex = 0; postIndex < length; postIndex++) { var post = posts[postIndex]; //   var postPublished = post.querySelector("pubDate").textContent; var postDate = new Date(postPublished); var monthFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month.abbreviated"); var dayFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("day"); var yearFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("year.full"); var timeFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("shorttime"); var postContent = toStaticHTML(post.querySelector("description").textContent); var postItem = { index: postIndex, group: feed, //   title: post.querySelector("title").textContent, //     postDate: postDate, month: monthFmt.format(postDate).toUpperCase(), day: dayFmt.format(postDate), year: yearFmt.format(postDate), time: timeFmt.format(postDate), //   content: postContent, //    link: post.querySelector("link").textContent }; postsList.push(postItem); } } 

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

तारीखों के प्रारूपण और प्रत्येक पोस्ट को संबंधित समूह में बाँधने पर ध्यान दें। यह भी ध्यान दें कि पोस्ट की परिणामी सामग्री की सुरक्षा बढ़ाने के लिए हम फंक्शन स्टेटिक का उपयोग करके स्टैटिक व्यू में लाते हैं ।

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

ब्लॉग पढ़ने शुरू करने के लिए नीचे दी गई पंक्ति जोड़ें :

 list = getBlogPosts(list); 

डिबगिंग के लिए एप्लिकेशन चलाएँ:


जैसा कि आप देख सकते हैं, यह पहले से ही हमारे नए डेटा का उपयोग करता है, हालांकि, कई "समस्या" क्षेत्र हैं जिन्हें ठीक करने की आवश्यकता है:

• कोई चित्र नहीं
• अलग लाइनों में अजीब "अपरिभाषित" प्रदर्शित होता है,
• मुख्य पृष्ठ पर, संपूर्ण सूची को तुरंत स्ट्रीम से प्रदर्शित किया जाता है, लेकिन मैं इसे कई प्रविष्टियों तक सीमित करना चाहता हूं।

हम निम्नलिखित लेखों में इन कार्यों से निपटेंगे।

विस्तार

• आवेदन स्टाइल