Highly Scalable User Experience Design: Vaadin and Magnolia
2 likes2,296 views
The document discusses the integration of Vaadin as a UI framework within Magnolia CMS, focusing on the development of applications, customization options, and user experience improvements. Key features include a modular architecture, data binding, and a rich set of reusable components optimized for enterprise web applications. The presentation also covers practical development patterns, available add-ons, and the importance of supporting multiple browser and device platforms.
Highly Scalable User Experience Design: Vaadin and Magnolia
- 1. MAGNOLIA CMS UX/UI DESIGN WITH VAADIN JANUARY 26, 2015 Photo Credit: AMPLIFY, MUNICH
- 2. ALEKSANDR PCHELINTCEV SR. JAVA DEVELOPER @ MAGNOLIA INTERNATIONAL ! ALEKSANDR.PCHELINTCEV@MAGNOLIA-CMS.COM
- 4. IN THIS TALK Meet AdminCentral Introduction to Vaadin Apps UI framework Writing an app UI Customisation with Vaadin Data binding Future
- 6. OPEN SUITE Magnolia Bundle CONFIGURATION MAGNOLIA UI TEMPLATING KIT WORKFLOW PERSONALISATION ⊠CORE IoC
- 8. ADMIN CENTRAL The face of CMS Place where time is spent User Experience - priority #1
- 10. ADMIN CENTRAL IN ACTION
- 11. MAGNOLIA UI UX Fresh look Clear interactions App Paradigm Task-oriented Modular & Scalable Flexibility Fully configurable Server-side API
- 12. CHALLENGES Architecture Simple Java API Security Unit testing Technical Cross-browser Support mobile platforms Foundation Rich set of re-usable components
- 13. FRAMEWORK PICK GWT-based Java OSS Enterprise web-app oriented Encapsulates browser quirks The final choice: Why?
- 14. INTRO TO VAADIN
- 15. Vaadin Sections Magnolia Amplify Ville Ingman, Vaadin Ltdâš ville@vaadin.com
- 16. intro section
- 18. Our Mission Make building amazing web applications easy
- 21. > 130.000 developers from > 10.000 cities > 500 add-ons in theâš marketplace Other 4%Asia 21% Americas 21% Europe 54% Vaadin Ecosystem Apache-licensed
- 22. Typical use-cases are ERPs, Financial and Intranet/Extranet services i.e. Business Applications 40% of Fortune 100
- 23. Building blocks
- 24. What kind of devices does your app support? 98.1% 3Desktop browsers Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% app support? 98.1% 25.7% Phones 36.1% ts Others 2.1% âSince gwt is used e in the enterprise, this explain why tablets are popular than support for phonesâ Daniel iPhone Android WP 25.7% Phones 36.1% Tablets âSince gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phonesâ Daniel iPad Android Windows + +
- 25. Architecture
- 32. How does it work, really?
- 34. âą Initial HTML âą CSS (theme) âą Images âą JavaScript ! 1.2M totalâš 307k compress 135k reduced widgetset
- 36. âą name=âJoonasâ âą button clicked ! 261 bytesâš
- 38. âą name=âJoonasâ âą button clicked ! 261 bytesâš âą Add notification ! 267 bytesâš
- 40. MAGNOLIA UI FRAMEWORK Main principles and components Letâs get a bit technical See the apps
- 41. UI FRAMEWORK Focus on the business: Presentation logic Vaadin view Framework takes of the rest: MagnoliaShell: App environment Base app implementations App life-cycle management App communication
- 42. MAGNOLIA SHELL Launch and navigate between apps View and manage messages and workflow tasks Bookmark and navigate between favourite locations
- 43. Messages and tasks managed as filterable lists, easing both communication & review Launch and navigate between apps View and manage messages and workflow tasks Bookmark and navigate between favourite locations MAGNOLIA SHELL Launch and navigate between apps View and manage messages and workflow tasks Bookmark and navigate between favourite locations
- 44. MAGNOLIA SHELL Launch and navigate between apps View and manage messages and workflow tasks Bookmark and navigate between favourite locations
- 45. MAGNOLIA SHELL SERVER CLIENT Apps LocationController Shell Connector LOCATION VIEW RPC/STATE MagnoliaShellView ! Viewport Widget Viewport Magnolia Shell
- 46. APPS AND SUB-APPS FOUR SUB-APPS OPENED IN THE TABBED APP VIEW.
- 47. CONTENT APP PACKAGE Provides CRUD functionality Set of sub-apps and components - Content views - Fields - Actions - ⊠Extensible and re-usable
- 48. Ordered list and tree views for data entries
- 50. Entry management tools conveniently displayed in collapsible action bar
- 51. Data managed using forms that can be created with a rich set of field types powered by Vaadin
- 55. DEVELOPMENT PERKS Automatic app location mapping #app:<appName>:<subAppId>:<param1;param2> ! Inversion of control @Inject, @Singleton ⊠Scopes: <app>, <sub-app>, <admincentral> Additional UI features Notifications Overlays
- 56. CUSTOM SUB-APPpublic class MySubApp extends BaseSubApp<MyView> { private final EventBus eventBus; @Inject public MySubApp( @Named(SubAppEventBus.NAME) EventBus eventBus,SubAppContext ctx, MyView view){ super(subAppContext, view); this.eventBus = eventBus; } @Override protected void onSubAppStart() {/*Execute start-up logic*/} @Override protected void onSubAppStop() {/*Dispose the resources*/} @Override public void locationChanged(Location l){ // Update the view according to the changes }
- 57. CUSTOM VIEW! public class MyView implements View { ! private Component label = new Label(âHello Amplify!â); ! @Override Component asVaadinComponent() { return this.label; } ! }
- 58. OUTCOME?
- 59. EDIT WEB CONTENT
- 60. MONITOR
- 61. WRITE SCRIPTS
- 62. GO LOW-LEVEL
- 63. APP SWITCHER
- 64. DIALOG EDITOR
- 66. add-ons, SASS,
- 75. Mixins
- 76. Nesting
- 80. THE cool stuff
- 81. Built-in Server @Push Atmosphere: WebSockets, HTTPStreaming, Long polling
- 86. Grid âą Custom headers and footers âą Frozen columns âą Embedded widgets âą Large datasets
- 87. Declarative UI âą HTML based âą New Visual Designer with collaborative features
- 89. getting started
- 91. Eclipse Download plugin from Marketplace
- 93. Netbeans Download plugin Netbeans Plugin Portal
- 95. Download for Free vaadin.com/book PDF, ePub, HTML 9 789529 319701 ISBN 978-952-93-1970-1 9 789529 319701 ISBN 978-952-93-1970-1 Vol 1 288 pages Vol 2 434 pages
- 96. Web apps, not web sites!
- 99. CONTENT CONNECTORS MANAGE EXTERNAL CONTENT WITH APPS
- 102. Questions Thank you?