This is an Introduction to Vaadin presentation I gave at Codeaholics HK on July 11, 2012.

1. Introduction to Vaadin
Leonard Siu
@lsiu
http://about.me/leonardsiu

2. Why Vaadin?
• Develop desktop-like web application (single-
page)
• Very fast development time!
• Why?
– Server-centric approach hide client/server
complexity
– Component/Event/Listener – Swing-like
development
– Vaadin takes care of cross-browser compatibility

3. Excellent documentation
• https://vaadin.com/book

4. Sampler for available widgets
• http://demo.vaadin.com/sampler

5. Growing Add-on Directory
• https://vaadin.com/directory

6. Skinnable
• http://demo.vaadin.com/VaadinTunesLayout/

7. My Asset Management Project
http://ext.quantum.com.hk/qam/app

8. Architecture Overview
Source: https://vaadin.com/book/-/page/intro.html#intro.overview

9. Source: https://vaadin.com/book/-/page/architecture.html
Architecture Overview 2

10. Let’s start coding
• What you need:
– Java
– Maven
– Eclipse or Spring STS

11. New Vaadin Project
mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=vaadin-archetype-clean
-DarchetypeVersion=LATEST
-DgroupId=com.example
-DartifactId=vaadin-example1
-Dversion=1.0
-Dpackaging=war
Following the development example on
https://github.com/lsiu/vaadin-example1

12. Tip #1 - Avoid Restart on code change
• Use DCEVM to avoid restart application server
on code change
• http://ssw.jku.at/dcevm/
• Remember to disable “Auto-Reload” on the
web Module

13. What we got here?
• 1 Java file
• 1 POM file
• 1 web.xml file
• No struct-config.xml,
faces-config.xml
• No javascript plugins
files

14. Discuss Code On Git Hub
https://github.com/lsiu/vaadin-example1

15. Where to from here?
• Get Visual Editor Eclipse Plugin
– https://vaadin.com/eclipse/
• Learn about Vaadin Component Data Binding
– https://vaadin.com/book/-/page/datamodel.html
• Vaadin + Spring
– IoC, Data Access, Spring Security, etc..
– Plays well together!
• Vaadin + Roo
– Supercharge Prototyping!
• Make you own Vaadin Widget!