Weitere ähnliche Inhalte Ähnlich wie Vaadin7 coding ui components (20) Kürzlich hochgeladen (20) Vaadin7 coding ui components1. Vaadin 7
coding UI components
August 2013
Benjamin Schupp
mp technology consulting GmbH
2. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 2
Mission:
Create Vaadin component for a jquery plugin ‚qrcode‘
3. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 3
Understanding Vaadin
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. © 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. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 6
Vaadin Architecture
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. © 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. © 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. © 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. © 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. © 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. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 13
Client – Server
Integration
14. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 14
Sample code…
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