KEMBAR78
Magnolia CMS and Vaadin integration | PDF
Magnolia CMS &
Vaadin Integration:
A Hot Fusion
Aleksandr Pchelintcev, Magnolia
Espen Jervidalo, Magnolia

@MAGNOLIA_CMS

Frankfurt am Main, December 17 2013

1
Aleksandr Pchelintcev
Sr. Software Engineer, Magnolia

@MAGNOLIA_CMS

2
Espen Jervidalo

Sr. Software Engineer, Magnolia

@MAGNOLIA_CMS

3
®

@MAGNOLIA_CMS

4
MAGNOLIA
INTERNATIONAL

MAGNOLIA
CZECH REPUBLIC
MAGNOLIA
AMERICAS

@MAGNOLIA_CMS

MAGNOLIA
ASIA

MAGNOLIA
SPAIN

5
Selected Customers

@MAGNOLIA_CMS

6
Al Arabiya

@MAGNOLIA_CMS

7
Magnolia CMS
Best 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

8
Attractive CMS
Oxymoron?

@MAGNOLIA_CMS

9
@MAGNOLIA_CMS

10
@MAGNOLIA_CMS

11
Magnolia Shell

@MAGNOLIA_CMS

Apps

Website

12
Magnolia Shell

@MAGNOLIA_CMS

Apps

13
Journey
Challenges
@MAGNOLIA_CMS

14
DMIN
LD A
O
UI

@MAGNOLIA_CMS

15
SIGN
DE
OSAL
PROP

@MAGNOLIA_CMS

16
Why Vaadin?
Java 
Close to Swing

Reusable components
Well-documented
Pure JUnit testing
Fewer compiles (compared to
plain GWT)

@MAGNOLIA_CMS

17
aadin
V
type
roto
P

@MAGNOLIA_CMS

18
@MAGNOLIA_CMS

19
00 UX
30
kups
moc
Challenges
conceptual
technical

@MAGNOLIA_CMS

22
Magnolia Shell
Foundation for Apps
Navigation dispatching
Transitions

@MAGNOLIA_CMS

23
CLIENT

SERVER

Apps

Magnolia
Shell

RPC/STATE

LocationController

LOCATION

Viewport

Shell Connector
MagnoliaShellView
!

Viewport
Widget

VIEW

@MAGNOLIA_CMS

24
Magnolia Shell
Navigation handling inspired by
Activity/Places framework
Brought to server-side
Adapted to AdminCentral use-case

@MAGNOLIA_CMS

25
Transition Quirks
JS Transitions - terribly slow
JQuery.animate-enhanced for
hardware accelerated transitions!
GwtQuery 1.4.0 for substitution?

@MAGNOLIA_CMS

26
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

27
Conceptual
Challenges
@MAGNOLIA_CMS

28
Apps
UI Framework
Widgets
Vaadin
Magnolia Core

@MAGNOLIA_CMS

30
App Framework

@MAGNOLIA_CMS

31
APP FRAMEWORK
App

SubApp
DetailSubApp

BaseApp

BaseSubApp
BrowserSubApp
CONTENT APP PACKAGE

MyApp

MySubApp

MySubAppView
MY PROJECT

@MAGNOLIA_CMS

32
What can the App
framework do for you?

@MAGNOLIA_CMS

33
Lifecycle
You don’t have to care about it
You can hook into it

Location objects

bean wrapping the url fragment used for
navigation

@MAGNOLIA_CMS

34
#app:<appName>:<subAppId>:<param1;param2>

URL Fragments

@MAGNOLIA_CMS

35
#app:<appName>:<subAppId>:<param1;param2

@MAGNOLIA_CMS

36
IoC
standard
@Inject
based on guice

configured

nearly every component can be replaced

scopes

main, app, subapp

@MAGNOLIA_CMS

37
My App
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;
}

@MAGNOLIA_CMS

38
Conceptual Challenge not yet solved

@MAGNOLIA_CMS

39
Content App
Declarative UI

@MAGNOLIA_CMS

40
@MAGNOLIA_CMS

41
@MAGNOLIA_CMS

42
@MAGNOLIA_CMS

43
My View
public class MyView implements View {
Component label = new Label(“Hello Gwt.create!”);
!

@Override
Component asVaadinComponent() {
return label;
}
}

@MAGNOLIA_CMS

44
@MAGNOLIA_CMS

45
@MAGNOLIA_CMS

46
How does that help non-programmers
extending the system?

@MAGNOLIA_CMS

47
Model-View-Presenter Pattern

View

Model
@MAGNOLIA_CMS

Presenter

EventBus
48
JCR (Config)

Editor Definition

EditorPresenter

FormBuilder
FieldFactory

Vaadin UI
@MAGNOLIA_CMS

49
Eventually you configure the UI
within the UI

@MAGNOLIA_CMS

50
@MAGNOLIA_CMS

51
@MAGNOLIA_CMS

52
Technical challenge solved.
Conceptual challenge solved.

@MAGNOLIA_CMS

53
We hope
we raised interest & curiosity
you’ll consider Magnolia CMS
you have some questions
.. that we can answer

@MAGNOLIA_CMS

54
Thanks for your attention!

www.magnolia-cms.com
@MAGNOLIA_CMS

55

Magnolia CMS and Vaadin integration