Vaadin Framework provides a desktop-like programming model for creating modern web applications in plain Java – without the need for HTML, XML, plug-ins or JavaScript. This session explains the key concepts of the server-side and client-side RIA development with Java as well as summarizes what is new with Vaadin 7 and how it relates to GWT. To demonstrate the use of the framework, an example application is developed during the session step-by-step.

1. Dr. Joonas Lehtinen
Vaadin 7
Founder & CEO, Vaadin
@joonaslehtinen

3. User interface
framework for rich
web applications

4. Building blocks

5. Developer
Productivity
Rich
UX

6. htmljava

7. 123Key Ideas

8. 1Rich
Components

9. User Inteface
Data Source
Theme

13. What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
es
your app
support?
25.7%
Phones
36.1%
O
thers2.1%
“Since gw
in
the enterp
explain
why tab
popular than
supp
phones”
Daniel
iPhone
Android
W
P
8
pplication
UI for
r 98%
of apps
overtaken
the
num
ber
rope.
36.1%
Tablets
“Since
gwt is
used
extensi
in
the
enterprise, this
m
explain
why tablets
popular than
su
phones”
iPadAndroid
W
indow
s
8

14. 350+ add-on
components

19. User Inteface
Data Source
Theme

24. User Inteface
Data Source
Theme

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

27. 2Server + Client

28. Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript

29. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
nication
optional
Vaadin
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required

30. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
nication
optional
Vaadin
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required
1 layer
vs
3 layers
-50% codelines
-50% development
-50% maintenance
easier to learn

31. How does it work,
really?

33. • Initial HTML
• CSS (theme)
• Images
• JavaScript
1.2M total
307k
compress
135k
reduced
widgetset

34. • name=”Joonas”
• button clicked
261 bytes

36. • name=”Joonas”
• button clicked
261 bytes
• Add notification
267 bytes

37. Hello World!

39. https://github.com/vaadin/documentmanager
https://vaadin.com/learn
Source
HOWTO Screencast

40. 3Embracing
Java

41. Any language
on JVM

42. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

43. No
browser
plugins
Nothing to
install

44. Servlet
Portlet
(most) clouds

45. Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
∙ ∙ ∙

46. Vaadin
7

47. v3
2002
v0.1
2001
Open
Source

48. v4
2006
Ajax
v5
2007

49. 7
Febv6
2009

50. 934 tickets closed during 16 months of
development
3939 commits made by 23 authors
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

51. Complete
stack
Renewed
from InsideSass
JS
HTML5
+=
GWT
RPC
State
UI
Field

61. vaadin.com/7

62. Favorite picks
7

63. Vaadin += GWT
1/7

67. GWT
Compatible

68. Server-
Client-
side
Optim
izedfor
Productivity
Optim
izedfor
Control

69. Architecture

71. New Windowing API
2/7

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

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

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

76. Built-in high level
View management
Demo

77. Sass
Syntactically Awesome Stylesheets
Demo
3/7

78. Redesigned
Forms
4/7

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

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

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

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

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

86. RPC
State
5/7

87. Component
Widget
Paintable
server
client
Variable
Changes
UIDL
6

88. server
client
Component
Widget
Connector
RPC
7
State
Demo

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

90. JavaScript
Add-ons
6/7

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

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

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

94. Server Push
7/7

95. @Push MyUI
<async-supported/>
vaadin-push dependency

96. getting
started

98. Eclipse

99. mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=vaadin-archetype-application
-DarchetypeVersion=7.1.0.beta1

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

101. Download for Free
vaadin.com/book
728 pages
701
-93-1970-1
PDF, ePub, HTML

102. Apache
License

103. community of
100.000+
developers

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