SlideShare a Scribd company logo
1 of 15
Magnolia 5.0 - Concept


                            UI Architecture




1
                 Magnolia is a registered trademark used by permission
Version 1.0
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
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
GWT 2.1 - the participants
•     Places
•     Display Regions
•     Activities (Presenter)
•     Views
•     EventBus




4
                         Magnolia is a registered trademark used by permission
Version 1.0
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
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
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
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
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
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
http://www.nieleyde.org/SkywayBlog/post.htm?postid=37782056-c4e1-4dfb-9caa-40ab9552ca3b




11
                                       Magnolia is a registered trademark used by permission
Version 1.0
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
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
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
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

More Related Content

Similar to Magnolia CMS 5.0 - UI Architecture

Hybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKit
Ariya Hidayat
 
Codestrong 2012 breakout session android internals and best practices
Codestrong 2012 breakout session   android internals and best practicesCodestrong 2012 breakout session   android internals and best practices
Codestrong 2012 breakout session android internals and best practices
Axway Appcelerator
 
Scaling Django with gevent
Scaling Django with geventScaling Django with gevent
Scaling Django with gevent
Mahendra M
 
managing georeferenced content with Plone and collective.geo
managing georeferenced content with Plone and collective.geomanaging georeferenced content with Plone and collective.geo
managing georeferenced content with Plone and collective.geo
gborelli
 

Similar to Magnolia CMS 5.0 - UI Architecture (20)

Javascript essential-pattern
Javascript essential-patternJavascript essential-pattern
Javascript essential-pattern
 
Rambler.iOS #6: App delegate - разделяй и властвуй
Rambler.iOS #6: App delegate - разделяй и властвуйRambler.iOS #6: App delegate - разделяй и властвуй
Rambler.iOS #6: App delegate - разделяй и властвуй
 
Hybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKit
 
Intro To webOS
Intro To webOSIntro To webOS
Intro To webOS
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
Codestrong 2012 breakout session android internals and best practices
Codestrong 2012 breakout session   android internals and best practicesCodestrong 2012 breakout session   android internals and best practices
Codestrong 2012 breakout session android internals and best practices
 
What’s new in aNdroid [Google I/O Extended Bangkok 2016]
What’s new in aNdroid [Google I/O Extended Bangkok 2016]What’s new in aNdroid [Google I/O Extended Bangkok 2016]
What’s new in aNdroid [Google I/O Extended Bangkok 2016]
 
Html5
Html5Html5
Html5
 
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
 
OSGi and Eclipse RCP
OSGi and Eclipse RCPOSGi and Eclipse RCP
OSGi and Eclipse RCP
 
Meiga Guadec 2009 English
Meiga Guadec 2009 EnglishMeiga Guadec 2009 English
Meiga Guadec 2009 English
 
Scaling Django with gevent
Scaling Django with geventScaling Django with gevent
Scaling Django with gevent
 
Jollen's Presentation: Introducing Android low-level
Jollen's Presentation: Introducing Android low-levelJollen's Presentation: Introducing Android low-level
Jollen's Presentation: Introducing Android low-level
 
Reactive state management with Jetpack Components
Reactive state management with Jetpack ComponentsReactive state management with Jetpack Components
Reactive state management with Jetpack Components
 
MvvmQuickCross for Windows Phone
MvvmQuickCross for Windows PhoneMvvmQuickCross for Windows Phone
MvvmQuickCross for Windows Phone
 
Guides To Analyzing WebKit Performance
Guides To Analyzing WebKit PerformanceGuides To Analyzing WebKit Performance
Guides To Analyzing WebKit Performance
 
Java-Events
Java-EventsJava-Events
Java-Events
 
managing georeferenced content with Plone and collective.geo
managing georeferenced content with Plone and collective.geomanaging georeferenced content with Plone and collective.geo
managing georeferenced content with Plone and collective.geo
 
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
 

More from Philipp Bärfuss

Magnolia 5 - Under the Hood
Magnolia 5 - Under the HoodMagnolia 5 - Under the Hood
Magnolia 5 - Under the Hood
Philipp Bärfuss
 
Magnolia CMS 5.0 - Three perspectives
Magnolia CMS 5.0   - Three perspectivesMagnolia CMS 5.0   - Three perspectives
Magnolia CMS 5.0 - Three perspectives
Philipp Bärfuss
 

More from Philipp Bärfuss (7)

NoCMS - from monolithic CMS to dissolved CMS
NoCMS - from monolithic CMS to dissolved CMSNoCMS - from monolithic CMS to dissolved CMS
NoCMS - from monolithic CMS to dissolved CMS
 
Magnolia Personalization Keynote Amplify 2014
Magnolia Personalization Keynote Amplify 2014Magnolia Personalization Keynote Amplify 2014
Magnolia Personalization Keynote Amplify 2014
 
Magnolia 5 - Under the Hood
Magnolia 5 - Under the HoodMagnolia 5 - Under the Hood
Magnolia 5 - Under the Hood
 
Magnolia CMS 5.0 - JCR 2.0 and Content API
Magnolia CMS 5.0 - JCR 2.0 and Content APIMagnolia CMS 5.0 - JCR 2.0 and Content API
Magnolia CMS 5.0 - JCR 2.0 and Content API
 
Magnolia CMS Roadmap - Beyond 5.0
Magnolia CMS Roadmap - Beyond 5.0Magnolia CMS Roadmap - Beyond 5.0
Magnolia CMS Roadmap - Beyond 5.0
 
Magnolia CMS 5.0 - Three perspectives
Magnolia CMS 5.0   - Three perspectivesMagnolia CMS 5.0   - Three perspectives
Magnolia CMS 5.0 - Three perspectives
 
Magnolia 5.0 'GenUIne'
Magnolia 5.0 'GenUIne'Magnolia 5.0 'GenUIne'
Magnolia 5.0 'GenUIne'
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Recently uploaded (20)

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 

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
  • 11. http://www.nieleyde.org/SkywayBlog/post.htm?postid=37782056-c4e1-4dfb-9caa-40ab9552ca3b 11 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

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n