Vaadin Meetup Helsinki presentation in 2013/2 about the Vaadin 7 release and roadmap ahead.

1. Vaadin
7
today and tomorrow
@joonaslehtinen

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. Renewed
JS
Sass
from Inside
HTML5
+= UI
GWT
RPC
Complete State Field
stack

20. 7
Favorite picks

21. Vaadin += GWT

25. GWT
Compatible

26. Server
Pr
Op
-
od
t
r
im
fo
uc
d
ti ize
ize
vit df
y or
tim
e rol
Op
t-
s d ont
i C
ien
Cl

27. Architecture

29. New Windowing API

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

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

33. Built-in high level
View management

34. Sass

35. Variables & functions
Demo

36. Mixins
Demo

37. Redesigned
Forms

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

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

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

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

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

45. RPC
State

46. Widget
6
Paintable
Variable
client Changes
server
UIDL
Component

47. Widget
7
Connector
client
State
server
RPC
Component
Demo

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

49. JavaScript
Add-ons

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

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

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

53. HTML5

54. <!DOCTYPE html>

55. Lighter DOM Minimized reflows
6.8
7.0

59. Roadmap

60. Feb - March - April

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

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

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

72. Vaadin TestBench
• Maintenance releases

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

74. Vaadin CDI
• Beta to be released in March
• Apache 2.0 License

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

76. One more thing....

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