Download - Introduction to Vaadin 7
![Page 1: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/1.jpg)
Vaadin7today
Leif ÅstrandSenior Vaadin Expert
lördag 30 november 13
![Page 2: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/2.jpg)
Intro toVaadin How Vaadin
works
lördag 30 november 13
![Page 3: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/3.jpg)
new Label(“Hello world”)
lördag 30 november 13
![Page 4: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/4.jpg)
Gettingstarted
QA
lördag 30 november 13
![Page 5: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/5.jpg)
lördag 30 november 13
![Page 6: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/6.jpg)
User interface framework for rich
web applications
lördag 30 november 13
![Page 7: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/7.jpg)
Building blocks
lördag 30 november 13
![Page 8: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/8.jpg)
lördag 30 november 13
![Page 9: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/9.jpg)
htmljava
lördag 30 november 13
![Page 10: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/10.jpg)
Why on earth?
lördag 30 november 13
![Page 11: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/11.jpg)
lördag 30 november 13
![Page 12: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/12.jpg)
expectations
lördag 30 november 13
![Page 13: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/13.jpg)
reality
lördag 30 november 13
![Page 14: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/14.jpg)
businessconsumer
“million” users “500” users
>>100,000! / view 5,000! / view
10 views1!/user
50 views500!/user
lördag 30 november 13
![Page 15: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/15.jpg)
ChallengeHow to build consumer
grade UX with business system budget
lördag 30 november 13
![Page 16: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/16.jpg)
123Key Ideas
lördag 30 november 13
![Page 17: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/17.jpg)
1RichComponents
lördag 30 november 13
![Page 18: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/18.jpg)
User InterfaceData Source
Theme
lördag 30 november 13
![Page 20: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/20.jpg)
lördag 30 november 13
![Page 21: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/21.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
iPhoneAndroid
WP 8
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
iPadAndroidWindows 8
lördag 30 november 13
![Page 22: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/22.jpg)
lördag 30 november 13
![Page 23: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/23.jpg)
350+ add-oncomponents
lördag 30 november 13
![Page 24: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/24.jpg)
lördag 30 november 13
![Page 25: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/25.jpg)
lördag 30 november 13
![Page 26: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/26.jpg)
lördag 30 november 13
![Page 27: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/27.jpg)
lördag 30 november 13
![Page 28: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/28.jpg)
User InterfaceData Source
Theme
lördag 30 november 13
![Page 29: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/29.jpg)
lördag 30 november 13
![Page 30: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/30.jpg)
lördag 30 november 13
![Page 31: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/31.jpg)
lördag 30 november 13
![Page 32: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/32.jpg)
lördag 30 november 13
![Page 33: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/33.jpg)
Sass variables & functions
lördag 30 november 13
![Page 34: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/34.jpg)
Mixins
lördag 30 november 13
![Page 35: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/35.jpg)
User InterfaceData Source
Theme
lördag 30 november 13
![Page 36: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/36.jpg)
lördag 30 november 13
![Page 37: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/37.jpg)
InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
lördag 30 november 13
![Page 38: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/38.jpg)
2Server + Client
lördag 30 november 13
![Page 39: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/39.jpg)
Web application layers
Backendserver
Webserver
Commu-nication JavaScript
lördag 30 november 13
![Page 40: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/40.jpg)
Web application layers
JavaScriptJava toJavaScript
Webserver
Backendserver
required optional optionalrequired
Commu-nication
optional
Vaa
din
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
lördag 30 november 13
![Page 41: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/41.jpg)
Web application layers
JavaScriptJava toJavaScript
Webserver
Backendserver
required optional optionalrequired
Commu-nication
optional
Vaa
din
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
1 layervs
3 layers
-50% lines of code-50% development-50% maintenanceeasier to learn
lördag 30 november 13
![Page 42: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/42.jpg)
Server-
Client-
side
Optim
ized for
Productivity
Opt
imiz
ed fo
r
Cont
rol
lördag 30 november 13
![Page 43: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/43.jpg)
Server-Client-
sideO
ptim
ized
for
Prod
uctiv
ity
Optim
ized for
Controllördag 30 november 13
![Page 44: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/44.jpg)
server
client
Component
Widget
Connector
RPC
State
lördag 30 november 13
![Page 45: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/45.jpg)
How does it work, really?
lördag 30 november 13
![Page 46: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/46.jpg)
name = new TextField("Name");greetButton = new Button("Greet");
greetButton.addClickListener(new ClickListener() { public void buttonClick(ClickEvent event) { Notification.show("Ciao " + name.getValue()); }});
lördag 30 november 13
![Page 47: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/47.jpg)
• Initial HTML• CSS (theme)• Images• JavaScript
1200k total
300k
compress
135k
reducedwidget setand theme
lördag 30 november 13
![Page 48: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/48.jpg)
• name=”Leif”• Button clicked
332 bytes
lördag 30 november 13
![Page 49: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/49.jpg)
name = new TextField("Name");greetButton = new Button("Greet");
greetButton.addClickListener(new ClickListener() { public void buttonClick(ClickEvent event) { Notification.show("Ciao " + name.getValue()); }});
lördag 30 november 13
![Page 50: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/50.jpg)
• name=”Leif”• Button clicked
332 bytes
• Show notification
462 bytes
lördag 30 november 13
![Page 51: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/51.jpg)
Hello World!
lördag 30 november 13
![Page 52: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/52.jpg)
https://github.com/vaadin/documentmanager
https://vaadin.com/learn
Source
HOWTO Screencast
lördag 30 november 13
![Page 53: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/53.jpg)
3EmbracingJava
lördag 30 november 13
![Page 54: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/54.jpg)
Any JVMLanguage
lördag 30 november 13
![Page 55: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/55.jpg)
Internet ExplorerChromeFirefoxSafariOpera
iOSAndroid
lördag 30 november 13
![Page 56: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/56.jpg)
Nobrowserplugins
Nothing toinstall
lördag 30 november 13
![Page 57: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/57.jpg)
Servlet Portlet
(most) clouds
lördag 30 november 13
![Page 58: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/58.jpg)
EclipseIntelliJ IDEA
NetbeansMaven
Ant∙ ∙ ∙
lördag 30 november 13
![Page 59: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/59.jpg)
Vaadin += GWT
lördag 30 november 13
![Page 60: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/60.jpg)
lördag 30 november 13
![Page 61: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/61.jpg)
lördag 30 november 13
![Page 62: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/62.jpg)
lördag 30 november 13
![Page 63: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/63.jpg)
GWTCompatible
lördag 30 november 13
![Page 64: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/64.jpg)
Vaadin7.1lördag 30 november 13
![Page 65: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/65.jpg)
v32002
v0.12001
OpenSource
lördag 30 november 13
![Page 66: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/66.jpg)
v42006
Ajax
v52007
lördag 30 november 13
![Page 67: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/67.jpg)
7Febv6
2009
lördag 30 november 13
![Page 68: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/68.jpg)
lördag 30 november 13
![Page 69: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/69.jpg)
934 tickets closed during 16 months of development
3939 commits made by 23 authors
Oldest ticket created 3/2008Newest ticket 2/2013
3939 commits made by 23 authors93 % by 6 persons
> 1 000 000 lines of code touched
lördag 30 november 13
![Page 70: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/70.jpg)
gettingstarted
lördag 30 november 13
![Page 71: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/71.jpg)
lördag 30 november 13
![Page 72: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/72.jpg)
Eclipse
Download plugin from Martketplace
lördag 30 november 13
![Page 73: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/73.jpg)
IntelliJ IDEA
Built-in supportlördag 30 november 13
![Page 74: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/74.jpg)
Netbeans
Download plugin Netbeans Plugin Portal
lördag 30 november 13
![Page 75: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/75.jpg)
mvn archetype:generate-DarchetypeGroupId= com.vaadin-DarchetypeArtifactId= vaadin-archetype-application-DarchetypeVersion= 7.1.8
Maven
lördag 30 november 13
![Page 76: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/76.jpg)
Migration Guide:Vaadin 6 to 7
https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
lördag 30 november 13
![Page 77: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/77.jpg)
Download for Freevaadin.com/book
728 pages
9 789529 319701
ISBN 978-952-93-1970-1
PDF, ePub, HTML
lördag 30 november 13
![Page 78: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/78.jpg)
ApacheLicense
lördag 30 november 13
![Page 79: Introduction to Vaadin 7](https://reader033.vdocuments.us/reader033/viewer/2022052505/55632e5cd8b42a57348b52f8/html5/thumbnails/79.jpg)
community of100.000+ developers
Ohloh#2 used
Java WebFramework
lördag 30 november 13