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