WCF RIA सेवाएँ। पेश है मॉडल-व्यू-व्यूमॉडल (एमवीवीएम) पैटर्न। भाग ४

WCF RIA सेवाएँ। प्रारंभ। भाग 1
WCF RIA सेवाएँ। डेटा प्राप्त करें। भाग २
WCF RIA सेवाएँ। डेटा अपडेट। भाग ३
WCF RIA सेवाएँ। पेश है मॉडल-व्यू-व्यूमॉडल (एमवीवीएम) पैटर्न। भाग ४

प्रविष्टि

सिल्वरलाइट और WPF में शिथिल युग्मित अनुप्रयोगों को बनाने के लिए मॉडल-व्यू-व्यूमॉडल (MVVM) पैटर्न का उपयोग किया जाता है। इस पाठ्यक्रम में, हम इस दृष्टिकोण की मूल बातों पर विचार नहीं करेंगे, लेकिन बस इसे अपने प्रोजेक्ट में लागू करना सीखें, जिसे हमने 3 पाठों में बनाया था। यदि आप विल्ड्स में नहीं आते हैं, तो MVVM उन विकल्पों में से एक है जो MVC और MVP जैसे प्रोग्रामिंग पैटर्न का तार्किक विकास है और डेटा बाइंडिंग, कमांड्स, और सिल्वरलाइट और WPF प्रदान करने वाली सभी विशेषताओं का पूरी तरह से समर्थन करता है। व्यू मॉडल (ViewModel) सभी आवश्यक संसाधनों के साथ दृश्य (व्यू) प्रदान करने के लिए जिम्मेदार है। यही है, सभी आवश्यक गुण प्रदान किए जाते हैं ताकि दृश्य आसानी से डेटा को बांध सके, कमांड बना सके, जबकि दृश्य मॉडल में, आवेदन के लिए आवश्यक सभी तर्क मौजूद हैं और काम करते हैं। संरचनात्मक रूप से, "DataContext" सेट दृश्य मॉडल के उदाहरण के बराबर है जिसके साथ डेटा बाध्य है।

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

और परंपरा के अनुसार, हमारे पाठ का प्रवेश बिंदु हमारे प्रशिक्षण के पिछले चरण में बनाया गया प्रोजेक्ट है।

चरण 1: एक दृश्य मॉडल बनाना

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

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

public class TasksViewModel { public DateTime LowerSearchDate { get; set; } public DateTime UpperSearchDate { get; set; } public ICommand SearchByDateCommand { get; set; } public ICommand AddTaskCommand { get; set; } public ICommand SaveChangesCommand { get; set; } public IEnumerable<Task> Tasks { get; set; } } 

प्रत्येक संपत्ति के लिए INotifyPropertyChanged इंटरफ़ेस को लागू करना भी आवश्यक है, जो परिवर्तन के साथ UI में ट्रैक और बदलना चाहिए। कोड में, यह इस तरह दिखेगा:

 public class TasksViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged = delegate { }; DateTime _LowerSearchDate; public DateTime LowerSearchDate { get { return _LowerSearchDate; } set { if (value != _LowerSearchDate) { _LowerSearchDate = value; PropertyChanged(this, new PropertyChangedEventArgs("LowerSearchDate")); } } } DateTime _UpperSearchDate; public DateTime UpperSearchDate { get { return _UpperSearchDate; } set { if (value != _UpperSearchDate) { _UpperSearchDate = value; PropertyChanged(this, new PropertyChangedEventArgs("UpperSearchDate ")); } } } 

ICommand गुणों का उपयोग करने के लिए, आपको उचित कार्यान्वयन जोड़ने की आवश्यकता है। हम सरलतम कार्यान्वयन का उपयोग करेंगे, जिसे रिलेकेमैंड भी कहा जाता है। लेकिन वास्तविक परियोजनाओं में, मैं आपको DelegateCommand का उपयोग करने की सलाह देता हूं, जो प्रिज़्म प्रदान करता है।

RelayCommand बनाने के लिए, आपको "RelayCommand" नाम के साथ क्लाइंट प्रोजेक्ट में एक नया वर्ग जोड़ना होगा।

 namespace TaskManager { public class RelayCommand<T> : ICommand { Action<T> _TargetExecuteMethod; Func<T, bool> _TargetCanExecuteMethod; public RelayCommand(Action<T> executeMethod) { _TargetExecuteMethod = executeMethod; } public RelayCommand(Action<T> executeMethod, Func<T,bool> canExecuteMethod) { _TargetExecuteMethod = executeMethod; _TargetCanExecuteMethod = canExecuteMethod; } public void RaiseCanExecuteChanged() { CanExecuteChanged(this, EventArgs.Empty); } #region ICommand Members bool ICommand.CanExecute(object parameter) { if (_TargetCanExecuteMethod != null) { T tparm = (T)parameter; return _TargetCanExecuteMethod(tparm); } if (_TargetExecuteMethod != null) { return true; } return false; } public event EventHandler CanExecuteChanged = delegate { }; void ICommand.Execute(object parameter) { if (_TargetExecuteMethod != null) { _TargetExecuteMethod((T)parameter); } } #endregion } } 

चूंकि दृश्य मॉडल दृश्य के लिए सभी आवश्यक डेटा प्रदान करता है, और जब वे बदलते हैं तो डेटा को समय पर अपडेट करने के लिए DomainContext ज़िम्मेदार होता है, स्पष्ट समाधान यह है कि RIA सेवाओं में MVVM पैटर्न का उपयोग करते समय, आपको बस दृश्य मॉडल के अंदर Domainonontext का उपयोग करने की आवश्यकता होती है।

 TasksDomainContext _Context = new TasksDomainContext(); public TasksViewModel() { SearchByDateCommand = new RelayCommand<object>(OnSearchByDate); AddTaskCommand = new RelayCommand<object>(OnAddTask); SaveChangesCommand = new RelayCommand<object>(OnSaveChanges); Tasks = _Context.Tasks; if (!DesignerProperties.IsInDesignTool) { _Context.Load(_Context.GetTasksQuery()); } } 

ऊपर दिए गए कोड में, हम बस व्यू मॉडल के अंदर TasksDomainContext बनाते हैं, और कंस्ट्रक्टर में हम उन्हें आवश्यक तरीकों से संबद्ध करने के लिए कमांड को इनिशियलाइज़ करते हैं। व्यू मॉडल की टास्क संपत्ति में टास्क संस्थाओं के संग्रह का संदर्भ होता है, जो बदले में डोमेन संदर्भ प्रदान करता है और जो INTifyCollectionChanged घटनाओं को उठाता है, यह देखने के लिए कि यदि "लोड" या "SubmitChanges" विधि कहा जाता है, तो संग्रह में परिवर्तन होता है। पृष्ठभूमि में अद्यतन संस्थाओं। कंस्ट्रक्टर में "DesignerProperties.IsInDesignTool" संपत्ति पर ध्यान दें, जो "इफ" ब्लॉक में चेक किया गया है, जो डिजाइनर से "लोड" विधि को कॉल करने से रोकता है, क्योंकि यह एक त्रुटि का कारण होगा।

अगला कदम मेनपेज .xaml.cs से तरीकों को व्यू मॉडल में स्थानांतरित करना है। वह तर्क का हस्तांतरण है। हम MainPage.xaml.cs को पूरी तरह से साफ़ करते हैं, केवल यह अंदर ही रहता है:

 namespace TasksManager { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } 

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

 private void OnSearchByDate(object param) { _Context.Tasks.Clear(); EntityQuery<Task> query = _Context.GetTasksQuery(); LoadOperation<Task> loadOp = _Context.Load(query.Where(t => t.StartDate >= LowerSearchDate && t.StartDate <= UpperSearchDate)); } private void OnAddTask(object param) { //      //     MVVM  ,   Prism 4 AddTaskView popup = new AddTaskView(); popup.DataContext = new Task(); popup.Closed += delegate { if (popup.DialogResult == true) { Task newTask = popup.DataContext as Task; if (newTask != null) _Context.Tasks.Add(newTask); } }; popup.Show(); } private void OnSaveChanges(object param) { _Context.SubmitChanges(); } 

अब एक पॉपअप जोड़ें। क्लाइंट प्रोजेक्ट पर "Add" - "Create Element" - "AddTaskView" और निम्नलिखित नाम के साथ "सिल्वरलाइट पेज":

 <controls:ChildWindow x:Class="TaskManager.AddTaskView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" Width="361" Height="287" Title="Add Task" mc:Ignorable="d" xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices" xmlns:my="clr-namespace:TaskManager.Web" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"> <Grid x:Name="LayoutRoot" Margin="2"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" /> <Button x:Name="SaveButton" Content="Save" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" Click="OKButton_Click" /> <Grid DataContext="{Binding}" HorizontalAlignment="Left" Margin="12,12,0,0" Name="grid1" VerticalAlignment="Top" Width="315"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="237" /> <ColumnDefinition Width="4*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> <sdk:Label Content="Description:" Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" /> <TextBox Grid.Column="1" Grid.Row="3" Height="91" HorizontalAlignment="Left" Margin="3,3,0,6" Name="descriptionTextBox" Text="{Binding Path=Description, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}" VerticalAlignment="Center" Width="221" /> <sdk:Label Content="End Date:" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" /> <controls:DatePicker Grid.Column="1" Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="3,3,0,3" Name="endDateDatePicker" SelectedDate="{Binding Path=EndDate, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}" VerticalAlignment="Center" Width="120" /> <sdk:Label Content="Start Date:" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" /> <controls:DatePicker Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="3,3,0,3" Name="startDateDatePicker" SelectedDate="{Binding Path=StartDate, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}" VerticalAlignment="Center" Width="120" /> <sdk:Label Content="Task Name:" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" /> <TextBox Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Left" Margin="3,3,0,3" Name="taskNameTextBox" Text="{Binding Path=TaskName, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}" VerticalAlignment="Center" Width="221" /> </Grid> </Grid> </controls:ChildWindow> 

वह सब है। इस स्तर पर दृश्य मॉडल पूरी तरह से तैयार और कार्यात्मक है। आइए अपने UI को अंतिम रूप देने के लिए आगे बढ़ते हैं।

चरण 2: दृश्य और दृश्य मॉडल को लिंक करें

पहले भाग से शुरू करते हुए, हम एक DomainDataSource का उपयोग करते हैं, जो ड्रैग और ड्रॉप के दौरान स्वचालित रूप से उत्पन्न होता था। MVVM का उपयोग करते समय, आपको DomainDataSource से छुटकारा पाना होगा, क्योंकि XAML में इसका उपयोग MVVM विभाजन की अवधारणा का उल्लंघन करता है।

एक DataContext जोड़ें। दृश्य मॉडल का नाम निर्दिष्ट करें। और बनाए गए गुणों के आधार पर बाइंडिंग जोड़ें:

 <UserControl x:Class="TaskManager.MainPage" ...> <UserControl.DataContext> <local:TasksViewModel/> </UserControl.DataContext> <Grid x:Name="LayoutRoot" Background="White"> <sdk:DataGrid ItemsSource="{Binding Tasks}" .../> <Button Command="{Binding SearchByDateCommand}" .../> <Button Command="{Binding AddTaskCommand}" ... /> <Button Command="{Binding SaveChangesCommand}" ... /> <sdk:DatePicker SelectedDate="{Binding LowerSearchDate}" ... /> <sdk:DatePicker SelectedDate="{Binding UpperSearchDate}" ... /> </Grid> </UserControl> 

इस ट्यूटोरियल के लिए वीडियो

स्रोत कोड

गीथूब पर