Vaadin7 coding ui components
-
Upload
mp-technology -
Category
Technology
-
view
1.940 -
download
7
description
Transcript of Vaadin7 coding ui components
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