XAML / C # पर विंडोज 8.1 अनुप्रयोगों का विकास। भाग 2. टाइल्स के साथ काम करें

छवि

हम उस एप्लिकेशन को अपग्रेड करना जारी रखते हैं जो हमने पिछले लेख में बनाया था।

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

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

छवि

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

आप अपने अनुप्रयोगों के लिए निम्न प्रकार की टाइलों का उपयोग कर सकते हैं:

उन सभी को नीचे चित्र में प्रस्तुत किया गया है।

छवि

आप तैयार किए गए टाइल विकल्प और उन पर जानकारी को टाइल टेम्पलेट कैटलॉग में पा सकते हैं

आवेदन के लिए टाइलें अनुकूलित करें


सरल टाइल बनाने के लिए डिफ़ॉल्ट सेटिंग्स का उपयोग करें।

1. पिछले लेख से एप्लिकेशन खोलें या विजुअल स्टूडियो 2013 में एक नया विंडोज 8.1 एप्लिकेशन बनाएं।
2. package.appxmanifest पर डबल-क्लिक करें। प्रकट संपादक विंडो खुलती है।
टाइल जानकारी निर्दिष्ट करें:

छवि

4. एप्लिकेशन लॉन्च करें और टाइल्स के साथ प्रयोग करें।

छवि

जैसा कि आप देख सकते हैं, टाइलें तैयार छवियों को काम करती हैं और प्रदर्शित करती हैं।

अब यह अन्तरक्रियाशीलता जोड़ने और एक टाइल की सामग्री को गतिशील रूप से अपडेट करने का तरीका जानने का समय है।

अद्यतन टाइल जानकारी


टाइल पर अद्यतन जानकारी को लागू करने के कई तरीके हैं:

आपके आवेदन के लिए कार्यों और आवश्यकताओं के आधार पर, आप इनमें से एक विकल्प चुन सकते हैं या उनके उपयोग को जोड़ सकते हैं।

अब प्रत्येक विकल्पों पर अधिक विस्तार से विचार करें।

स्थानीय टाइल अद्यतन

टाइल अपडेट को लागू करने के लिए, सीधे आवेदन से, हम उत्पाद सूची में खरीदें बटन पर क्लिक करके एक घटना हैंडलर जोड़ देंगे। जब आप बटन पर क्लिक करते हैं, तो एप्लिकेशन टाइल को चयनित उत्पाद के बारे में जानकारी के साथ अपडेट किया जाएगा।

1. पिछले लेख से आवेदन खोलें।
2. सॉल्यूशन एक्सप्लोरर में, हबपेज.एक्सएम्एल फ़ाइल खोलें और खरीदें बटन के लिए एक क्लिक इवेंट हैंडलर जोड़ें और ऑर्डर किए जा रहे आइटम के पहचानकर्ता के साथ एक पैरामीटर।

छवि

3. एक खाली ईवेंट हैंडलर स्वतः ही हबपेज . xaml.cs फ़ाइल में उत्पन्न हो गया था। निम्नलिखित कोड वहां लिखें:

private void Button_Click(object sender, RoutedEventArgs e) { string TileXmlString = "<tile>" + "<visual version='2'>" + "<binding template='TileSquare150x150Text04' fallback='TileSquareText04'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileWide310x150Text03' fallback='TileWideText03'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileSquare310x310Text09'>" + "<text id='1'>{0}</text>" + "</binding>" + "</visual>" + "</tile>"; var group = (SampleDataGroup)this.DefaultViewModel["Group1Items"]; if (group != null && group.Items.Count > 0) { IEnumerable<SampleDataItem> dataItems = group.Items.Where(item => item.UniqueId == ((Button)sender).CommandParameter); if (dataItems != null && dataItems.Count() > 0) { XmlDocument tileDOM = new XmlDocument(); tileDOM.LoadXml(string.Format(TileXmlString, " : " + dataItems.FirstOrDefault().Title)); TileNotification tile = new TileNotification(tileDOM); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); } } } 


यह इंगित करने के लिए कि हमारी नई टाइल किस तरह की होगी और उस पर क्या लिखा जाएगा - हमने कैटलॉग में मानक टाइल टेम्पलेट्स में से एक से लिया गया xml का उपयोग किया।

टाइलनोटिफिकेशन क्लास - एक टाइल को अपडेट करने के लिए एक संदेश ऑब्जेक्ट बनाता है।

अद्यतन को ही टाइलअपडेटमैनेजर.क्रीटटाइल यूटरडैटरफॉरशन ()) अपडेट (टाइल) कहकर किया जाता है ;

4. अब आप एप्लिकेशन लॉन्च कर सकते हैं, "खरीदें" बटन पर क्लिक करें और टाइल पर चयनित उत्पाद के बारे में जानकारी पाएं।

छवि

एक निश्चित समय में टाइल अपडेट

टाइल को तुरंत बदलना संभव नहीं है, लेकिन कुछ समय बाद।
उदाहरण के लिए, आप इसे घटना के 3 घंटे बाद बदल सकते हैं। ऐसा करने के लिए, आप अंतिम पंक्तियों के बजाय निम्न कोड जोड़कर Button_Click ईवेंट हैंडलर को बदल सकते हैं:

 Int16 dueTimeInHours = 3; DateTime dueTime = DateTime.Now.AddHours(dueTimeInHours); ScheduledTileNotification scheduledTile = new ScheduledTileNotification(tileXml, dueTime); scheduledTile.Id = "Future_Tile"; TileUpdateManager.createTileUpdaterForApplication().AddToSchedule(scheduledTile); 


समय-समय पर टाइल अपडेट

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

अब हम एक REST WCF सेवा बनाएंगे जो टाइल को अपडेट करने के लिए जानकारी प्रदान करेगी।

एक वेब सेवा बनाना:

1. समाधान एक्सप्लोरर खोलें और समाधान के संदर्भ मेनू में नई परियोजना जोड़ें का चयन करें।
2. परियोजना टेम्पलेट के रूप में डब्ल्यूसीएफ सेवा आवेदन का चयन करें और इसे एक नाम दें।

छवि

3. परिणामस्वरूप, इंटरफ़ेस और वेब सेवा वर्ग से युक्त एक वेब सेवा परियोजना बनाई गई थी।
4. Service1.cs फ़ाइल खोलें और इंटरफ़ेस कोड बदलें:
  [ServiceContract] public interface IService1 { [WebGet(UriTemplate = "/Tile")] [OperationContract] XElement GetTile(); } 

5. Service1.svc फ़ाइल का नाम बदलकर TileService.svc रखें और उसका कोड बदलें:
  public class TileService : IService1 { private const string TileXmlString = "<tile>" + "<visual version='2'>" + "<binding template='TileSquare150x150Text04' fallback='TileSquareText04'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileWide310x150Text03' fallback='TileWideText03'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileSquare310x310Text09'>" + "<text id='1'>{0}</text>" + "</binding>" + "</visual>" + "</tile>"; public XElement GetTile() { string xml = string.Format(TileXmlString, "    " ); return XElement.Parse(xml); } } 

इस कोड के साथ, हम एक प्रारूप में xml उत्पन्न करते हैं जो टाइल्स के लिए समझ में आता है।

4. वेब सेवा परियोजना को चलाएं और विधि को कॉल करें। वेब सेवा को संसाधित करना चाहिए और xml वापस करना चाहिए।

Windows अनुप्रयोग में वेब सेवा कॉल सेट करना:

1. समाधान एक्सप्लोरर में, Package.appxmanifest खोलें और टाइल अपडेट सेटिंग्स निर्दिष्ट करें:

छवि

2. अब आप आवेदन शुरू कर सकते हैं, 30 मिनट प्रतीक्षा करें और टाइल पर परिवर्तन देखें।

छवि

आप एक वेब सेवा भी कॉल कर सकते हैं और टाइल्स को प्रोग्रामेटिक रूप से अपडेट कर सकते हैं।
यह कोड हर आधे घंटे में एक बार वेब सेवा से टाइल अपडेट करने के कार्य को बनाता या अपडेट करता है:
 var tileupdater = TileUpdateManager.CreateTileUpdaterForApplication(); tileupdater.StartPeriodicUpdate(new Uri("http://localhost:32298/TileService.svc/Tile"), PeriodicUpdateRecurrence.HalfHour); 

ध्यान दें: यदि आप मुख्य स्क्रीन से टाइल हटाते हैं तो भी कार्य किया जाएगा। सबसे अधिक संभावना है, आपको कुछ घटनाओं के लिए टाइल को अपडेट करने के कार्य को हटाने की आवश्यकता होगी, इसके लिए आपको निम्नलिखित कोड चलाने की आवश्यकता है:
 var tileupdater = TileUpdateManager.CreateTileUpdaterForApplication(); tileupdater.StopPeriodicUpdate(); 

पुश सूचनाओं का उपयोग करके टाइल्स को अपडेट करें

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

हम पुश सूचनाएँ बनाने और प्रबंधित करने के लिए Windows Azure मोबाइल सेवाओं का उपयोग करेंगे। आप विंडोज एज़्योर का उपयोग करके नि: शुल्क परीक्षण महीने का लाभ उठा सकते हैं।

आप Visual Studio छोड़ने के बिना Windows अनुप्रयोगों के लिए Windows Azure मोबाइल सेवा को कॉन्फ़िगर कर सकते हैं:

1. ओपन सॉल्यूशन एक्सप्लोरर । प्रोजेक्ट के संदर्भ मेनू में, Add / Push Notification चुनें

छवि

2. खोला विज़ार्ड भरें। इस प्रक्रिया में, आपको एक मौजूदा का उपयोग करना होगा या एक नया विंडोज स्टोर डेवलपर खाता बनाना होगा।

छवि

3. विज़ार्ड के अंत में, विंडोज एज़्योर में एक मोबाइल सेवा बनाई जाएगी। हम थोड़ी देर बाद उसके पास लौट आएंगे।

छवि

4. इस बात पर ध्यान दें कि परियोजना का क्या हुआ।
पुश . register.cs वर्ग को प्रोजेक्ट में जोड़ा गया था , जो मोबाइल सेवा के साथ सहभागिता प्रदान करता है।

छवि

5. एप्लिकेशन लॉन्च इवेंट में App.xaml.cs फ़ाइल में, एक बदलाव भी किया गया था।
वहां, पुश नोटिफिकेशन चैनल को प्रारंभ किया जाता है।
 public static Microsoft.WindowsAzure.MobileServices.MobileServiceClient nokiaproductsClient = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient( "https://nokiaproducts.azure-mobile.net/", "LKcaeBgDWQTEJFiifTiRzhZBdfIkLM35"); //… protected override async void OnLaunched(LaunchActivatedEventArgs e) { //… eShop.nokiaproductsPush.UploadChannel(); //… } 

6. अब हमें एप्लिकेशन को सूचनाएं भेजने के लिए मोबाइल सेवा सिखाना होगा।
7. ऐसा करने के लिए , विंडोज एज़्योर कंट्रोल पैनल (https://manage.windowsazure.com/) पर जाएं, फिर मोबाइल सेवा , मोबाइल सेवा का चयन करें, डेटा टैब पर जाएं और उपलब्ध डेटा ट्रांसफर चैनल का चयन करें।

छवि

8. खुलने वाले पृष्ठ पर, स्क्रिप्ट टैब पर क्लिक करें।
9. एक जावास्क्रिप्ट फाइल खुलेगी जिसमें आप कोड लिख सकते हैं और सूचनाएं उत्पन्न कर सकते हैं।

छवि

10. निम्नलिखित के साथ कोड की जगह, फाइल को संपादित करें:
 function insert(item, user, request) { request.execute({ success: function() { request.respond(); sendNotifications(); } }); function sendNotifications() { var channelsTable = tables.getTable('channels'); channelsTable.read({ success: function(devices) { devices.forEach(function(device) { push.wns.sendTileWideText04(device.channelUri, { text1: '  ' }, { success: function(pushResponse) { console.log("Sent tile:", pushResponse); } }); }); } }); } } 

11. स्क्रिप्ट को सेव करें।

छवि

12. Visual Studio पर लौटें और एप्लिकेशन चलाएँ।

छवि

स्क्रिप्ट में निर्दिष्ट की गई टाइल तुरंत बदल जाएगी।

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

आप लिंक पर SkyDrive पर परिणामी आवेदन डाउनलोड कर सकते हैं: http://sdrv.ms/1gKm4IJ

उपयोगी सामग्री


टाइल्स का निर्माण
तैयार किए गए टाइल पैटर्न की सूची
एक अधिसूचना वितरण विधि का चयन करें
आवधिक अधिसूचना अवलोकन
पुश सूचनाएँ अवलोकन

Source: https://habr.com/ru/post/In204720/


All Articles