Design patterns
एमवीसी, एमवीवीएम, एमवीपी

टिप्पणियों

मॉडल व्यू कंट्रोलर (MVC)

1. MVC क्या है?

मॉडल व्यू कंट्रोलर (MVC) पैटर्न एक डिज़ाइन पैटर्न है, जो आमतौर पर उपयोगकर्ता इंटरफेस बनाने के लिए उपयोग किया जाता है। MVC का प्रमुख लाभ यह है कि यह अलग हो जाता है:

• आवेदन राज्य (मॉडल) के आंतरिक प्रतिनिधित्व,
• उपयोगकर्ता (दृश्य) को जानकारी कैसे प्रस्तुत की जाती है, और
• तर्क जो नियंत्रित करता है कि उपयोगकर्ता एप्लिकेशन राज्य (नियंत्रक) के साथ कैसे संपर्क करता है।

2. एमवीसी के मामलों का उपयोग करें

MVC के लिए प्राथमिक उपयोग का मामला ग्राफिकल यूजर इंटरफेस (GUI) प्रोग्रामिंग में है। दृश्य घटक परिवर्तनों के लिए मॉडल घटक को सुनता है। मॉडल एक प्रसारक के रूप में कार्य करता है; जब मॉडल में कोई परिवर्तन मोड होता है, तो वह अपने परिवर्तनों को दृश्य और नियंत्रक पर प्रसारित करता है। नियंत्रक का उपयोग दृश्य द्वारा मॉडल घटक को संशोधित करने के लिए किया जाता है।

3. कार्यान्वयन

एमवीसी के निम्नलिखित कार्यान्वयन पर विचार करें, जहां हमारे पास Animals नामक एक मॉडल वर्ग है, एक दृश्य वर्ग जिसे DisplayAnimals कहा जाता है, और AnimalController नामक एक नियंत्रक वर्ग है। नीचे दिया गया उदाहरण डिजाइन पैटर्न - एमवीसी पैटर्न से एमवीसी पर ट्यूटोरियल का एक संशोधित संस्करण है।

/* Model class */
public class Animals {
    private String name;
    private String gender;

    public String getName() {
        return name;
    }

    public String getGender() {
        return gender;
    }

    public void setName(String name) {
         this.name = name;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }
}

/* View class */
public class DisplayAnimals {
    public void printAnimals(String tag, String gender) {
        System.out.println("My Tag name for Animal:" + tag);
        System.out.println("My gender: " + gender);
    }
}

/* Controller class */
public class AnimalController {
     private Animal model;
     private DisplayAnimals view;

   public AnimalController(Animal model, DisplayAnimals view) {
      this.model = model;
      this.view = view;
   }

   public void setAnimalName(String name) {
      model.setName(name);        
   }

   public String getAnimalName() {
      return model.getName();        
   }

   public void setAnimalGender(String animalGender) {
      model.setGender(animalGender);        
   }

   public String getGender() {
      return model.getGender();        
   }

   public void updateView() {                
      view.printAnimals(model.getName(), model.getGender());
   }    
}

4. इस्तेमाल किए गए स्रोत:

डिजाइन पैटर्न - एमवीसी पैटर्न

एमवीसी के साथ जावा एसई एप्लीकेशन डिज़ाइन

मॉडल-दृश्य-नियंत्रक

मॉडल देखें ViewModel (MVVM)

1. MVVM क्या है?

मॉडल व्यू व्यूमॉडल (एमवीवीएम) पैटर्न एक डिज़ाइन पैटर्न है जो आमतौर पर उपयोगकर्ता इंटरफेस बनाने के लिए उपयोग किया जाता है। यह लोकप्रिय "मॉडल व्यू कंट्रोलर" (MVC) पैटर्न से लिया गया है। MVVM का प्रमुख लाभ यह है कि यह अलग हो जाता है:

• आवेदन राज्य (मॉडल) का आंतरिक प्रतिनिधित्व।
• उपयोगकर्ता (दृश्य) को जानकारी कैसे प्रस्तुत की जाती है।
• "वैल्यू कन्वर्टर लॉजिक" मॉडल से डेटा को उजागर करने और परिवर्तित करने के लिए जिम्मेदार है ताकि डेटा को आसानी से प्रबंधित किया जा सके और उसे व्यू में पेश किया जा सके (ViewModel)।

2. एमवीवीएम के मामलों का उपयोग करें

MVVM का प्राथमिक उपयोग ग्राफिकल यूजर इंटरफेस (GUI) प्रोग्रामिंग है। यह डेटा को प्रबंधित करने वाले बैकएंड लॉजिक से व्यू लेयर को अलग करके यूजर इंटरफेस की घटना-संचालित प्रोग्रामिंग के लिए उपयोग किया जाता है।

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

इसका उपयोग जावास्क्रिप्ट लाइब्रेरी नॉकआउट जेएस में भी किया जाता है।

3. कार्यान्वयन

C # .Net और WPF का उपयोग करके MVVM के निम्नलिखित कार्यान्वयन पर विचार करें। हमारे पास एक मॉडल क्लास है जिसे एनिमल्स कहा जाता है, एक व्यू क्लास जिसे Xaml में लागू किया गया है और एक ViewModel जिसे AnimalViewModel कहा जाता है। नीचे दिया गया उदाहरण डिजाइन पैटर्न - एमवीसी पैटर्न से एमवीसी पर ट्यूटोरियल का एक संशोधित संस्करण है।

देखें कि मॉडल को किसी चीज के बारे में कैसे नहीं पता है, ViewModel केवल मॉडल के बारे में जानता है और View केवल ViewModel के बारे में जानता है।

OnNotifyPropertyChanged-event मॉडल और दृश्य दोनों को अपडेट करने में सक्षम बनाता है ताकि जब आप पाठ बॉक्स में कुछ दर्ज करें तो मॉडल अद्यतन हो। और अगर कुछ मॉडल को अपडेट करता है, तो दृश्य अपडेट किया जाता है।

/*Model class*/
public class Animal 
{
    public string Name { get; set; }

    public string Gender { get; set; }
}

/*ViewModel class*/
public class AnimalViewModel : INotifyPropertyChanged
{
    private Animal _model;

    public AnimalViewModel()
    {
        _model = new Animal {Name = "Cat", Gender = "Male"};
    }

    public string AnimalName
    {
        get { return _model.Name; }
        set
        {
            _model.Name = value;
            OnPropertyChanged("AnimalName");
        }
    }

    public string AnimalGender
    {
        get { return _model.Gender; }
        set
        {
            _model.Gender = value;
            OnPropertyChanged("AnimalGender");
        }
    }

    //Event binds view to ViewModel.
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            var e = new PropertyChangedEventArgs(propertyName);
            this.PropertyChanged(this, e);
        }
    }
}


<!-- Xaml View -->
<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:viewModel="clr-namespace:WpfApplication6">
    
    <Window.DataContext>
        <viewModel:AnimalViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <TextBox Text="{Binding AnimalName}" Width="120" />
        <TextBox Text="{Binding AnimalGender}" Width="120" />
    </StackPanel>
</Window>

4. इस्तेमाल किए गए स्रोत:

मॉडल-दृश्य-viewmodel

एक साधारण MVVM उदाहरण

विश्व का सबसे सरल C # WPF MVVM उदाहरण

MVVM पैटर्न