This document discusses the integration of Magnolia CMS with Vaadin. It summarizes the challenges in integrating the two systems both conceptually and technically. Some key challenges discussed are handling navigation, transitions on mobile, and ensuring non-programmers can extend the system. The integration was successful in solving both the technical and conceptual challenges through an app framework and model-view-presenter pattern that allows configuring the UI within the UI.

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

22. Challenges
conceptual
technical
@MAGNOLIA_CMS
22

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

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

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

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

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
27

28. Conceptual
Challenges
@MAGNOLIA_CMS
28

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

31. App Framework
@MAGNOLIA_CMS
31

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

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

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

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

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

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

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

39. Conceptual Challenge not yet solved
@MAGNOLIA_CMS
39

40. Content App
Declarative UI
@MAGNOLIA_CMS
40

41. @MAGNOLIA_CMS
41

42. @MAGNOLIA_CMS
42

43. @MAGNOLIA_CMS
43

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

45. @MAGNOLIA_CMS
45

46. @MAGNOLIA_CMS
46

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

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

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

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

51. @MAGNOLIA_CMS
51

52. @MAGNOLIA_CMS
52

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

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

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