Introduction to Vaadin

7,026 views

Published on

26th of May, 2011. Gave a 2 hour presentation for my colleagues at Cronos concerning Vaadin and the strength of this web application framework.

Published in: Technology, Education
2 Comments
7 Likes
Statistics
Notes
  • bravo, I like your presentation. you took us to the heart of the platform,
    thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Are you from Belgium or looking for a Job in Belgium, focusing on the Vaadin framework? Than do not hesitate to subscribe to the following group on LinkedIn:

    http://www.linkedin.com/groups/Vaadin-opportunities-in-Belgium-4292489

    Kind regards,

    Jeroen Benats
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,026
On SlideShare
0
From Embeds
0
Number of Embeds
154
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Introduction to Vaadin

  1. 1. Introduction to Jeroen Benats
  2. 2. Agenda <ul><li>Introduction </li></ul><ul><li>On the job </li></ul><ul><li>Demo </li></ul><ul><li>Future of Vaadin </li></ul><ul><li>Study material </li></ul>
  3. 3. Introduction
  4. 4. What is it? <ul><li>Java as only programming language </li></ul><ul><li>Closer to GUI than web development </li></ul><ul><li>Utilizes Google Web Toolkit </li></ul><ul><li>Server-side validation for all actions </li></ul><ul><li>Extendable with GWT widgets </li></ul><ul><li>Themed with CSS </li></ul><ul><li>Eclipse, Netbeans, Maven support </li></ul><ul><li>Servlet + portlet development </li></ul>
  5. 5. Supported browsers
  6. 6. History <ul><li>2000: IT Mill </li></ul><ul><li>2001: Millstone library </li></ul><ul><li>2006: IT Mill Toolkit 4 </li></ul><ul><ul><li>Commercial </li></ul></ul><ul><ul><li>Introduced AJAX based client engine </li></ul></ul><ul><li>2007: IT Mill Toolkit 5 </li></ul><ul><ul><li>GWT integration </li></ul></ul><ul><ul><li>Open source Apache License 2.0 </li></ul></ul><ul><li>2008: Michael Widenius invested in IT Mill </li></ul>
  7. 7. History <ul><li>2009: Vaadin </li></ul><ul><ul><li>‘ Vaadin Ltd.’ </li></ul></ul><ul><ul><li>Version 6 </li></ul></ul><ul><ul><li>Community website </li></ul></ul><ul><li>2010: Vaadin Directory </li></ul>
  8. 8. Vaadin versus GWT Vaadin Google Web Toolkit Server Browser Application logic not exposed Exposed Can use Vaadin & GWT widgets + plugins Only GWT widgets + plugins All Java features available Only what GWT supports No offline-mode Sometimes offline-mode
  9. 9. On the job
  10. 10. Architecture
  11. 11. Deeper architecture
  12. 12. Writing a web application <ul><li>Application </li></ul><ul><ul><li>Init() </li></ul></ul><ul><ul><ul><li>MainWindow </li></ul></ul></ul><ul><ul><ul><ul><li>Layout + Components </li></ul></ul></ul></ul><ul><ul><ul><ul><li>EventListeners for Components </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Resources </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Child Windows </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Error handling with Notifications </li></ul></ul></ul></ul>
  13. 13. User interface components
  14. 14. Vaadin sampler demo
  15. 15. Basic component features <ul><li>Caption, Description </li></ul><ul><li>Enabled, Read-Only, Visible </li></ul><ul><li>StyleName, Icon </li></ul><ul><li>Width, Height (setFullWidth, setSizeUndefined) </li></ul><ul><li>Locale </li></ul>
  16. 16. Managing layout <ul><li>HorizontalLayout </li></ul><ul><li>VerticalLayout </li></ul><ul><li>GridLayout </li></ul><ul><li>FormLayout </li></ul><ul><li>AbsoluteLayout </li></ul><ul><li>CssLayout </li></ul><ul><li>CustomLayout </li></ul>
  17. 17. Managing layout HorizontalLayout VerticalLayout FormLayout GridLayout AbsoluteLayout CssLayout
  18. 18. Managing layout CustomLayout
  19. 19. Themes <ul><li>CSS </li></ul><ul><li>Layouts </li></ul><ul><li>Built-in Themes </li></ul><ul><li>Inheritance </li></ul>
  20. 20. Binding components to data <ul><li>Properties in Items </li></ul><ul><li>Items in Containers </li></ul><ul><li>Fields & Forms </li></ul><ul><li>IndexedContainer </li></ul><ul><li>BeanItemContainer </li></ul><ul><li>QueryContainer </li></ul><ul><li>… </li></ul>
  21. 21. Support in development <ul><li>Vaadin Eclipse plugin </li></ul><ul><li>Vaadin debug window </li></ul><ul><li>Vaadin Sampler & Directory </li></ul>
  22. 22. Before the demo...
  23. 23. Form
  24. 24. Form
  25. 25. Form bean
  26. 26. Form binding
  27. 27. Basic Form features <ul><li>Generate from BeanItem </li></ul><ul><li>Header and footer </li></ul><ul><li>commit() </li></ul><ul><li>Required, Validator </li></ul><ul><li>FormFieldFactory </li></ul>
  28. 28. Table
  29. 29. Table
  30. 30. Table
  31. 31. Basic Table features <ul><li>Lazy loading </li></ul><ul><li>Default sorting </li></ul><ul><li>Editable </li></ul><ul><li>Immediate </li></ul><ul><li>TableFieldFactory </li></ul><ul><li>CellStyleGenerator </li></ul><ul><li>ValueChangeListener </li></ul>
  32. 32. Demo
  33. 33. Has no company car?  Show in red CellStyleGenerator Selected?  Show employees of employer : ValueChangeListener + Employee ContainerFilter Show data in form : ValueChangeListener MainWindow MenuBar
  34. 34. Future (version 7) <ul><li>Redesigned window functionality </li></ul><ul><ul><li>API rewrite </li></ul></ul><ul><ul><li>Better URI fragments support </li></ul></ul><ul><ul><li>Bookmarking </li></ul></ul><ul><ul><li>Multiple window tabs </li></ul></ul><ul><li>Form </li></ul><ul><ul><li>Better layout support </li></ul></ul><ul><ul><li>Custom fields </li></ul></ul><ul><ul><li>Automatic bean validation </li></ul></ul>
  35. 35. Future (version 7) <ul><li>New Components </li></ul><ul><ul><li>Select dialog </li></ul></ul><ul><ul><li>Confirmation dialog </li></ul></ul><ul><ul><li>Input dialog </li></ul></ul><ul><li>Integration </li></ul><ul><ul><li>MVC push/pull </li></ul></ul><ul><li>Other </li></ul><ul><ul><li>Better support for internationalization </li></ul></ul><ul><ul><li>Discontinue Internet Explorer 6 support </li></ul></ul>
  36. 36. Resources <ul><li>Vaadin refcard </li></ul><ul><ul><li>http://refcardz.dzone.com/refcardz/getting-started-vaadin </li></ul></ul><ul><li>Vaadin e-book </li></ul><ul><ul><li>http://vaadin.com/book </li></ul></ul><ul><li>Vaadin forum </li></ul><ul><li>The team behind Vaadin.com </li></ul>
  37. 37. Book of Vaadin
  38. 38. Vaadin refcard
  39. 39. Questions and answers

×