Vaadin7 - coding ui components

Vaadin7 - coding ui components

• 1.
  Vaadin 7 coding UIcomponents August 2013 Benjamin Schupp mp technology consulting GmbH
• 2.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 2 Mission: Create Vaadin component for a jquery plugin ‚qrcode‘
• 3.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 3 Understanding Vaadin
• 4.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 4 Application Architecture • UI Model stored as component tree on server • Rendering in browser via GWT Widgets • Communication through json (UIDL)
• 5.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 5 UI Component Architecture Java • Compiled with JDK HTTP(S) Client UI Component • Rendering • Event handling • Runs on JavaScript Server UI Component • State • Button, Table… • Java API to program Java • Google Web Toolkit • Compiled to JavaScript
• 6.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 6 Vaadin Architecture
• 7.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 7 Extending Vaadin Understand the options 1. Use existing add-ons from the directory - 3rd party or own - No implementation necessary - Example: - Vaadin Charts - Calendar
• 8.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 8 Extending Vaadin Understand the options 2. Create CustomComponent - Composition of existing built-in components - Server-side implementation only - Example: Reoccuring dialog
• 9.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 9 Extending Vaadin Understand the options 3. Component Extensions - Add features to existing components without inheritance - Server-side component and client-side connector implementation - Example: Add a caps-lock warning to fields
• 10.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 10 Extending Vaadin Understand the options 4. Integrate JavaScript libraries/code - Server-side component and client-side connector implementation - Automatic delivery of JavaScript libraries by framework - Example: In a minute
• 11.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 11 Extending Vaadin Understand the options 5. Client side widget implementation - Use/extend existing widgets - Compose existing GWT widgets - Create own widget implementation (create DOM manually) - GWT programming model! (Recompile widgetset)
• 12.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 12 Packaging a custom Widget • For a Vaadin add-on create proper MANIFEST file (see dev.vaadin.com/wiki/VaadinAddon) • Don‘t forget to include the sources • Upload to VAADIN directory
• 13.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 13 Client – Server Integration
• 14.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 14 Sample code…
• 15.
  © mp technologyconsulting GmbH & Vaadin Ltd | August 2013 | Page 15 • Individual-Software für Intranet und Internet und Mobile seit 2003 • Beratung, Analyse, Konzepte, Architektur, Implementierung • Zertifizierter Vaadin Solution Partner • http://www.mptechnology.ch Offizielle Vaadin Schulungen in Zürich • 11. – 12. November 2013: Vaadin 7 Fundamentals • 13. – 14. November 2013: Advanced Vaadin 7 • Anmeldung über https://vaadin.com/services#vaadintraining mp technology, Zürich