🐟 🧘🏼 🤞🏼 विंडोज फोन 8 डेवलपमेंट शुरू करना: पाठ 4: सेवाओं से जुड़ना और डेटा से जुड़ना ⏭️ ✌🏻 ⭕️

विंडोज फोन 8 डेवलपमेंट शुरू करना: पाठ 1. एप्लीकेशन लेआउट और इवेंट हैंडलर
विंडोज फोन 8 का आरंभ करना विकास: पाठ 2: स्थानीय अनुप्रयोग संग्रहण तक पहुँचना
विंडोज फोन 8 डेवलपमेंट शुरू करना: पाठ 3. पेज नेविगेशन और पासिंग सेटिंग्स
विंडोज फोन 8 डेवलपमेंट शुरू करना: पाठ 4: सेवाओं से जुड़ना और डेटा से जुड़ना

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

डेटा बाइंडिंग क्या है?

पाठ 3 से समाचार ऐप का वर्णन याद रखें? हमारे पास बहुत सी खबरें हैं जिन्हें उपयोगकर्ता को दिखाया जाना चाहिए। पहली बात यह पता लगाना है कि समाचार कैसे दिखेगा और उपयोगकर्ता को कैसे दिखाना है। मेरे लिए, समाचार में एक शीर्षक, एक संक्षिप्त विवरण, शायद एक तस्वीर और विवरण बटन जैसा कुछ होना चाहिए।

यूआई (उपयोगकर्ता इंटरफ़ेस) के लिए बाध्यकारी समाचार की प्रक्रिया - यह बाध्यकारी डेटा की प्रक्रिया है।

हालांकि, अच्छी तरह से ज्ञात कारणों के कारण, हम तुरंत एक पृष्ठ पर सभी विवरणों के साथ सभी समाचार नहीं दिखा सकते हैं, क्योंकि उपयोगकर्ता को सब कुछ पढ़ने के लिए पर्याप्त रूप से लंबे स्क्रॉल का उपयोग करना होगा। यह दो पृष्ठों का उपयोग करके हल किया जाता है - एक पर केवल समाचारों की एक सूची, दूसरे पर - चयनित समाचार का विवरण।

डेटा को कैसे बांधें?

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

कोड

<ListBox x:Name="NewsList" Height="490" HorizontalAlignment="Left" Margin="5,25,0,0" VerticalAlignment="Top" Width="444" SelectionChanged="NewsList_SelectionChange" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Top" > <Image Sourse="{Binding Thumb}" Height="60" Stretch="Fill" > <TextBlock Text="{Binding Title}" FontSize="20" TextWrapping="Wrap" > </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

यहां मैं सामग्री आइटम के टेम्पलेट के लिए StackPanel का उपयोग करता हूं: एक तस्वीर, और उसके बगल में एक टेक्स्टब्लॉक। यह इस तरह दिखता है:

WCF सेवा का उपयोग करना

मैंने आपको यह नहीं बताया कि WCF क्या है, लेकिन मैं आपको बताता हूं कि यह सेवा क्या करती है। आलसी लोडिंग कोड और यह जाँच। मेरे पास एक वर्ग है जिसका नाम WindowsPhoneLessonNews है जिसमें गुण शीर्षक, सामग्री, अंगूठा है। 2 ऑपरेशन भी हैं: एक सभी समाचार डाउनलोड करने के लिए, और दूसरा इसके सूचकांक द्वारा समाचार डाउनलोड करने के लिए।

हमारी सेवा के लिए एक लिंक जोड़ें ताकि आप इसका उपयोग कर सकें। संदर्भ पर राइट-क्लिक करें और सेवा संदर्भ जोड़ें चुनें।

मेरी सेवाओं को पोर्ट 8080 के साथ एक स्थानीय सेवा पर होस्ट किया जाता है। सेवा पर जाएं और इसे चुनें। मेरे पास सेवा का नाम है Lesson4PhoneNewsService।

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

कोड

  private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e) { NewsServiceClient newsClient = new NewsServiceClient; newsClient.GetAllNewsCompleted += newsClient_GetAllNewsCompleted; newsClient.GetAllNewsAsync(); ProgressLoader.Visibility = Visibility.Visible; ProgressLoader.IsIndeterminate = true; }

यह सुनिश्चित करने के लिए कि उपयोगकर्ता के लिए डाउनलोड बहुत उबाऊ नहीं था, हम एक लोडिंग बार जोड़ते हैं: डेटा प्राप्त होने के दौरान यह एनिमेटेड होगा, लेकिन यदि कोई डेटा प्राप्त नहीं होता है, तो पट्टी अदृश्य हो जाती है।

कोड

  </ListBox.ItemTemplate> </listBox> <ProgressBar x:namespace="ProgressLoader" Height="10" Visibility="Collapsed"/>

अतुल्यकालिक प्रोग्रामिंग की एक और विशेषता यह है कि आपको सेवा से प्रतिक्रिया प्राप्त करने के बाद आवेदन को बताने की आवश्यकता है। मैं बस हमारे ListBox के आइटम स्रोत को उस प्रतिक्रिया के परिणाम के लिए असाइन करूँगा जो हमें सेवा से मिलती है और डाउनलोड बार को छिपाती है।

कोड

  void newsClient_GetAllNewsCompleted(object sender, GetAllNewsCompletedEventArgs e) { NewsList.ItemSourse = e.Result; NewsList.SelectedIndex = -1; ProgressLoader.Visibility = Visibility.Collapsed; ProgressLoader.IsIndeterminate = false; }

मुझे यह भी पता है कि सेवा एक सूची लौटाती है, इसलिए मैं तुरंत सूची बॉक्स की प्रतिक्रिया संलग्न करता हूं।

और अगर आप खबर पर क्लिक करते हैं तो क्या होता है?

जब आप समाचार पर क्लिक करते हैं तो एक ईवेंट हैंडलर बनाते हैं। हम सूचकांक की वैधता की जांच करते हैं और सूचकांक को एक पैरामीटर के रूप में पास करते हुए उपयोगकर्ता को पृष्ठ पर पुनर्निर्देशित करते हैं, जहां पूरी जानकारी प्रदर्शित होती है। इस प्रकार, NewsDetails पेज यह निर्धारित करने में सक्षम होगा कि कौन सी खबर को पूर्ण दिखाना है।

कोड

  private void News_List_SelectionChanged(object sender, SelectionChangedEventArgs e) { if(NewsList.SelectedIndex != 1) NavigationService.Navigate(new Uri(string.Format("/NewsDetails.xaml?NewsId={0}", NewsList.SelectedIndex.ToString()), UriKind.Relative)); }

कोड

  private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e) { NewsServiceClient client = new NewsServiceClient(); client.GetNewsByIDCompleted += client_GetNewsByIDCompleted; client.GetNewsByIDAsunc(int.Parse(NavigationContext.QueryString["NewsID"].ToString())); }

और जब यह एक अतुल्यकालिक कॉल की बात आती है तो लगभग:

कोड

  void client_GetNewsByIDCompleted(object sender, GetNewsByIDCompletedEventArgs e) { List<WindowsPhoneLessonNews> selectedNews = new List<WindowsPhoneLessonNews>(); selectedNews.Add(e.Result); NewsList.ItemSource = selectedNews; }

यदि आप पिछले पृष्ठ पर वापस जाना चाहते हैं, तो फोन पर बैक बटन दबाएं।

हम उपस्थिति पर काम करेंगे

निम्नलिखित मुख्य पृष्ठ का लेआउट है, जिसमें टेक्स्टब्लॉक शामिल है, जो कहता है कि सामग्री किसी वेब सेवा, आदि से प्राप्त की जाती है ...

कोड

  <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="List is being populated from the web service, tap" TextWrapping="Wrap" Padding="0,0,10,0"> </Textlock> <ListBox x:Name="WewsList" Height="490" HorizontalAlignment="Left" Margin="5,25,0,0" VerticalAlignment="Top" Width="444" SelectionChanged="WewsList_SelectionChanged" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Image Source="{Binding Thumb}" Height="60" Stretch="Fill"/> <TextBlock Text="{Binding Title}" FontSize="20" TextWrapping="Wrap"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <ProgressBar x:Name="ProgressLoader" Height="10" Visibility="Collapsed"/> </StackPanel>

NewsDetails पेज। लगभग मुख्य पृष्ठ के XAML के समान। StackPanel का अभिविन्यास ऊर्ध्वाधर में बदल जाता है, चित्र काट दिए जाते हैं और समाचार सामग्री जोड़ दी जाती है। और शीर्षक के लिए फ़ॉन्ट आकार को 40 में भी बदल दिया।

परीक्षण!

यदि आप आवश्यक समाचार पर क्लिक करते हैं, तो विस्तृत जानकारी वाला एक पृष्ठ खुलता है:

सभी 4 पाठों को संक्षेप में प्रस्तुत करना

और इसलिए, अब आपके पास XAML, एक विज़ुअल पेज एडिटर, लेआउट, ईवेंट हैंडलर, नेविगेशन, डेटा बाइंडिंग का उपयोग करके विंडोज फोन 8 के लिए अपना आवेदन लिखने के लिए पर्याप्त ज्ञान है।

मुझे आशा है कि मेरे पाठों ने आपकी मदद की है और आप उनसे, आत्म-विकास और सुधार शुरू कर सकते हैं।

सौभाग्य है।

विंडोज फोन 8 डेवलपमेंट शुरू करना: पाठ 4: सेवाओं से जुड़ना और डेटा से जुड़ना

डेटा बाइंडिंग क्या है?

डेटा को कैसे बांधें?

WCF सेवा का उपयोग करना

और अगर आप खबर पर क्लिक करते हैं तो क्या होता है?

हम उपस्थिति पर काम करेंगे

परीक्षण!

सभी 4 पाठों को संक्षेप में प्रस्तुत करना

More articles: