This document discusses extending the Vaadin framework to create custom UI components. It outlines several options for extending Vaadin, such as using existing add-ons, creating custom components, component extensions, integrating JavaScript libraries, and implementing client-side widgets. It also covers packaging custom widgets as add-ons and the client-server integration process. The document was created by Benjamin Schupp of mp technology consulting GmbH for a Vaadin 7 coding workshop.

1. 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