Lecture given at University of Turku kickstarting a series of Vaadin 7 lectures.

1. Vaadin overview
@joonaslehtinen

2. Key ideas

3. coding

4. Getting
started
QA

6. User interface
framework for rich
web applications

7. History behind Vaadin

8. healthcare portal, >100 kloc of perl, ..
98
19

9. web 1.0, netscape, ie5, ie6, ...

10. thinking of
object oriented design, desktop, Java, U and I ...

11. desktop programming paradigm for web!

12. found millstone ajax google web toolkit
00
08
02
05
20
20
20
20

13. re-released as
09
20

14. Used by >100.000 developers
in >150 countries
Building apps for fortune 500,
startups, governments, ...
across all industries
Collaborating by contributing
~300 plug-ins and helping each
other on a forum with ~1500
posts / m
add-ons, mainstream, 7
Backed by 60 person full-time
team in Fi, Us & De
10
12
11
20
20
20

15. java html

16. Why on earth?

18. expectations

19. reality

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

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

22. How?

23. 123
Key Ideas

24. 1
Components
everywhere

25. User Inteface
Data Source
Theme

28. Rich Applications

31. User Inteface
Data Source
Theme

36. SASS

37. Variables & functions

38. Mixins

39. User Inteface
Data Source
Theme

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

42. example
SQLContainer

43. Table
or any other UI component
SQLContainer
FreeformQuery
JDBC
SELECT * FROM ...

44. connectionPool =
new SimpleJDBCConnectionPool(
"org.hsqldb.jdbc.JDBCDriver",
"jdbc:hsqldb:mem:sqlcontainer",
"password", "", 2, 2);
SQLContainer container =
new SQLContainer(
new FreeformQuery(
"SELECT * FROM people",
Arrays.asList("ID"),
connectionPool));
Table table = new Table(null, container);

45. Table
or any other UI component
SQLContainer
TableQuery
JDBC
Database Table

46. • lazy loading
• advanced filtering
• sorting
• connection pooling
• transactions
• optimistic locking
• autocommit mode

47. • HSQLDB
• MySQL
• PostgreSQL
• Oracle
• MS SQL Server

48. 2
Server + Client

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

50. How does it work,
really?

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

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

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

56. Trying it out

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

59. Architecture

61. Vaadin += GWT

65. GWT
Compatible

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

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

68. Creating new UI
components is easy

69. HTTP(S)
“UI Component” “Widget”
• Button, Table, • Client-side peer for
Tree, ... the component
• Server-side data • Runs on JavaScript
Java Java
• Compiled with JDK • Google Web Toolkit

71. Widget
7
Connector
client
State
server
RPC
Component

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

77. PaperStack notes = new PaperStack();
!
! @Override
! public void init() {
// === Layout ========================================================
! ! HorizontalLayout lo= new HorizontalLayout();
! ! Window mainWindow = new Window("Postitnotes Application", lo);
! ! lo.setSizeFull();
! ! lo.addComponent(notes);
! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER);
! ! setMainWindow(mainWindow);! !
! ! notes.setWidth("350px");
! ! notes.setHeight("350px");
! !
// === Note 1 ========================================================
! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style='font-size: 24px'>” +
“<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c");
// === Note 2 ========================================================
! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style='font-size: 24px'>” +
“<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1");
// === Note 3 ========================================================
! ! notes.addComponent(new Label("<div style='font-size: 60px'><center><br/><br/><br/>” +
“DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1");
// === Note 4 ========================================================
! ! com.vaadin.ui.RichTextArea rta = new RichTextArea();
! ! rta.setSizeFull();
! ! notes.addComponent(rta);
! ! rta.setValue("<span style='font-size: 35pt; color: green;'>You can use any “ +
“Vaadin components here...</span>");
! }

79. JavaScript
Add-ons

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

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

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

83. 3
Embracing
Java

84. Any JVM
Language

85. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

86. No
browser
plugins
Nothing to
install

87. Servlet
Portlet
(most) clouds

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

90. Who is using Vaadin?

91. 24% 17% 12%
Business Services Technology Financial and Insurance
9% 9% 8%
Education Healthcare Telecommunication
7% 5% 9%
Industrial Goods Transport Other

95. OSC Enquiry System (TNT)
Logistics
OSC (Operational Service Capabilities) Enquiry provides a single
source for obtaining operational ‘door-to-door’ service capabilities
for all international and domestic products sold to TNT Express
OSC Enquiry provides POJO software services that can be
integrated into consuming applications to support their service
capability enquiry transactions.
The OSC Enquiry User Interface developed in Vaadin technology
also consumes some of the OSC Enquiry Services required by the
Service Quality users at TNT Express (150 or so).
The UI users are responsible for measuring operational service
performance by comparing actual achieved service against
estimated transit times quoted to customers. Corrective
maintenance actions can then be taken to improve the published
transit times. Comparison of our transit times to our competitors’ is
also facilitated this way.
https://vaadin.com/showcase/osc-enquiry-system-tnt

98. JavaOne
edition 2012
applications
Download
vaadin.com/dock
world of web
Introducing
Best of clie Vaadin += G
nt and serv
er developm
entWT
Get inspire
Web Applic d by our ca
se studies
Vaadin ation Scala
bility:

100. Who is Vaadin?

101. 6
0
Turku
Frankfurt
San Jose

102. getting
started

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

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

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

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