4. By combining a sophisticated turbocharged
and direct-injected three-cylinder engine
combined with multiple electric motors for
all-wheel drive and a total system output of
362 horsepower and 420 lb-ft. of torque.
Thanks to the car's low curb weight, 0 to 60
mph will come in right around 4.4 seconds
i8
14. 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
15. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
1 layer
required
required
required
vs
required
3 layers
-50% dev. time
required
-50% maintenance
vs
optional
required
full control over DOM
and communications
25. 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
46. 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.
81. 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);
82. 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(); }
"
"
}
83. 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);
}
});
}
85. Vaadin 7.2
Grid
• Client-side data model
• Client-side APIs
• Replaces Table and TreeTable
New theme that leverages SASS
Responsive extension built-in
http://vaadin.com/addon/vaadin-responsive
86.
87.
88. // 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/