Transcript Hello Vaadin! slides

Hello Vaadin!
CS 3130 Summer 2016
What’s Vaadin?
•A
•A
female reindeer in Finnish
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
finder:
you are making a fresh fruit
UI
Display
Client
UI
Control
Business
Logic
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
• 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