Hello Vaadin!

CS 3130 Summer 2016

What’s Vaadin?
• A female reindeer in Finnish
• A web UI framework written in Java
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
Example
• Suppose you are making a fresh fruit finder:

UI UI Business
Display Control Logic

Client Server
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.
How do I set up Vaadin?
• Vaadin uses:
 Java
 A servlet container (Tomcat)
 Dependency manager (Ivy)
 IDE Integration (Eclipse)
How do I set up Vaadin?
1. Install the Java Developer Kit 8
2. Install Tomcat 8
3. Install CSCI 3130 Eclipse package
4. Configure Eclipse
Configuring Eclipse
• Tell Eclipse about Tomcat:
 In Window->Preferences:
Configuring Eclipse
 Select Server->Runtime Environment
Configuring Eclipse
• Click Add…
Configuring Eclipse
• Point
it to your install location for Apache
Tomcat
Getting Vaadin Going
• Create a new Vaadin Project:
 File->New->Other…->Vaadin->Vaadin 7 Project
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.
Running Your App
• Rightclick on project->Debug As-> Debug on
Server:
Running Your App
 Choose the Tomcat server you previously set up:
 Check “Always use this server when running this project”
Running Your App
• Hit
finish wait a while, and your web browser
should display:
Anatomy of a Vaadin App