Vaadin today and tomorrow

Vaadin
7
today and tomorrow

@joonaslehtinen
Vaadin, Founder

v0.1
2001

v3
2002

Open
Source

v4
2006

Ajax

v5
2007

934 tickets closed during 16 months of
development

Oldest ticket created 3/2008
Newest ticket 2/2013

3939 commits made by 23 authors
93 % by 6 persons

> 1 000 000 lines of code touched

https://github.com/
vaadin/dashboard-
demo

Renewed
JS
Sass
from Inside
HTML5
+= UI
GWT

RPC
Complete State Field

stack

Server
Pr
od Op
t
-
im
r
uc
fo
ti ize
df d
vit
ize
y or
tim
e rol
Op
t-

s d ont
i C
ien
Cl

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 level
View management

Variables & functions

Demo

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

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

form.setFormFieldFactory(new FormFieldFactory() {

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

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

// ..

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

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

public class Person {

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

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

// + constructor + setters + getters
}

“Joonas Lehtinen”

presentation
Component
model

ﬁrstName = “Joonas”
Demo lastName = “Lehtinen”

Widget
6
Paintable
Variable
client Changes

server
UIDL

Component

Widget
7
Connector

client
State
server
RPC

Component
Demo

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

private ButtonRpc rpc = new ButtonRpc() {
public void click(
private ButtonRpc rpc =
MouseEventDetails details) {
RpcProxy.create(ButtonRpc.class, this);
// do stuff
}
public void onClick(ClickEvent event) {
};
rpc.click(
new MouseEventDetails(event));
public Button() {
}
registerRpc(rpc);
}

client server

Publish API from Java

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

Use from JavaScript

window.myCallback('foo', 100);

Widget implementation in 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);
}
});
}

Server-side Java API for Widget

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
}

}

Lighter DOM Minimized reflows

6.8

7.0

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 CSS for add-ons without a widgetset

Vaadin Charts
• 1.1 version to be released in May, 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 April
• Vaadin 7 support
• New components:
• URLField
• Dateﬁeld
• Combobox

• Preparing WP8 support

Vaadin TestBench
• 3.1 adds headless mode
in May

Vaadin CDI
• Alpha to be released in the end of March
• Apache 2.0 License

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

? joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen

Vaadin today and tomorrow

More Related Content

What's hot (20)

Similar to Vaadin today and tomorrow (20)

More from Joonas Lehtinen (19)

Vaadin today and tomorrow