Vaadin introduction7 Intro to Vaadin
new Label(“Hello world”) What’s new QA
Getting started
User interface framework for rich web applications User Interface Components Developer Rich Productivity UX java html 12Key Ideas3 Rich Components1 User Interface Data Source Theme
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.
Desktop browsers
1.6 Going mobile GWT is a versatile technology that allows developers to create application UI for 1.6 Going mobile desktop, tablet, and mobile consumption. As can be expected, over 98% of apps “Since gwt is used extensively support desktop browsers, but we found it interesting that tablets had overtaken GWT is a versatile technology that allows developers to create application UI for phones (at least when it came to support from GWT-based apps). In US, the number in the enterprise, this may of apps supporting tablets was as high as 46%, while it was just 34% in Europe. 98.1%desktop, tablet, and mobile consumption. As can be expected, over 98% of apps explain why tablets are more support desktop browsers, but we found it interesting that tabletsTablets had overtaken Tablets phones (at least when it came to support from GWT-based apps). In US, the number popular than support for What kind of devices does your app support? of apps supporting tablets was as high as 46%, while it was just 34% in Europe. phones” Desktop browsers Daniel
3.5 Browsers to support in 2012 Desktop 36.1% 3.5 Browsers to support inbrowsers 2012 36.1% Phones “Since gwt is used extensively 6/7 8 in the enterprise, this may explain why tablets are more IE 6/7 Safari Opera IE 8 popular than support for 6/7 8 14% 18% 36% phones” 98.1% IE 6/7 Safari Opera 54%IE 8 14% 18%98.1% 36% 54%
What kind of devices does your app support? Tablets 25.7%
Others Daniel 9 10+ Phones IE 9 IE 10 + Chrome Firefox Others 9 10 2.1% 79%IE 9 80%IE 10 Chrome Firefox iPhone iPad 94% 94% 2.1% Android 79% 80% 94% 94%Android 25.7% Windows36.1% W Browsers developers expect to support in 2013 P
Browsers developers expect to support in 2013 “Since gwt is used extensively in the enterprise, this may What kind of devices does yourexplain whyapp tablets support? are more popular than support for phones”
Others 2.1% Phones Daniel
25.7% 500+ add-on components
User Interface Data Source Theme
User Interface Data Source Theme
InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ... Server2 + Client Web application layers
Backend Web Commu- JavaScript server server nication Web application layers Client-side UI
Backend Web Commu- JavaScript server server nication Web application layers
Backend Web Commu- JavaScript server server nication
Server-side UI Automated Web application layers
Backend Web Commu- Java to JavaScript server server nication JavaScript
required required required required JS Web application layers
Backend Web Commu- Java to JavaScript server server nication JavaScript Client-side UI
required required required required optional GWT
required required required required JS Web application layers
Backend Web Commu- Java to JavaScript server server nication JavaScript
required required optional optional optional Vaadin
required required required required optional GWT
required required required required JS
Server-side UI & Client-side UI Web application layers
Backend Web Commu- Java to JavaScript server server nication JavaScript
required required optional optional optional Vaadin
required required required-50% dev.required time optional GWT 1 layer -50% maintenance
required required required required
JS vs vs 3 layers full control over DOM and communications How does server-side UI work?
• Initial HTML • CSS (theme) • Images • JavaScript
1.2M total
compress
307k reduced widgetset 135k
• name=”Joonas” • button clicked
261 bytes
• name=”Joonas” • button clicked
261 bytes
• Add notification
267 bytes Embracing Java3 Any language on JVM Internet Explorer Chrome Firefox Safari Opera iOS Android No browser plugins Nothing to install Servlet Portlet (most) clouds · · · Anything Java Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant · · · Anything Java Java EE Spring OSGi REST · · · Anything Java Architecture
JavaScript Integration Java ⇄ JavaScript RPC Java wrapper for existing JavaScript widget Connector for existing JavaScript widget Server Push Demo @Push MyUI
// 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/ getting started
Eclipse
Download plugin from Martketplace IntelliJ IDEA
Built-in support Netbeans
Download plugin Netbeans Plugin Portal mvn archetype:generate -DarchetypeGroupId= com.vaadin Maven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.3.0 Download for Free vaadin.com/book
ISBN 978-952-93-1970-1
9789529319701
728 pages PDF, ePub, HTML Apache License community of 130.000+ developers
Ohloh #2 used Java Web Framework https://vaadin.com/dock
p.28
p.4 · Coffee with R&D: Turning Java into Java Who is using Giants named HTML5 and JVM
Vaadin? world of web applications web of world
Moleculenix, Rums, SentiOne and many more... https://vaadin.com/who-is-using-vaadin
show the beauty of nature ?