Download - Vaadin 7.2
Vaadin7@joonaslehtinen Founder & CEO .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]
11 maintenance releases since 28.6.2013 - one every 3 weeks 37 authors, 345 change sets7.1
Beautifying apps with new sassy theme
Power(ful) Grid
Hybrid apps & RPC
Vaadin 8 & GWT 3
Agenda: The future TB4 TK4
7.2
7.2
Hybrid apps?
0L/100km1€/100km
450km range!growing charge station network
2.5L/100km4€/100km
500km range!gas stationseverywhere
8.6L/100km13€/100km
550km range!gas stationseverywhere
Web application layers
Backend server
Web server
Commu- nication JavaScript
Client-side UI
Web application layers
Backend server
Web server
Commu- nication JavaScript
Server-side UI Automated
Web application layers
JavaScriptJava to JavaScript
Web server
Backend server
Commu- nication
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
Client-side UI
Web application layers
JavaScriptJava to JavaScript
Web server
Backend server
required optional optionalrequired
Commu- nication
optional
Vaad
in
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
Client-side UI
Web application layers
JavaScriptJava to JavaScript
Web server
Backend server
required optional optionalrequired
Commu- nication
optional
Vaad
in
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
Client-side UIServer-side UI &
Web application layers
JavaScriptJava to JavaScript
Web server
Backend server
required optional optionalrequired
Commu- nication
optional
Vaad
in
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
Web application layers
JavaScriptJava to JavaScript
Web server
Backend server
required optional optionalrequired
Commu- nication
optional
Vaad
in
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
1 layer vs
3 layers
-50% dev. time -50% maintenance vs full control over DOM and communications
Server-
Client-
side
Optim
ized for
Productivity
Opt
imiz
ed fo
r
Cont
rol
Server-Client-
sideO
ptim
ized
for
Prod
uctiv
ity
Optim
ized for
Control
Server-sideClient-side
Use for
• Offline!• Low latency interaction!• Maximum scalability
Use for
• Most places ( - 50% cost )!• High security!• Utilizing full Java platform
Benefits of the both sides, but adds complexity
Hybrid
Server-side1 layer UI
Automated!connection to
server required
Hybrid1-3 layer UI
You choose!offline for chosen
functionality
Client-side3 layer UI
Full control!offline readyarchitecture
http://demo.vaadin.com/parking/
Examplehttps://github.com/jojule/hybrid
http://domain.com
Web Page Title
First nameTable cell
Table cell
Phone number
Table cell
Table cell
Table cellTable cellTable cell
Table cell
Table cellTable cell
Table cellTable cell
Table cell
Table cell Table cell
Table cell
Last name
Table cellTable cell
Email address
Table cellTable cell
Far far away, behind the word mountains,
far from the countries Vokalia and
Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove
right at the coast of the Semantics, a
large language ocean.
A small river named Duden flows by their
place and supplies it with the necessary
regelialia. It is a paradisematic country, in
which roasted parts of sentences fly into
your mouth.
Even the all-powerful Pointing has no
control about the blind texts it is an
almost unorthographic life One day
however a small line of blind text by the
name of Lorem Ipsum decided to leave
for the far World of Grammar. The Big
Oxmox advised her not to do so,
because there were thousands of bad
Commas.
Server-side
OfflineClient-side Vaadin-RPC
Client-side GWT-RPCServer-side
Edit Delete New
Save Cancel
First name Last name
Phone number Email address
AddressbookBackendAddress ImplBackendFrontend
Server-side!(with Vaadin)
Client-side!(with GWT-RPC)
AddressbookEditor
AddressbookEditor
RPCServlet Service
ServiceAsync
View
Connector
Client
Server
Proxy(generated)
create
place
implements
implements
equal
Estimating Complexity
Server-sideClient-side
1 class !
190 LOC
4 classes 2 interfaces ~ 500 LOC 3X
Vaadin RPC State
server
client
Component
Widget
Connector
RPC
State
Demo
public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); }
private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this); !public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event)); }
serverclient
private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } }; !public Button() { registerRpc(rpc); }
Demo
AddressbookBackendAddress ImplBackendFrontend
Client-side!(with Conntector)
Client-side!(with GWT-RPC)
AddressbookEditor
RPCServlet Service
ServiceAsync
View
Client
Serverplace
implements
equal
View
place & !serve
AddressbookEditor
StateServer!RPC
Client!RPC
Connector Proxy(generated)
createimplementsConnector
create
PUSHSince 7.1
@Push MyUI !
!
<async-supported/> !
!
vaadin-push dependency
JavaScript Add-ons
6/7
getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } });
Publish API from Java
window.myCallback('foo', 100);
Use from JavaScript
!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(); }
!!}
Server-side Java API for Widget
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); } });}
Widget implementation in JavaScript
Grid
• >10 years old architecture • Really hard to customize • Client-side API missing (and impossible) • Performance (heavy DOM tree) • Some key features missing (frozen
columns, ..)
Table: challenges
• Super fast on all devices • Unlimited datasets ("zillion rows")
• Built for extensibility • Superset of features compared to Table • Client- and Server API
Grid: New generation table for the next 10 years?
Editor rowWidgetWidgetWidget
Editor rowComponentComponentComponent
Widget
Renderer
Grid
Escalator
Connector (Hierarchical) DataSource
(Hierarchical) DataSource
Grid
Component Component
Widget
Renderer Per column
In headers and cells
In headers and cells
Escalator
• Renderers • Client-side API and data sources • Editor rows • "Billion pixel scrolling" • Hierarchical headers • Widgets in headers
Some of the key features in 7.2
• Hierarchy • Variable row height • Embedding to super long pages (body
scrollbars) • Infinite scrolling • Components in cells • Details rows
Some of the key features in 7.x
Valo Theme
Seriously SASSy
Variables & functions
Mixins
Nesting
Selector Inheritance
<Beat design example>
Responsive
// 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/
TouchKit 4
New cross-platform theme http://demo.vaadin.com/parking/
Windows Phone 8 support
Vaadin TouchKit 4.0
New cross-platform theme http://demo.vaadin.com/parking/
Windows Phone 8 support
Vaadin TouchKit 4.0
TestBench 4
ButtonElement okButton = $(ButtonElement.class).caption("OK").first(); okButton.focus(); okButton.click(); List<AbstractLayoutElement> list = $(AbstractLayoutElement.class).all();
ElementQuery API
getting started
Eclipse
Download plugin from Martketplace
IntelliJ IDEA
Built-in support
Netbeans
Download plugin Netbeans Plugin Portal
mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
Maven
Download for Freevaadin.com/book
728 pages
9 789529 319701
ISBN 978-952-93-1970-1
PDF, ePub, HTML
ApacheLicense
community of
100.000+ developers
Ohloh #2 used
Java Web Framework