MVP(Model-View-Presenter) 패턴을 적용한 GUI Architecture 설계
1. MVP 패턴 소개
MVP 패턴은 MVC(Model-View-Controller) 패턴에 기반을 둔 UI 프리젠테이션 패턴입니다.
MVP 패턴은 Model, View, View Interface, Presenter 네 개의 컴포넌트(구성요소)로 구성됩니다.
각 컴포넌트에서 담당하는 책임은 다음과 같습니다.
- View
View Interface의 Display 멤버(Properties, Display Methods)를 구현하여 실제적인 UI 요소를 그려줍니다. - View Interface
Presenter에서 Concrete View를 직접 참조하지 않고 View Interface를 참조함로써 Concrete View와의 커플링을 감소시키고 View의 실제 UI 요소가 어떻게 구현되는지 몰라도 데이터를 올바르게 표현할 수 있도록 합니다. - Presenter
View와 Model간의 상호작용을 담당합니다. Model의 데이터를 View Interface를 통해 Concrete View에 출력(바인딩)해 주고 사용자의 이벤트를 View에서 구독하여(실제적인 이벤트 핸들러 구현) Model의 데이터를 갱신하는 역할을 수행합니다.
Presenter를 통해 View와 Model간의 의존관계를 없앨 수 있습니다. - Model
데이터와 상태를 유지하며 데이터 처리 로직을 포함합니다. 일반적으로 비즈니스 엔티티와 비즈니스 로직을 Model 컴포넌트로 간주합니다.
2. MVP 패턴 적용
위에서 소개한 MVP 패턴을 적용하여 샘플 어플리케이션을 만들어 보도록 하겠습니다.
샘플 어플리케이션의 Class Diagram은 다음과 같습니다.
Model 컴포넌트는 Member Class이며 Member Entity와 데이터 처리 로직을 포함하고 있습니다.
Presenter 컴포넌트는 MemberPresenter Class이며 View와 Model을 참조합니다. 그리고 View의 이벤트 핸들러를 구현합니다.
View Interface 컴포넌트는 IMemberView Interface이며 View의 속성과 이벤트를 정의합니다.
Concrete View 컴포넌트는 MemberView Form이며 IMemberView를 구현하며 UI요소를 렌더링합니다.
먼저 Model 컴포넌트인 Member Class를 만들도록 합니다.
Member Class는 실제 데이터 소스에 접근하여 데이터를 검색하거나 갱신하는 로직을 포함합니다. 또한 Member의 Age, Name 속성을 갖는 Entity Class의 역할도 수행합니다.
데이터 소스는 실제 데이터베이스가 아닌 <표 1>과 같이 더미 데이터를 임시로 구현하여 사용합니다.
static class DummyMember
{
#region 회원 더미 데이터 생성
public static List<Models.Member> List = new List<Models.Member>();
static DummyMember()
{
List.Add(new Models.Member("홍길동", 20));
List.Add(new Models.Member("김갑수", 10));
}
#endregion
}
public int SaveMember()
{
#region 저장
if (id == null)
{
// 추가
Data.DummyMember.List.Add(new Member(this.name, this.age));
id = Data.DummyMember.List.Count - 1;
}
else
{
// 수정
Data.DummyMember.List[id.Value].Name = name;
Data.DummyMember.List[id.Value].Age = age;
}
#endregion
return 0;
}
public bool LoadMember(int id)
{
if (id >= Data.DummyMember.List.Count || id < 0)
{
this.id = null;
return false;
}
this.id = id;
name = Data.DummyMember.List[id].Name;
age = Data.DummyMember.List[id].Age;
return true;
}
다음으로 IMemberView Interface를 정의합니다.
IMemberView Interface는 Concrete View에서 구현해야할 UI 요소와 표현 메서드를 정의합니다. 일반적으로 UI요소는 Property로 정의하며 Concrete View의 UI 요소에서 이벤트가 발생했을 때 이를 Presenter에서 처리할 수 있도록 이벤트를 정의합니다.
interface IMemberView
{
int ID { get; set; }
string Name { get; set; }
int Age { get; set; }
event EventHandler LoadMember;
event EventHandler SaveMember;
}
세 번째로 UI 요소를 출력하는 MemberView Form을 생성합니다.
MemberView Form은 System.Windows.Forms.Form Class를 상속하는 WinForm Class입니다. 닷넷의 WinForm Control이 UI 요소가 됩니다.
또한 IMemberView Interface를 구현하여 Presenter에서 UI 요소에 데이터를 채우거나 이벤트 핸들러를 구현하여 View를 제어할 수 있도록 합니다.
public partial class MemberView : Form, IMemberView
{
MemberPresenter presenter;
public MemberView()
{
InitializeComponent();
presenter = new MemberPresenter(this);
}
#region IMemberView 멤버
int IMemberView.ID
{
get { return (int)numericUpDown1.Value; }
set { numericUpDown1.Value = value; }
}
string IMemberView.Name
{
get { return textBox1.Text; }
set { textBox1.Text = value; }
}
int IMemberView.Age
{
get { return (int)numericUpDown2.Value; }
set { numericUpDown2.Value = value; }
}
event EventHandler IMemberView.SaveMember
{
add { button1.Click += value; }
remove { button1.Click -= value; }
}
event EventHandler IMemberView.LoadMember
{
add { button2.Click += value; }
remove { button2.Click -= value; }
}
#endregion
}
주목할 부분은 SaveMember, LoadMember 이벤트를 구현한 부분입니다. button1.Click과 button2.Click의 실제 이벤트 핸들러는 Presenter에서 구현하는데, 이 곳에서 Model의 데이터를 검색하고 갱신하는 코드를 작성하게 됩니다.
마지막으로 View와 Model의 상호작용을 처리하는 MemberPresenter Class를 구현합니다.
MemberPresenter Class는 Concrete View의 UI 요소(WinForm Control)의 실제 이벤트 핸들러를 구현하며 Member Class의 데이터 처리 메소드를 호출해 데이터를 검색하거나 갱신하는 코드를 구현합니다. 또한 IMemberView 인터페이스를 통해 Concrete View인 MemberView Form의 UI 요소(WinForm Controls)에 데이터를 출력하는 코드도 구현하고 있습니다.
class MemberPresenter
{
IMemberView view;
Models.Member model;
public MemberPresenter(IMemberView view)
{
this.view = view;
this.view.SaveMember += new EventHandler(view_SaveMember);
this.view.LoadMember += new EventHandler(view_LoadMember);
this.model = new SingleLayerMVP.Models.Member();
}
// 회원정보 불러오기
void view_LoadMember(object sender, EventArgs e)
{
int id = view.ID;
if (model.LoadMember(id))
{
view.Name = model.Name;
view.Age = model.Age;
}
else
{
MessageBox.Show("존재하지 않는 회원입니다.");
view.Name = string.Empty;
view.Age = 0;
}
}
// 회원정보 저장하기
void view_SaveMember(object sender, EventArgs e)
{
model.Name = view.Name;
model.Age = view.Age;
if (model.SaveMember() == 0)
{
MessageBox.Show("성공");
}
else
{
MessageBox.Show("실패");
}
}
}
MemberPresenter Class는 IMemberView와 Member의 참조를 모두 갖게 되며 view와 model간의 상호작용을 담당하는 코드를 실제 구현하게 됩니다. 이로써 View와 Model간의 커플링을 없앰과 동시에 View와의 상호작용을 IMemberView Interface를 통해 처리함으로써 실제 Concrete View인 MemberView Form과의 커플링도 없앨 수 있게 되는 것입니다.
3. Multi Layer Application Architecture 에서 MVP Pattern 적용하기
일반적으로 비즈니스 레이어와 Presentation Layer가 분리 되어 있는 어플리케이션에서 MVP Pattern의 적용은 <그림 3>과 같은 구조를 적용하면 됩니다. Model의 Business Entity는 직렬화가 가능하도록 [Serializable] 어트리뷰트를 추가하여 개발하고 Client Application에서는 Web Service참조를 Model로 간주하여 Presenter에 구현하면 됩니다.
[Serializable]
public class Member
{
int? id = null;
public int? Id
{
get { return id; }
set { id = value; }
}
…
class MemberPresenter
{
IMemberView view;
WebService.Service1 model;
public MemberPresenter(IMemberView view)
{
this.view = view;
this.view.SaveMember += new EventHandler(view_SaveMember);
this.view.LoadMember += new EventHandler(view_LoadMember);
this.model = new Client.WebService.Service1();
}
// 회원정보 불러오기
void view_LoadMember(object sender, EventArgs e)
{
int id = view.ID;
WebService.Member member = model.wpLoadMember(id);
…
4. View를 위한 단위 테스트 코드 작성
우선 단위 테스트 코드는 NUnit Framework를 사용하도록 합니다.
NUnit Framework의 다운로드와 설치는 다음 링크를 참조하세요.
http://www.nunit.org
일반적으로 GUI에 대한 테스트는 사용자 액션(이벤트 발생)을 시뮬레이션하기 어렵기 때문에 자동화하기가 어렵습니다. 그래서 마우스와 키보드 동작을 레코드하여 매크로 동작으로 테스트하는 상용화된 테스팅 툴을 사용하게 됩니다.
하지만 MVP 패턴을 적용하게 되면 IMemberView 인터페이스를 사용해서 View만을 위한 단위 테스트 코드를 작성할 수 있습니다. 이것이 의미하는 것은 GUI 개발을 테스트 지향적(TDD, 테스트 코드 먼저구현->실제 코드 구현)으로 개발할 수 있다는 것이기도 합니다.
단위 테스트 코드를 작성하기 위해 먼저 IMemberView Interface를 구현하는 DummyView Class를 생성합니다.
public class DummyView : IMemberView
{
int id;
int age;
string name;
event EventHandler loadMember;
event EventHandler saveMember;
#region IMemberView 멤버
…
#endregion
#region 테스트용 인터페이스
public void TestLoadMember()
{
loadMember(this, null);
}
public void TestSaveMember()
{
saveMember(this, null);
}
#endregion
}
DummyView Class에서 IMemberView Interface를 구현한 것과 테스트용 메서드인 TestLoadMember()와 TestSaveMember() 메서드를 추가한 것입니다. 실제 View의 UI 요소를 제어하는 코드가 있는 Class는 MemberPresenter이기 때문에 IMemberView와 MemberPresenter를 모두 테스트하는 코드라고 볼 수 있습니다.
using NUnit.Framework;
namespace SingleLayerMVP.Tests
{
[TestFixture]
public class MemberViewTest
{
IMemberView view;
MemberPresenter presenter;
[SetUp]
public void SetUp()
{
view = new DummyView();
presenter = new MemberPresenter(view);
}
[TearDown]
public void TearDown()
{
// null
}
/// <summary>
/// Test LoadMember()
/// </summary>
[Test]
public void TestLoadMember()
{
view.ID = 0;
(view as DummyView).TestLoadMember();
Assert.AreEqual(view.Name, "홍길동");
Assert.AreEqual(view.Age, 20);
}
/// <summary>
/// Test SaveMember()
/// </summary>
[Test]
public void TestSaveMember()
{
view.ID = 0;
view.Name = "홍길삼";
view.Age = 21;
(view as DummyView).TestSaveMember();
Assert.AreEqual(view.Name, "홍길삼");
Assert.AreEqual(view.Age, 21);
}
}
}
NUnit Framework를 사용해서 테스트 코드를 작성하는 방법은 http://www.nunit.org 사이트를 참조하세요.
TestLoadMember() 테스트 메서드와 TestSaveMember() 테스트 메서드를 보면 실제 GUI의 동작을 시뮬레이션하는 코드가 구현되어 있는 것을 볼 수 있습니다.
TestLoadMember() 메서드를 자세히 살펴보죠.
view.ID = 0; 이라는 코드에서 사용자가 ID UI 요소에 0이란 값을 입력한 것을 의미하고,
(view as DummyView).TestLoadMember(); 코드에서는 “불러오기” 버튼을 클릭(또는 유사한 동작)한 것을 의미합니다.
Assert.AreEqual() 구문에 의해서 DummyMember.List[]의 첫 번째 데이터인 {‘홍길동’, 20}이 정상적으로 View에 출력되었는지 확인하게 됩니다.
NUnit에서 컴파일된 어셈블리를 로드하여 테스트를 수행하면 다음과 같이 테스트가 통과한 것을 볼 수 있습니다.
물론 MemberView 폼을 대상으로 테스트를 수행하지 않은 것은 아쉬운 점입니다. 특히 View의 입력 요소에 값이 입력될 때 유효성 체크하는 코드를 작성할 수 없다는 것도 역시 아쉬운 점입니다. 이 두 항목을 포함하여 본 문서에서 미흡하게 다뤘거나 또는 건너 뛴 부분(MVC 패턴, MVC와 MVP 패턴의 차이점과 장단점…)들은 참조문헌에 있는 링크를 참조하세요.
이상으로 MVP 패턴을 적용한 Gui Archicecture 설계를 마치도록 하겠습니다.
5. 참조문헌
5.1. MSDN Magazine, Model View Presenter :
http://msdn.microsoft.com/msdnmag/issues/06/08/DesignPatterns/
5.2. MVC or MVP Pattern – What’s the difference :
http://blogs.infragistics.com/blogs/tsnyder/archive/2007/10/17/mvc-or-mvp-pattern-whats-the-difference.aspx
5.3. Martin Fowler’s GUI Architectures :
http://www.martinfowler.com/eaaDev/uiArchs.html
5.4. MSDN, Model View Controller
http://msdn2.microsoft.com/en-us/library/ms978748.aspx
5.5. MSDN, Implementing Model-View-Controller in ASP.NET
http://msdn2.microsoft.com/en-us/library/ms998540.aspx
5.6. MSDN, Page Controller
http://msdn2.microsoft.com/en-us/library/ms978764.aspx
5.7. MSDN, Front Controller
http://msdn2.microsoft.com/en-us/library/ms978723.aspx
5.8. KLDP, M-V-C가 서로의 영역을 전혀 침범하지 않고 개발하는 것이 과연 가능한가?
http://kldp.org/node/70219
5.9. Javaworld, JSP의 MVC 모델1과 모델2
http://www.javaworld.com/javaworld/jw-12-1999/jw-12-ssj-jspmvc.html