vaadin jump start
DESCRIPTION
Introduction to the Vaadin framework. The lecture was delivered in Hebrew. You can watch the lecture at http://youtu.be/ueQ-TGuIW1Q. The leTRANSCRIPT
![Page 1: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/1.jpg)
Vaadin Jump StartHaim MichaelMay 30th, 2014
All logos, trade marks and brand names used in this presentation belong to their respective owners. Haim Michael and LifeMichael are not related, connectedor associated with any of the technologies mentioned in this presentation or with the companies that develop them.
You can find the video clip at http://youtu.be/ueQ-TGuIW1Q.
Li fe M
ic hae l .c o
m
![Page 2: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/2.jpg)
Table of ContentLi fe M
ic hae l .c o
m● What is Vaadin?● Google Web Toolkit● Extending Vaadin● Vaadin Themes ● Data Binding ● Visual Designer● Vaadin TouchKit● The History of Vaadin● Easy Deployment ● Vaadin IDEs● Learning Resources● Questions & Answers
![Page 3: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/3.jpg)
What is Vaadin?● Vaadin is a Java web applications framework that
simplify the development of one page web applications
with a rich user interface.
● Vaadin creates the code running on the web browser,
including the code that communicates with the server.
● Using Vaadin we don't need to learn client side web
technologies such as JavaScript, CSS and HTML5.
www.vaadin.com
Li fe M
ic hae l .c o
m
![Page 4: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/4.jpg)
What is Vaadin?● Handling the first HTTP request from the client Vaadin
returns bunch of code in JavaScript back to the client.
● That code is responsible from now on for rendering the
user interface, handling its events and communicating
with the server.
Li fe M
ic hae l .c o
m
Web Browser HTTP Server
Code We Developedusing Vaadin
Code in JavaScript Generated by Vaadin
continuousconnection
![Page 5: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/5.jpg)
What is Vaadin?● Using Vaadin the code looks as if we were developing a
stand alone application with GUI based on Swing.
Li fe M
ic hae l .c o
m
@SuppressWarnings("serial")public class HelloUI extends UI {
@Overrideprotected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();layout.setMargin(true);setContent(layout);Button button = new Button("Click Me");button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) { layout.addComponent(new Label("click!")); }
}); layout.addComponent(button);
}}
![Page 6: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/6.jpg)
Google Web Toolkit● The Vaadin framework uses the Google Web Toolkit
framework that assists with generating the code in
JavaScript and provides the capability to create a full
featured user interface.
www.gwtproject.org
Li fe M
ic hae l .c o
m
![Page 7: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/7.jpg)
Extending Vaadin● Vaadin allows us to extend it with new 3rd party widgets
as well as with our owns. We can find lots of add-ons
ready for use in the Vaadin directory.
https://vaadin.com/directory
Li fe M
ic hae l .c o
m
![Page 8: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/8.jpg)
Vaadin Themes● Using Vaadin we get a clear separation between the
structure of the user interface and its appearance.
● The appearance is controlled by the theme we choose.
● We can use themes that were already developed or
develop our own. Each theme includes mainly CSS.
Li fe M
ic hae l .c o
m
![Page 9: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/9.jpg)
Data Binding● The Vaadin framework allows us to bind user interface
components directly to the data they display.
● It is possible to create UI components that allow the end
user to edit the data.
Li fe M
ic hae l .c o
m
![Page 10: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/10.jpg)
Visual Designer● The visual designer simplifies the development
process. The code it generates is relatively readable.
Li fe M
ic hae l .c o
m
![Page 11: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/11.jpg)
Vaadin TouchKit● The Vaadin TouchKit is a responsive framework that
includes a collection of mobile platform optimized HTML5
widgets.
www.vaadin.com/touchkit
Li fe M
ic hae l .c o
m
![Page 12: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/12.jpg)
Vaadin TouchKit● Vaadin TouchKit targets Android 2.3 (or newer), iOS 5 (or
newer) and Windows Phone 8 (or newer).
Li fe M
ic hae l .c o
m
![Page 13: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/13.jpg)
Vaadin TouchKit● The Vaadin TouchKit is optimized for mobile telephones
hybrid applications development. Vaadin TouchKit
supports the PhoneGap framework and allows us writing
code in Java that is executed on the server and takes
care after the required interaction with the mobile
telephone hardware.
Li fe M
ic hae l .c o
m
![Page 14: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/14.jpg)
Vaadin TouchKit● The Vaadin TouchKit is available for free when
developing open source projects. When dealing with
commercial products there is a license fee.
Li fe M
ic hae l .c o
m
![Page 15: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/15.jpg)
The History of Vaadin● The framework was born in 2000. The original name was
Millstone Library.
● The framework was developed as inner project in IT Mill in
order to develop an information system for one of its
clients.
Li fe M
ic hae l .c o
m
![Page 16: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/16.jpg)
The History of Vaadin● In 2006 IT Mill released a new version that included an
extensive use of Ajax and in 2007 the client side engine
was rewritten with GWT.
● In 2009 the framework was renamed to Vaadin. Shortly
after, the IT Mill company was also renamed as Vaadin.
● Vaadin 7 was released in 2012 and it is significantly more
web oriented.
Li fe M
ic hae l .c o
m
![Page 17: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/17.jpg)
Easy Deployment● The Vaadin framework uses one single Java Servlet for
running the application.
● We can deploy a Vaadin based web application on every
Java EE application server, such as Tomcat*, WebLogic,
WebSphere, Jboss and Glassfish.
* Apache Tomcat is not a Java EE application server. It is merely a web container. For
running a vaadin web application it is sufficient.
Li fe M
ic hae l .c o
m
![Page 18: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/18.jpg)
Vaadin IDEs● The Vaadin plugin is available for Eclipse, Netbeans and
IntelliJ.
Li fe M
ic hae l .c o
m
www.eclipse.org www.netbeans.org
www.jetbrains.com/idea/
![Page 19: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/19.jpg)
Learning Resources● You can find the Book of Vaadin available online for free at
https://vaadin.com/book.
Li fe M
ic hae l .c o
m
![Page 20: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/20.jpg)
Learning Resources● The Vaadin API documentation can be found at
https://vaadin.com/api.
Li fe M
ic hae l .c o
m
![Page 21: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/21.jpg)
Learning Resources● You can find a growing number of online free courses about
various topics in the Java programming language (including
Vaadin) at http://abelski.lifemichael.com.
Li fe M
ic hae l .c o
m
![Page 22: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/22.jpg)
Learning Resources● You can find my israeli guide for using Vaadin available for
free at http://www.vaadinbook.co.il.
Li fe M
ic hae l .c o
m
![Page 23: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/23.jpg)
Questions & Answers● Three courses you might find interesting include
Software Engineering in PHP
more info
Android 4.4 Java Applications Development
more info
HTML5 Cross Platform Mobile Applications
more info
● If you enjoyed my lecture please leave me a comment
at http://speakerpedia.com/speakers/life-michael.
Thanks for your time!
Haim.
Li fe M
ic hae l .c o
m
![Page 24: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/24.jpg)
Vaadin Jump StartHaim MichaelMay 30th, 2014
All logos, trade marks and brand names used in this presentation belong to their respective owners. Haim Michael and LifeMichael are not related, connectedor associated with any of the technologies mentioned in this presentation or with the companies that develop them.
You can find the video clip at http://youtu.be/ueQ-TGuIW1Q.
LifeMic hael.c o
m
![Page 25: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/25.jpg)
Table of ContentLifeMic hael.c o
m● What is Vaadin?● Google Web Toolkit● Extending Vaadin● Vaadin Themes ● Data Binding ● Visual Designer● Vaadin TouchKit● The History of Vaadin● Easy Deployment ● Vaadin IDEs● Learning Resources● Questions & Answers
![Page 26: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/26.jpg)
What is Vaadin?● Vaadin is a Java web applications framework that
simplify the development of one page web applications
with a rich user interface.
● Vaadin creates the code running on the web browser,
including the code that communicates with the server.
● Using Vaadin we don't need to learn client side web
technologies such as JavaScript, CSS and HTML5.
www.vaadin.com
LifeMic hael.c o
m
![Page 27: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/27.jpg)
What is Vaadin?● Handling the first HTTP request from the client Vaadin
returns bunch of code in JavaScript back to the client.
● That code is responsible from now on for rendering the
user interface, handling its events and communicating
with the server.
LifeMic hael.c o
m
Web Browser HTTP Server
Code We Developedusing Vaadin
Code in JavaScript Generated by Vaadin
continuousconnection
![Page 28: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/28.jpg)
What is Vaadin?● Using Vaadin the code looks as if we were developing a
stand alone application with GUI based on Swing.
LifeMic hael.c o
m
@SuppressWarnings("serial")public class HelloUI extends UI {
@Overrideprotected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();layout.setMargin(true);setContent(layout);Button button = new Button("Click Me");button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) { layout.addComponent(new Label("click!")); }
}); layout.addComponent(button);
}}
![Page 29: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/29.jpg)
Google Web Toolkit● The Vaadin framework uses the Google Web Toolkit
framework that assists with generating the code in
JavaScript and provides the capability to create a full
featured user interface.
www.gwtproject.org
LifeMic hael.c o
m
![Page 30: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/30.jpg)
Extending Vaadin● Vaadin allows us to extend it with new 3rd party widgets
as well as with our owns. We can find lots of add-ons
ready for use in the Vaadin directory.
https://vaadin.com/directory
LifeMic hael.c o
m
![Page 31: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/31.jpg)
Vaadin Themes● Using Vaadin we get a clear separation between the
structure of the user interface and its appearance.
● The appearance is controlled by the theme we choose.
● We can use themes that were already developed or
develop our own. Each theme includes mainly CSS.
LifeMic hael.c o
m
![Page 32: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/32.jpg)
Data Binding● The Vaadin framework allows us to bind user interface
components directly to the data they display.
● It is possible to create UI components that allow the end
user to edit the data.
LifeMic hael.c o
m
![Page 33: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/33.jpg)
Visual Designer● The visual designer simplifies the development
process. The code it generates is relatively readable.
LifeMic hael.c o
m
![Page 34: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/34.jpg)
Vaadin TouchKit● The Vaadin TouchKit is a responsive framework that
includes a collection of mobile platform optimized
HTML5 widgets.
www.vaadin.com/touchkit
LifeMic hael.c o
m
![Page 35: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/35.jpg)
Vaadin TouchKit● Vaadin TouchKit targets Android 2.3 (or newer), iOS 5 (or
newer) and Windows Phone 8 (or newer).
LifeMic hael.c o
m
![Page 36: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/36.jpg)
Vaadin TouchKit● The Vaadin TouchKit is optimized for mobile telephones
hybrid applications development. Vaadin TouchKit
supports the PhoneGap framework and allows us writing
code in Java that is executed on the server and takes
care after the required interaction with the mobile
telephone hardware.
LifeMic hael.c o
m
![Page 37: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/37.jpg)
Vaadin TouchKit● The Vaadin TouchKit is available for free when
developing open source projects. When dealing with
commercial products there is a license fee.
LifeMic hael.c o
m
![Page 38: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/38.jpg)
The History of Vaadin● The framework was born in 2000. The original name was
Millstone Library.
● The framework was developed as inner project in IT Mill in
order to develop an information system for one of its
clients.
LifeMic hael.c o
m
![Page 39: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/39.jpg)
The History of Vaadin● In 2006 IT Mill released a new version that included an
extensive use of Ajax and in 2007 the client side engine
was rewritten with GWT.
● In 2009 the framework was renamed to Vaadin. Shortly
after, the IT Mill company was also renamed as Vaadin.
● Vaadin 7 was released in 2012 and it is significantly more
web oriented.
LifeMic hael.c o
m
![Page 40: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/40.jpg)
Easy Deployment● The Vaadin framework uses one single Java Servlet for
running the application.
● We can deploy a Vaadin based web application on every
Java EE application server, such as Tomcat*, WebLogic,
WebSphere, Jboss and Glassfish.
* Apache Tomcat is not a Java EE application server. It is merely a web container. For
running a vaadin web application it is sufficient.
LifeMic hael.c o
m
![Page 41: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/41.jpg)
Vaadin IDEs● The Vaadin plugin is available for Eclipse, Netbeans and
IntelliJ.
LifeMic hael.c o
m
www.eclipse.org www.netbeans.org
www.jetbrains.com/idea/
![Page 42: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/42.jpg)
Learning Resources● You can find the Book of Vaadin available online for free at
https://vaadin.com/book.
LifeMic hael.c o
m
![Page 43: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/43.jpg)
Learning Resources● The Vaadin API documentation can be found at
https://vaadin.com/api.
LifeMic hael.c o
m
![Page 44: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/44.jpg)
Learning Resources● You can find a growing number of online free courses about
various topics in the Java programming language (including
Vaadin) at http://abelski.lifemichael.com.
LifeMic hael.c o
m
![Page 45: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/45.jpg)
Learning Resources● You can find my israeli guide for using Vaadin available for
free at http://www.vaadinbook.co.il.
LifeMic hael.c o
m
![Page 46: Vaadin Jump Start](https://reader034.vdocuments.mx/reader034/viewer/2022042814/554f4be5b4c905b9508b495b/html5/thumbnails/46.jpg)
Questions & Answers● Three courses you might find interesting include
Software Engineering in PHP
more info
Android 4.4 Java Applications Development
more info
HTML5 Cross Platform Mobile Applications
more info
● If you enjoyed my lecture please leave me a comment
at http://speakerpedia.com/speakers/life-michael.
Thanks for your time!
Haim.
LifeMic hael.c o
m