Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Vaadin


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
  • bravo, I like your presentation. you took us to the heart of the platform,
    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:

    Kind regards,

    Jeroen Benats
    Are you sure you want to  Yes  No
    Your message goes here

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> </li></ul></ul><ul><li>Vaadin e-book </li></ul><ul><ul><li> </li></ul></ul><ul><li>Vaadin forum </li></ul><ul><li>The team behind </li></ul>
  37. 37. Book of Vaadin
  38. 38. Vaadin refcard
  39. 39. Questions and answers