Test First GUIs

Test First GUIs
Using Model-View-Presenter
Robert Walsh - President - EnvisionWare, Inc.

rwalsh@envisionware.com
1
Copyright©2008-2009 Robert Walsh - All Rights Reserved
2
About the Presenter
 Robert Walsh
 President/CEO for EnvisionWare, Inc.
 10 years experience developing software for public
and academic libraries
 About 6 years experience with Agile Development
Methodologies

3
Agenda
 What is Model-View-Presenter
 Benefits of MVP
 Implementing MVP
 Using MVP to Test User Interfaces
 Implementing MVP with Win32
 Summary

What is
4
Model-View-Presenter?

What is
5
 A development technique for separating data,
logic, display, and user interaction from one
another
 Model holds data
 View displays data
 Presenter connects the model to the view
 Presenter supplies the logic for manipulating the
data and updating the display

What is
6
The Presenter is the
Brain of the System
The View is what the User

The Model represents
sees and how he/she interacts
the Data
with the system
What is
7
Knows both View
and Model
- Does not know Model - Does not know View

- Knows the Presenter to - May update Presenter, probably
delegate User Input indirectly using Observer
What is
8
Notification
of change
User Input External Stimulus

What is
9
 What about Model-View-Controller?
Classic MVC doesn’t work well with the modern rich client
tools because they design things so that the view handles all
the user events such as mouse and keyboard clicks. In
Model View Presenter, the view continues to handle these,
but then immediately delegates these to the presenter. The
presenter then decides what to do with the event,
communicating with the domain and the data in the view’s
controls.
- Martin Fowler
Source: http://www.martinfowler.com/eaaDev/ModelViewPresenter.html
What is Model-View-
10
Presenter?
 Additional comments from Martin Fowler
Upon further study and reflection, I decided that the pattern

that was here under the name “Model View Presenter”
needed to be split, so I have seperated (sic) it into
Supervising Controller and Passive View. You can find a
discussion of the origins of Model-View-Presenter in the
context of architecutres (sic) here:
(http://www.martinfowler.com/eaaDev/uiArchs.html).
- Martin Fowler, July 2006

11
Benefits of MVP

12
Benefits of MVP
 Decoupling
 Business logic, data persistence, and user interface
are kept isolated from one another
 Different teams may work on each part without
depending on the other two

13
Benefits of MVP
 Flexibility
 Want a fresh new look?
 Change the View
 Model and Presenter remain unchanged
 Need to change how the data is stored?
 Change the Model
 View and Presenter remain unchanged

14
Benefits of MVP
 Re-use
 The same Model and Presenter might be used for a
traditional thick client or for a web-based front-end

15
Benefits of MVP
 Testability
 Each component of the MVP triad may be tested
independently from the other two
 Automated GUI testing is possible with scripts that
rely on the layout of the interface

16
Implementing MVP

17
Implementing MVP
 The Model
 Most straight-forward
 Represents data from a given domain
 No special requirements to use with MVP
 However, the Model may use the Observer pattern
to tell the Presenter when its data has changed
 The Observer pattern allows the Model to be used
with or without a Presenter

18
Implementing MVP
 The View
 Typically a dialog box or web page
 Holds a reference to the Presenter so user input may
be passed to it
 Does only what the Presenter tells it to do

19
Implementing MVP
 The Presenter
 Holds references to the Model and the View
 Uses data from the Model to initialize the View
 User input is passed from the View to the Presenter,
and the Presenter decides what to do with it
 Some user actions may cause the Presenter to
update the Model
 Some external stimuli may cause the Model to
notify the Presenter that it should update the View

20
Implementing MVP
Presenter
theView
theModel
View Model
thePresenter

21
Implementing MVP
 Psuedo-code for initializing an MVP triad
View aView
Model aModel
Presenter aPresenter(aView, aModel);
aView->execute();

22
Implementing MVP
 Psuedo-code for the Presenter’s constructor
Presenter::Presenter(View *aView, Model *aModel)

: view_(aView), model_(aModel) {
view_->setPresenter(this);
view_->setSomeWidgetValue(
model_->someFieldValue);
/* ... init remaining view controls with model

values */
}

Using MVP to Test User
23
Interfaces

24
Interfaces
IPresenter
<<interface>>
IView IModel
<<interface>> theView <<interface>>
thePresenter theModel
Presenter MockPresenter
View MockView
Model MockModel
SensingView

25
Interfaces?
 A simple example

26
Interfaces?
<html>
<head>
<script type=”text/javascript”>
var view;
var dataSource;
var presenter;
function initialize() {
view = new CustomerView();
dataSource = new CustomerDataSource();
presenter = new CustomerPresenter(view,
dataSource);
}
</script>
</head>
<body onload=”javascript:initialize()”>
...
</body>
27
Interfaces?
What happens when the
user selects from the drop

28
Interfaces?
View Presenter Model
Select Customer
from List
customerSelected()
getCustomer()
updateFields()
updateControlStates()

29
Interfaces?
CustomerView.html
The View tells the Presenter
<html>
<head>
function customersListSelectionChanged() {
presenter.customerSelected();
}
</script>
</head>
<body ...>
...
<select name=”customersList”
onchange=”return javascript:customersListSelectionChanged()”>
...
</select>
...
</body>
</head>
30
Interfaces?
The Presenter gets data from
CustomerPresenter.js the Model
// Note: not necessarily valid javascript syntax!
CustomerPresenter.customerSelected() {
var customerId = this.view.getCustomer();
this.dataSource.getCustomer(customerId, this,
this.customerDataReceived);
}
CustomerPresenter.customerDataReceived(customer) {
this.updateFields(customer);
this.updateControlStates(customer);
}
// ... continued on next slide

31
Interfaces?
CustomerPresenter.js The Presenter updates the View
// Note: not necessarily valid javascript syntax!
CustomerPresenter.updateFields(customerData) {
this.view.setAddress(customerData.getAddress());
this.view.setPhoneNumber(customerData.getPhoneNumber());
...
}
CustomerPresenter.updateControlStates(customerData) {
this.view.enablePrevious(!customerData.isFirst());
this.view.enableNext(!customerData.isLast());
this.view.enableUpdate(false);
this.view.enableRevert(false);
}
32
Interfaces?
<html>
<head> If we are testing the Presenter...
var view;
var presenter; we can use a Mock View and a
Mock Data Source
view = new MockView();
dataSource = new MockDataSource();
presenter = new CustomerPresenter(view,
dataSource);
}
</script>
</head>
...
The tests would simply verify that the proper
</body> methods were called in the view based on
“canned” responses from the model
33
Interfaces?
<html>
<head> If we are testing the View...
var view;
var presenter; we can use a Mock Presenter
view = new CustomerView();
presenter = new MockCustomerPresenter(view);
}
</script>
</head>
...
</body> The tests would simply verify that the
proper methods were called in response
to actions initiated by the view

34
Interfaces?
 If we are testing the Model
 The model can typically be tested through
traditional unit testing processes
 The model typically does not interact directly with
the View or the Presenter

35
Interfaces?
 The MVP approach allows the tester to simulate
conditions that are difficult to induce the the
“real world”
 Database errors
 Networking problems
 Exceptions

36
Interfaces?
 Key points
 What is being tested with MVP are the interactions
between the Model, View, and Presenter
 The actual behaviors should be tested with each
piece in complete isolation
 For example:
 Does view.setAddress(“addressData”) really
set the text of the address control?
 Does model.getCustomer(“customerId”)
really get customer information from the
database?

37
Demonstration

Implementing MVP with
38
Win32

39
Win32
 Win32 presents a challenge
 Traditional DlgProc does not function well in the role
of the View
 The code handling the UI is procedural, not
object-based
 Delegating input events to the Presenter is no
problem, but allowing the Presenter to manipulate
the View requires that the Presenter know more
about the View than it should
 Specifically, the Presenter would have to know
about the individual dialog controls and their IDs

40
Win32
 A solution
 Introduce a ViewProxy to serve as an interface
between the DlgProc and the Presenter
 Input events will be handed to the ViewProxy, and
the ViewProxy will hand them to the Presenter
 The Presenter will manipulate the ViewProxy, and
the ViewProxy will manipulate the actual controls
on the dialog

41
Win32
Think of the role of the View
being filled by two parts:
ViewProxy and DlgProc
Presenter
ViewProxy and DlgProc Neither the Presenter
are tightly coupled nor the Model change
View Model
ViewProxy
DlgProc

42
Win32
BOOL DlgProc(HWND handle, int msgId,
WPARAM wParam, LPARAM lParam) {
static ViewProxy *view;
switch (msgId) {
case WM_INITDIALOG:
view = (ViewProxy *)lParam;
view->setDlg(handle);
. . .
break;
. . .
}
}
43
Win32
BOOL DlgProc(HWND handle, int msgId,
WPARAM wParam, LPARAM lParam) {
static ViewProxy *view;
switch (msgId) {
. . .
// Inside WM_COMMAND handler
case IDC_CUSTOMER_CMBX:
view->customerSelectionChanged();
break;
}
}

44
Win32
void ViewProxy::customerSelectionChanged() {
presenter->customerSelectionChanged();
}
void ViewProxy::updateCustomerInfo(String addr,

String phone, int purchases) {
setDlgItemText(dlg_, IDC_ADDRESS, addr);
setDlgItemText(dlg_, IDC_PHONE, phone);
setDlgItemInt(dlg_, IDC_PURCHASES, purchases, FALSE);
}

45
Summary

46
Summary
 Model
 Represents data
 View
 Represents user interface
 Presenter
 Handles user input by interacting with the Model and
updating the View

47
Summary
 Benefits
 Decoupling
 Data, logic, and presentation are separated
 Flexibility
 Persistence and look-and-feel are easily changed
 Re-use
 Models and Presenters may be used with multiple
Views
 Testability
 Facilitates GUI testing at the Presenter and the
View

48
Summary
 Implementation
 Presenter initializes View with data from Model
 View tells Presenter when user interacts with View
 Presenter gets information from Model and updates
View

49
Questions

50
Resources
 Feathers, Michael (2002). “Humble Dialog Box, The”. [Online].
 http://www.objectmentor.com/resources/articles/
TheHumbleDialogBox.pdf
 Fowler, Martin (July 2004). “Model View Presenter”. [Online].
 http://www.martinfowler.com/eaaDev/ModelViewPresenter.html
 Gamma, Erich et al. Design Patterns. Boston, MA: Addison-Wesley,
1995.
 Lambert, Kenneth A. and Martin Osborne. Smalltalk in Brief –
Introduction to Object-Oriented Software Development. Boston, MA:
PWS Publishing Company, 1997.
 Lewis, Simon. Art and Science of Smalltalk, The. London: Prentice Hall
International, 1995.
 Pinson, Lewis J. and Richard S. Wiener. Introduction to Object-
Oriented Programming and Smalltalk, An. Reading, MA:
Addison-Wesley, 1988.

Thank you!
51
For more information:
Robert Walsh
President
EnvisionWare, Inc.
678-584-5911
rwalsh@envisionware.com
http://www.envisionware.com

Test First GUIs

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Test First GUIs

Uploaded by

Copyright:

Available Formats

Test First GUIs

Robert Walsh - President - EnvisionWare, Inc.

Copyright©2008-2009 Robert Walsh - All Rights Reserved

 Using MVP to Test User Interfaces

 Implementing MVP with Win32

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

The View is what the User

- Does not know Model - Does not know View

User Input External Stimulus

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Upon further study and reflection, I decided that the pattern

- Martin Fowler, July 2006

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Presenter::Presenter(View *aView, Model *aModel)

/* ... init remaining view controls with model

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

// Note: not necessarily valid javascript syntax!

// ... continued on next slide

// Note: not necessarily valid javascript syntax!

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

void ViewProxy::updateCustomerInfo(String addr,

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

Copyright©2008-2009 Robert Walsh - All Rights Reserved

For more information:

Copyright©2008-2009 Robert Walsh - All Rights Reserved

You might also like

Presenter::Presenter(View aView, Model aModel)