Vaadin Introduction, 7.3 edition
-
Upload
joonas-lehtinen -
Category
Technology
-
view
342 -
download
2
description
Transcript of Vaadin Introduction, 7.3 edition
![Page 1: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/1.jpg)
Vaadin7introduction
@joonaslehtinen Founder & CEO
![Page 2: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/2.jpg)
Intro to Vaadin
new Label(“Hello world”)
![Page 3: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/3.jpg)
What’s new
Getting started
QA
![Page 4: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/4.jpg)
![Page 5: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/5.jpg)
User interface framework for rich
web applications
![Page 6: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/6.jpg)
User Interface Components
![Page 7: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/7.jpg)
Developer
Productivity
Rich
UX
![Page 8: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/8.jpg)
![Page 9: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/9.jpg)
htmljava
![Page 10: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/10.jpg)
123Key Ideas
![Page 11: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/11.jpg)
1Rich Components
![Page 12: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/12.jpg)
User Interface Data Source
Theme
![Page 17: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/17.jpg)
![Page 18: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/18.jpg)
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for desktop, tablet, and mobile consumption. As can be expected, over 98% of apps support desktop browsers, but we found it interesting that tablets had overtaken phones (at least when it came to support from GWT-based apps). In US, the number of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%25.7%
Phones
36.1%
Tablets
Desktop browsers
Others
2.1%
“Since gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phones”
Daniel
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10IE 9 IE 10 Firefox
79% 80% 94% 94%Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10IE 9 IE 10 Firefox
79% 80% 94% 94%
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for
desktop, tablet, and mobile consumption. As can be expected, over 98% of apps
support desktop browsers, but we found it interesting that tablets had overtaken
phones (at least when it came to support from GWT-based apps). In US, the number
of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%
25.7%
Phones
36.1%
Tablets
Desktop
browsers
Others2.1%
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are more
popular than support for
phones”
Daniel
iPhone Android
WP
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for
desktop, tablet, and mobile consumption. As can be expected, over 98% of apps
support desktop browsers, but we found it interesting that tablets had overtaken
phones (at least when it came to support from GWT-based apps). In US, the number
of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%
25.7%
Phones
36.1%
Tablets
Desktop
browsers
Others2.1%
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are more
popular than support for
phones”
Daniel
iPad Android Windows
++
![Page 19: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/19.jpg)
462 add-on components
![Page 20: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/20.jpg)
![Page 21: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/21.jpg)
![Page 22: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/22.jpg)
![Page 23: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/23.jpg)
![Page 24: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/24.jpg)
User Interface Data Source
Theme
![Page 25: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/25.jpg)
![Page 26: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/26.jpg)
![Page 27: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/27.jpg)
![Page 28: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/28.jpg)
![Page 29: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/29.jpg)
![Page 30: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/30.jpg)
![Page 31: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/31.jpg)
![Page 32: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/32.jpg)
![Page 33: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/33.jpg)
![Page 34: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/34.jpg)
User Interface Data Source
Theme
![Page 35: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/35.jpg)
![Page 36: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/36.jpg)
InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
![Page 37: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/37.jpg)
2Server + Client
![Page 38: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/38.jpg)
Web application layers
Backend server
Web server
Commu- nication JavaScript
![Page 39: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/39.jpg)
Web application layers
Backend server
Web server
Commu- nication JavaScript
Client-side UI
![Page 40: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/40.jpg)
Web application layers
Backend server
Web server
Commu- nication JavaScript
Server-side UI Automated
![Page 41: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/41.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 42: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/42.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 43: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/43.jpg)
How does server-side UI work, really?
![Page 44: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/44.jpg)
![Page 45: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/45.jpg)
• Initial HTML • CSS (theme) • Images • JavaScript
1.2M total
307k
compress
135k
reduced widgetset
![Page 46: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/46.jpg)
• name=”Joonas” • button clicked
261 bytes
![Page 47: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/47.jpg)
![Page 48: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/48.jpg)
• name=”Joonas” • button clicked
261 bytes
• Add notification
267 bytes
![Page 49: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/49.jpg)
Hello World!
![Page 50: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/50.jpg)
3Embracing Java
![Page 51: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/51.jpg)
Any language on JVM
![Page 52: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/52.jpg)
Internet Explorer Chrome Firefox Safari Opera
iOS Android
![Page 53: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/53.jpg)
No browser plugins
Nothing to install
![Page 54: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/54.jpg)
Servlet Portlet
(most) clouds · · ·
Anything Java
![Page 55: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/55.jpg)
Eclipse IntelliJ IDEA
Netbeans Maven / Gradle / Ant
· · · Anything Java
![Page 56: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/56.jpg)
Java EE Spring OSGi REST
· · · Anything Java
![Page 57: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/57.jpg)
Vaadin7series
![Page 58: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/58.jpg)
v3 2002
v0.1 2001
Open Source
![Page 59: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/59.jpg)
v4 2006
Ajax
v5 2007
![Page 60: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/60.jpg)
72013v6
2009
![Page 61: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/61.jpg)
Complete stack
Renewed from Inside
Sass
JS
HTML5+= GWT
RPC State
UI
Field
Push
![Page 62: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/62.jpg)
Vaadin += GWT
![Page 63: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/63.jpg)
![Page 64: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/64.jpg)
![Page 65: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/65.jpg)
![Page 66: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/66.jpg)
Server-
Client-
side
Optim
ized for
Productivity
Opt
imiz
ed fo
r
Cont
rol
![Page 67: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/67.jpg)
Architecture
![Page 68: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/68.jpg)
![Page 69: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/69.jpg)
Hybrid apps?
![Page 70: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/70.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 71: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/71.jpg)
![Page 94: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/94.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 95: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/95.jpg)
AddressbookBackend
Address Impl
![Page 96: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/96.jpg)
AddressbookBackendAddress ImplBackendFrontend
Server-side(with Vaadin)
Client-side(with GWT-RPC)
AddressbookEditor
![Page 97: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/97.jpg)
AddressbookBackendAddress ImplBackendFrontend
Server-side(with Vaadin)
Client-side(with GWT-RPC)
AddressbookEditor
AddressbookEditor
View
Connector
Client
Server
create
place
![Page 98: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/98.jpg)
AddressbookBackendAddress ImplBackendFrontend
Server-side(with Vaadin)
Client-side(with GWT-RPC)
AddressbookEditor
AddressbookEditor
RPCServlet ServiceView
Connector
Client
Server
create
place
implements
![Page 99: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/99.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 100: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/100.jpg)
Estimating Complexity
![Page 101: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/101.jpg)
Server-sideClient-side
1 class
190 LOC
4 classes 2 interfaces ~ 500 LOC 3X
![Page 102: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/102.jpg)
RPC State
![Page 103: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/103.jpg)
server
client
Component
Widget
Connector
RPC
7State
Demo
![Page 104: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/104.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 105: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/105.jpg)
JavaScript Integration
![Page 106: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/106.jpg)
Java ⇄ JavaScript RPC
![Page 107: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/107.jpg)
Java wrapper for existing JavaScript widget
![Page 108: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/108.jpg)
Connector for existing JavaScript widget
![Page 109: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/109.jpg)
Server Push
![Page 110: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/110.jpg)
@Push MyUI
<async-supported/>
vaadin-push dependency
Demo
![Page 111: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/111.jpg)
Responsive
![Page 112: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/112.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 113: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/113.jpg)
getting started
![Page 114: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/114.jpg)
![Page 115: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/115.jpg)
Eclipse
Download plugin from Martketplace
![Page 116: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/116.jpg)
IntelliJ IDEA
Built-in support
![Page 117: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/117.jpg)
Netbeans
Download plugin Netbeans Plugin Portal
![Page 118: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/118.jpg)
mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.3.0
Maven
![Page 119: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/119.jpg)
Download for Freevaadin.com/book
728 pages
9 789529 319701
ISBN 978-952-93-1970-1
PDF, ePub, HTML
![Page 120: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/120.jpg)
Apache License
![Page 121: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/121.jpg)
community of
100.000+ developers
Ohloh #2 used
Java Web Framework
![Page 122: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/122.jpg)
Who is using Vaadin?
wor
ld o
f web
app
licat
ions
show the beauty of nature
Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28
Moleculenix, Rums, SentiOne
and many more...https://vaadin.com/who-is-using-vaadin
https://vaadin.com/dock
![Page 123: Vaadin Introduction, 7.3 edition](https://reader031.fdocuments.us/reader031/viewer/2022022402/54627737b4af9f491c8b46c1/html5/thumbnails/123.jpg)
? [email protected] @joonaslehtinen(405) 513-0739