Embed Size (px)
Citation preview
@MAGNOLIA_CMS �1
Magnolia CMS & Vaadin Integration: A Hot FusionAleksandr Pchelintcev, Magnolia Espen Jervidalo, Magnolia
Frankfurt am Main, December 17 2013
@MAGNOLIA_CMS �2
Aleksandr PchelintcevSr. Software Engineer, Magnolia
@MAGNOLIA_CMS �3
Espen JervidaloSr. Software Engineer, Magnolia
@MAGNOLIA_CMS �4
®
@MAGNOLIA_CMS �5
MAGNOLIA AMERICAS
MAGNOLIA ASIA
MAGNOLIA INTERNATIONAL
MAGNOLIA SPAIN
MAGNOLIA CZECH REPUBLIC
@MAGNOLIA_CMS@MAGNOLIA_CMS �6
Selected Customers
@MAGNOLIA_CMS@MAGNOLIA_CMS �7
Al Arabiya
@MAGNOLIA_CMS �8
Magnolia CMSBest of breed open stack
100% Java/J2EE compliant Apache Jackrabbit (JCR 2.0/JSR-283) GWT and Vaadin
Designed for customisation and extensibility Open Source (GPL)
@MAGNOLIA_CMS �9
Attractive CMSOxymoron?
@MAGNOLIA_CMS �10
@MAGNOLIA_CMS �11
@MAGNOLIA_CMS �12
Magnolia Shell Apps Website
@MAGNOLIA_CMS �13
Magnolia Shell Apps
@MAGNOLIA_CMS �14
Journey Challenges
@MAGNOLIA_CMS �15
OLD ADMIN
UI
@MAGNOLIA_CMS �16
DESIGN
PROPOSAL
@MAGNOLIA_CMS �17
Why Vaadin?Java
Close to Swing Reusable components Well-documented Pure JUnit testing Fewer compiles (compared to plain GWT)
@MAGNOLIA_CMS �18
Vaadin
Prototype
@MAGNOLIA_CMS �19
3000 UX
mockups
@MAGNOLIA_CMS �22
Challengesconceptual technical
@MAGNOLIA_CMS@MAGNOLIA_CMS �23
Magnolia Shell
Foundation for Apps Navigation dispatching Transitions
@MAGNOLIA_CMS@MAGNOLIA_CMS@MAGNOLIA_CMS@MAGNOLIA_CMS �24
Apps
SERVER
LocationController
CLIENT
Shell ConnectorLOCATION
VIEWRP
C/ST
ATE MagnoliaShellView
!Viewport WidgetViewport
Magnolia Shell
@MAGNOLIA_CMS@MAGNOLIA_CMS �25
Navigation handling inspired by Activity/Places framework Brought to server-side Adapted to AdminCentral use-case
Magnolia Shell
@MAGNOLIA_CMS@MAGNOLIA_CMS@MAGNOLIA_CMS@MAGNOLIA_CMS �26
Transition QuirksJS Transitions - terribly slow JQuery.animate-enhanced for hardware accelerated transitions! GwtQuery 1.4.0 for substitution?
@MAGNOLIA_CMS@MAGNOLIA_CMS@MAGNOLIA_CMS@MAGNOLIA_CMS �27
Mobile Gotchas MGWT for touch events and gestures Fake transforms:
-webkit-transform: translateZ(0) -webkit-backface-visibility: hidden;
Closure Compiler: 25% less JS Icon fonts: crispy sharp icons.
@MAGNOLIA_CMS �28
Conceptual Challenges
@MAGNOLIA_CMS �30
Magnolia Core
Vaadin
Widgets
UI Framework
Apps
@MAGNOLIA_CMS �31
App Framework
@MAGNOLIA_CMS
CONTENT APP PACKAGE
APP FRAMEWORK
MY PROJECT
�32
MyApp
BaseApp
App
MySubApp
BaseSubApp
SubApp
MySubAppView
BrowserSubApp
DetailSubApp
@MAGNOLIA_CMS �33
What can the App framework do for you?
@MAGNOLIA_CMS �34
LifecycleYou don’t have to care about it
You can hook into it Location objects
bean wrapping the url fragment used for navigation
@MAGNOLIA_CMS �35
#app:<appName>:<subAppId>:<param1;param2>
URL Fragments
@MAGNOLIA_CMS@MAGNOLIA_CMS
#app:<appName>:<subAppId>:<param1;param2
�36
@MAGNOLIA_CMS �37
IoCstandard
@Inject based on guice
configured nearly every component can be replaced
scopes main, app, subapp
@MAGNOLIA_CMS@MAGNOLIA_CMS �38
public class MySubApp extends BaseSubApp<MyView> { ! private final EventBus eventBus; ! @Inject public MySubApp( @Named(AppEventBus.NAME) EventBus eventBus, SubAppContext subAppContext, MyView view){ ! super(subAppContext, view); this.eventBus = eventBus; }
My App
@MAGNOLIA_CMS �39
Conceptual Challenge not yet solved
@MAGNOLIA_CMS �40
Content App Declarative UI
@MAGNOLIA_CMS �41
@MAGNOLIA_CMS �42
@MAGNOLIA_CMS �43
@MAGNOLIA_CMS@MAGNOLIA_CMS �44
public class MyView implements View { Component label = new Label(“Hello Gwt.create!”); ! @Override Component asVaadinComponent() { return label; } }
My View
@MAGNOLIA_CMS �45
@MAGNOLIA_CMS �46
@MAGNOLIA_CMS �47
How does that help non-programmers extending the system?
@MAGNOLIA_CMS@MAGNOLIA_CMS �48
Model-View-Presenter Pattern
Presenter
Model
View
EventBus
@MAGNOLIA_CMS@MAGNOLIA_CMS �49
Vaadin UI
FieldFactory
FormBuilder
EditorPresenter
JCR (Config) Editor Definition
@MAGNOLIA_CMS@MAGNOLIA_CMS �50
Eventually you configure the UI within the UI
@MAGNOLIA_CMS �51
@MAGNOLIA_CMS �52
@MAGNOLIA_CMS �53
Technical challenge solved. Conceptual challenge solved.
@MAGNOLIA_CMS �54
We hopewe raised interest & curiosity you’ll consider Magnolia CMS you have some questions
.. that we can answer
