Introduction to Vaadin 7 presentation given at Devoxx 2012

2. Vaadin 7
Joonas Lehtinen, CEO
@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

9. java html

10. Why on earth?

11. consumerEE

13. expectations

14. reality

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

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

17. How?

18. 123
Key Ideas

19. 1
Rich
Components

20. User Inteface
Data Source
Theme

23. Rich Applications

27. User Inteface
Data Source
Theme

32. User Inteface
Data Source
Theme

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

35. 2
Server + Client

36. Layers of abstraction
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

37. How does it work,
really?

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

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

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

44. Trying it out

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

47. 3
Embracing
Java

48. Any JVM
Language

49. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

50. No
browser
plugins
Nothing to
install

51. Servlet
Portlet
(most) clouds

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

54. Vaadin
7
Framework

55. Empower Developers
Embrace Extendability
Clean Up

56. Vaadin += GWT

60. GWT
Compatible

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

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

63. Architecture

65. Refactored
windowing

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

68. @Title("Vaadin 7 Application")
public class Vaadin7uiUI extends UI {
@Override
public void init(VaadinRequest request) {
addComponent(new TextField("What is your name"));
addComponent(new Button("Do not push me"));
}
}

69. SASS

70. Variables & functions

71. Mixins

72. Nesting

73. Selector Inheritance

74. Redesigned
Forms

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

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

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

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

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

82. final TextField textField = new TextField("Name");
textField.setConverter(new StringToNameConverter());
// ....
Name name = (Name) textField.getConvertedValue();

83. public class StringToNameConverter implements Converter<String, Name> {
public Name convertToModel(String text, Locale locale)
throws ConversionException {
// do the conversion
}
public String convertToPresentation(Name name, Locale locale)
throws ConversionException {
// do the conversion
}
public Class<Name> getModelType() {
return Name.class;
}
public Class<String> getPresentationType() {
return String.class;
}
}

84. Renewed
communication

85. Widget
6
Paintable
Variable
client Changes
server
UIDL
Component

86. Widget
7
Connector
client
State
server
RPC
Component

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

88. JavaScript
Add-ons

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

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

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

92. getting
started

94. Maven
mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=7.0.0.beta8
mvn package yourproject-1.0.war

95. Eclipse
http://vaadin.com/
eclipse/experimental

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

97. aadin
with V nroo
s
ted o Grö
#85
gStar By Mark
ttin
DE:
Ge
LU rnal
INC Exte urces
NTS o
CO NTE Res
adin tion
m
ut Va p plica
Abo An A
o
ting
C re a
rd z . c
s
nent nts
Co mpo m pone Web ser File urces
t Co Brow -Side Res
o
ayou ...
L m o re t
Clien e ntai
ner
a
es nd Co
Them inding a Engi
n sts rvlet
fc
eque Se
B AX R
AJ
Data
i t re
ent
opm efau
lt
d evel us t like n Java t Data g D
me
IN ation ations j The
in
Vis
.A Bind
ervle
AAD pplic pplic ing
or Sw ined
S
UT V eb a
n
a UI nt atio
O xw eb WT pone Inhe
rits
pplic ces
AB e Aja o build w uch as A onta n Com A
our
z!
atio
ve r-sid u t s, s ne nts c A pplic es pp licat
ion Res
a ser
ang
s yo work e compo
d
s Ch A
Clas mes
in is allow p frame ts The
fcar
c Even ata
Vaad ork that eskto terfa n D
del
me w al d us er in s. ru ns o Inhe
rits
E vent r Mo
fra i t i o n u i l t f ro m nent code d by a Liste
ne
trad mpo tion
Re
b l e ser
with ut co plica r n
on is hand nt-serve
U io
licat base
pl icati lly in layo , th e ap tio n is lie s
App Data
ap ica odel terac er. The
c
ch a
e
r a rc h en m l user in s s, su he s
ject
r
hie riv w ie ation
er-d tua e bro chnolog per. As t s no pplic on ob on with
t Mo
e se
rv c
the a ning in
th te lo ei aadi
nA licati
In th hile n ient-
side deve ser, ther for V
to the app e applicati
er, w ngine ru the he itect
ure
serv n y c l i s i b l e t o t h e b ro w h e A p a c Arch ence ched to th
a
side
e
and
a
nv t re 2: refer
get a onent atta
Ge
in nder
cl i e n t - i c a t i o n s i p t , a re i ript u Figu
an
n r vaSc sed You c y comp
co m m u d J a v a S c u n s a s J a n i s re l e a Web face
L an
HTM ide eng ug-ins. V
in er a adi Ser vice Ho t from an user
inter le
with hand
t-s
clien o install
pl You r
EJB Tip tion u ca
n
ava n terac which yo
need
t in J
licat
io er in ts,
2.0. Vaad App ers
en n mode side even l, us ith
L icen
s e
va UI ents B t List rive er - t ton w
pon
Even event-d gers serv
Ja D
a bu
Web r Com s for
Web ser
Serv
e
In th
e trig vent
w
Bro -Side ents s . le c lick e
pon ener hand
lient com t list e
C
ne can even w, w
Engi
ugh , you with belo
WT) ple
t eno olkit (G exam s class:
m
ure
hitec
t is no To the u

98. Q&A