Vaadin 7Building web applications

Peter Lehto Vaadin Expert

What is

Vaadin?

App

lifecycle

Why

Vaadin?

Structuring

the App

Building

Responsive

Layouts

How to get

started?

QAField Data binding

Server @Push

?

User interface framework for Rich Internet Applications

with pure Java

Servlet backend GWT frontend

Vaadin +=

GWT

Why?

Developer

Productivity

Rich

UX

Why?

JavaScript DOM AJAX JSON …

htmljava

Why?

App Lifecycle

http://localhost:8080/Vaadin/

App Lifecycle

New session

Loader page

Vaadin

Loader page

Loads theme

Loads widgetset

Fetch root configuration

New UI instance is created

UI.init() is called

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) { }}

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); }}

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()); } }); }}

Vaadin

UIDL

• UI is added to the DOM

Vaadin

Vaadin

User activity

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()); } }); }}

Vaadin

UIDL

Vaadin

Heart beats

No user activity?

3 heartbeats are missed?

UI is detached

closeIdleSession=true

Session timeout expires after last non-heartbeat request

Session and all of its UIs are closed

VaadinServlet

HttpSession VaadinSession

n active users

UI

1

n

1 1

1

n

Resources

1

**

1

1 servlet

UI instance can be preserved between refreshes with @PreserveOnRefresh annotation

Structuring the App

View: any logical collection of components

Structuring the App

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

Structuring the App

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) { }!}

Structuring the App

@Overrideprotected 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);! …}

Activating a view programmatically

UI.getCurrent().getNavigator().navigateTo("customers");

Structuring the App

http://localhost:8080/vaadin/#!customers !

#! : Navigator identifier customers : View name

Navigating to a view via URL

Building Responsive

Layouts

Building Responsive

Layouts

public class DashBoard extends CssLayout implementscom.vaadin.navigator.View {!public DashBoard() { setSizeFull(); addStyleName("dashboard"); Responsive.makeResponsive(this);}

Building Responsive

Layouts

.stylename[width-range~="300-500px"]

.stylename[height-range~="300-500px"]

Server @Push

Request-response cycle

ServerClient

State

Click

Server @Push

Request-response cycle with polling

ServerClient

Poll

Poll

State

Click

Progress Indicator

Server @Push

Request-response cycle with push

ServerClient

State

Click

Progress Indicator

Server @Push

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

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

Field Data binding

Examples of FieldsField

Data binding

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

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; }}

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

Field Data binding

BeanItem<Customer>

Field Data binding

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

Field Data binding

FieldGroup is used to bind multiple properties from Item

Field Data binding

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

Fields are Buffered and can be Committed and Discarded

Field Data binding

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

commit()

Buff

eri

ng

Data source

UI Logic

Field

Button

Browser

TextField value change

Save button pressed

ClickEvent

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"));

How do I get started ?

Eclipse

Download plugin from Marketplace

How do I get started ?

IntelliJ IDEA

Built-in support

How do I get started ?

Netbeans

Download plugin Netbeans Plugin Portal

How do I get started ?

mvn archetype:generate

-DarchetypeGroupId=

com.vaadin

-DarchetypeArtifactId=

vaadin-archetype-application

-DarchetypeVersion=

7.1.15

Maven

How do I get started ?

Download for Freevaadin.com/book

> 600 pages

9 789529 319701

ISBN 978-952-93-1970-1

PDF, ePub, HTML

Ohloh #2 used

Java Web Framework

Community of 100.000+

�

By Marko Grönroos

ABOUT VAADIN

ww

w.d

zone

.co

m

G

et M

ore

Ref

card

z! V

isit

ref

card

z.co

m

#85

Getting Started with VaadinCONTENTS 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 develop new components with the Google Web Toolkit (GWT)

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 ListenersIn the event-driven model, user interaction with user interface components triggers server-side events, which you can handle

Web BrowserClient-Side Engine

JavaWeb Server

VaadinUIComponents

YourJavaApplication

WebService

EJB

DB

Servlet Container

UserApplication

EventListener

DataModel

ApplicationThemes

ApplicationResources

DefaultTheme

FileResources

ExternalResources

Database

DataBinding

Inherits Events Changes

AJAX Requests

Inherits

UIComponent

JavaServlet

ApplicationClass

Web BrowserClient-Side Engine

brought to you by...

Questions or Comments?

3

Vaadin: A Familiar Way to Build Web Apps with Java

DZone, Inc. | www.dzone.comFigure 4: The Class Diagram presents all user interface component classes and the most important interfaces, relationships, and methods.

peter@vaadin.com

Questions or Comments?