Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,669 views

Published on

Published in: Technology, Education
  • Be the first to comment

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

×