This document provides an overview of Vaadin, an open-source web application framework that allows developers to build rich web applications using pure Java code. Key points covered include: Vaadin uses a client-server architecture with a Java backend and GWT frontend; the app lifecycle and how UI instances are managed; common patterns for structuring apps using views and navigation; building responsive layouts; server push for real-time updates; data binding between fields and data models; and how to get started with Vaadin.

1. Vaadin
7Building web applications
Peter Lehto
Vaadin Expert

2. What is
Vaadin?
App
lifecycle
Why
Vaadin?

3. Structuring
the App
Building
Responsive
Layouts

4. How to
get
started?
QA
Field Data
binding
Server
@Push

5. ?

8. User interface
framework for
Rich Internet
Applications
with pure Java

9. Servlet backend
GWT frontend

10. Vaadin
+=
GWT

11. Why?

12. Developer
Productivity
Rich
UX
Why?

13. JavaScript
DOM
AJAX
JSON
…
htmljava
Why?

14. App
Lifecycle

15. http://localhost:8080/Vaadin/
App
Lifecycle

16. New session
Loader page

17. Vaadin
Loader page
Loads theme
Loads
widgetset
Fetch root
configuration

18. New UI instance is
created
UI.init() is called

19. public class MyVaadinUI extends UI {
!
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class)
public static class Servlet extends VaadinServlet {
}
!
@Override
protected void init(VaadinRequest request) {
}
}

20. public class MyVaadinUI extends UI {
!
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class)
public static class Servlet extends VaadinServlet {
}
!
@Override
protected void init(VaadinRequest request) {
VerticalLayout layout = new VerticalLayout();
!
final TextField textField = new TextField("Name");
final Button button = new Button("Greet");
!
layout.addComponents(textField, button);
!
setContent(layout);
}
}

21. public class MyVaadinUI extends UI {
!
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class)
public static class Servlet extends VaadinServlet {
}
!
@Override
protected void init(VaadinRequest request) {
VerticalLayout layout = new VerticalLayout();
!
final TextField textField = new TextField("Name");
final Button button = new Button("Greet");
!
layout.addComponents(textField, button);
!
setContent(layout);
!
button.addClickListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
Notification.show("Hello " + textField.getValue());
}
});
}
}

22. Vaadin
UIDL
• UI is added to
the DOM

23. Vaadin

24. Vaadin
User activity

25. public class MyVaadinUI extends UI {
!
…
!
@Override
protected void init(VaadinRequest request) {
…
!
button.addClickListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
Notification.show("Hello " + textField.getValue());
}
});
}
}

26. Vaadin
UIDL

27. Vaadin
Heart beats

28. No user activity?
3 heartbeats are missed?
UI is detached

29. closeIdleSession=true
Session timeout expires
after last non-heartbeat
request
Session and all of its
UIs are closed

30. VaadinServlet
HttpSession VaadinSession
n active users
UI
1
n
1 1
1
n
Resources
1
**
1
1 servlet

31. UI instance can be
preserved between
refreshes with
@PreserveOnRefresh
annotation

32. Structuring
the App

33. View: any logical
collection of
components
Structuring
the App

34. Navigation between
views is done by
exchanging the content
of the UI or by replacing
components in a layout
Structuring
the App

35. public class CustomersView extends CustomComponent implements
com.vaadin.navigator.View {
!
@Override
public void enter(ViewChangeEvent event) {
}
!
}
Structuring
the App
public class InvoicesView extends CustomComponent implements
com.vaadin.navigator.View {
!
@Override
public void enter(ViewChangeEvent event) {
}
!
}

36. Structuring
the App
@Override
protected void init(VaadinRequest request) {
VerticalLayout layout = new VerticalLayout();
setContent(layout);
Navigator navigator = new Navigator(this, layout);
navigator.addView("customers", CustomerView.class);
navigator.addView("invoices", InvoicesView.class);
!
…
}

37. Activating a view
programmatically
UI.getCurrent().getNavigator().navigateTo("customers");
Structuring
the App

38. http://localhost:8080/vaadin/#!customers
!
#! : Navigator identifier
customers : View name
Navigating to a view via URL

39. Building
Responsive
Layouts

40. Building
Responsive
Layouts
public class DashBoard extends CssLayout implements
com.vaadin.navigator.View {
!
public DashBoard() {
setSizeFull();
addStyleName("dashboard");
Responsive.makeResponsive(this);
}

41. Building
Responsive
Layouts
.stylename[width-range~="300-500px"]
.stylename[height-range~="300-500px"]

42. Server
@Push

43. Request-response cycle
ServerClient
State
Click
Server
@Push

44. Request-response cycle
with polling
ServerClient
Poll
Poll
State
Click
Progress
Indicator
Server
@Push

45. Request-response cycle
with push
ServerClient
State
Click
Progress
Indicator
Server
@Push

46. To use push
Always use locking with
UI.access(Runnable) or
VaadinSession.lock()
when modifying the UI from an
external thread
Annotate UI with @Push
Include vaadin-push JAR in
your project
Server
@Push

47. Technical details
Manually managed pushing
also available
Fallback to the best supported
push method: Long polling or
Streaming
Implemented with the
Atmosphere library using
WebSockets
Server
@Push

48. Field
Data binding

49. Examples of Fields
Field
Data binding

50. Fields are bound
to Properties
which are simple
objects with type
and value

51. public class Customer {
private String name;
private Date birthDate;
private Address address;
!
public String getName() {
return name;
}
!
public void setName(String name) {
this.name = name;
}
public Date getBirthDate() {
return birthDate;
}
!
public void setBirthDate(Date birthDate) {
this.birthDate = birthDate;
}
!
public Address getAddress() {
return address;
}
!
public void setAddress(Address address) {
this.address = address;
}
}

52. Customer customer = getCustomer();
TextField nameField = new TextField();
MethodProperty<String> nameProperty =
new MethodProperty<String>(customer, "name");
!
nameField.setPropertyDataSource(nameProperty);
Field
Data binding

53. BeanItem<Customer>
Field
Data binding

54. Customer customer = getCustomer();
!
TextField nameField = new TextField();
BeanItem<Customer> customerBean = new BeanItem<Customer>(customer);
nameField.setPropertyDataSource(customerBean.getItemProperty("name"));
Field
Data binding

55. FieldGroup is used to
bind multiple
properties from Item
Field
Data binding

56. Customer customer = getCustomer();
BeanItem<Customer> customerItem = new BeanItem<Customer>(customer);
FieldGroup fieldGroup = new FieldGroup(customerItem);
fieldGroup.bind(new TextField(), "name");
fieldGroup.bind(new PopupDateField(), "birthDate");
Field
Data binding

57. Fields are Buffered
and can be
Committed and
Discarded
Field
Data binding

58. Customer customer = getCustomer();
BeanItem<Customer> customerItem = new BeanItem<Customer>(customer);
FieldGroup fieldGroup = new FieldGroup(customerItem);
fieldGroup.bind(new TextField(), "name");
fieldGroup.bind(new PopupDateField(), “birthDate");
!
fieldGroup.commit();
Field
Data binding

59. commit()
Buffering
Data source
UI Logic
Field
Button
Browser
TextField
value
change
Save button
pressed
ClickEvent

62. Field
Data binding
Collection<Customer> customers = getCustomers();
BeanItemContainer<Customer> customerContainer =
new BeanItemContainer<Customer>(Customer.class, customers);
Table customersTable = new Table();
!
customersTable.setContainerDataSource(customerContainer,
Arrays.asList("name", "birthDate"));

63. How do I get
started ?

64. Eclipse
Download plugin
from Marketplace
How do I get
started ?

65. IntelliJ
IDEA
Built-in support
How do I get
started ?

66. Netbeans
Download plugin
Netbeans Plugin Portal
How do I get
started ?

67. mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-
application
-DarchetypeVersion=
7.1.15
Maven
How do I get
started ?

69. Download for Free
vaadin.com/book
> 600 pages
01
-93-1970-1
PDF, ePub, HTML

70. Ohloh
#2 used
Java Web
Framework
Community of
100.000+

71. By Marko Grönroos
ABOUT VAADIN
.dzone.comGetMoreRefcardz!Visitrefcardz.com#85
Getting Started with Vaadin
CONTENTS INCLUDE:
About Vaadin
Creating An Application
Components
Layout Components
Themes
Data Binding and more...
Vaadin is a server-side Ajax web application development
framework that allows you to build web applications just like
with traditional desktop frameworks, such as AWT or Swing. An
application is built from user interface components contained
hierarchically in layout components.
In the server-driven model, the application code runs on
a server, while the actual user interaction is handled by a
client-side engine running in the browser. The client-server
communications and any client-side technologies, such as
HTML and JavaScript, are invisible to the developer. As the
client-side engine runs as JavaScript in the browser, there is no
need to install plug-ins. Vaadin is released under the Apache
License 2.0.
Figure 1: Vaadin Client-Server Architecture
If the built-in selection of components is not enough, you can
Figure 2: Architecture for Vaadin Applications
Hot
Tip
You can get a reference to the application object
from any component attached to the application with
Event Listeners
In the event-driven model, user interaction with user interface
components triggers server-side events, which you can handle
Web
Browser
Client-Side
Engine
Java
Web
Server
Vaadin
UI
Components
Your
Java
Application
Web
Service
EJB
DB
Servlet Container
User
Application
Event
Listener
Data
Model
Application
Themes
Application
Resources
Default
Theme
File
Resources
External
Resources
Database
Data
Binding
Inherits Events Changes
AJAX Requests
Inherits
UI
Component
Java
Servlet
Application
Class
Web
Browser
Client-Side
Engine
brought to you by...

72. Questions or
Comments?

73. peter@vaadin.com
Questions or
Comments?