Vaadin Jump Start

723
-1

Published on

Introduction to the Vaadin framework. The lecture was delivered in Hebrew. You can watch the lecture at http://youtu.be/ueQ-TGuIW1Q. The le

Published in: Software, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
723
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vaadin Jump Start

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 10. Visual Designer ● The visual designer simplifies the development process. The code it generates is relatively readable. LifeMichael.com
  11. 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. 12. Vaadin TouchKit ● Vaadin TouchKit targets Android 2.3 (or newer), iOS 5 (or newer) and Windows Phone 8 (or newer). LifeMichael.com
  13. 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. 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. 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. 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. 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. 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. 19. Learning Resources ● You can find the Book of Vaadin available online for free at https://vaadin.com/book. LifeMichael.com
  20. 20. Learning Resources ● The Vaadin API documentation can be found at https://vaadin.com/api. LifeMichael.com
  21. 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. 22. Learning Resources ● You can find my israeli guide for using Vaadin available for free at http://www.vaadinbook.co.il. LifeMichael.com
  23. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. Visual Designer ● The visual designer simplifies the development process. The code it generates is relatively readable. LifeMichael.com
  34. 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. 35. Vaadin TouchKit ● Vaadin TouchKit targets Android 2.3 (or newer), iOS 5 (or newer) and Windows Phone 8 (or newer). LifeMichael.com
  36. 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. 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. 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. 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. 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. 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. 42. Learning Resources ● You can find the Book of Vaadin available online for free at https://vaadin.com/book. LifeMichael.com
  43. 43. Learning Resources ● The Vaadin API documentation can be found at https://vaadin.com/api. LifeMichael.com
  44. 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. 45. Learning Resources ● You can find my israeli guide for using Vaadin available for free at http://www.vaadinbook.co.il. LifeMichael.com
  46. 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

×