Hello Vaadin!CS 3130 Summer 2015

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 Display

UI Control

Business 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 (7 or

higher)

2. Install Tomcat 7

3. Install Eclipse (JavaEE)

4. Install Eclipse Plugins

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”:

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

Configuring Eclipse• Install IvyIDE

Use http://www.apache.org/dist/ant/ivyde/updatesite

Install all the plugins (Resolve Visualizer is optional)

Configuring Eclipse• Install Vaadin Eclipse Integration

Use http://vaadin.com/eclipse

Install the plugin:

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•Right click 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