Design patterns
MVC, MVVM, MVP

비고

모델 뷰 컨트롤러 (MVC)

1. MVC 란 무엇입니까?

MVC (Model View Controller) 패턴은 사용자 인터페이스를 만드는 데 가장 일반적으로 사용되는 디자인 패턴입니다. MVC의 가장 큰 장점은 다음과 같은 점을 구분한다는 점입니다.

• 응용 프로그램 상태의 내부 표현 (모델),
• 정보가 사용자에게 표시되는 방법 (보기)
• 사용자가 응용 프로그램 상태 (컨트롤러)와 상호 작용하는 방식을 제어하는 ​​논리

2. MVC의 활용 사례

MVC의 주요 사용 사례는 GUI (Graphical User Interface) 프로그래밍입니다. View 구성 요소는 변경 사항을 Model 구성 요소에서 수신합니다. 모델은 방송사의 역할을합니다. 모델에 대한 변경 모드가있을 때 뷰와 컨트롤러에 변경 사항을 브로드 캐스팅합니다. 뷰어에서는 모델 구성 요소를 수정하기 위해 컨트롤러를 사용합니다.

3. 구현

우리라는 모델 클래스가 MVC, 다음 구현 고려 Animals ,라는 뷰 클래스 DisplayAnimals 및 불리는 컨트롤러 클래스 AnimalController . 아래의 예제는 디자인 패턴 - MVC 패턴의 MVC 자습서를 수정 한 것입니다.

/* 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. 사용 된 출처 :

디자인 패턴 - MVC 패턴

MVC를 사용한 Java SE 응용 프로그램 디자인

모델 - 뷰 - 컨트롤러

모델 뷰 ViewModel (MVVM)

1. MVVM이란 무엇입니까?

MVVM (Model View ViewModel) 패턴은 사용자 인터페이스를 만드는 데 가장 일반적으로 사용되는 디자인 패턴입니다. 이는 인기있는 "MVC (Model View Controller)"패턴에서 파생됩니다. MVVM의 주요 장점은 다음과 같습니다.

• 응용 프로그램 상태의 내부 표현 (모델).
• 정보가 사용자에게 표시되는 방법 (보기).
• 모델에서 데이터를 노출하고 변환하여 데이터를 쉽게 관리하고 뷰 (ViewModel)에 표시 할 수있는 "값 변환기 논리".

2. MVVM의 사용 사례

MVVM의 주요 사용 사례는 GUI (Graphical User Interface) 프로그래밍입니다. 이는 데이터를 관리하는 백엔드 로직에서 뷰 레이어를 분리하여 사용자 인터페이스의 이벤트 중심 프로그래밍에 사용됩니다.

예를 들어 Windows Presentation Foundation (WPF)에서보기는 프레임 워크 마크 업 언어 XAML을 사용하여 디자인되었습니다. XAML 파일은 데이터 바인딩을 사용하여 ViewModel에 바인딩됩니다. 이 방식으로 뷰는 단지 프리젠 테이션을 담당하고 뷰 모델은 모델의 데이터로 작업하여 애플리케이션 상태를 관리하는 역할을합니다.

또한 JavaScript 라이브러리 KnockoutJS에서도 사용됩니다.

3. 구현

C # .Net 및 WPF를 사용하여 MVVM의 다음 구현을 고려하십시오. 우리는 Animals라는 Model 클래스, Xaml에서 구현 된 View 클래스 및 AnimalViewModel이라는 ViewModel을 가지고 있습니다. 아래의 예제는 디자인 패턴 - MVC 패턴의 MVC 자습서를 수정 한 것입니다.

Model이 어떤 것을 모르는 지보십시오. ViewModel은 Model에 대해서만 알고 View는 ViewModel에 대해서만 알고 있습니다.

OnNotifyPropertyChanged 이벤트는 모델과 뷰를 업데이트하여 뷰의 텍스트 상자에 무엇인가를 입력 할 때 모델이 업데이트되도록합니다. 그리고 무언가가 모델을 업데이트하면보기가 업데이트됩니다.

/*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. 사용 된 출처 :

모델 뷰 - 뷰 모델

간단한 MVVM 예제

세계에서 가장 간단한 C # WPF MVVM 예제

MVVM 패턴