Introduction to the Vaadin framework. The lecture was delivered in Hebrew. You can watch the lecture at http://youtu.be/ueQ-TGuIW1Q. More information about the Java course I deliver can be found at java.course.lifemichael.com

1. Vaadin Jump Start
Haim Michael
May 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, connected
or 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.
LifeMichael.com

2. Table of Content
LifeMichael.com
●
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

3. 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
LifeMichael.com

4. 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.
LifeMichael.com
Web Browser HTTP Server
Code We Developed
using Vaadin
Code in JavaScript
Generated by Vaadin
continuous
connection

5. What is Vaadin?
● Using Vaadin the code looks as if we were developing a
stand alone application with GUI based on Swing.
LifeMichael.com
@SuppressWarnings("serial")
public class HelloUI extends UI {
@Override
protected 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);
}
}

6. 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
LifeMichael.com

7. 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
LifeMichael.com

8. 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.
LifeMichael.com

9. 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.
LifeMichael.com

10. Visual Designer
● The visual designer simplifies the development
process. The code it generates is relatively readable.
LifeMichael.com

11. Vaadin TouchKit
● The Vaadin TouchKit is a responsive framework that
includes a collection of mobile platform optimized HTML5
widgets.
www.vaadin.com/touchkit
LifeMichael.com

12. Vaadin TouchKit
● Vaadin TouchKit targets Android 2.3 (or newer), iOS 5 (or
newer) and Windows Phone 8 (or newer).
LifeMichael.com

13. 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.
LifeMichael.com

14. Vaadin TouchKit
● The Vaadin TouchKit is available for free when
developing open source projects. When dealing with
commercial products there is a license fee.
LifeMichael.com

15. 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.
LifeMichael.com

16. 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.
LifeMichael.com

17. 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.
LifeMichael.com

18. Vaadin IDEs
● The Vaadin plugin is available for Eclipse, Netbeans and
IntelliJ.
LifeMichael.com
www.eclipse.org www.netbeans.org
www.jetbrains.com/idea/

19. Learning Resources
● You can find the Book of Vaadin available online for free at
https://vaadin.com/book.
LifeMichael.com

20. Learning Resources
● The Vaadin API documentation can be found at
https://vaadin.com/api.
LifeMichael.com

21. 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.
LifeMichael.com

22. Learning Resources
● You can find my israeli guide for using Vaadin available for
free at http://www.vaadinbook.co.il.
LifeMichael.com

23. 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.
LifeMichael.com

24. Vaadin Jump Start
Haim Michael
May 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, connected
or 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.
LifeMichael.com

25. Table of Content
LifeMichael.com
● 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

26. 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
LifeMichael.com

27. 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.
LifeMichael.com
Web Browser HTTP Server
Code We Developed
using Vaadin
Code in JavaScript
Generated by Vaadin
continuous
connection

28. What is Vaadin?
● Using Vaadin the code looks as if we were developing a
stand alone application with GUI based on Swing.
LifeMichael.com
@SuppressWarnings("serial")
public class HelloUI extends UI {
@Override
protected 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);
}
}

29. 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
LifeMichael.com

30. 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
LifeMichael.com

31. 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.
LifeMichael.com

32. 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.
LifeMichael.com

33. Visual Designer
● The visual designer simplifies the development
process. The code it generates is relatively readable.
LifeMichael.com

34. Vaadin TouchKit
● The Vaadin TouchKit is a responsive framework that
includes a collection of mobile platform optimized
HTML5 widgets.
www.vaadin.com/touchkit
LifeMichael.com

35. Vaadin TouchKit
● Vaadin TouchKit targets Android 2.3 (or newer), iOS 5 (or
newer) and Windows Phone 8 (or newer).
LifeMichael.com

36. 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.
LifeMichael.com

37. Vaadin TouchKit
● The Vaadin TouchKit is available for free when
developing open source projects. When dealing with
commercial products there is a license fee.
LifeMichael.com

38. 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.
LifeMichael.com

39. 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.
LifeMichael.com

40. 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.
LifeMichael.com

41. Vaadin IDEs
● The Vaadin plugin is available for Eclipse, Netbeans and
IntelliJ.
LifeMichael.com
www.eclipse.org www.netbeans.org
www.jetbrains.com/idea/

42. Learning Resources
● You can find the Book of Vaadin available online for free at
https://vaadin.com/book.
LifeMichael.com

43. Learning Resources
● The Vaadin API documentation can be found at
https://vaadin.com/api.
LifeMichael.com

44. 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.
LifeMichael.com

45. Learning Resources
● You can find my israeli guide for using Vaadin available for
free at http://www.vaadinbook.co.il.
LifeMichael.com

46. 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.
LifeMichael.com