Vaadin 7Joonas LehtinenFounder / Vaadin@joonaslehtinen

Intro toVaadin

new Label(“Hello world”)

New in

7

Gettingstarted

QA

User interface framework for rich

web applications

htmljava

Why on earth?

expectations

reality

businessconsumer

“million” users “500” users

>>100,000! / view 5,000! / view

10 views1!/user

50 views500!/user

ChallengeHow to build consumer

grade UX with business system budget

How?

123Key Ideas

1RichComponents

User IntefaceData Source

Theme

User IntefaceData Source

Theme

User IntefaceData Source

Theme

InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...

2Server + Client

Web application layers

JavaScriptJava toJavaScript

Webserver

Backendserver

required optional optionalrequired

RPC

optional

Vaa

din

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

How does it work, really?

• Initial HTML• CSS (theme)• Images• JavaScript

1.2M total

307k

compress

135k

reducedwidgetset

• name=”Joonas”• button clicked

261 bytes

• name=”Joonas”• button clicked

261 bytes

• Add notification

267 bytes

Hello World!

https://github.com/vaadin/documentmanager

https://vaadin.com/learn

Source

HOWTO Screencast

3EmbracingJava

Any languageon JVM

Internet ExplorerChromeFirefoxSafariOpera

iOSAndroid

Nobrowserplugins

Nothing toinstall

Servlet Portlet

(most) clouds

EclipseIntelliJ IDEA

NetbeansMaven

Ant∙ ∙ ∙

Vaadin7today

v32002

v0.12001

OpenSource

v42006

Ajax

v52007

7Febv6

2009

934 tickets closed during 16 months of development

3939 commits made by 23 authors

Oldest ticket created 3/2008Newest ticket 2/2013

3939 commits made by 23 authors93 % by 6 persons

> 1 000 000 lines of code touched

Completestack

Renewedfrom Inside

Sass

JS

HTML5+=GWT

RPCState

UI

Field

vaadin.com/7

Favorite picks7

Vaadin += GWT

GWTCompatible

Server-

Client-

side

Optim

ized for

Productivity

Opt

imiz

ed fo

r

Cont

rol

Architecture

New Windowing API

public class Vaadin6App extends Application {

public void init() { setMainWindow(createWindow()); }

public Window getWindow(String name) { Window window = super.getWindow(name); if (window == null) { window = createWindow(); window.setName(name); addWindow(window); } return window; }

private Window createWindow() { Window window = new Window("Vaadin 6 Application"); window.addComponent(new TextField("What is your name")); window.addComponent(new Button("Do not push me")); return window; }

}

@Title("Vaadin 7 Application")public class HellowUI extends UI {

protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); }

}

@PreserveOnRefresh@Title("Vaadin 7 Application")public class HellowUI extends UI {

protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); }

}

Built-in high levelView management

Demo

Sass

Demo

RedesignedForms

public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, …}

Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));

6

form.setFormFieldFactory(new FormFieldFactory() {

public Field createField(Item item, Object propertyId, Component uiContext) {

if ("birthDate".equals(propertyId)) { DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; }

// ..

return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });

6

GridLayout form = new GridLayout(2,2) {

TextField firstName = new TextField("First name"); TextField lastName = new TextField("Last name"); TextField salary = new TextField("Salary"); DateField birthDate = new DateField("Birth date");

{ birthDate.setResolution(Resolution.DAY); setSpacing(true); addComponent(firstName); addComponent(lastName); addComponent(birthDate); addComponent(salary); } };

BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class); fieldGroup.bindMemberFields(form); fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));

7

public class Person {

@Size(min = 5, max = 50) private String name;

@Min(0) @Max(100) private int age;

// + constructor + setters + getters}

model

presentation

“Joonas Lehtinen”

Component

firstName = “Joonas”lastName = “Lehtinen”

Demo

RPCState

Component

Widget

Paintable

server

clientVariable

Changes

UIDL

6

server

client

Component

Widget

Connector

RPC

7State

Demo

public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details);}

private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this);

public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event));}

serverclient

private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff }};

public Button() { registerRpc(rpc);}

Demo

JavaScriptAdd-ons

getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } });

Publish API from Java

window.myCallback('foo', 100);

Use from JavaScript

public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { addFunction("plotClick", new JavaScriptFunction() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); }

public static class MyWidgetState extends JavaScriptComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); } public MyWidgetState getState() { return (MyWidgetState) super.getState(); }

}

Server-side Java API for Widget

window.com_example_MyWidget = function() { var element = $(this.getWidgetElement());

// Draw a plot for any server-side (plot data) state change this.onStateChange = function() { $.plot(element, this.getState().series, {grid: {clickable: true}}); }

// Communicate local events back to server-side component element.bind('plotclick', function(event, point, item) { if (item) {

var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); } });}

Widget implementation in JavaScript

Roadmap

Vaadin Framework 7.1• Server push

• Based on Atmosphere Framework• Web sockets, long polling and polling

• Calendar (now under Apache 2.0 license)• Limited IE 10 support without touch• CSS string inject• Renewed debug console features◦Redesigned UI/UX for debug window◦Optimize widgetset

• Arithmetics for SASS• Packaging SCSS / CSS for add-ons

April

Vaadin Charts 1.1

• New charts: • Funnel• Box plot• Waterfall• Bubble• Error bars

• Different coloring of a graph above and below a threshold• Pinch zooming and panning for touch devices

May

Vaadin TouchKit 3.0

• Vaadin 7 support

• New components: • URLField• Datefield• Combobox

April

Vaadin TestBench 3.1

• Headless mode with Phantom JS

May

Vaadin CDI

• Registering UI with @CDIUI annotation (web.xml no more)• Registering Views (to CDIViewManager)• Decoupling UI:s by injecting UI components (handy for MVP)• Injecting all the normal Java EE stuff (ejbs, events, ...)• UI Scope to complement the session scope• Supports JAAS (set @RolesAllowed for a View, ...)

• 1.0 alpha to be released any day now (in staging repo today)• Apache 2.0 License

Vaadin JPAContainer

• License changed to Apache 2.0• Vaadin 7 compatible version released in March

gettingstarted

Eclipse

mvn archetype:generate-DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application-DarchetypeVersion=7.0.3

Maven

Migration Guide:Vaadin 6 to 7

https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7

Download for Freevaadin.com/book

728 pages

9 789529 319701

ISBN 978-952-93-1970-1

PDF, ePub, HTML

?joonas@vaadin.com vaadin.com/joonas

@joonaslehtinen