Vaadin 7coding UI components

August 2013

Benjamin Schuppmp technology consulting GmbH

© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 2

Mission: Create Vaadin component for a jquery plugin ‚qrcode‘

© 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 component tree on server

• Rendering in browser via GWT Widgets

• Communication through json (UIDL)

© 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

© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 6

Vaadin Architecture

© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 7

Extending VaadinUnderstand the options

1. Use existing add-ons from the directory- 3rd party or own- No implementation necessary

- Example: - Vaadin Charts- Calendar

© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 8

Extending VaadinUnderstand the options

2. Create CustomComponent- Composition of existing built-in components- Server-side implementation only

- Example: Reoccuring dialog

© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 9

Extending VaadinUnderstand 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

© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 10

Extending VaadinUnderstand 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

© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 11

Extending VaadinUnderstand 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)

© 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

© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 13

Client – ServerIntegration

© 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 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