1. DEV-36: Composite MVP – Building Blocks in Presentation Layer
Sasha Kraljevic
Principal TS Engineer

2. Agenda Presenter Layer Design Patterns MVP Composite Pattern
What do we want to achieve?
An all-in-one MVP
MVP Triad Tree
Let’s make building blocks
Putting it all together
What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

3. OpenEdge® Reference Architecture
Business Components
Data Access
Data Sources
Common Infrastructure
Enterprise Services
Presentation
OpenEdge Reference Architecture defines guidelines and principles used to address and solve specific problems in the domain of software architecture. The purpose of the OERA therefore is to provide a roadmap to the best practices for architecting competitive, modern applications. As with any roadmap, the OERA allows decisions to be made within each layer of the model. It serves as the high-level blueprint that enables us to separate concerns within different application architecture layers, so that it is easier for the designers and developers to come up with “clean ‘n lean” code, easier to understand, self-contained (encapsulating specific feature) and therefore straightforward to test, maintain and eventually replace. We could say that OERA lands itself to test driven development.
DEV-36: Composite MVP – Building Blocks in Presentation Layer

4. OpenEdge Reference Architecture
Presentation
Enterprise Services
Business Components
Common Infrastructure
Data Access
The most visible layer from the human interaction perspective is the Presentation Layer. The biggest challenge in the design of the Presentation layer is to separate concerns in the application architecture so that the end result represents the clean and maintainable code, flexible enough to deal with different types of UI clients.
There is an obvious need for a clear separation and boundary between the Presentation and other layers, in order to achieve loosely coupling, but still having high cohesion, enabled through specific protocols implemented by the means of standard messaging, or an interface. In this document we will focus on the Presentation layer, having in mind that its relationship with surrounding layers must be taken into account.
Data Sources
Presentation controls the user interface and requests data and other services
DEV-36: Composite MVP – Building Blocks in Presentation Layer

5. Presentation Layer – Design Patterns
Model-View-Controller
Model-View-Presenter - Supervising Controller - Passive View
The Presentation-Abstraction-Control (PAC)
DEV-36: Composite MVP – Building Blocks in Presentation Layer

6. Model-View-Controller
MVC – Model View Controller
The Model refers to the data and business functionality of the application
The View is the visual representation of the Model and is comprised of the screens and widgets used within an application
The Controller is a component which responds to user input such as data entry and commands issued from a keyboard or mouse
DEV-36: Composite MVP – Building Blocks in Presentation Layer

7. Model-View-Presenter
MVP – Supervising Controller
Presenter
Model
View
MVP – Passive View
DEV-36: Composite MVP – Building Blocks in Presentation Layer

8. Model-View-Presenter
The Model refers to the data and business functionality of the application
The View is the visual representation of the Model and is comprised of the screens and widgets used within an application
The Presenter is a component which contains the presentation logic which interacts with the Model
DEV-36: Composite MVP – Building Blocks in Presentation Layer

9. MVC – Model View Controller
MVC <> MVP
Controller
Model
View
MVC – Model View Controller
Presenter
Model
View
MVP – Passive View
DEV-36: Composite MVP – Building Blocks in Presentation Layer

10. The Presentation– Abstraction-Control
DEV-36: Composite MVP – Building Blocks in Presentation Layer

11. Design Patterns – Back to the OERA
Common Infrastructure
Business Components
MODEL
PRESENTER
VIEW
SERVICE
ADAPTER
DEV-36: Composite MVP – Building Blocks in Presentation Layer

12. Design Patterns – Back to the OERA
DEV-36: Composite MVP – Building Blocks in Presentation Layer

13. Agenda Presenter Layer Design Patterns MVP Composite Pattern
What do we want to achieve?
An all-in-one MVP
MVP Triad Tree
Let’s make building blocks
Putting it all together
What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

14. Design Patterns – MVP Triad
DEV-36: Composite MVP – Building Blocks in Presentation Layer

15. Design Patterns – Composite pattern for Presenters
DEV-36: Composite MVP – Building Blocks in Presentation Layer

16. Design Patterns – Composite pattern for Views
DEV-36: Composite MVP – Building Blocks in Presentation Layer

17. Design Patterns – Composite MVP
DEV-36: Composite MVP – Building Blocks in Presentation Layer

18. Agenda Presenter Layer Design Patterns MVP Composite Pattern
What do we want to achieve?
An all-in-one MVP
MVP Triad Tree
Let’s make building blocks
Putting it all together
What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

19. Demo – What do we want to achieve?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

20. Demo – What do we want to achieve?
VIEW
PRESENTER
MODEL
DEV-36: Composite MVP – Building Blocks in Presentation Layer

21. Demo – What do we want to achieve?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

22. Agenda Presenter Layer Design Patterns MVP Composite Pattern
What do we want to achieve?
An all-in-one MVP
MVP Triad Tree
Let’s make building blocks
Putting it all together
What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

23. An All-In-One MVP
One Presenter managing One View having One or More Models
When to use:
One-off situation
No reusable components
Complex interaction between UI components
When NOT to use:
Template UI
Having reusable components
Standardized interaction between UI components
DEV-36: Composite MVP – Building Blocks in Presentation Layer

24. Agenda Presenter Layer Design Patterns MVP Composite Pattern
What do we want to achieve?
An all-in-one MVP
MVP Triad Tree
Let’s make building blocks
Putting it all together
What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

25. MVP Triad Tree
DEV-36: Composite MVP – Building Blocks in Presentation Layer

26. MVP Triad Tree – Initialization Sequence
DEV-36: Composite MVP – Building Blocks in Presentation Layer

27. Agenda Presenter Layer Design Patterns MVP Composite Pattern
What do we want to achieve?
An all-in-one MVP
MVP Triad Tree
Let’s make building blocks
Putting it all together
What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

28. Let’s make building blocks
Start with UI analysis
Perform decomposition of UI to reusable blocks using following rules:
Each UI block must have specific role
Enforce encapsulation
Create use cases followed by sequence diagrams & state diagrams
Document API and messages going in and out of MVP Triad
DEV-36: Composite MVP – Building Blocks in Presentation Layer

29. Agenda Presenter Layer Design Patterns MVP Composite Pattern
What do we want to achieve?
An all-in-one MVP
MVP Triad Tree
Let’s make building blocks
Putting it all together
What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

30. Putting it all together
Presenter from parent MVP Triad is responsible for contained MVP Triad(s) instantiation
Parent Presenter should instantiate only contained Presenter(s)
Each Presenter is responsible to instantiate its own Model and View component(s)
There must be a mechanism to propagate signals (events, state etc.) up and down the MVP Triad Tree
DEV-36: Composite MVP – Building Blocks in Presentation Layer

31. Putting it all together …cont’d.
Caveat: We can’t (yet) use PUBLISH/SUBSCRIBE mechanism in the classes
But we can establish communication channels between each MVP Triad using class methods
doConnect(Object1, Signal1, Object2, Channel1)
DEV-36: Composite MVP – Building Blocks in Presentation Layer

32. Agenda Presenter Layer Design Patterns MVP Composite Pattern
What do we want to achieve?
An all-in-one MVP
MVP Triad Tree
Let’s make building blocks
Putting it all together
What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

33. Demo – What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

34. Demo – What have we achieved?
DEV-36: Composite MVP – Building Blocks in Presentation Layer

35. In Summary Simplify Complex UI design Leverage reusable components
Use proven design patterns
Simplify Complex UI design because it is easier to debug and maintain.
DEV-36: Composite MVP – Building Blocks in Presentation Layer

36. For More Information, go to…
PSDN
OpenEdge Reference Architecture
Implementing the OpenEdge Reference Architecture with Classes
Building your Presentation with Classes - OpenEdge Webinar
Documentation:
OpenEdge Getting Started: Object-oriented Programming
DEV-36: Composite MVP – Building Blocks in Presentation Layer

37. Relevant Exchange Sessions
Exchange 2007 ARCH-11: Building your Presentation with Classes
DEV-11: Architecting Your Application in OpenEdge 10
DEV-35: Modeling Existing ABL Systems with UML
DEV-36: Composite MVP – Building Blocks in Presentation Layer

38. ?
Questions
DEV-36: Composite MVP – Building Blocks in Presentation Layer

39. Thank You
DEV-36: Composite MVP – Building Blocks in Presentation Layer

40. DEV-36: Composite MVP – Building Blocks in Presentation Layer