Magnolia CMS &
Vaadin Integration:
A Hot Fusion
Aleksandr Pchelintcev, Magnolia
Espen Jervidalo, Magnolia

@MAGNOLIA_CMS

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

Designe...
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...
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...
Magnolia Shell
Navigation handling inspired by
Activity/Places framework
Brought to server-side
Adapted to AdminCentral us...
Transition Quirks
JS Transitions - terribly slow
JQuery.animate-enhanced for
hardware accelerated transitions!
GwtQuery 1....
Mobile Gotchas
MGWT for touch events and
gestures
Fake transforms:
-webkit-transform: translateZ(0)
-webkit-backface-visib...
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

MySubAppVi...
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
...
#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

@MAGNOL...
My App
public class MySubApp
extends BaseSubApp<MyView> {
!

private final EventBus eventBus;
!

@Inject
public MySubApp(
...
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 asV...
@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

@MAGNOL...
Thanks for your attention!

www.magnolia-cms.com
@MAGNOLIA_CMS

55
Magnolia CMS and Vaadin integration
Magnolia CMS and Vaadin integration
Upcoming SlideShare
Loading in …5
×

Magnolia CMS and Vaadin integration

2,501 views

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,501
On SlideShare
0
From Embeds
0
Number of Embeds
523
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Magnolia CMS and Vaadin integration

  1. 1. Magnolia CMS & Vaadin Integration: A Hot Fusion Aleksandr Pchelintcev, Magnolia Espen Jervidalo, Magnolia @MAGNOLIA_CMS Frankfurt am Main, December 17 2013 1
  2. 2. Aleksandr Pchelintcev Sr. Software Engineer, Magnolia @MAGNOLIA_CMS 2
  3. 3. Espen Jervidalo Sr. Software Engineer, Magnolia @MAGNOLIA_CMS 3
  4. 4. ® @MAGNOLIA_CMS 4
  5. 5. MAGNOLIA INTERNATIONAL MAGNOLIA CZECH REPUBLIC MAGNOLIA AMERICAS @MAGNOLIA_CMS MAGNOLIA ASIA MAGNOLIA SPAIN 5
  6. 6. Selected Customers @MAGNOLIA_CMS 6
  7. 7. Al Arabiya @MAGNOLIA_CMS 7
  8. 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. 9. Attractive CMS Oxymoron? @MAGNOLIA_CMS 9
  10. 10. @MAGNOLIA_CMS 10
  11. 11. @MAGNOLIA_CMS 11
  12. 12. Magnolia Shell @MAGNOLIA_CMS Apps Website 12
  13. 13. Magnolia Shell @MAGNOLIA_CMS Apps 13
  14. 14. Journey Challenges @MAGNOLIA_CMS 14
  15. 15. DMIN LD A O UI @MAGNOLIA_CMS 15
  16. 16. SIGN DE OSAL PROP @MAGNOLIA_CMS 16
  17. 17. Why Vaadin? Java Close to Swing Reusable components Well-documented Pure JUnit testing Fewer compiles (compared to plain GWT) @MAGNOLIA_CMS 17
  18. 18. aadin V type roto P @MAGNOLIA_CMS 18
  19. 19. @MAGNOLIA_CMS 19
  20. 20. 00 UX 30 kups moc
  21. 21. Challenges conceptual technical @MAGNOLIA_CMS 22
  22. 22. Magnolia Shell Foundation for Apps Navigation dispatching Transitions @MAGNOLIA_CMS 23
  23. 23. CLIENT SERVER Apps Magnolia Shell RPC/STATE LocationController LOCATION Viewport Shell Connector MagnoliaShellView ! Viewport Widget VIEW @MAGNOLIA_CMS 24
  24. 24. Magnolia Shell Navigation handling inspired by Activity/Places framework Brought to server-side Adapted to AdminCentral use-case @MAGNOLIA_CMS 25
  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. 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. 27. Conceptual Challenges @MAGNOLIA_CMS 28
  28. 28. Apps UI Framework Widgets Vaadin Magnolia Core @MAGNOLIA_CMS 30
  29. 29. App Framework @MAGNOLIA_CMS 31
  30. 30. APP FRAMEWORK App SubApp DetailSubApp BaseApp BaseSubApp BrowserSubApp CONTENT APP PACKAGE MyApp MySubApp MySubAppView MY PROJECT @MAGNOLIA_CMS 32
  31. 31. What can the App framework do for you? @MAGNOLIA_CMS 33
  32. 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. 33. #app:<appName>:<subAppId>:<param1;param2> URL Fragments @MAGNOLIA_CMS 35
  34. 34. #app:<appName>:<subAppId>:<param1;param2 @MAGNOLIA_CMS 36
  35. 35. IoC standard @Inject based on guice configured nearly every component can be replaced scopes main, app, subapp @MAGNOLIA_CMS 37
  36. 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. 37. Conceptual Challenge not yet solved @MAGNOLIA_CMS 39
  38. 38. Content App Declarative UI @MAGNOLIA_CMS 40
  39. 39. @MAGNOLIA_CMS 41
  40. 40. @MAGNOLIA_CMS 42
  41. 41. @MAGNOLIA_CMS 43
  42. 42. My View public class MyView implements View { Component label = new Label(“Hello Gwt.create!”); ! @Override Component asVaadinComponent() { return label; } } @MAGNOLIA_CMS 44
  43. 43. @MAGNOLIA_CMS 45
  44. 44. @MAGNOLIA_CMS 46
  45. 45. How does that help non-programmers extending the system? @MAGNOLIA_CMS 47
  46. 46. Model-View-Presenter Pattern View Model @MAGNOLIA_CMS Presenter EventBus 48
  47. 47. JCR (Config) Editor Definition EditorPresenter FormBuilder FieldFactory Vaadin UI @MAGNOLIA_CMS 49
  48. 48. Eventually you configure the UI within the UI @MAGNOLIA_CMS 50
  49. 49. @MAGNOLIA_CMS 51
  50. 50. @MAGNOLIA_CMS 52
  51. 51. Technical challenge solved. Conceptual challenge solved. @MAGNOLIA_CMS 53
  52. 52. We hope we raised interest & curiosity you’ll consider Magnolia CMS you have some questions .. that we can answer @MAGNOLIA_CMS 54
  53. 53. Thanks for your attention! www.magnolia-cms.com @MAGNOLIA_CMS 55

×