Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×