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

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

Sasha KraljevicPrincipal TS Engineer

© 2008 Progress Software Corporation2 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?


OpenEdge® Reference Architecture

PresentationPresentation

Business ComponentsBusiness Components

Data AccessData Access

Data SourcesData Sources

Co

mm

on

Infrastru

cture

Co

mm

on

Infrastru

cture

Enterprise ServicesEnterprise Services


OpenEdge Reference Architecture

PresentationPresentation

Business ComponentsBusiness Components

Data AccessData Access

Data SourcesData Sources

Co

mm

on

Infrastru

cture

Co

mm

on

Infrastru

cture

Enterprise ServicesEnterprise Services

Presentation controls the user interface and requests data and other services


Presentation Layer – Design Patterns

Model-View-Controller

Model-View-Presenter- Supervising Controller- Passive View

The Presentation-Abstraction-Control (PAC)


Model-View-Controller

ControllerController

ModelModel ViewView

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


Model-View-Presenter

PresenterPresenter

ModelModel ViewView

MVP – Supervising Controller

PresenterPresenter

ModelModel ViewView

MVP – Passive View


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


MVC <> MVP

ControllerController

ModelModel ViewView

MVC – Model View Controller

PresenterPresenter

ModelModel ViewView

MVP – Passive View


The Presentation– Abstraction-Control

PresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstraction

PresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstraction PresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstraction

PresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstractionPresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstraction


Design Patterns – Back to the OERA

MODELMODELMODELMODEL

VIEWVIEWVIEWVIEW

PRESENTERPRESENTERPRESENTERPRESENTER

SERVICESERVICEADAPTERADAPTER

SERVICESERVICEADAPTERADAPTERC

omm

on I

nfra

stru

ctur

eC

omm

on I

nfra

stru

ctur

e

Bus

ines

s C

ompo

nent

sB

usin

ess

Com

pone

nts


Design Patterns – Back to the OERA

cd PresentationInOERA

Presentation Layer

Client Business Component

(Model)Presenter

View

CommonInfrastructure

Serv iceAdapter

1 1..*

1

1..*

1..*

1..*


Agenda



Design Patterns – MVP Triad

cd MVP Triad

Presenter

+ Add() : Presenter+ GetChild() : Component+ Operation()+ Remove() : Presenter

View

+ Add() : View+ GetChild() : Component+ Remove() : View+ Render()

Client Business Component (Model)

1

1..*

1..*


Design Patterns – Composite pattern for Presenters

cd CompositePresenter

Presenter

+ Add() : Presenter+ GetChild() : Component+ Operation()+ Remove() : Presenter

SimplePresenter

+ Operation()

CompositePresenter

+ Add() : Presenter+ GetChild() : Component+ Operation()

forall g in children g.Operation();

+ Remove() : Presenter

-children

1..*


Design Patterns – Composite pattern for Views

cd CompositeView

View


Request

SimpleView

+ Render()

CompositeView


forall g in children g.Render();

-children

1..*


Design Patterns – Composite MVP

cd Composite MVP

Presenter A :Presenter

Model A :Client Business Component

(Model)

View A :View

Presenter B :Presenter

View B :View

Model B :Client Business

Component (Model)

Model C :Client Business

Component (Model)

Presenter C :Presenter

View C :View

Instantiates

Instantiates


Agenda



Demo – What do we want to achieve?



VIEW

PRESENTER

MODEL




Agenda



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


Agenda



MVP Triad Tree

cd Composite MVP

Presenter A :Presenter

Model A :Client Business Component

(Model)

View A :View

Presenter B :Presenter

View B :View

Model B :Client Business

Component (Model)

Model C :Client Business

Component (Model)

Presenter C :Presenter

View C :View

Instantiates

Instantiates


MVP Triad Tree – Initialization Sequence

sd Presentation-Sequence-Diagram

System

:ServiceManager :ComponentFactory :ComponentRegistry

Presenter A:Component

Presenter B:Component

Create(Presenter A)

Create(Presenter A)

Create

Presenter A:=Created

registerComponent(Presenter A)

Presenter:=createObject(Presenter B)

Create(Presenter B)

Create

Presenter B:= Created

registerComponent(Presenter B)


Agenda



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


Agenda



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


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)


Agenda



Demo – What have we achieved?


Demo – What have we achieved?


In Summary

Simplify Complex UI design Leverage reusable

components Use proven design patterns


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


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


Questions?


Thank You


Documents

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