Magnolia CMS 5.0 - Architecture

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

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 Types2 Magnolia is a registered trademark used by permissionVersion 1.0

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 permissionVersion 1.0

IoC/DI (Dependency Injection)• we gradually introduce IoC • for components • for the new UI• we use PicoContainer • constructor injection4 Magnolia is a registered trademark used by permissionVersion 1.0

Vaadin5 Magnolia is a registered trademark used by permissionVersion 1.0

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 documented6 Magnolia is a registered trademark used by permissionVersion 1.0

UI - Architecture7 Magnolia is a registered trademark used by permissionVersion 1.0

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

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

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

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.18 Magnolia is a registered trademark used by permissionVersion 1.0

T.Young/MVP/Flickr

What? T.Young/MVP/Flickr

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 EventBus10 Magnolia is a registered trademark used by permissionVersion 1.0

MVP - Example TreeView TreePresenter selectItem(path) notiﬁes onItemSelected(path) expand(path) refresh() TreeActivity Vaadin speciﬁc updates implementation start() onStop() TreeViewImpl11 Magnolia is a registered trademark used by permissionVersion 1.0

Main Participants• Place - Application Navigation• Activitiy - The Presenter• View - the UI widgets• ViewPort - UI region• EventBus - Application Events12 Magnolia is a registered trademark used by permissionVersion 1.0

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 PlaceHistoryHandler13 Magnolia is a registered trademark used by permissionVersion 1.0

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) ﬁreEvent(placeChanged) EventBus14 Magnolia is a registered trademark used by permissionVersion 1.0

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 needed15 Magnolia is a registered trademark used by permissionVersion 1.0

Activity - ActivityManager ActivityManager getActivity(place) ActivityMapper onPlaceChange(event) getActivity(place): Activity <<create>> start(), onStop() Activity start(viewPort, eventBus) mayStop(): String onStop() onPlaceChange(event) ﬁres application events EventBus16 Magnolia is a registered trademark used by permissionVersion 1.0

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

Places - Activities - ViewPorts BrowserHistory Application ViewPort PlaceHistoryHandler start, stop ActivityManager Activity View goTo(place) PlaceController ViewPort ActivityManager Activity View onPlaceChange(event) ﬁreEvent(placeChanged) EventBus18 Magnolia is a registered trademark used by permissionVersion 1.0

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

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

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 environment21 Magnolia is a registered trademark used by permissionVersion 1.0

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 components22 Magnolia is a registered trademark used by permissionVersion 1.0

UI Builder UI Model Actions Trees Module Dialogs Code Node Types Configuration (c2b) Annotations23 Magnolia is a registered trademark used by permissionVersion 1.0

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? content2bean24 Magnolia is a registered trademark used by permissionVersion 1.0

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 permissionVersion 1.0

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 Node26 Magnolia is a registered trademark used by permissionVersion 1.0

Actions vs. Commands UI Model Content Model invoke Action execute Command open navigate execute notify PlaceController Web Services27 Magnolia is a registered trademark used by permissionVersion 1.0

Commands• atom operation • delete item • save changes • activate content• undo/redo• also exposed by the web services28 Magnolia is a registered trademark used by permissionVersion 1.0

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 structures29 Magnolia is a registered trademark used by permissionVersion 1.0

Web Services Vaadin (CMIS) Content Model Constraints Commands Virtual Lifecycle Structures JCR Node Mixins Types30 Magnolia is a registered trademark used by permissionVersion 1.0

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 queries31 Magnolia is a registered trademark used by permissionVersion 1.0

References ...• MVP • Model View Presenter (MVP) VS Model View Controller (.Net) • GUI Architectures (Martin Fowler)• GWT Activity and Places • GWT 2.1 Activities - tbroyers posterous • GWT 2.1 Places - tbroyers posterous • GWT 2.1 Places – Part II - tbroyers posterous • GWT MVP Development with Activities and Places (GWT Documentation)• GWT Editors • GWT 2.1 Editors - tbroyers posterous • Developers Guide - Editors - (GWT Documentation)32 Magnolia is a registered trademark used by permissionVersion 1.0

References• Commands • Command pattern (Wikipedia) • Undo (Wikipedia) • Memento pattern (Wikipedia)33 Magnolia is a registered trademark used by permissionVersion 1.0

http://philipp-baerfuss-magnolia.blogspot.com	154
http://www.magnolia-cms.com	17
http://author.magnolia-cms.com	5

Magnolia CMS 5.0 - Architecture

by Philipp Bärfuss on Mar 03, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 176

Statistics

Magnolia CMS 5.0 - Architecture — Presentation Transcript