Vaadin7today and tomorrow

@joonaslehtinen

v32002

v0.12001

OpenSource

v42006

Ajax

v52007

v62009 7

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

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 Vaadin7uiUI extends UI {

public void init(VaadinRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); }

}

Built-in high levelView management

Sass

Variables & functions

Demo

Mixins

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

JavaScriptAdd-ons

getPage().getJavaScript().addCallback("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

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

public class MyWidget extends AbstractJavaScriptComponent {

public MyWidget() { registerCallback("plotClick", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); }

public static class MyWidgetState extends ComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters }

}

Server-side Java API for Widget

HTML5

<!DOCTYPE html>

PerformanceNo or minimal layout calculations

Layout responsibility moved to browser

Lighter DOM Minimized reflows

6.8

7.0

Roadmap

Feb - March - April

Vaadin Framework 7.1

• Server push• 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◦Generate Java code for this view

• Arithmetics for SASS• Packaging CSS for add-ons without a widgetset

Vaadin Charts

• 1.0 version was released in Feb 21, 2013

• 1.1 version to be released in April, 2013• 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

Vaadin TouchKit

• 3.0 version to be released in March• Vaadin 7 support• New components:

• URLField• Datefield• Combobox

• Preparing WP8 support

Vaadin TestBench

• Maintenance releases

Vaadin JPAContainer

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

Vaadin CDI

• Beta to be released in March • Apache 2.0 License

Will not be ported to Vaadin 7

• Spring Roo Plug-in• WSRP Add-on• XS (will be included in Vaadin 7.x later on)

One more thing....

? joonas@vaadin.com vaadin.com/joonas

@joonaslehtinen