Vaadin 7.2
-
Upload
joonas-lehtinen -
Category
Technology
-
view
109 -
download
0
description
Transcript of Vaadin 7.2
![Page 1: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/1.jpg)
Vaadin7@joonaslehtinen Founder & CEO .2
![Page 2: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/2.jpg)
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]
![Page 3: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/3.jpg)
11 maintenance releases since 28.6.2013 - one every 3 weeks 37 authors, 345 change sets7.1
![Page 4: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/4.jpg)
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
![Page 5: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/5.jpg)
Hybrid apps?
![Page 6: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/6.jpg)
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
![Page 7: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/7.jpg)
Web application layers
Backend server
Web server
Commu- nication JavaScript
Client-side UI
![Page 8: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/8.jpg)
Web application layers
Backend server
Web server
Commu- nication JavaScript
Server-side UI Automated
![Page 9: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/9.jpg)
Web application layers
JavaScriptJava to JavaScript
Web server
Backend server
Commu- nication
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
Client-side UI
![Page 10: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/10.jpg)
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
![Page 11: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/11.jpg)
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 &
![Page 12: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/12.jpg)
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
![Page 13: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/13.jpg)
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
![Page 14: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/14.jpg)
Server-
Client-
side
Optim
ized for
Productivity
Opt
imiz
ed fo
r
Cont
rol
![Page 15: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/15.jpg)
Server-Client-
sideO
ptim
ized
for
Prod
uctiv
ity
Optim
ized for
Control
![Page 16: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/16.jpg)
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
![Page 17: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/17.jpg)
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
![Page 18: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/18.jpg)
![Page 21: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/21.jpg)
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
![Page 22: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/22.jpg)
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
![Page 23: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/23.jpg)
Estimating Complexity
![Page 24: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/24.jpg)
Server-sideClient-side
1 class !
190 LOC
4 classes 2 interfaces ~ 500 LOC 3X
![Page 25: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/25.jpg)
Vaadin RPC State
![Page 26: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/26.jpg)
server
client
Component
Widget
Connector
RPC
State
Demo
![Page 27: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/27.jpg)
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
![Page 28: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/28.jpg)
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
![Page 29: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/29.jpg)
PUSHSince 7.1
![Page 30: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/30.jpg)
@Push MyUI !
!
<async-supported/> !
!
vaadin-push dependency
![Page 31: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/31.jpg)
JavaScript Add-ons
6/7
![Page 32: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/32.jpg)
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
![Page 33: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/33.jpg)
!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
![Page 34: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/34.jpg)
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
![Page 35: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/35.jpg)
Grid
![Page 36: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/36.jpg)
• >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
![Page 37: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/37.jpg)
• 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?
![Page 38: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/38.jpg)
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
![Page 39: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/39.jpg)
Escalator
![Page 40: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/40.jpg)
• 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
![Page 41: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/41.jpg)
• 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
![Page 42: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/42.jpg)
Valo Theme
![Page 43: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/43.jpg)
Seriously SASSy
![Page 44: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/44.jpg)
Variables & functions
![Page 45: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/45.jpg)
Mixins
![Page 46: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/46.jpg)
Nesting
![Page 47: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/47.jpg)
Selector Inheritance
![Page 48: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/48.jpg)
<Beat design example>
![Page 49: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/49.jpg)
![Page 50: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/50.jpg)
![Page 51: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/51.jpg)
![Page 52: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/52.jpg)
Responsive
![Page 53: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/53.jpg)
// 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/
![Page 54: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/54.jpg)
TouchKit 4
![Page 55: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/55.jpg)
New cross-platform theme http://demo.vaadin.com/parking/
Windows Phone 8 support
Vaadin TouchKit 4.0
![Page 56: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/56.jpg)
New cross-platform theme http://demo.vaadin.com/parking/
Windows Phone 8 support
Vaadin TouchKit 4.0
![Page 57: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/57.jpg)
TestBench 4
![Page 58: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/58.jpg)
ButtonElement okButton = $(ButtonElement.class).caption("OK").first(); okButton.focus(); okButton.click(); List<AbstractLayoutElement> list = $(AbstractLayoutElement.class).all();
ElementQuery API
![Page 59: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/59.jpg)
getting started
![Page 60: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/60.jpg)
![Page 61: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/61.jpg)
Eclipse
Download plugin from Martketplace
![Page 62: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/62.jpg)
IntelliJ IDEA
Built-in support
![Page 63: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/63.jpg)
Netbeans
Download plugin Netbeans Plugin Portal
![Page 64: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/64.jpg)
mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
Maven
![Page 65: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/65.jpg)
Download for Freevaadin.com/book
728 pages
9 789529 319701
ISBN 978-952-93-1970-1
PDF, ePub, HTML
![Page 66: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/66.jpg)
ApacheLicense
![Page 67: Vaadin 7.2](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7f7ab4a79594f2e8b45a3/html5/thumbnails/67.jpg)
community of
100.000+ developers
Ohloh #2 used
Java Web Framework