1.
Magnolia CMS &
Vaadin Integration:
A Hot Fusion
Aleksandr Pchelintcev, Magnolia
Espen Jervidalo, Magnolia
@MAGNOLIA_CMS
Frankfurt am Main, December 17 2013
1

2.
Aleksandr Pchelintcev
Sr. Software Engineer, Magnolia
@MAGNOLIA_CMS
2

3.
Espen Jervidalo
Sr. Software Engineer, Magnolia
@MAGNOLIA_CMS
3

4.
®
@MAGNOLIA_CMS
4

5.
MAGNOLIA
INTERNATIONAL
MAGNOLIA
CZECH REPUBLIC
MAGNOLIA
AMERICAS
@MAGNOLIA_CMS
MAGNOLIA
ASIA
MAGNOLIA
SPAIN
5

6.
Selected Customers
@MAGNOLIA_CMS
6

7.
Al Arabiya
@MAGNOLIA_CMS
7

8.
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

9.
Attractive CMS
Oxymoron?
@MAGNOLIA_CMS
9

10.
@MAGNOLIA_CMS
10

11.
@MAGNOLIA_CMS
11

12.
Magnolia Shell
@MAGNOLIA_CMS
Apps
Website
12

13.
Magnolia Shell
@MAGNOLIA_CMS
Apps
13

14.
Journey
Challenges
@MAGNOLIA_CMS
14

15.
DMIN
LD A
O
UI
@MAGNOLIA_CMS
15

16.
SIGN
DE
OSAL
PROP
@MAGNOLIA_CMS
16

17.
Why Vaadin?
Java
Close to Swing
Reusable components
Well-documented
Pure JUnit testing
Fewer compiles (compared to
plain GWT)
@MAGNOLIA_CMS
17

18.
aadin
V
type
roto
P
@MAGNOLIA_CMS
18

19.
@MAGNOLIA_CMS
19

20.
00 UX
30
kups
moc

21.
Challenges
conceptual
technical
@MAGNOLIA_CMS
22

22.
Magnolia Shell
Foundation for Apps
Navigation dispatching
Transitions
@MAGNOLIA_CMS
23

23.
CLIENT
SERVER
Apps
Magnolia
Shell
RPC/STATE
LocationController
LOCATION
Viewport
Shell Connector
MagnoliaShellView
!
Viewport
Widget
VIEW
@MAGNOLIA_CMS
24

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

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

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

27.
Conceptual
Challenges
@MAGNOLIA_CMS
28

28.
Apps
UI Framework
Widgets
Vaadin
Magnolia Core
@MAGNOLIA_CMS
30

29.
App Framework
@MAGNOLIA_CMS
31

30.
APP FRAMEWORK
App
SubApp
DetailSubApp
BaseApp
BaseSubApp
BrowserSubApp
CONTENT APP PACKAGE
MyApp
MySubApp
MySubAppView
MY PROJECT
@MAGNOLIA_CMS
32

31.
What can the App
framework do for you?
@MAGNOLIA_CMS
33

32.
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

33.
#app:<appName>:<subAppId>:<param1;param2>
URL Fragments
@MAGNOLIA_CMS
35

34.
#app:<appName>:<subAppId>:<param1;param2
@MAGNOLIA_CMS
36

35.
IoC
standard
@Inject
based on guice
configured
nearly every component can be replaced
scopes
main, app, subapp
@MAGNOLIA_CMS
37

36.
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

37.
Conceptual Challenge not yet solved
@MAGNOLIA_CMS
39

38.
Content App
Declarative UI
@MAGNOLIA_CMS
40

39.
@MAGNOLIA_CMS
41

40.
@MAGNOLIA_CMS
42

41.
@MAGNOLIA_CMS
43

42.
My View
public class MyView implements View {
Component label = new Label(“Hello Gwt.create!”);
!
@Override
Component asVaadinComponent() {
return label;
}
}
@MAGNOLIA_CMS
44

43.
@MAGNOLIA_CMS
45

44.
@MAGNOLIA_CMS
46

45.
How does that help non-programmers
extending the system?
@MAGNOLIA_CMS
47

46.
Model-View-Presenter Pattern
View
Model
@MAGNOLIA_CMS
Presenter
EventBus
48

47.
JCR (Config)
Editor Definition
EditorPresenter
FormBuilder
FieldFactory
Vaadin UI
@MAGNOLIA_CMS
49

48.
Eventually you configure the UI
within the UI
@MAGNOLIA_CMS
50

49.
@MAGNOLIA_CMS
51

50.
@MAGNOLIA_CMS
52

51.
Technical challenge solved.
Conceptual challenge solved.
@MAGNOLIA_CMS
53

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

53.
Thanks for your attention!
www.magnolia-cms.com
@MAGNOLIA_CMS
55