My presentation at Vaadin Meetup Paris

1. Vaadin
7
today and tomorrow
@joonaslehtinen
Vaadin, Founder

2. v0.1
2001
v3
2002
Open
Source

3. v4
2006
Ajax
v5
2007

4. v6
2009 7

6. 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

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

13. Renewed
JS
Sass
from Inside
HTML5
+= UI
GWT
RPC
Complete State Field
stack

24. 7
Favorite picks

25. Vaadin += GWT

29. GWT
Compatible

30. 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

31. Architecture

39. New Windowing API

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

42. @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"));
}
}

43. Built-in high level
View management

44. Sass

45. Variables & functions
Demo

46. Mixins
Demo

47. Redesigned
Forms

48. public class Employee {
String firstName;
String lastName;
double salary;
6
Date birthDate;
// Getters, setters, …
}
Form form = new Form();
form.setItemDataSource(
new BeanItem<Employee>(employee));

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

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

53. public class Person {
@Size(min = 5, max = 50)
private String name;
@Min(0)
@Max(100)
private int age;
// + constructor + setters + getters
}

54. “Joonas Lehtinen”
presentation
Component
model
firstName = “Joonas”
Demo lastName = “Lehtinen”

55. RPC
State

56. Widget
6
Paintable
Variable
client Changes
server
UIDL
Component

57. Widget
7
Connector
client
State
server
RPC
Component
Demo

58. 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

59. JavaScript
Add-ons

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

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

62. 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
}
}

63. HTML5

64. <!DOCTYPE html>

65. Lighter DOM Minimized reflows
6.8
7.0

68. IE8 (norm)

70. Roadmap

71. 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

73. 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

81. Vaadin TouchKit
• 3.0 version to be released in April
• Vaadin 7 support
• New components:
• URLField
• Datefield
• Combobox
• Preparing WP8 support

82. Vaadin TestBench
• 3.1 adds headless mode
in May

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

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

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