Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Vaadin7 coding ui components

6.977 Aufrufe

Veröffentlicht am

Slides vom Vaadin BBQ 8.8.2013 bei mp technology in Zürich.

Talk zum Thema Erstellung von Vaadin 7 Erweiterungen auf Browserseite von Benjamin Schupp, Lead Architect, mp technology. http://www.mptechnology.ch

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Vaadin7 coding ui components

  1. 1. Vaadin 7 coding UI components August 2013 Benjamin Schupp mp technology consulting GmbH
  2. 2. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 2 Mission: Create Vaadin component for a jquery plugin ‚qrcode‘
  3. 3. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 3 Understanding Vaadin
  4. 4. © mp technology consulting 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. 5. © mp technology consulting 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. 6. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 6 Vaadin Architecture
  7. 7. © mp technology consulting 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. 8. © mp technology consulting 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. 9. © mp technology consulting 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. 10. © mp technology consulting 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. 11. © mp technology consulting 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. 12. © mp technology consulting 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. 13. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 13 Client – Server Integration
  14. 14. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 14 Sample code…
  15. 15. © mp technology consulting 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

×