🛡️ 🙇🏿 🖕🏾 विंडोज फोन के लिए अपने आप को MVVM फ्रेमवर्क। भाग 1 🕥 🛬 ⛔️

WPF, Silverlight, Windows Store और Windows Phone प्लेटफ़ॉर्म के लिए अनुप्रयोग विकास में हमेशा MVVM पैटर्न का उपयोग शामिल होता है। यह स्वाभाविक है, क्योंकि इन प्लेटफार्मों का मूल दर्शन प्रस्तुति को अलग करना है (मैं यूजर इंटरफेस शब्द का भी उपयोग करूंगा) और कार्यक्रम के बाकी तर्क। यह दृष्टिकोण निम्नलिखित लाभ प्रदान करता है:

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

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

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

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

एक उदाहरण के रूप में, हम एक सरल एप्लिकेशन "क्रेडिट कैलकुलेटर" बनाएंगे, जिसकी सभी कार्यक्षमता कोड-पीछे की शैली में लागू की जाएगी।

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

मुख्य पृष्ठ MainPage.xaml के लेआउट फ़ाइल का एक टुकड़ा

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ScrollViewer> <StackPanel> <StackPanel.Resources> <Style TargetType="TextBlock" BasedOn="{StaticResource PhoneTextNormalStyle}"/> </StackPanel.Resources> <TextBlock Text=" " /> <TextBox x:Name="viewAmount" InputScope="Number" /> <TextBlock Text=" "/> <TextBox x:Name="viewPercent" InputScope="Number" /> <TextBlock Text=" " /> <TextBox x:Name="viewTerm" InputScope="Number"/> <Button x:Name="viewCalculate" Content="" Click="CalculateClick" /> <Border x:Name="viewCalculationPanel" BorderBrush="{StaticResource PhoneBorderBrush}" BorderThickness="{StaticResource PhoneBorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text=":" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="viewPayment" Style="{StaticResource PhoneTextNormalStyle}"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text=":" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="viewTotalPayment" Style="{StaticResource PhoneTextNormalStyle}" /> </StackPanel> <Button Content="" Click="DetailsClick" /> </StackPanel> </Border> </StackPanel> </ScrollViewer> </Grid> <Grid x:Name="viewProgressPanel" Grid.Row="0" Grid.RowSpan="2" Background="{StaticResource OpacityBackgroundBrush}" Visibility="Collapsed"> <ProgressBar Opacity="1" IsIndeterminate="True" /> </Grid>

यह मार्कअप पूरी तरह से डेटा बाइंडिंग नहीं है। सभी डेटा कोड-पीछे फ़ाइल से नियंत्रण के गुणों का उपयोग करके सेट किया गया है।

MainPage.xaml.cs मुख्य पृष्ठ फ़ाइल के पीछे कोड

 using System; using System.Threading.Tasks; using System.Windows; using Microsoft.Phone.Controls; namespace MVVM_Article { public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); } private void CalculateClick(object sender, RoutedEventArgs e) { decimal amount; decimal percent; int term; if(!decimal.TryParse(viewAmount.Text, out amount)) { viewProgressPanel.Visibility = Visibility.Collapsed; MessageBox.Show("   "); return; } if(!decimal.TryParse(viewPercent.Text, out percent)) { viewProgressPanel.Visibility = Visibility.Collapsed; MessageBox.Show("   "); return; } if(!int.TryParse(viewTerm.Text, out term)) { viewProgressPanel.Visibility = Visibility.Collapsed; MessageBox.Show("    "); return; } Focus(); viewProgressPanel.Visibility = Visibility.Visible; Task.Run(() => { try { var payment = Calculator.CalculatePayment(amount, percent, term); Dispatcher.BeginInvoke(() => { viewCalculationPanel.Visibility = Visibility.Visible; viewPayment.Text = payment.ToString("N2"); viewTotalPayment.Text = (payment * term).ToString("N2"); }); } finally { Dispatcher.BeginInvoke(() => { viewProgressPanel.Visibility = Visibility.Collapsed; }); } }); } private void DetailsClick(object sender, RoutedEventArgs e) { var pageUri = string.Format("/DetailsPage.xaml?amount={0}&percent={1}&term={2}", viewAmount.Text, viewPercent.Text, viewTerm.Text); NavigationService.Navigate(new Uri(pageUri, UriKind.Relative)); } } }

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

विस्तृत क्रेडिट विवरण पृष्ठ पर मापदंडों का स्थानांतरण पृष्ठ URI मापदंडों के माध्यम से किया जाता है।

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

DetailsPage.xaml.cs फ़ाइल में भुगतान शेड्यूल तालिका में भरना

 var style = (Style)Resources["PhoneTextNormalStyle"]; foreach(var record in schedule) { var grid = new Grid(); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); var loanElement = new TextBlock { Text = record.Loan.ToString("N2"), Style = style }; Grid.SetColumn(loanElement, 0); var interestElement = new TextBlock { Text = record.Interest.ToString("N2"), Style = style }; Grid.SetColumn(interestElement, 1); var balanceElement = new TextBlock { Text = record.Balance.ToString("N2"), Style = style }; Grid.SetColumn(balanceElement, 2); grid.Children.Add(loanElement); grid.Children.Add(interestElement); grid.Children.Add(balanceElement); viewRecords.Children.Add(grid); }

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

फ़ाइल का एक टुकड़ा Calculator.cs

 internal static class Calculator { public static decimal CalculatePayment(decimal amount, decimal percent, int term) { Task.Delay(1000).Wait(); percent /= 1200; var common = (decimal) Math.Pow((double) (1 + percent), term); var multiplier = percent*common/(common - 1); var payment = amount*multiplier; return payment; } public static List<PaymentsScheduleRecord> GetPaymentsSchedule(decimal amount, decimal percent, int term) { var balance = amount; var interestRate = percent / 1200; var payment = CalculatePayment(amount, percent, term); var schedule = new List<PaymentsScheduleRecord>(); for (var period = 0; period < term; period++) { var interest = Math.Round(balance * interestRate, 2); var loan = payment - interest; balance -= loan; var record = new PaymentsScheduleRecord { Interest = interest, Loan = loan, Balance = balance }; schedule.Add(record); } return schedule; } }

एमवीवीएम का सबसे सरल कार्यान्वयन

अब हम MVVM के सबसे सरल संस्करण को लागू करेंगे, इसके लिए हम प्रत्येक पृष्ठ के लिए एक प्रस्तुति मॉडल बनाएंगे, जो वस्तु के गुणों में परिवर्तन के बारे में दृश्य को सूचित करने के लिए उपयोग किए गए INotifyPropertyChanged इंटरफ़ेस को लागू करेगा। स्रोत कोड गिवब पर भोलेवम शाखा में उपलब्ध है

क्लास द्वारा इंटरफ़ेस के कार्यान्वयन में संपत्ति परिवर्तन की संपत्ति में हर बार ऑब्जेक्ट की संपत्ति का मूल्य शामिल होता है। यह व्यवहार डेटा बाइंडिंग को किसी ऑब्जेक्ट की स्थिति को ट्रैक करने और उपयोगकर्ता इंटरफ़ेस डेटा को अपडेट करने की अनुमति देता है जब संबंधित संपत्ति का मूल्य बदलता है।

MainPageViewModel.cs फ़ाइल का एक टुकड़ा

 public class MainPageViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null) { var handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } }

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

एक दृश्य मॉडल संपत्ति का एक उदाहरण कार्यान्वयन

 private string _amount; public string Amount { get { return _amount; } set { _amount = value; OnPropertyChanged(); } }

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

एक प्रस्तुति मॉडल उपभोक्ताओं को कमांड के साथ प्रदान कर सकता है जो उन्हें प्रस्तुति मॉडल के लिए विशिष्ट कार्य करने में सक्षम बनाता है। कमांड ऑब्जेक्ट हैं जो ICommand इंटरफ़ेस को लागू करते हैं; यदि उपभोक्ता को कमांड द्वारा निर्दिष्ट कार्रवाई करने की आवश्यकता होती है, तो उसे कमांड के Execute तरीके को कॉल करना होगा। टीम उपभोक्ताओं को यह जानकारी प्रदान करती है कि यह पूरा हो सकता है या नहीं। कमांड की उपलब्धता के बारे में जानकारी प्राप्त करने के लिए, आपको CanExecute पद्धति को कॉल करना होगा, साथ ही CanExecuteChanged ईवेंट की सदस्यता लेनी होगी, जो उपभोक्ताओं को कमांड की स्थिति में बदलाव के बारे में सूचित करेगा।

प्रस्तुति मॉडल की प्रत्येक व्यक्तिगत कार्रवाई के लिए कमांड का कार्यान्वयन एक बहुत ही समय लेने वाली प्रक्रिया है, इसे सुविधाजनक बनाने के लिए, हम डेलिगेटकमैंड क्लास बनाएंगे जो क्लास के इंस्टेंस बनाते समय निर्दिष्ट प्रतिनिधियों को कमांड विधियों के निष्पादन को सौंपेंगे।

DelegateCommand.cs फ़ाइल

 public sealed class DelegateCommand : ICommand { private readonly Action<object> _execute; private readonly Func<object, bool> _canExecute; public DelegateCommand(Action<object> execute, Func<object, bool> canExecute = null) { if(execute == null) { throw new ArgumentNullException(); } _execute = execute; _canExecute = canExecute; } public bool CanExecute(object parameter) { return _canExecute == null || _canExecute(parameter); } public void Execute(object parameter) { if(!CanExecute(parameter)) { return; } _execute(parameter); } public event EventHandler CanExecuteChanged; public void RiseCanExecuteChanged() { var handler = CanExecuteChanged; if(handler != null) { handler(this, EventArgs.Empty); } } }

DelegateCommand वर्ग का उपयोग कर एक मॉडल आदेश की घोषणा

 private DelegateCommand _calculateCommand; public DelegateCommand CalculateCommand { get { if(_calculateCommand == null) { _calculateCommand = new DelegateCommand(o => Calculate()); } return _calculateCommand; } }

व्यू मॉडल बनाने के बाद, यूजर इंटरफेस के विवरण में बदलाव करें। ऐसा करने के लिए, सभी कोड को MainPage.xaml.cs फ़ाइल से हटा दें, और पेज कंस्ट्रक्टर में पृष्ठ की DataContext संपत्ति का मान सेट करें, उसके बाद हम डेटा बाइंडिंग का उपयोग कर सकते हैं।

बदलाव के बाद MainPage.xaml.cs फ़ाइल

 using Microsoft.Phone.Controls; using MVVM_Article.ViewModels; namespace MVVM_Article { public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); DataContext = new MainPageViewModel(); } } }

कृपया ध्यान दें कि पृष्ठ के कोड-पीछे को एक पंक्ति में घटा दिया गया है, निम्नलिखित अध्यायों में यह पंक्ति भी हटा दी जाएगी।

अगला, आपको उपयोगकर्ता इंटरफ़ेस विवरण में डेटा बाइंडिंग सेट करने की आवश्यकता है। डेटा बाइंडिंग को निर्दिष्ट करने के लिए {बाइंडिंग पथ = <संपत्ति का नाम>} निर्माण का उपयोग किया जाता है; ज्यादातर मामलों में, पथ को छोड़ा जा सकता है और {बाइंडिंग <प्रॉपर्टी नाम>} को कम किया जा सकता है।

डेटा बाइंडिंग का एक उदाहरण, MainPage.xaml फ़ाइल का एक टुकड़ा

 <TextBlock Text=" " /> <TextBox Text="{Binding Term, Mode=TwoWay}" InputScope="Number"/> <Button Content="" Command="{Binding CalculateCommand}" /> <Border BorderBrush="{StaticResource PhoneBorderBrush}" BorderThickness="{StaticResource PhoneBorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="{Binding IsCalculated, Converter={StaticResource BoolToVisibilityConverter}}">

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

एक प्रकार की दृश्यता की संपत्ति के लिए बुलियन की संपत्ति को बांधने के लिए, एक कनवर्टर बनाएं, BoolToVisibilityConverter

 public class BoolToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (value as bool?) == true ? Visibility.Visible : Visibility.Collapsed; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }

इस कनवर्टर का उपयोग करके, आप बूलियन और दृश्यता के प्रकार को एक दूसरे से बांध सकते हैं।

 Visibility="{Binding IsCalculated, Converter={StaticResource BoolToVisibilityConverter}}"

दुर्भाग्य से, DeptailsPage पृष्ठ के लिए MVVM पैटर्न को लागू करते समय, कोड-पीछे से पूरी तरह से छुटकारा पाना संभव नहीं था, क्योंकि इसका उपयोग मुख्य पृष्ठ से पारित मापदंडों के साथ प्रस्तुति मॉडल को आरंभ करने के लिए किया जाता है।

निष्कर्ष

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

निम्नलिखित लेख विषयों को कवर करेंगे: MVVM में DI का उपयोग करना, नेविगेशन लागू करना, उपयोगकर्ता इंटरैक्शन, MVVM बेस क्लास को सामान्य करना, और बहुत कुछ।

विंडोज फोन के लिए अपने आप को MVVM फ्रेमवर्क। भाग 1