성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Working with Rust Libraries from C#...
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
[정성태] Modules 창(Ctrl+Shift+U)을 띄워서, 해당 Op...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <br /> <div style='font-family: 맑은 고딕, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>MVVM 패턴 적용(1)</div><br /> <br /> 이번에는, WPF에 와서야 제대로 소화가 가능한 "MVVM" 패턴을 적용해 보도록 하겠습니다. 참고로, 이번 장의 내용은 다음의 내용을 어느 정도는 알고 있어야 합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > Model-View-ViewModel 디자인 패턴을 사용한 WPF 응용 프로그램 ; <a target='_tab' href='https://docs.microsoft.com/ko-kr/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern'>https://docs.microsoft.com/ko-kr/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern</a> </pre> <br /> 읽어보신 분들은 아시겠지만, View로 생성되는 "*.xaml.cs"파일에 코드가 "InitializeComponent"를 제외하고는 단 한줄도 없다는 사실이 매우 놀랍습니다. WPF에서의 향상된 데이터 바인딩 능력과 개선된 Command 처리 구조덕분인데요. 이에 비하면, MVC/MVP 모델은 덜 성숙한 듯한 느낌마저 받게 됩니다. 특히 훨씬 더 강제적인 방법으로 패턴을 적용할 수 있다는 점은 MVVM 모델만의 확실한 장점으로 작용합니다.<br /> <br /> 사실 이전의 MVC/MVP 패턴들은 어느 정도 개발자의 임의 재량에 맡겨지는 부분이 있어서 해당 패턴들을 정확히 지키지 않아도 가능했습니다. 그렇지 않게 하려면, 관리자가 모든 코드를 열람해야 했지요. 하지만, MVVM을 적용하게 되면 사정은 완전히 달라집니다. View를 담당하는 xaml/xaml.cs 파일에는 어떤 코드도 없어야 한다는 점이 명백해집니다. 그와 함께 명확하게 분리된 ViewModel은 View로부터 완전한 독립성을 제공해 주고 완벽하게 하나의 단위테스트(Unit Test) 대상이 되므로 패턴화가 명확하게 이뤄집니다.<br /> <br /> 그렇다면, 이렇게 좋은 MVVM 패턴이 CAG에 어떻게 녹아들어갈 수 있을까요?<br /> 사실, 이미 Region 자체가 WPF 요소로 지정이 되기 때문에 별다르게 처리할 부분은 없습니다. 다시 말해서... ^^ 그냥 써주기만 하면 됩니다.<br /> <br /> 그럼, 대략적인 순서를 한번 밟아볼까요?<br /> <br /> <hr style='width: 50%' /><br /> <br /> 이전 예제에서 계속 추가를 해보겠습니다. 우선, 업무 패키지로 분류되는 "StatusBar" 프로젝트에 각각 "View", "ViewModel" 폴더를 추가합니다.<br /> <br /> <div style='font-family: 맑은 고딕, Consolas; font-size: 12pt; color: #2211AA; text-align: left; font-weight: bold'>1. ViewModelBase 추가</div><br /> ViewModel의 경우에는 공통으로 사용되는 코드를 모아두기 위해서 "ViewModelBase.cs" 파일을 "DevToolManager.CodeModel" 프로젝트에 추가시켜서 코드를 다음과 같이 생성합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > namespace DevToolManager.CodeModel { public abstract class ViewModelBase : <b style='color: Blue;'>INotifyPropertyChanged</b> { protected ViewModelBase() { } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChangedEventHandler handler = this.PropertyChanged; if (handler != null) { var e = new PropertyChangedEventArgs(propertyName); handler(this, e); } } } } </pre> <br /> <div style='font-family: 맑은 고딕, Consolas; font-size: 12pt; color: #2211AA; text-align: left; font-weight: bold'>2. UI만 정의된 View 추가</div><br /> View 폴더에는 "StatusBarView" WPF 사용자 컨트롤을 하나 생성해서 StatusBarView.xaml을 다음과 같이 구성해 줍니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > <UserControl x:Class="StatusBar.StatusBarView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <DockPanel> <Label DockPanel.Dock="Left"> <Hyperlink> <TextBlock Text="{Binding Path=<b style='color: Blue;'>LocalPath</b>}"></TextBlock> </Hyperlink> </Label> <Button HorizontalAlignment="Right">Folder</Button> </DockPanel> </UserControl> </pre> <br /> <div style='font-family: 맑은 고딕, Consolas; font-size: 12pt; color: #2211AA; text-align: left; font-weight: bold'>3. View와 Model을 중계해 주는 ViewModel 추가</div><br /> VIewModel 폴더에는 1번 과정에서 추가한 ViewModelBase를 기반으로, 2번 과정에서 추가한 View와 연결될 ViewModel을 다음과 같이 구성합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > namespace StatusBar.ViewModel { public class <b style='color: Blue;'>StatusBarViewModel</b> : ViewModelBase { string localPath; public string LocalPath { get { return this.localPath; } set { this.localPath = value; OnPropertyChanged("LocalPath"); } } public StatusBarViewModel() { this.LocalPath = @"C:\temp"; } } } </pre> <br /> 소스 코드를 간단하게 유지하기 위해서 "Model"을 정의하지는 않았기 때문에 StatusBarViewModel의 내부 데이터를 채우는 과정 및 스토리지에 저장하는 절차가 생략되었습니다. (MVVM을 이해하는 데 꼭 Model이 있어야 할 필요는 없기 때문에 생략했습니다.)<br /> <br /> <div style='font-family: 맑은 고딕, Consolas; font-size: 12pt; color: #2211AA; text-align: left; font-weight: bold'>4. Region에 ViewModel을 추가</div><br /> Region에 추가되는 코드를 StatusBarModule.cs 파일의 IModule.Initialize 메서드에 다음과 같이 넣어줍니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > public void Initialize() { ... [중간 생략] ... unityContainer.RegisterType<StatusBarViewModel>(); this.regionManager.Regions["StatusRegion"].Add(<b style='color: Blue;'>unityContainer.Resolve<StatusBarViewModel>()</b>); }</pre> <br /> 어??? 왜 View가 아닌 ViewModel을 추가하는 걸까??? 라고 궁금하지 않으세요? 그것이 바로 MVVM의 차별성입니다. 여기까지만 연결하고 실행을 하면 "StatusRegion" 영역에는 [그림 1]과 같이 StatusBarViewModel.ToString()으로 출력된 결과만 나옵니다.<br /> <br /> [그림 1: View가 연결되지 않은 ViewModel 출력]<br /> <img alt='impl_cag_app_step_by_step_chapter5_1.png' src='/SysWebRes/bbs/impl_cag_app_step_by_step_chapter5_1.png' /><br /> <br /> <div style='font-family: 맑은 고딕, Consolas; font-size: 12pt; color: #2211AA; text-align: left; font-weight: bold'>5. View와 ViewModel을 연결</div><br /> StatusBarViewModel은 단순히 Model을 View에 적합하게 연결해주는 또 다른 Entity 클래스입니다. 따라서 WPF 데이터바인딩에서 "DataTemplate"을 이용하여 View와 ViewModel을 연결하는 것이 가능합니다. 이를 위해 "StatusBar" 프로젝트에 "Resources" 폴더를 추가하고 다음과 같은 내용의 StatusBarResources.xaml 파일을 추가합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:<b style='color: Blue;'>viewModel="clr-namespace:StatusBar.ViewModel"</b> xmlns:<b style='color: Blue;'>view="clr-namespace:StatusBar"></b> <b style='color: Blue;'><DataTemplate DataType="{x:Type viewModel:StatusBarViewModel}"> <view:StatusBarView /> </DataTemplate></b> </ResourceDictionary> </pre> <br /> 이렇게 만들어진 ResourceDictionary를 Application에 알려야겠지요. 이런 초기화를 위한 가장 좋은 부분이 IModule.Initialize 메서드일테고.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > public void Initialize() { <b style='color: Blue;'> Uri resourceLocator = new Uri("/StatusBar;component/Resources/StatusBarResources.xaml", System.UriKind.Relative); ResourceDictionary resource = Application.LoadComponent(resourceLocator) as ResourceDictionary; Application.Current.Resources.MergedDictionaries.Add(resource);</b> unityContainer.RegisterType<StatusBarViewModel>(); this.regionManager.Regions["StatusRegion"].Add(unityContainer.Resolve<StatusBarViewModel>()); } </pre> <br /> 이제, Region.Add에서 StatusBarViewModel 인스턴스를 넘겨주게 되면 WPF는 해당 Data와 연결된 View를 ResourceDictionary에 등록된 DataTemplate을 통해서 알게 되고, 결과적으로 [그림 2]에서 보는 것과 같이 실행이 됩니다.<br /> <br /> [그림 2: ViewModel에 연결된 View 출력]<br /> <img alt='impl_cag_app_step_by_step_chapter5_2.png' src='/SysWebRes/bbs/impl_cag_app_step_by_step_chapter5_2.png' /><br /> <br /> 만약, View가 바뀌었다면 StatusBarResources.xaml 파일에 정의된 DataTemplate 내에 매핑된 View 타입을 갈아치우기만 하면 됩니다. 이 정도면 완벽하게 View 와 Model이 분리되었다고 볼 수 있겠지요. ^^<br /> <br /> 물론, 이와 같은 과정을 다음과 같이 직접 View.DataContext를 이용하도록 바꿔도 무방합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > StatusBarView view = new StatusBarView(); view.<b style='color: Blue;'>DataContext</b> = unityContainer.Resolve<<b style='color: Blue;'>StatusBarViewModel</b>>(); this.regionManager.Regions["StatusRegion"].Add(view); </pre> <br /> 어떠세요? MVVM과 CAG의 조합이...?<br /> <br /> <a target='_tab' href='http://www.sysnet.pe.kr/bbs/DownloadAttachment.aspx?fid=455&boardid=331301885'>다운로드: 예제 솔루션</a><br /> <br /><br /><hr /><span style='color: Maroon'>[이 토픽에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
1134
(왼쪽의 숫자를 입력해야 합니다.)