My Introduction to Vaadin 7 presentation at Jfokus 2013

1. 7
Vaadin
today
@joonaslehtinen

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

3. Who is [using]
Vaadin?
New in
7

4. Getting
started
QA

6. User interface
framework for rich
web applications

8. java html

9. Why on earth?

10. enterpriseconsumers

12. expectations

13. reality

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

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

16. How?

17. 123
Key Ideas

18. 1
Rich
Components

19. User Inteface
Data Source
Theme

31. User Inteface
Data Source
Theme

36. User Inteface
Data Source
Theme

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

40. 2
Server + Client

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

42. How does it work,
really?

44. • Initial HTML
• CSS (theme)
• Images
• JavaScript
830k total
compress
250k
reduced
widgetset
120k

45. • name=”Joonas”
• button clicked
150 bytes

47. • name=”Joonas”
• button clicked
150 bytes
• Add notification
466 bytes

48. Trying it out

49. https://github.com/jojule/NotesDemo

50. 3
Embracing
Java

51. Any JVM
Language

52. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

53. No
browser
plugins
Nothing to
install

54. Servlet
Portlet
(most) clouds

55. Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
Spring Roo
∙∙∙

57. 7
Vaadin
today
0.0

58. v0.1
2001
v3
2002
Open
Source

59. v4
2006
Ajax
v5
2007

60. 7
v6 today
2009

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

72. 7
Favorite picks

73. Vaadin += GWT

77. GWT
Compatible

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

79. Se
rve
r P
r-
e
Op
od
u
sid
c tim
or
tiv
df
ized
ity
ize
ol
f or
r
tim
Op nt
Co
t-
en
Cli

80. Architecture

88. New Windowing API

90. Built-in high level
View management

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

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

93. Sass

94. Variables & functions

95. Mixins

96. Redesigned
Forms

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

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

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

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

103. “Joonas Lehtinen”
presentation
Component
model
firstName = “Joonas”
lastName = “Lehtinen”

104. RPC
State

105. Widget
6
Paintable
Variable
client Changes
server
UIDL
Component

106. Widget
7
Connector
client
State
server
RPC
Component

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

108. JavaScript
Add-ons

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

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

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

112. getting
started

114. Eclipse

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

116. Download for Free
vaadin.com/book
ework
s that
o u an d
~700 pages

117. vaadin.com/vaadin7

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