2. Disclaimer
Vaadin 7.2 is nowhere
near release even though I
though it would have been released
by DevNexus when submitting this
presentation. I hope you would not take this a case
example for missing the estimated release dates. Even though it is clearly the case….
!
Sorry, it will be released soon [when it is ready]
10. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
Client-side UI
required
11. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
Server-side UI & Client-side UI
required
12. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
required
13. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
1 layer
-50% dev. time
required
-50% maintenance
optional
vs
required
required
required
vs
required
required
3 layers
full control over DOM
and communications
16. Client-side
Use for
Server-side
Use for
•
Offline!
•
Most places ( - 50% cost )!
•
Low latency interaction!
•
High security!
•
Maximum scalability
•
Utilizing full Java platform
Hybrid
Benefits of the both sides, but adds complexity
17. Client-side
Hybrid
Server-side
3 layer UI
1-3 layer UI
1 layer UI
Full control!
You choose!
Automated!
offline ready
architecture
offline for chosen
functionality
connection to
server required
21. Web Page Title
Google
http://domain.com
Client-side GWT-RPC
Server-side
First name
Table cell
Table cell
Table cell
Table cell
Table cell
Client-side Vaadin-RPC
Last name
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Delete
New
Last name
Phone number
rd mountains,
Far far away, behind the wo
ia and
far from the countries Vokal
the blind texts.
Consonantia, there live
okmarksgrove
Separated they live in Bo
mantics, a
right at the coast of the Se
large language ocean.
Table cell
Table cell
Edit
First name
Server-side
Email address
Phone number
Email address
Save
Offline
Cancel
n flows by their
A small river named Dude
the necessary
place and supplies it with
matic country, in
regelialia. It is a paradise
tences fly into
which roasted parts of sen
your mouth.
ng has no
Even the all-powerful Pointi
ts it is an
control about the blind tex
ic life One day
almost unorthograph
d text by the
however a small line of blin
cided to leave
name of Lorem Ipsum de
r. The Big
for the far World of Gramma
to do so,
Oxmox advised her not
nds of bad
because there were thousa
Commas.
32. 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);
33. 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(); }
!
!
}
34. 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);
}
});
}
36. Table: challenges
•
>10 years old architecture
•
Really hard to customize
•
Client-side API missing (and impossible)
•
Performance (heavy DOM tree)
•
Some key features missing (frozen
columns, ..)
37. Grid: New generation table for
the next 10 years?
•
Super fast on all devices
•
Unlimited datasets ("zillion rows")
•
Built for extensibility
•
Superset of features compared to Table
•
Client- and Server API
40. Some of the key features in 7.2
•
Renderers
•
Client-side API and data sources
•
Editor rows
•
"Billion pixel scrolling"
•
Hierarchical headers
•
Widgets in headers
41. Some of the key features in 7.x
•
Hierarchy
•
Variable row height
•
Embedding to super long pages (body
scrollbars)
•
Infinite scrolling
•
Components in cells
•
Details rows
53. // Vaadin UI
protected void init(VaadinRequest request) {
new Responsive(this);
}
!
!
// CSS
.v-ui[width-range~="0-800px"] {
/* Styles that apply when the UI's width is
between 0 and 800 pixels */
}
.v-ui[width-range~="801px-"] {
/* Styles that apply when the UI's width is
over 800 pixels */
}
http://demo.vaadin.com/responsive/