organizing presentation logicctchen/pdf/opl.pdf · model view presenter (mvp) separates the...

1

Chien-Tsun ChenDepartment of Computer Science and Information EngineeringNational Taipei University of Technology, Taipei 106, Taiwan

[email protected]. 25 2004

Organizing Presentation Logic

2

This talk introduces some common issues of developing GUI applications and provides an example to give the MVP pattern a try

Why presentation design is harder than design of other layers?

A SWT/JFace application is developed to show the power of the MVP pattern

3

ReferencesMartin Fowler, Organizing Presentation Logic, 2004, http://www.martinfowler.com/eaaDev/OrganizingPresentations.html.Todd Sundsted, MVC meets Swing, Javaworld, 1998.Mike Potel, MVP: Model-View-Presenter. The TaligentProgramming Model for C++ and Java, 1996.Michael Feathers, The Humble Dialog, 2002.Jason Cai et. al., HMVC: The Layered Pattern for Developing strong client tiers, Javaworld, 2000.W. Greg Phillips and T.C. Nicholas Graham, Software Architectures for Multiuser Interactive Systems

4

Common issues of developing GUI applications

5

We use Album to discuss the issues of organizing basic behaviors within a single window

The initial state of Album application

Check Classic button enable the Composer

6

Other Other PackagesPackages

The global picture: An application can be divided into three (coarse-grained) layers

Presentation Presentation Layer Layer

Domain Domain Layer Layer

Data Source Data Source LayerLayer Transaction Transaction

Management Management

MessagingMessagingSystemSystem

DatabaseDatabase

Application External Systems

Users

session state record statescreen state

7

There are several ways to split up the logic of the presentation, such as MVC & PAC

MVC & HMVC

PAC

PAC & PAC Hierarchy

8

However, the well-known MVC approach doesn’t work well with most GUI frameworks

separating the model from the view/controller

separating view from controller was not popular in rich client GUI framework

Most GUI framework are designed so that the UI controls both display and receive the user input events

9

Let’s look at a Swing JButton example: each widget is a “UI component”

Swing UI Component

AbstractButton

setUI()

JComponent

setModel()

AbstractButton

10

AbstractButton declares most of the Button’s behaviors and variables related to UI painting

Not all UI states are defined in the model

11

ButtonModel and ComponentUI

AbstractButton

JComponent

12

Data is copied between layers and applications have to coordinate and synchronize the data between layers

Domain Layer(session state)

Presentation Layer(screen state)

External Systems(record state)DatabaseDatabase

13

Frequency and granularity are major design issues when synchronizing between layers

Key synchronization

Field synchronization

Screen synchronization

Coarse-grained synchronization: changes the entire UI whenever anything is changed

Fine-grained synchronization: changes the fields that really need updating

14

The concept of active screen is used to denote that the screen state is not synchronized to the session state

Sequential active screen

Single active screen

Multiple active screens

1

2

3

15

In “direct synchronization”, parent and child communicate directly to synchronize their changes

direct synchronization

child session state parentchange

save

save

*changed

load

16

In “mediated synchronization”, child communicates with mediator (a shared state) and separately the parent synchronizes itself with the mediator

child session state parent

change

save

*changed

load

mediated synchronization

17

Organizing presentation by MVP

18

Model View Presenter (MVP) separates the behavior of a presentation from the view while allowing the view to receive user events

viewpresenter

titleFieldChanged

titleBar.text = “Album:” + titleField.text

change title filed

view

1

23

sequence diagram

presenter

19

The first (simple) implementation of MVP: presenter and view are strongly coupled

view

selectedChangedEvent

m_view.m_txtTitle.setText()

select Album list

presenter

m_view.m_lstAlbum.getSelectedIndex()m_albums.getTitle()

20

The second implementation of MVP: presenter and view are loosely coupled

view

selectedChangedEvent

IAlbumView.setTitle()

select Album list

presenter

IAlbumView.getSelectedIndex()m_albums.getTitle()

21

Before implementing, we review the “interface”of the view

getAlbums

setAlbums

getArtist setArtist

getTitle

setTitle

getClassical

setClassical

getComposer setComposer

setEnableApplyAndCancel

setSelectedAlbumIndex

getSelectedAlbumIndex

getWindowTitlesetWindowTitle

22

We apply test first programming in the second implementation to find the interface of view

Test the initial state of view

23

To run the test, we have to create AlbumPresenter and MockAlbumView

24

Now we can run the test but it failed. We should write some code in the MockAlbumView

25

The getAlbums() and setAlbums() is implemented to pass the test

before

after

26

The test passed. We can continue to write more tests

27

When Eclipse finds a undefined method, it can create the method for you

28

We run the test and it falls again, of course. A lot of works need to do…

29

Finally, I finished the tests, MockAlbumView, and Presenter

MockAlbumViewMockAlbumView

PresenterPresenter

TestsTests

30

Next step, creating interface IAlbumView

31

I extract an interface from MockAlbumView by using “Extract Interface”

32

Implement AlbumViewImp by copying code from AlbumView of the first example

copy & modify

33

I write a test for AlbumViewImp by coping the test for MockAlbumView with little modification

copy & modify

34

The VM arguments must be set to run the test of AlbumViewImp, which is a SWT/JFace program

35

As you expected, the test fail

36

Why the test fail?

When initial,composer should be disabled

Find a bug of Presenter

37

The test still fail !

38

Why the test still fail?

Apply & Cancel should be disabled

The Presenter does not set up the initial value of the view.Why the tests for MockAlbumView do not find this bug?

39

I fixed the bug, but another bug occurs in the test method: testListSelectedShouldCauseUpdate()

40

The bug is caused by AlbumViewImp

The problem is that the org.eclipse.swt.widgets.List does not fire event when we call the setSelection(int) method

Add this statement

41

All done. The test pass

42

Conclusion

Question?

Organizing your application so that it is easy to implement as well as testing

MVP not only separates the behavior of a presentation from the view but also supports presentation behavior testing without the view

43

MoclAlbumView (1/2)

44

MoclAlbumView (2/2)

45

Presenter

46

AlbumPresenterTest is used to test Presenter with MockAlbumView

47

Test Initial state of view (screen state)

48

List selected should cause update

49

Check the classical box should enable composer field

50

The most complex test case. Step 1

Domain layer Domain layer ((session statesession state))

==

F F

FF

0Bug

When initial, the screen state == session state

State 0

51

Test code of Step 1: screen state == session state

52

Step 2: screen state != session state

F F

FF

0

T T

TT

0

State 0

State 1Domain layer Domain layer

((session statesession state))!=


==

53

Test code of Step 2: screen state != session state

54

Step 3: At state 3, screen state should equal to session state but I forget to check at state 2

T T

TT

0

F F

TT

3

State 1

State 3

State 2


??

55

Test code of Step 3: screen state is checked but it is not checked with session state

56

Step 4: Go be to item 0 and make sure the view state == session state

F F

TT

3

State 3


==

State 4F F

TT

0

F F

FF

0

State 0

57

Test code of Step 4: screen state == session state

58

Extract Interface from MockAlbumView (1/6)

59


60


61


62


63


organizing presentation logicctchen/pdf/opl.pdf · model view presenter (mvp) separates the...

Documents