Your SlideShare is downloading. ×
0
Vaadin 7
coding UI components
August 2013
Benjamin Schupp
mp technology consulting GmbH
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 2
Mission:
Create Vaadin component for a jquery plugin ‚...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 3
Understanding Vaadin
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 4
Application Architecture
• UI Model stored as componen...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 5
UI Component Architecture
Java
• Compiled with JDK
HTT...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 6
Vaadin Architecture
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 7
Extending Vaadin
Understand the options
1. Use existin...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 8
Extending Vaadin
Understand the options
2. Create Cust...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 9
Extending Vaadin
Understand the options
3. Component E...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 10
Extending Vaadin
Understand the options
4. Integrate ...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 11
Extending Vaadin
Understand the options
5. Client sid...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 12
Packaging a custom Widget
• For a Vaadin add-on creat...
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 13
Client – Server
Integration
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 14
Sample code…
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 15
• Individual-Software für Intranet und Internet und M...
Upcoming SlideShare
Loading in...5
×

Vaadin7 coding ui components

2,177

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,177
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×