dev-36: composite mvp – building blocks in presentation layer sasha kraljevic principal ts...
TRANSCRIPT
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?
© 2008 Progress Software Corporation3 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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
© 2008 Progress Software Corporation4 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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
© 2008 Progress Software Corporation5 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)
© 2008 Progress Software Corporation6 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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
© 2008 Progress Software Corporation7 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Model-View-Presenter
PresenterPresenter
ModelModel ViewView
MVP – Supervising Controller
PresenterPresenter
ModelModel ViewView
MVP – Passive View
© 2008 Progress Software Corporation8 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
© 2008 Progress Software Corporation9 DEV-36: Composite MVP – Building Blocks in Presentation Layer
MVC <> MVP
ControllerController
ModelModel ViewView
MVC – Model View Controller
PresenterPresenter
ModelModel ViewView
MVP – Passive View
© 2008 Progress Software Corporation10 DEV-36: Composite MVP – Building Blocks in Presentation Layer
The Presentation– Abstraction-Control
PresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstraction
PresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstraction PresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstraction
PresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstractionPresentationPresentationPresentationPresentation ControlControlControlControl AbstractionAbstractionAbstractionAbstraction
© 2008 Progress Software Corporation11 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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
© 2008 Progress Software Corporation12 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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..*
© 2008 Progress Software Corporation13 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?
© 2008 Progress Software Corporation14 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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..*
© 2008 Progress Software Corporation15 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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..*
© 2008 Progress Software Corporation16 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Design Patterns – Composite pattern for Views
cd CompositeView
View
+ Add() : View+ GetChild() : Component+ Remove() : View+ Render()
Request
SimpleView
+ Render()
CompositeView
+ Add() : View+ GetChild() : Component+ Remove() : View+ Render()
forall g in children g.Render();
-children
1..*
© 2008 Progress Software Corporation17 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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
© 2008 Progress Software Corporation18 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?
© 2008 Progress Software Corporation19 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Demo – What do we want to achieve?
© 2008 Progress Software Corporation20 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Demo – What do we want to achieve?
VIEW
PRESENTER
MODEL
© 2008 Progress Software Corporation21 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Demo – What do we want to achieve?
© 2008 Progress Software Corporation22 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?
© 2008 Progress Software Corporation23 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
© 2008 Progress Software Corporation24 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?
© 2008 Progress Software Corporation25 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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
© 2008 Progress Software Corporation26 DEV-36: Composite MVP – Building Blocks in Presentation Layer
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)
© 2008 Progress Software Corporation27 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?
© 2008 Progress Software Corporation28 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
© 2008 Progress Software Corporation29 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?
© 2008 Progress Software Corporation30 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
© 2008 Progress Software Corporation31 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)
© 2008 Progress Software Corporation32 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?
© 2008 Progress Software Corporation33 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Demo – What have we achieved?
© 2008 Progress Software Corporation34 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Demo – What have we achieved?
© 2008 Progress Software Corporation35 DEV-36: Composite MVP – Building Blocks in Presentation Layer
In Summary
Simplify Complex UI design Leverage reusable
components Use proven design patterns
© 2008 Progress Software Corporation36 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
© 2008 Progress Software Corporation37 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
© 2008 Progress Software Corporation38 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Questions?
© 2008 Progress Software Corporation39 DEV-36: Composite MVP – Building Blocks in Presentation Layer
Thank You
© 2008 Progress Software Corporation40 DEV-36: Composite MVP – Building Blocks in Presentation Layer