Magnolia CMS and Vaadin integration

@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

@MAGNOLIA_CMS �55

www.magnolia-cms.com

Thanks for your attention!