Vaadin Jump Start
46
Vaadin Jump Start Haim Michael May 30 th , 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 . L i f e M i c h a e l . c o m
-
Upload
haim-michael -
Category
Software
-
view
449 -
download
0
description
Introduction to the Vaadin framework. The lecture was delivered in Hebrew. You can watch the lecture at http://youtu.be/ueQ-TGuIW1Q. The le
Transcript of Vaadin Jump Start
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
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
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
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
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);
}}
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
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
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
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
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
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
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
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
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
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
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
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
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/
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
Learning Resources● The Vaadin API documentation can be found at
https://vaadin.com/api.
Li fe M
ic hae l .c o
m
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
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
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
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
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
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
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
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);
}}
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
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
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
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
Visual Designer● The visual designer simplifies the development
process. The code it generates is relatively readable.
LifeMic hael.c o
m
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
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
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
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
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
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
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
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/
Learning Resources● You can find the Book of Vaadin available online for free at
https://vaadin.com/book.
LifeMic hael.c o
m
Learning Resources● The Vaadin API documentation can be found at
https://vaadin.com/api.
LifeMic hael.c o
m
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
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
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
