Windows स्टोर-अनुप्रयोगों के लिए MVVM कुक

जब हमने विंडोज 8 के लिए अनुप्रयोगों पर काम करना शुरू किया, तो हम इस प्लेटफॉर्म के लिए मॉडल-व्यू-व्यूमॉडल (एमवीवीएम) टेम्पलेट समर्थन पुस्तकालय की तलाश कर रहे थे। हमने एक की खोज में इंटरनेट पर कुछ समय बिताया, लेकिन अंत में हमने इस तथ्य को स्वीकार किया कि ऐसी लाइब्रेरी अभी तक प्रकृति में मौजूद नहीं हैं (हो सकता है कि हमने खराब खोज की हो, लेकिन अब यह इतना महत्वपूर्ण नहीं है)। सवाल का जवाब "क्या करना है?" खुद से पूछा ...



हमारी कंपनी ईस्टबैंक टेक्नोलॉजीज के आंतों में एक विशेष पुस्तकालय बनाया गया था (कोड नाम EBT.Mvvm )। निर्माण का उद्देश्य विंडोज 8 के लिए जटिल अनुप्रयोगों को विकसित करते समय भविष्य में समय की बचत करना है। पुस्तकालय में हमारे अपने विकास, साथ ही साथ कुछ विचार और उदाहरण शामिल हैं जो हमने अपनी खोजों के दौरान सामना किए।

तो, हमारे पास क्या है: हर कोई याद करता है कि टेम्पलेट का मुख्य विचार ViewModel (हम दृश्य मॉडल को कॉल करेंगे) और खुद को देखें (देखें) के बीच संबंध को कमजोर करना है। आदर्श स्थिति तब होती है जब कोड-बैक दृश्य में केवल एक निर्माता होता है जिसमें InitializeComponent और, संभवतः, दृश्य व्यवहार के लिए समर्थन कोड होता है जिसे XAML के माध्यम से परिभाषित नहीं किया जा सकता है। इस प्रकार, डेवलपर डिजाइनर को प्रस्तुति देता है, और वह काम पर ध्यान केंद्रित करता है और एप्लिकेशन लॉजिक का परीक्षण करता है।

यह लेख विंडोज 8 के तहत C # और XAML में प्रोग्रामिंग से परिचित डेवलपर्स के लिए लक्षित है। नीचे हम अपने उपयोग और टिप्पणियों के लिए कोड के उदाहरण के रूप में हमारी लाइब्रेरी की मुख्य विशेषताओं का विवरण प्रदान करते हैं। तो, चलिए चलते हैं:

1. बेस क्लास ViewModel

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

public class SimpleViewModel : ViewModel { private int _number; public int Number { get { return _number; } set { OnPropertyChange(ref _number, value); } } } 

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

 public string Text { get { return GetPropertyValue(() => Text); } set { SetPropertyValue(() => Text, value); } } 

2. टीमें

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

 public class SimpleViewModel : ViewModel { public SimpleViewModel() { SampleCommand = new RelayCommand(OnSample); } public RelayCommand SampleCommand { get; private set; } private void OnSample() { // TODO Do something here. } } 

 <Button Command="{Binding SampleCommand}" Content="Button Text" /> 

3. बाइंडिंग इवेंट हैंडलर

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

 public class SimpleViewModel { public SimpleViewModel() { TappedCommand = new EventCommand<Point>(OnTapped); } public IEventCommand TappedCommand { get; private set; } private void OnTapped(Point point) { TappedCommand.PreventBubbling = point.X < 100; } } 

 <TextBlock Mvvm:EventBinding.Tapped="{Binding TappedCommand}" Text="Tap me"/> 

यहाँ यह TappedCommand.PreventBubbling = point.X <100 के साथ लाइन पर ध्यान देने योग्य है। तथ्य यह है कि हमने संबंधित ध्वज को सेट करके ईवेंट (हैंडल) की आगे की प्रक्रिया को रद्द करने की क्षमता प्रदान की है।

वर्तमान में ईवेंट्स के लिए समर्थन है: SelectionChanged, Click, ItemClick, KeyDown, KeyUp, PointerReleased, PointerPressed, PointerMoved, PointerCanceled, Pointernntered, PointerExited, PointerCaptureLost, Tapped, RightTapped, PointerWebw , भरा हुआ।

4. विभिन्न स्क्रीन मोड का समर्थन करें

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

• दृश्यता प्रबंधन। यह प्रत्येक विशिष्ट तत्व की दृश्यता को बदलने पर आधारित है और सरल परिदृश्यों के लिए सुविधाजनक है।
• शैली का परिवर्तन। कभी-कभी, प्रदर्शन के संदर्भ में, यह जटिल उपयोगकर्ता इंटरफ़ेस परिदृश्यों के लिए एक अधिक कुशल तरीका है।

 <TextBlock behaviors:OrientationBehavior.Orientations="Landscape,Filled,Portrait" Text="Not snapped"/> <TextBlock behaviors:OrientationBehavior.Orientations="Snapped" Text="Snapped"/> 

निम्न उदाहरण स्क्रीन मोड के आधार पर सूची के अभिविन्यास को बदलता है।

 <GridView ItemsSource="{Binding YourItems}"> <behaviors:OrientationBehavior.LandscapeStyle> <!-- This style will be applied in landscape, filled and portrait modes. --> <Style TargetType="ListViewBase"/> </behaviors:OrientationBehavior.LandscapeStyle> <behaviors:OrientationBehavior.SnappedStyle> <!-- This style will be applied in the snapped mode. --> <Style TargetType="ListViewBase"> <Style.Setters> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Vertical"/> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style.Setters> </Style> </behaviors:OrientationBehavior.SnappedStyle> </GridView> 

एक तत्व की शैली को बदलने की विधि एक बहुत ही सुविधाजनक और शक्तिशाली विशेषता है। इसका उपयोग करते समय, आपको निम्नलिखित याद रखना चाहिए:

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

शैली परिवर्तन विधि का उपयोग करने का एक अच्छा परिणाम यह है कि इस दृष्टिकोण के साथ, ContentControl / ContentPresenter का उपयोग करके, आप पूरी तरह से दृश्य टेम्पलेट बदल सकते हैं! निम्नलिखित दिखाता है कि यह कैसे करना है:

 <Grid Name="main"> <ContentControl> <behaviors:OrientationBehavior.LandscapeStyle> <Style TargetType="ContentControl"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <Grid> <TextBlock Text="Landscape"/> <!-- Something in landscape mode --> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> </behaviors:OrientationBehavior.LandscapeStyle> <behaviors:OrientationBehavior.PortraitStyle> <Style TargetType="ContentControl"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <Grid> <TextBlock Text="Portrait"/> <!-- Something in portrait mode --> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> </behaviors:OrientationBehavior.PortraitStyle> <behaviors:OrientationBehavior.SnappedStyle> <Style TargetType="ContentControl"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <Grid> <TextBlock Text="Snapped. Only text here"/> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> </behaviors:OrientationBehavior.SnappedStyle> </ContentControl> </Grid> 

उदाहरण के लिए, इस तरह, आप अनावश्यक समस्याओं के बिना स्नैप मोड पर स्विच कर सकते हैं।

5. ViewModel से दृश्य विधियों को कॉल करना

कभी-कभी उपयोगकर्ता इंटरफ़ेस विधियों को एक दृश्य मॉडल से कॉल करना आवश्यक है। एक उदाहरण दिए गए फ़ील्ड पर इनपुट फ़ोकस सेट करने की आवश्यकता है। यह हमारे ControlWrapper का उपयोग करके किया जा सकता है:

 public class SimpleViewModel : ViewModel { public SimpleViewModel() { TextBoxWrapper = new ControlWrapper(); } public ControlWrapper TextBoxWrapper { get; private set; } public void GotoField() { TextBoxWrapper.Focus(); } } 

 <TextBox Mvvm:ElementBinder.Wrapper="{Binding TextBoxWrapper}"/> 

6. एनीमेशन के लिए इवेंट ट्रिगर

यह तंत्र आपको एक एनीमेशन शुरू करने की अनुमति देता है जब कोई दृश्य तत्व में कोई घटना होती है। और फिर, कोड-पीछे में कोड की एक भी पंक्ति नहीं! विधि बाध्यकारी घटना संचालकों पर आधारित है। XAML में, आपको एक विशेष TriggerCommand कमांड परिभाषित करने की आवश्यकता है:

 <Grid> <FrameworkElement.Resources> <Storyboard x:Key="FadeOut"> <PointerDownThemeAnimation Storyboard.TargetName="MyElement"/> </Storyboard> <Storyboard x:Key="FadeIn"> <PointerUpThemeAnimation Storyboard.TargetName="MyElement"/> </Storyboard> </FrameworkElement.Resources> <Border x:Name="MyElement" Width="100" Height="100" Background="Red"> <mvvm:EventBinding.PointerPressed> <mvvm:TriggerCommand Storyboard="{StaticResource FadeOut}"/> </mvvm:EventBinding.PointerPressed> <mvvm:EventBinding.PointerReleased> <mvvm:TriggerCommand Storyboard="{StaticResource FadeIn}"/> </mvvm:EventBinding.PointerReleased> </Border> </Grid> 

7. एक संदर्भ मेनू बांधना

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

 public class MyViewModel : ViewModel { private IList<UICommand> _contextMenuCommands; private string _text; public string Text { get { return _text; } set { OnPropertyChange(ref _text, value); } } public IList<UICommand> ContextMenuCommands { get { return _contextMenuCommands ?? (_contextMenuCommands = new List<UICommand> { new UICommand("Copy", OnCopy), new UICommand("Paste", OnPaste), }); } } private void OnCopy(IUICommand command) { var content = new DataPackage(); content.SetText(Text); Clipboard.SetContent(content); } private async void OnPaste(IUICommand command) { var content = Clipboard.GetContent(); Text = await content.GetTextAsync(); } } 

 <TextBlock behaviors:ContextMenuBehavior.Commands="{Binding ContextMenuCommands}" Text="{Binding Text}" MinWidth="300" Height="40"/> 

8. स्नैप पॉपअप

जब आप सही माउस बटन पर क्लिक करते हैं या टचस्क्रीन पर टैप करते हैं, तो पॉपअप प्रदर्शन आपको पॉपअप प्रदर्शन कार्यक्षमता बनाने की अनुमति देता है। नीचे दिए गए कोड उदाहरण से सब कुछ स्पष्ट होना चाहिए:

 <TextBlock Text="Tap or right click here for more information" behaviors:PopupBehavior.Placement="Above"> <behaviors:PopupBehavior.Content> <DataTemplate> <TextBlock Text="More information..."/> </DataTemplate> </behaviors:PopupBehavior.Content> </TextBlock> 

9. अंतरालीय नेविगेशन

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

लक्ष्यों को प्राप्त करने के लिए, हम अपने आवेदन का मुख्य मॉडल बनाते हैं:

 public class RootModel { public RootModel() { NavigationState = new NavigationState(); HomePageModel = new HomePageModel(this); } public NavigationState NavigationState { get; set; } public HomePageModel HomePageModel { get; set; } public bool CanGoBack { get { return NavigationState.CanGoBack; } } public void GoBack() { NavigationState.GoBack(); } public void GoToHomePage() { NavigationState.Navigate(typeof (HomePage)); } } 

आवेदन शुरू करते समय, हम मुख्य मॉडल को ऑब्जेक्ट्स के दृश्य ट्री के शीर्ष-स्तरीय तत्व के संदर्भ के रूप में सेट करते हैं और नेविगेशनस्ट्रीम रैपर क्लास को फ्रेम के साथ जोड़ते हैं।

 sealed partial class App : Application { ... public RootModel RootModel { get; private set; } protected override void OnLaunched(LaunchActivatedEventArgs args) { RootModel = new RootModel(); var frame = new Frame { DataContext = RootModel }; // Bind the NavigationState and the frame using the ElementBinder class. // You can also do this in XAML. ElementBinder.SetWrapper(frame, RootModel.NavigationState); Window.Current.Content = frame; Window.Current.Activate(); RootModel.GoToHomePage(); } } 

अब हमारा HomePageModel व्यू मॉडल OnNavigating और OnNavigated इवेंट्स को हैंडल कर सकता है। और _rootModel पर सहेजे गए लिंक के माध्यम से अन्य पृष्ठों पर भी नेविगेट करें। ध्यान दें कि OnNavigating संक्रमण रद्दीकरण का समर्थन करता है (रेफ बूल रद्द पैरामीटर)।

 public class HomePageModel : PageModel // Or implement IPageModel. { private RootModel _rootModel; // You can call _rootModel.NavigationState.Navigate(…) public HomePageModel(RootModel rootModel) { _rootModel = rootModel; } public override void OnNavigated() { // TODO Do something here to initialize/update your page. } public override void OnNavigating(ref bool cancel) { // TODO Do something here to clean up your page. } } 

XAML में, सही तरीके से काम करने के लिए बाइंडिंग के लिए सही DataContext पेज सेट करें।

 <Page x:Class="YourNamespace.HomePage" ... DataContext="{Binding HomePageModel}"> <!-- Your page content goes here --> </Page> 

सब कुछ, परिणाम प्राप्त हुआ है। अब आप पृष्ठ बना सकते हैं और उन्हें दृश्य मॉडल के साथ जोड़ सकते हैं। उत्तरार्द्ध OnNavigating और OnNavigated घटनाओं को नियंत्रित करेगा और नेविगेशन को नियंत्रित करेगा।

10. कंकाल परियोजना के निर्माण के लिए खाका

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

अभी के लिए

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

मैं इसे कहां से डाउनलोड कर सकता हूं?

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

स्टूडियो में इसे स्थापित करने का सबसे तेज़ तरीका टूल-> एक्सटेंशन और अपडेट के माध्यम से 12 स्टूडियो में खोज का उपयोग करना है। ऑनलाइन का चयन करें और खोज पट्टी में विंडोज 8 एमवीवीएम कीवर्ड टाइप करें।

अंत में

"EBT.Mvvm लाइब्रेरी को" जैसा है "आधार पर वितरित किया जाता है, डेवलपर संभावित परिणामों के लिए जिम्मेदार नहीं है ..."

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

मैं विकास में शामिल सभी डेवलपर्स को शुभकामनाएं देना चाहता हूं। आइए विंडोज स्टोर के लिए अधिक एप्लिकेशन बनाएं!