My Vaadin 7 presentation at Confess

1. Vaadin 7
Joonas Lehtinen
Founder / Vaadin
@joonaslehtinen

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

3. New in
7

4. Getting
started
QA

6. User interface
framework for rich
web applications

7. java html

8. Why on earth?

10. expectations

11. reality

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

13. Challenge
How to build consumer
grade UX with business
system budget

14. How?

15. 123
Key Ideas

16. 1
Rich
Components

17. User Inteface
Data Source
Theme

28. User Inteface
Data Source
Theme

33. User Inteface
Data Source
Theme

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

36. 2
Server + Client

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

38. How does it work,
really?

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

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

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

44. Hello World!

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

47. 3
Embracing
Java

48. Any language
on JVM

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
∙∙∙

53. 7
Vaadin
today

54. v0.1
2001
v3
2002
Open
Source

55. v4
2006
Ajax
v5
2007

56. 7
v6 Feb
2009

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

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

69. vaadin.com/7

70. 7
Favorite picks

71. Vaadin += GWT

75. GWT
Compatible

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

77. Architecture

79. New Windowing API

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

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

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

84. Demo
Built-in high level
View management

85. Demo
Sass

86. Redesigned
Forms

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

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

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

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

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

94. RPC
State

95. 6 Widget
Paintable
Variable
client Changes
server
UIDL
Component

96. 7 Widget
Demo
Connector
client
State
server
RPC
Component

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

98. JavaScript
Add-ons

99. Publish API from Java
getPage().getJavaScript().addFunction("myCallback",
new JavaScriptCallback() {
public void call(JSONArray arguments) throws JSONException {
// Do something with the arguments
}
});
Use from JavaScript
window.myCallback('foo', 100);

100. Server-side Java API for Widget
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(); }
}

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

103. Vaadin Framework 7.1 April
• Server push
• Based on Atmosphere Framework
• Web sockets, long polling and polling
• 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
• Arithmetics for SASS
• Packaging SCSS / CSS for add-ons

105. Vaadin Charts 1.1 May
• 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

113. Vaadin TouchKit 3.0 April
• Vaadin 7 support
• New components:
• URLField
• Datefield
• Combobox

114. Vaadin TestBench 3.1 May
• Headless mode with
Phantom JS

115. Vaadin CDI
• Registering UI with @CDIUI annotation (web.xml no more)
• Registering Views (to CDIViewManager)
• Decoupling UI:s by injecting UI components (handy for MVP)
• Injecting all the normal Java EE stuff (ejbs, events, ...)
• UI Scope to complement the session scope
• Supports JAAS (set @RolesAllowed for a View, ...)
• 1.0 alpha to be released any day now (in staging repo today)
• Apache 2.0 License

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

117. getting
started

119. Eclipse

120. mvn archetype:generate
-DarchetypeGroupId=com.vaadin
Maven -DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=7.0.3

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

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

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