1. Vaadin 7: Modern web apps in Java
@joonaslehtinen

2. slideshare.com/
joonaslehtinen

3. Intro to
Vaadin
new Label( “Hello world”)

4. New in
7

5. Getting
started
QA

7. User interface
framework for rich
web applications

8. java html

9. Why on earth?

11. expectations

12. reality

13. consumer business
“million” users “500” users
10 views 50 views
1€/user 500€/user
100,000€ / view >> 5,000€ / view

14. Problem
How to build consumer
grade UX with business
system budget

15. How?

16. Key Ideas

17. 123
Key Ideas

18. 1
Rich
Components

19. User Inteface
Data Source
Theme

30. User Inteface
Data Source
Theme

35. User Inteface
Data Source
Theme

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

38. Server + Client

39. 2
Server + Client

40. Web application layers
Backend Web Java to
RPC JavaScript
server server JavaScript
GWT Vaadin
required required optional optional optional
required required required required optional
JS
required required required required

41. How does it work,
really?

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

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

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

47. Trying it out

48. https://github.com/vaadin/documentmanager
vaadin.com/learn

49. 3
Embracing
Java

50. Any JVM
Language

51. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

52. No
browser
plugins
Nothing to
install

53. Servlet
Portlet
(most) clouds

54. Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
∙∙∙

55. 7
Vaadin
today
0.2

56. v0.1
2001
v3
2002
Open
Source

57. v4
2006
Ajax
v5
2007

58. 7
v6 Feb
2009

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

70. vaadin.com/7

71. 7
Favorite picks

72. Vaadin += GWT

76. GWT
Compatible

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

78. Se
rve
P ro
r-
e
d u O
sid
tim p
ct
or
df
iv it ize
ize
d
ol
for
ntr
tim
-
Op
Co
nt
lie
C

79. Architecture

81. New Windowing API

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

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

85. Demo
Built-in high level
View management

86. Demo
Sass

87. Redesigned
Forms

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

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

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

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

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

95. RPC
State

96. 6 Widget
Paintable
Variable
client Changes
server
UIDL
Component

97. 7 Widget
Demo
Connector
client
State
server
RPC
Component

98. public interface ButtonRpc extends ServerRpc { Demo
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

99. JavaScript
Add-ons

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

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

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

103. getting
started

105. Eclipse

106. mvn archetype:generate
-DarchetypeGroupId=com.vaadin
Maven -DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=7.0.0

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

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