1. Hello Vaadin!
CS 3130 Summer 2015

2. What’s Vaadin? A female reindeer in Finnish
A web UI framework written in Java

3. How does Vaadin work? Uses a “thin client” approach.
The client (browser) is only responsible for displaying the UI and passing events to the server
The server implements the business logic and tells the client how to update the UI
Client is automatically generated by Vaadin
Server is a Java Servlet

4. Example Suppose you are making a fresh fruit finder: UI Display
UI Control
Business Logic
Client
Server

5. How do I use Vaadin? Write the code in Java
Design the interface using Components
Vaadin will convert these into Widgets
Widgets are made up of HTML, CSS and JS
Attach event handlers
Implement the business logic.

6. How do I set up Vaadin? Vaadin uses: Java A servlet container (Tomcat)
Dependency manager (Ivy)
IDE Integration (Eclipse)

7. How do I set up Vaadin? Install the Java Developer Kit (7 or higher)
Install Tomcat 7
Install Eclipse (JavaEE)
Install Eclipse Plugins

8. Configuring Eclipse If you don’t have JavaEE edition of Eclipse:
In “Work With,” choose your version of Eclipse
Choose “Web, XML, JAVA EE and OSGi Enterprise Development”:

9. Configuring Eclipse
From the list, choose “Eclipse Java EE Developer Tools” and all of the “JST” options:

10. Configuring Eclipse Install IvyIDE
Use
Install all the plugins (Resolve Visualizer is optional)

11. Configuring Eclipse Install Vaadin Eclipse Integration
Use
Install the plugin:

12. Configuring Eclipse Tell Eclipse about Tomcat:
In Window->Preferences:

13. Configuring Eclipse
Select Server->Runtime Environment

14. Configuring Eclipse
Click Add…

15. Configuring Eclipse
Point it to your install location for Apache Tomcat

16. Getting Vaadin Going Create a new Vaadin Project:
File->New->Other…->Vaadin->Vaadin 7 Project

17. Getting Vaadin Going Leave everything default except:
On the “Web Module” (Third) screen, check “Generate web.xml deployment descriptor”. This will be useful when you start your project.

18. Running Your App
Right click on project->Debug As-> Debug on Server:

19. Running Your App Choose the Tomcat server you previously set up:
Check “Always use this server when running this project”

20. Running Your App
Hit finish wait a while, and your web browser should display:

21. Anatomy of a Vaadin App