Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Magnolia CMS 5.0 - UI Architecture
1. Magnolia 5.0 - Concept
UI Architecture
1
Magnolia is a registered trademark used by permission
Version 1.0
2. MVP vs. MVC
http://blog.vuscode.com/malovicn/archive/2007/12/18/model-view-presenter-mvp-vs-model-view-controller-mvc.aspx
2
Magnolia is a registered trademark used by permission
Version 1.0
3. GWT 2.1 - MVP
• based on the experience at google
• good fundament for browser application
• history
• asynchronously
• decoupling browser dependent code
3
Magnolia is a registered trademark used by permission
Version 1.0
4. GWT 2.1 - the participants
• Places
• Display Regions
• Activities (Presenter)
• Views
• EventBus
4
Magnolia is a registered trademark used by permission
Version 1.0
5. Places
• Place
• represents a state
• each place is a subclass
• provides the values to re-produce the place
• PlaceController
• PlaceController.gotTo(place)
• fires PlaceChangeEvent/PlaceChangeRequestEvent
• PlaceHistoryHandler
• triggered by history navigation
• PlaceHistoryMapper
• browser history support
5
Magnolia is a registered trademark used by permission
Version 1.0
6. Display Regions
• where the produced view is attached to
• navigation menu, search bar, main region, ..
• implements AcceptsOneWidget interface
6
Magnolia is a registered trademark used by permission
Version 1.0
7. Activities (Presenter)
• Activity
• the presenter of the MVP pattern
• start(region, eventbus)
• mayStop()
• onCacel()
• ActivityMapper
• maps places to activities
• ActivityManager
• reacts on PlaceChangeEvents
• starts the activity
7
Magnolia is a registered trademark used by permission
Version 1.0
8. View
• interface
• contract with the presenter
• a subclass will contain the UI specific code
• GWT, Vaadin, ...
• different device -> different views (mobile, iPad)
• LTR/RTL
• ViewFactory
8
Magnolia is a registered trademark used by permission
Version 1.0
9. PlaceController PlaceHistory
Place goTo(place) Handler
getWhere():Place
Home
fires PlaceChangeEvent
dispatches
EventBus ActivityManager ActivityMapper
onPlaceChange(event) getActivity(place):Activity
Activity
start(region, eventBus)
mayStop()
starts
onCancel()
onStop()
9
Magnolia is a registered trademark used by permission
Version 1.0
10. EventBus
• EventBus
• application level events
• ItemSelectedEvent, ItemDeletedEvent, ...
• UI events
• are handled by the presenter
• OnClickEvent, ...
10
Magnolia is a registered trademark used by permission
Version 1.0
12. Commands
• atom operation
• delete item
• save changes
• activate content
• undo/redo
• triggered by the presenter or application controller
• also exposed by the web services
12
Magnolia is a registered trademark used by permission
Version 1.0
13. Why should we use this
• separation of concerns
• less Vaadin dependent code
• history support
• different types of views
• aligned with GWT client side coding
13
Magnolia is a registered trademark used by permission
Version 1.0
14. What will we do
• use the blackboard Vaadin add-on (event bus)
• wiki page
• write the sever side classes (Place, Activity, ...)
• analog to GWT code
14
Magnolia is a registered trademark used by permission
Version 1.0
15. Resources
• MVP
• Model View Presenter (MVP) VS Model View Controller (.Net)
• GUI Architectures (Martin Fowler)
• GWT Architecture
• GWT 2.1 Activities - tbroyer's posterous
• GWT 2.1 Places - tbroyer's posterous
• GWT 2.1 Places – Part II - tbroyer's posterous
• GWT MVP Development with Activities and Places (GWT Documentation)
• SolamenteNiel - GWT: Model-View-Presenter Architecture Diagram
• Commands
• Command pattern (Wikipedia)
• Undo (Wikipedia)
• Memento pattern (Wikipedia)
15
Magnolia is a registered trademark used by permission
Version 1.0
