Model-Model of View-View(MVVM) Pattern

-
디자인 패턴중 하나인 MVC는 1979년에 그 개념이 나왔다.(1980년이가?)
2004년 마틴파울러가 PM 패턴을 말하였고, 
그후 MVP(Model-View-Presenter) 패턴, MVVM 패턴이 나왔다.

10여년전에 CGI/C를 이용해 웹페이지를 만들때 View를 분리해보았다. 함수포인터를 이용해 View를 교체하였는데... 그때가 즐거웠다. ㅋ 

또.. 주제하고는 관련없는 ... 

MVVM패턴은 구글에서  mvvm 하면 관련 자료가 많이 나온다.

codeproject 자료(http://www.codeproject.com/KB/WPF/MVVMQuickTutorial.aspx) 가 정리가 잘되어있었다. 이해할 수 있을만큼 예제와 설명이 있다.

역할을 정리해보면 ...
  • View : User Interface 이다. data를 표현해준다. user와 interaction한다. 
  • ViewModel : View에서 필요한 데이터와 사용자 입력에서 model과 관계를 처리한다.
  • Model : Data와 Buisiness logic 을 처리한다.

Model은 ViewModel의 존재를 모르고, ViewModel은 presenter에서 처럼 view의 참조는 필요없다. 
WPF의 이벤트(Event) 시스템을 이용해, ViewModel에서 데이터 변경이 일어날때 View는 해당 이벤트를 수신하여 View를 다시 랜더링한다. 
이때 WPP에서 View는 보통 xmal로 작성되며 DataContext 를  ViewModel로 참조, 바인딩된다.
데이터의 validate는 Model이 담당하며 ViewModel은 View의 추상화이다. 

MVVM은 WPF에서 좀더 특화된 PM패턴이라고 위 msdn링크에서는 말하고 있다. View는 INotifyPropertyChanged 이벤트를 수신함으로써 Model이 변경될때 View를 update해준다.

WPF의 MVVM을 이해할려면 WPF의 라우티드이벤트(RoutedEvent)를 이해 해야한다.
라우티드이벤트는 "Understanding Routed Events and Commands In WPF"(http://msdn.microsoft.com/en-us/magazine/cc785480.aspx) 에 설명이 잘되어있다.

View에서 ViewModel을 참조하면서 결합도를 낮추기위해 View를 생성할때 ViewModel을 Injection 해준다.

결과적으로, View는 ViewModel을 알고는 있으나 ViewModel class를 직접 참조하지 않고, 이벤트를 수신하여 ViewModel의 변경을 알아차린다. View에서 ViewModel을 바인딩하여 View에서 사용자 입력을 View의 코드비하인드(Code-behind)에서 처리하거나 ViewModel에서 처리할때 Command를 바인딩해서 처리한다.

.NET 시작한지 얼마안되어서 아직 갈길이 멀다. 다음 번에는 Testing과 Composite view에 대해 포스팅 해보아야겠다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

C#에서 포인터 사용

-
훈스닷넷에 답글달고 정리 차원에서 남겨둔다. C#에서는 C에서 처럼 포인터를 사용할수가 있다. 빌드옵션에서 안전하지 않은 코드 check 해주고 다음과 같은 방법으로 한다.         static void Main(string[] args)         {             foo();         }         unsafe static void foo()         {             Int64 aa = 123456789;             Int64 bb = 123222;             IntPtr pt = new IntPtr(&aa);             IntPtr pt2 = new IntPtr(&bb);             Console.WriteLine(pt.ToString("x"));             Console.WriteLine(pt2.ToString("x"));             Int32 a = 1234231;             Int32 b = 154324;             IntPtr pt3 = new IntPtr(&a);             IntPtr pt4 = new IntPtr(&b);             Console.WriteLine(pt3.ToString("x"));             Console.WriteLine(pt4.ToString("x"));         } 확인해보면 Int64는 8바이트, Int32는 4바이트 만큼 주소가 증가했음을 알 수 있다.
자세한 내용 보기

WPF RichTextBox 와 Document의 바인딩

-
MVVM 패턴을 이용해서 View의 TextBox 등에 바인딩은 간단하게 <TextBox Text="{Binding mystring}"/> 이렇게 하면 된다. RichTextBox 도 마찬가지 일것 같지만, 해보면 안된다. 먼저 RichTextBox가 Content를 표현하는 구조를 알아야 되는데, 그건, 다음에 정리하고, 바인딩 하는 방법은 아래와 같다. 먼저 ViewModel 을  DependencyObject 를 상속고 DependencyProperty 를 정의해준다. public class MyViewModel : DependencyObject { public FlowDocument Document { get { return (FlowDocument)GetValue(DocumentProperty); } set { SetValue(DocumentProperty, value); } } public static readonly DependencyProperty DocumentProperty = DependencyProperty.Register("Document", typeof(FlowDocument), typeof(MyViewModel), new PropertyMetadata(OnDocumentChanged)); public void OnDocumentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { } } 그 다음 View 의 code-behind 의 생성자에 InitializeComponent(); Binding b = new Binding("Document"); b.Source = richTextBox; b.Mode = BindingMode.OneWay; BindingOperations.SetB
자세한 내용 보기

WPF 이미지위에 라인 그리기(WPF DrawLine on exist Image)

-
WPF 기초가 부족해 삽질 한참 하다가 별것 아닌 방법으로 해결했다. 처음엔 Canvas위에 그릴려고 Canvas객체를 가져왔는데 WinForm 처럼 Graphics를 가져올수 없었다. 구글링해보면 제목은 WPF이고 Graphics를 가져와 그걸로 그리는 예제가 있어서 쉽게 끝날줄 알았는데, 한참 헤매었다. 답은 간단하다. 캔버스에서 이미지 다음에 객체를 추가하면 끝난다.(허무했다 ㅠ ) <Canvas Name="myCanvas">     <Image ImageSource="....."/>     <Line X1="10" Y1="10" X2="100" Y2="200" /> </Canvas> 동적으로 추가하는  코드도 마찬가지다  myCanvas.Children.Add( new Line{X1=10,Y1=10,X2=100,Y2=200} ); ViewModel로 바인딩해서 많은 선을 그렸었는데 역시 마찬가지로 이미지다음에 Template을 추가해 바인딩 해놓으면 쉽게 된다.
자세한 내용 보기