🎲 🈲 🤶🏼 प्रिज्म डेवलपर की गाइड - भाग 5, एमवीवीएम पैटर्न को लागू करना 💹 🔰 🧖🏼

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

Model-View-ViewModel (MVVM, View-View-View ) मॉडल आपको उपयोगकर्ता इंटरफ़ेस से व्यावसायिक तर्क और प्रस्तुति तर्क को अलग करने में मदद करता है। एप्लिकेशन लॉजिक और UI के बीच जिम्मेदारी साझा करने के लिए समर्थन आपके एप्लिकेशन को परीक्षण, रखरखाव और विकास के लिए आसान बना सकता है। यह कोड के पुन: उपयोग की क्षमताओं में भी काफी सुधार कर सकता है और डेवलपर्स और डिजाइनरों को एप्लिकेशन के प्रासंगिक भागों के विकास पर अधिक आसानी से सहयोग करने की अनुमति देता है।

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

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

यह अध्याय MVVM पैटर्न का अवलोकन देता है और बताता है कि इसे कैसे लागू किया जाए। अध्याय 6 में बताया गया है कि प्रिज्म लाइब्रेरी का उपयोग करके अधिक जटिल एमवीवीएम लिपियों को कैसे लागू किया जाए।

जिम्मेदारियों और वर्ग विशेषताओं

एमवीवीएम पैटर्न प्रेजेंटेशन मॉडल पैटर्न की एक करीबी भिन्नता है, जिसे कुछ बुनियादी WPF और सिल्वरलाइट विशेषताओं के साथ बेहतर संरेखण के लिए अनुकूलित किया गया है, जैसे डेटा बाइंडिंग, डेटा पैटर्न, कमांड और व्यवहार।

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

निम्नलिखित दृष्टांत एमवीवीएम पैटर्न के तीन भागों और उनकी बातचीत को दर्शाता है।

MVVM .

विभाजित विचारों के सभी पैटर्न के साथ, MVVM पैटर्न को प्रभावी ढंग से उपयोग करने की कुंजी यह है कि अपने एप्लिकेशन कोड को सही वर्गों में कैसे विभाजित किया जाए, और इन वर्गों को अलग-अलग परिदृश्यों में बातचीत करने के तरीकों को समझने के लिए। निम्नलिखित अनुभाग MVVM पैटर्न में प्रत्येक वर्ग की जिम्मेदारियों और विशेषताओं का वर्णन करते हैं।

कक्षा देखें

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

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

आमतौर पर, दृश्य Control या UserControl वर्गों से विरासत में मिले हैं। हालांकि, कुछ मामलों में, प्रस्तुति को एक डेटा टेम्पलेट द्वारा दर्शाया जा सकता है जो यूआई तत्वों को परिभाषित करता है जिसका उपयोग ऑब्जेक्ट को नेत्रहीन रूप से प्रतिनिधित्व करने के लिए किया जाएगा। डेटा टेम्प्लेट का उपयोग करके, डेवलपर आसानी से निर्दिष्ट कर सकता है कि प्रस्तुति मॉडल की कल्पना कैसे की जाएगी, या अंतर्निहित ऑब्जेक्ट या उसके व्यवहार को सीधे बदले बिना अपने डिफ़ॉल्ट दृश्य प्रतिनिधित्व को बदल सकता है।

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

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

संक्षेप में, एक विचार में निम्नलिखित मुख्य विशेषताएं हैं:

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

मॉडल क्लास देखें

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

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

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

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

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

परिणामस्वरूप, प्रस्तुति मॉडल में निम्नलिखित प्रमुख विशेषताएं हैं:

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

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

मॉडल वर्ग

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

एक नियम के रूप में, मॉडल एप्लिकेशन के क्लाइंट भाग के विषय क्षेत्र के सार का प्रतिनिधित्व करता है। इसमें एप्लिकेशन डेटा मॉडल और किसी भी व्यवसाय और सत्यापन तर्क के आधार पर डेटा संरचनाएं हो सकती हैं। मॉडल में डेटा और कैश तक पहुंच भी हो सकती है, हालांकि यह आमतौर पर एक अलग डेटा रिपॉजिटरी, या संबंधित सेवा का उपयोग करके किया जाता है। अक्सर, मॉडल और डेटा एक्सेस लेयर स्वचालित रूप से ADO.NET एंटिटी फ्रेमवर्क, WCF डेटा सर्विसेज या WCF RIA सर्विसेज इन्फ्रास्ट्रक्चर के हिस्से के रूप में उत्पन्न होती है।

आमतौर पर, एक मॉडल उपकरण को लागू करता है जो एक दृश्य को बांधना आसान बनाता है। इसका आमतौर पर अर्थ है कि संपत्तियों या संग्रहों में बदलाव की सूचनाओं का समर्थन INotifyCollectionChanged और INotifyCollectionChanged माध्यम से किया INotifyCollectionChanged । मॉडल वर्ग जो वस्तुओं के सेट प्रदान करते हैं, वे आमतौर पर INotifyCollectionChanged ObservableCollection<T> वर्ग से विरासत में प्राप्त होते हैं, जो कि INotifyCollectionChanged इंटरफ़ेस का कार्यान्वयन प्रदान करता है। मॉडल IDataErrorInfo (या INotifyDataErrorInfo ) इंटरफेस के माध्यम से डेटा सत्यापन और त्रुटि रिपोर्टिंग का समर्थन कर सकता है। ये इंटरफेस आपको बाध्य डेटा परिवर्तन के मूल्यों को UI अपडेट करने के लिए WPF और सिल्वरलाइट सूचनाएं भेजने की अनुमति देता है। वे यूआई स्तर पर डेटा सत्यापन समर्थन और त्रुटि रिपोर्टिंग भी प्रदान करते हैं।

टिप्पणी
, ?
कभी-कभी आपको उन मॉडल ऑब्जेक्ट्स के साथ काम करने की आवश्यकता होगी जो इंटरफेस INotifyCollectionChanged , IDataErrorInfo , IDataErrorInfo , या INotifyDataErrorInfo लागू नहीं करते हैं। इन मामलों में, दृश्य मॉडल को मॉडल ऑब्जेक्ट्स को लपेटने और दृश्य को आवश्यक गुण प्रदान करने की आवश्यकता हो सकती है। इन गुणों के लिए मान सीधे मॉडल ऑब्जेक्ट द्वारा प्रदान किए जाएंगे। एक दृश्य मॉडल उन गुणों के लिए आवश्यक इंटरफेस को लागू कर सकता है जो इसे प्रदान करता है ताकि दृश्य आसानी से डेटा को बांध सके।

मॉडल में निम्नलिखित प्रमुख विशेषताएं हैं:

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

कक्षा की बातचीत

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

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

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

डेटा बाइंडिंग

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

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

यह सुनिश्चित करने के लिए कि प्रस्तुति मॉडल में डेटा परिवर्तित होने पर UI अपडेट किया जाता है, उसे एक उपयुक्त परिवर्तन अधिसूचना इंटरफ़ेस लागू करना होगा। यदि यह संपत्तियों को परिभाषित करता है कि किस डेटा को बाध्य किया जा सकता है, तो इसे INotifyPropertyChanged इंटरफ़ेस को लागू करना होगा। यदि दृश्य मॉडल किसी संग्रह का प्रतिनिधित्व करता है, तो उसे INotifyCollectionChanged को कार्यान्वित करना चाहिए या INotifyCollectionChanged ObservableCollection<T> वर्ग से इनहेरिट करना चाहिए जो इस इंटरफ़ेस को लागू करता है। ये दोनों इंटरफेस एक ऐसी घटना को परिभाषित करते हैं जो अंतर्निहित डेटा में परिवर्तन होने पर उत्पन्न होती है। इन घटनाओं के उत्पन्न होने पर किसी भी संबंधित नियंत्रण को स्वचालित रूप से अपडेट किया जाएगा।

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

निम्नलिखित अनुभागों का वर्णन है कि एमवीवीएम पैटर्न के भीतर डेटा बाइंडिंग का समर्थन करने के लिए आवश्यक इंटरफेस को कैसे लागू किया जाए।

INOTifyPropertyChanged का कार्यान्वयन

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

 public class Questionnaire : INotifyPropertyChanged { private string favoriteColor; public event PropertyChangedEventHandler PropertyChanged; ... public string FavoriteColor { get { return this.favoriteColor; } set { if (value != this.favoriteColor) { this.favoriteColor = value; if (this.PropertyChanged != null) { this.PropertyChanged(this, new PropertyChangedEventArgs("FavoriteColor")); } } } } }

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

 public class NotificationObject : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; ... protected void RaisePropertyChanged<T>( Expression<Func<T>> propertyExpression) {...} protected virtual void RaisePropertyChanged(string propertyName) {...} }

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

 public string CurrentState { get { return this.currentState; } set { if (this.currentState != value) { this.currentState = value; this.RaisePropertyChanged(() => this.CurrentState); } } }

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

टिप्पणी
Resharper , .

, . , , . , Price1, Price2 SumPrice, , Price1 Price2 RaisePropertyChanged(“SumPrice”) .

INotifyCollectionChanged

, , . , , ItemsControl , ListBox , DataGrid . , , , ItemSource .

 <DataGrid ItemsSource="{Binding Path=LineItems}" />

, , , INotifyCollectionChanged ( INotifyPropertyChanged ). , , INotifyCollectionChanged .

INotifyCollectionChanged , , , , , . , , , . ObservableCollection<T> , , .

, , , , , , ObservableCollection<T> .

 public class OrderViewModel : INotifyPropertyChanged { public OrderViewModel(IOrderService orderService) { this.LineItems = new ObservableCollection<OrderLineItem>( orderService.GetLineItemList()); } public ObservableCollection<OrderLineItem> LineItems { get; private set; } }

(, , INotifyCollectionChanged ), ObservableCollection<T> , , IEnumerable<T> List<T> .

ICollectionView ( )

, , , . ObservableCollection<T> INotifyCollectionChanged , .

, , . , , , , , , , , .

WPF Silverlight , , ICollectionView . , , , , , . Silverlight WPF , Silverlight PagedCollectionView , WPF — ListCollectionView .

, , , , , . XAML, CollectionViewSource .

टिप्पणी
WPF CollectionView , . Silverlight , ICollectionViewFactory .

, , UI . , CollectionViews , , .

, , , , , , . , CurrentChanged , , , , .

, ICollectionView , . WPF Silverlight, ItemsControl , ICollectionView .

PagedCollectionView Silverlight , .

 public class MyViewModel : INotifyPropertyChanged { public ICollectionView Customers { get; private set; } public MyViewModel(ObservableCollection<Customer> customers) { Customers = new PagedCollectionView(customers); Customers.CurrentChanged += new EventHandler(SelectedItemChanged); } private void SelectedItemChanged(object sender, EventArgs e) { Customer current = Customers.CurrentItem as Customer; ... } }

ItemsControl , ListBox , Customers ItemsSource , .

 <ListBox ItemsSource="{Binding Path=Customers}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Path=Name}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

UI, , . UI, , .

 Customers.MoveCurrentToNext();

, UI , . WPF, PagedCollectionView ListCollectionView , BindingListCollectionView , .

 Customers = new ListCollectionView(_model); Customers.CurrentChanged += new EventHandler(SelectedItemChanged);

, , , , , . WPF Silverlight, , UI, . , UI. , , .

. , , , , . , , , . UI . , UI, .

Command Method , Command Object (, ICommand ). , , code-behind . , WPF Silverlight Command , ICommand . , CommandBehavior .

टिप्पणी
, , . CommandBehavior , .

, , .

Command Objects

, ICommand . Execute , , CanExecute , , . . , .

ICommand . , . , ActionCommand SDK Expression Blend, DelegateCommand , Prism.

DelegateCommand , , . DelegateCommandBase , Execute CanExecute ICommand , . DelegateCommand , .

 public class DelegateCommand<T> : DelegateCommandBase { public DelegateCommand(Action<T> executeMethod, Func<T,bool> canExecuteMethod) :base((o) => executeMethod((T)o), (o) => canExecuteMethod((T)o)) { ... } }

, , DelegateCommand , Submit , , OnSubmit CanSubmit . , ICommand .

 public class QuestionnaireViewModel { public QuestionnaireViewModel() { this.SubmitCommand = new DelegateCommand<object>( this.OnSubmit, this.CanSubmit); } public ICommand SubmitCommand { get; private set; } private void OnSubmit(object arg) {...} private bool CanSubmit(object arg) { return true; } }

Execute DelegateCommand , , . , CanExecute , . CanExecute . , DelegateCommand true CanExecute .

DelegateCommand . , Execute CanExecute . object . DelegateCommand Prism , .

CanExecute , RaiseCanExecuteChanged DelegateCommand . CanExecuteChanged . UI, , , .

ICommand . ActionCommand SDK Expression Blend, Prism DelegateCommand , , Execute . Prism CompositeCommand , DelegateCommands . CompositeCommand , . « » 6, « MVVM».

, , . WPF Silverlight 4, ButtonBase , Button , RadioButton , Hyperlink , MenuItem , Command . WPF ICommand KeyGesture .

 <Button Command="{Binding Path=SubmitCommand}" CommandParameter="SubmitOrder"/>

, CommandParameter . Execute CanExecute . , , , , Execute . SubmitCommand , . , CanExecute , , CanExecute false , true .

Expression Blend InvokeCommandAction .

 <Button Content="Submit" IsEnabled="{Binding CanSubmit}"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <i:InvokeCommandAction Command="{Binding SubmitCommand}"/> </i:EventTrigger> </i:Interaction.Triggers> </Button>

, . , , ButtonBase , . , , CommandParameter .

, , InvokeCommandAction , CanExecute . , IsEnabled , , , .

टिप्पणी
WPF Silverlight 4, . , . , Button , , . , , .

. , , , . , , , .

, , . , , .

, , . , UI Expression Blend, ( ) - , Expression Blend.

ICommand , , .

, . , , InvokeCommandAction , CallMethodAction . ( ) Submit .

 <Button Content="Submit" IsEnabled="{Binding CanSubmit}"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <i:CallMethodAction TargetObject="{Binding}" Method="Submit"/> </i:EventTrigger> </i:Interaction.Triggers> </Button>

TargetObject ( ) {Binding} . Method .

टिप्पणी
CallMethodAction . , , InvokeCommandAction , CallMethodAction , .

, .

Silverlight WPF , , . , , set , . ValidatesOnExceptions true , WPF Silverlight .

, , , , . IDataErrorInfo INotifyDataErrorInfo . , .

IDataErrorInfo

IDataErrorInfo . : , , Error . .

, . , . Error . , Silverlight WPF.

IDataErrorInfo , , , . , , , , , .

, IDataErrorInfo , ValidatesOnDataErrors true . , .

 <TextBox Text="{Binding Path=CurrentEmployee.Name, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True }"/>

INotifyDataErrorInfo

INotifyDataErrorInfo , IDataErrorInfo . , , . , INotifyDataErrorInfo Silverlight 4 WPF 4.

टिप्पणी
WPF .NET Framework 4.5.

INotifyDataErrorInfo HasErrors , , ( ) - , GetErrors , .

INotifyDataErrorInfo ErrorsChanged . , ErrorsChanged . , , , , - . ErrorsChanged , .

INotifyDataErrorInfo , . Model-View-ViewModel Reference Implementation (MVVM RI) ErrorsContainer , . , . DomainObject ( ) INotifyDataErrorInfo , ErrorsContainer .

 public abstract class DomainObject : INotifyPropertyChanged, INotifyDataErrorInfo { private ErrorsContainer<ValidationResult> errorsContainer = new ErrorsContainer<ValidationResult>( pn => this.RaiseErrorsChanged(pn)); public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged; public bool HasErrors { get { return this.ErrorsContainer.HasErrors; } } public IEnumerable GetErrors(string propertyName) { return this.errorsContainer.GetErrors(propertyName); } protected void RaiseErrorsChanged(string propertyName) { var handler = this.ErrorsChanged; if (handler != null) { handler(this, new DataErrorsChangedEventArgs(propertyName)); } } ... }

Silverlight , , INotifyDataErrorInfo , .

MVVM UI , - , . . , , , .

टिप्पणी
, . Managed Extensibility Framework (MEF) Unity Application Block (Unity) , , . , . 6, « MVVM».

, . . , , . , DataContext .

, . , . , .

टिप्पणी
, , , , - . , , , , Visual Studio .

, . , , . , , .

XAML

, — XAML. , . XAML, .

XAML QuestionnaireView.xaml Basic MVVM QuickStart. QuestionnaireViewModel XAML QuestionnaireView , .

 <UserControl.DataContext> <my:QuestionnaireViewModel/> </UserControl.DataContext>

QuestionnaireView , QuestionnaireViewModel . , ( ).

, , Microsoft Expression Blend Microsoft Visual Studio. , .

. , .

 public QuestionnaireView() { InitializeComponent(); this.DataContext = new QuestionnaireViewModel(); }

code-behind , , Expression Blend Visual Studio. , , code-behind . , Unity MEF, . , . 3, « .»

,

, . , , , . «» , . WPF Silverlight , . , , — .

. UI , , - . , UI (code-behind). , Microsoft Expression Blend.

ItemsControl , . . . StackPanel , Name .

 <ItemsControl ItemsSource="{Binding Customers}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock VerticalAlignment="Center" Text="Customer Name: " /> <TextBox Text="{Binding Name}" /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>

. , StaticResource .

 <UserControl ...> <UserControl.Resources> <DataTemplate x:Key="CustomerViewTemplate"> <local:CustomerContactView /> </DataTemplate> </UserControl.Resources> <Grid> <ContentControl Content="{Binding Customer}" ContentTemplate="{StaticResource CustomerViewTemplate}" /> </Grid> </Window>

, , code-behind. , , . UserControl , ResourceDictionary . , QuickStart MVVM QuestionnaireView.xaml .

प्रमुख निर्णय

MVVM , , . , , . MVVM:

, . , , , Unity MEF. , . , . , «Advanced Construction and Wire-Up» «Advanced MVVM Scenarios» 6, «Advanced MVVM Scenarios.»
, . . / Command ButtonBase . , . , «» .
, . IDataErrorInfo , INotifyDataErrorInfo . , , , , . , « » .
, Microsoft Expression Blend . Expression Blend UI , , , . , , Microsoft Expression Blend, , d:DataContext d:DesignSource . , «Guidelines for Creating Designer Friendly Views» 7 «Composing the User Interface».

अतिरिक्त जानकारी

WPF, «Data Binding» MSDN: http://msdn.microsoft.com/en-us/library/ms750612.aspx .

Silverlight, «Data Binding» MSDN: http://msdn.microsoft.com/en-us/library/cc278072(VS.95).aspx .

WPF, «Binding to Collections» «Data Binding Overview» MSDN: http://msdn.microsoft.com/en-us/library/ms752347.aspx .

Silverlight, «Binding to Collections» «Data Binding» MSDN: http://msdn.microsoft.com/en-us/library/cc278072(VS.95).aspx .

Presentation Model, «Presentation Model» : http://www.martinfowler.com/eaaDev/PresentationModel.html

, «Data Templating Overview» MSDN: http://msdn.microsoft.com/en-us/library/ms742521.aspx

MEF, «Managed Extensibility Framework Overview» MSDN: http://msdn.microsoft.com/en-us/library/dd460648.aspx

Unity, «Unity Application Block» MSDN: http://www.msdn.com/unity

DelegateCommand CompositeCommand , 9, " Communicating Between Loosely Coupled Components ."

प्रिज्म डेवलपर की गाइड - भाग 5, एमवीवीएम पैटर्न को लागू करना