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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

For More Information, go to… PSDN OpenEdge Reference Architecture http://www.psdn.com/library/kbcategory.jspa?categoryID=54 Implementing the OpenEdge Reference Architecture with Classes http://www.psdn.com/library/kbcategory.jspa?categoryID=1212 Building your Presentation with Classes - OpenEdge Webinar http://www.psdn.com/library/entry.jspa?externalID=2951 Documentation: OpenEdge Getting Started: Object-oriented Programming DEV-36: Composite MVP – Building Blocks in Presentation Layer

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

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

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

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