Overview of the new Magnolia CMS 5.0 Architecture

1. Magnolia 5.0
Architecture
local louisville/Reflecting Pool at Pulitzer/Flickr

2. Web Browser AdminCentral
Web pages, Vaadin (GWT) CMIS JCR
Images, .. App App
HTTP AJAX/JSON REST/Atom
Web Services
Rendering Engine Vaadin
(CMIS)
Templates Content
UI Model
Model
JCR
Node
Security ... ... Mixins
Types
2
Magnolia is a registered trademark used by permission
Version 1.0

3. WebServices (CMIS)
• will use the CMIS API
• Content Management Interoperability Services
• standardized
• fits JCR specification
• REST
• uses Atom format
• open source implementation exists
• Apache Chemistry (OpenCMIS)
3
Magnolia is a registered trademark used by permission
Version 1.0

4. IoC/DI (Dependency Injection)
• we gradually introduce IoC
• for components
• for the new UI
• we use PicoContainer
• constructor injection
4
Magnolia is a registered trademark used by permission
Version 1.0

5. Vaadin
5
Magnolia is a registered trademark used by permission
Version 1.0

6. Vaadin
• Rich widget framework
• Out-of-the-box theming
• Java developer friendly
• Close to Swing
• GWT based (Java -> Javascript)
• Can integrate any GWT-components
• Rare GWT-compiles (compared to plain GWT)
• Testing with pure JUnit
• Apache License
• Well documented
6
Magnolia is a registered trademark used by permission
Version 1.0

7. UI - Architecture
7
Magnolia is a registered trademark used by permission
Version 1.0

8. Model
View
MVP
Presenter
UI - Architecture
7
Magnolia is a registered trademark used by permission
Version 1.0

9. Model
View
MVP
Presenter
UI - Architecture
Activities
GWT
Places
Editors
7
Magnolia is a registered trademark used by permission
Version 1.0

10. Model
View
MVP
Presenter
UI - Architecture
Activities
guice
GWT IoC
pico
Places
Editors
7
Magnolia is a registered trademark used by permission
Version 1.0

11. GWT concepts as a blueprint
promoter of MVP GWT promoted to use the MVP for a
while.
widget oriented GWT applications are widget
oriented. Vaadin too.
real web applications proper history support, separation
of browser dependent code
ready made the fundamental framework is
provided since GWT 2.1
8
Magnolia is a registered trademark used by permission
Version 1.0

12. T.Young/MVP/Flickr

13. What?
T.Young/MVP/Flickr

14. Model - View - Presenter (MVP)
updates the widgets provides the data to
and handles UI events the view and interacts
like click events with the application
View Presenter
the view has not
binding to the model
Model EventBus
10
Magnolia is a registered trademark used by permission
Version 1.0

15. MVP - Example
TreeView TreePresenter
selectItem(path) notifies
onItemSelected(path)
expand(path)
refresh()
TreeActivity
Vaadin specific
updates
implementation start()
onStop()
TreeViewImpl
11
Magnolia is a registered trademark used by permission
Version 1.0

16. Main Participants
• Place - Application Navigation
• Activitiy - The Presenter
• View - the UI widgets
• ViewPort - UI region
• EventBus - Application Events
12
Magnolia is a registered trademark used by permission
Version 1.0

17. Places - Navigation
• the state representing the UI location
• what is showed (inbox, detail view)
• used for the application navigation
• PlaceController.goTo(place)
• mapped to activities
• ActivityMapper.getActivity(place)
• bound to the browser history
• by the PlaceHistoryHandler
13
Magnolia is a registered trademark used by permission
Version 1.0

18. Places - Navigation
BrowserHistory
onFragmentChange(event) setFragment(token)
PlaceHistoryHandler PlaceHistoryMapper
onFragmentChange(event) getPlace(String token): Place
onPlaceChange(event) getToken(Place place): String
goTo(place)
PlaceController
goTo(place)
getWhere(): Place
onPlaceChange(event)
fireEvent(placeChanged)
EventBus
14
Magnolia is a registered trademark used by permission
Version 1.0

19. Activity - ActivityManager
• an activity has the presenter role in the MVP pattern
• AcivityManager
• bound to a region in the UI (ViewPort)
• calls start(viewPort, eventBus) to start the activity
• calls onStop() to stop an activity
• injects the view into the the viewport
• PlaceController
• calls mayStop() to test if an activity can be leaved
• shows confirmation dialog if needed
15
Magnolia is a registered trademark used by permission
Version 1.0

20. Activity - ActivityManager
ActivityManager getActivity(place) ActivityMapper
onPlaceChange(event) getActivity(place): Activity
<<create>>
start(), onStop()
Activity
start(viewPort, eventBus)
mayStop(): String
onStop()
onPlaceChange(event) fires application events
EventBus
16
Magnolia is a registered trademark used by permission
Version 1.0

21. View
• interface
• contract with the presenter
• an implementation has the Vaadin specific code
• different device -> different views (mobile, iPad)
• LTR/RTL
• UIBuilders
17
Magnolia is a registered trademark used by permission
Version 1.0

22. Places - Activities - ViewPorts
BrowserHistory
Application
ViewPort
PlaceHistoryHandler start, stop
ActivityManager Activity View
goTo(place)
PlaceController
ViewPort
ActivityManager Activity View
onPlaceChange(event)
fireEvent(placeChanged)
EventBus
18
Magnolia is a registered trademark used by permission
Version 1.0

23. EventBus
• EventBus
• application level events
• ItemSelectedEvent, ItemDeletedEvent, ...
• UI events
• are handled by the view itself
• OnClickEvent, ...
19
Magnolia is a registered trademark used by permission
Version 1.0

24. Shell
• encapsulates the browser
• notify()
• confirm(message)
• URI fragment manipulations
• getURIFragment()
• setURIFragment()
20
Magnolia is a registered trademark used by permission
Version 1.0

25. Sub MVP Container
• an Activity can be a MVP container on its own
• creates a SubShell to interact with sub-fragments of the URI
fragment
• creates its own place management (PlaceController, PlaceHandler)
• has its own inner EventBus
• subclasses can access the outer environment
21
Magnolia is a registered trademark used by permission
Version 1.0

26. UI Model
• POJOs (Definitions)
UI Builder
• dialogs, trees, actions
• Vaadin independent UI Model
• contributed in various ways Actions Trees
Module Dialogs
• configuration Code
• annotations Node Types
Configuration (c2b) Annotations
• programmatically
• UI Builder builds the Vaadin
components
22
Magnolia is a registered trademark used by permission
Version 1.0

27. UI Builder
UI Model
Actions Trees
Module Dialogs
Code
Node Types
Configuration (c2b) Annotations
23
Magnolia is a registered trademark used by permission
Version 1.0

28. UI Definitions and Builders
ActionFactory
Activity uses
createAction(ActionDefinition<A>): A
uses
uses
<<creates>>
UIModel
ActionDefinition<A> Action
getActionDefinition(name): ActionDefintion
perform()
Potentially built with
could we generate them?
content2bean
24
Magnolia is a registered trademark used by permission
Version 1.0

29. Editors - Drivers
• Editor
• exposed by the View (HasEditors)
• to populate the View with data
• to retrieve the values entered by the user
• Driver
• injects the values into the editors
• updates the underlaying model (node, bean)
• validates the data
• Used in various editable views
• DialogView, TreeView, ParagraphEditView, ...
25
Magnolia is a registered trademark used by permission
Version 1.0

30. Used by the driver to
expose values and
retrieve the new values
Any view exposing
editors. TreeView,
Editor<T> HasEditors DialogView,
ParagraphView, ...
setValue(T) getEditors()
getValue(): T getEditor(name): Editor
builds DialogBuilder
DialogView
Driver<T> build(definition): DialogView
Populates the editors.
Updates and validates
the edited object. Driver(HasEditors)
edit(T)
flush(T) uses
hasErrors()
getErrors()
DialogActivity
save()
cancel() DialogDefintion
saves The presenter, called
by the view. Delegates
updates, to the Driver but is
validates responsible for saving.
NodeDriver Node
26
Magnolia is a registered trademark used by permission
Version 1.0

31. Actions vs. Commands
UI Model Content Model
invoke
Action execute Command
open
navigate execute
notify
PlaceController Web Services
27
Magnolia is a registered trademark used by permission
Version 1.0

32. Commands
• atom operation
• delete item
• save changes
• activate content
• undo/redo
• also exposed by the web services
28
Magnolia is a registered trademark used by permission
Version 1.0

33. Content Model
• centralized node type definitions
• constraints (used in the UI, web Web Services
services, ..)
Vaadin
(CMIS)
• entities (paragraphs belong to Content Model
pages, ..) Constraints Commands
• versioning Lifecycle
Virtual
Structures
• use mixins
• mix:metaData instead of sub node
JCR
Node
Mixins
Types
• faster and simpler queries
• lifecycle, workflow, status
• virtual structures
29
Magnolia is a registered trademark used by permission
Version 1.0

34. Web Services
Vaadin
(CMIS)
Content Model
Constraints Commands
Virtual
Lifecycle
Structures
JCR
Node
Mixins
Types
30
Magnolia is a registered trademark used by permission
Version 1.0

35. Content API/JCR API
• move content security to the JCR
layer New Legacy
Code Code
• new code uses the JCR API
• profit from other JCR frameworks
and libraries Content API
• example Vaadin JCR Container
Security
• keep the Content API alive for legacy JCR API Security
code
• better performance, esp. for queries
31
Magnolia is a registered trademark used by permission
Version 1.0

36. References ...
• MVP
• Model View Presenter (MVP) VS Model View Controller (.Net)
• GUI Architectures (Martin Fowler)
• GWT Activity and Places
• 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)
• GWT Editors
• GWT 2.1 Editors - tbroyer's posterous
• Developer's Guide - Editors - (GWT Documentation)
32
Magnolia is a registered trademark used by permission
Version 1.0

37. References
• Commands
• Command pattern (Wikipedia)
• Undo (Wikipedia)
• Memento pattern (Wikipedia)
33
Magnolia is a registered trademark used by permission
Version 1.0