Quick course into Vaadin

2,653 views
2,500 views

Published on

'Quick course into Vaadin' will get you going in minutes.

You can always contact me for the slides, demo code or for requesting information about giving a session for your company.

Published in: Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,653
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Quick course into Vaadin

  1. 1. Quick Course into Vaadin Jeroen Benats C4J - Java Consultant jeroen.benats@c4j.beThursday 4 October 12
  2. 2. SwingThursday 4 October 12 ?
  3. 3. Thursday 4 October 12
  4. 4. Thursday 4 October 12
  5. 5. JFrameThursday 4 October 12
  6. 6. JFrame BoxLayoutThursday 4 October 12
  7. 7. JFrame BoxLayout Components FlowLayoutThursday 4 October 12
  8. 8. Everything you already know ...Thursday 4 October 12
  9. 9. Thursday 4 October 12
  10. 10. SpringLayout JButton JFrame GridLayout JSlider JRadioButton BorderLayout JList JTable JTree GridBagLayout JMenu JTextField JCheckBox FlowLayout JComboBox CardLayout BoxLayoutThursday 4 October 12
  11. 11. ... is VERY easily “translated” into Vaadin ...Thursday 4 October 12
  12. 12. Thursday 4 October 12
  13. 13. Thursday 4 October 12
  14. 14. WindowThursday 4 October 12
  15. 15. Window VerticalLayoutThursday 4 October 12
  16. 16. Window VerticalLayout Components HorizontalLayoutThursday 4 October 12
  17. 17. Thursday 4 October 12
  18. 18. CustomLayout Window Button HorizontalLayout Slider AbsoluteLayout RadioButton Table Tree VerticalLayout MenuBar TextField CheckBox GridLayout ComboBox CssLayout TextAreaThursday 4 October 12
  19. 19. Contents Component overview Which are available?Thursday 4 October 12
  20. 20. Contents Component overview Which are available? Layouts Putting all those Components togetherThursday 4 October 12
  21. 21. Contents Component overview Which are available? Layouts Theming Let’s make it all look nice! Putting all those Components togetherThursday 4 October 12
  22. 22. Contents Component overview Binding Which are available? Automatic UI and datasource updates Layouts Theming Let’s make it all look nice! Putting all those Components togetherThursday 4 October 12
  23. 23. Thursday 4 October 12
  24. 24. In Vaadin... Everything is a Component (Interface)Thursday 4 October 12
  25. 25. In Vaadin... Everything is an AbstractComponent (Class)Thursday 4 October 12
  26. 26. In Vaadin... Components that are not bound to a data model inherit AbstractComponent directlyThursday 4 October 12
  27. 27. Building your ApplicationThursday 4 October 12
  28. 28. A basic Vaadin Application consists of... tekstThursday 4 October 12
  29. 29. A basic Vaadin Application consists of... A Window, set as MainWindow of the Application tekstThursday 4 October 12
  30. 30. A basic Vaadin Application consists of... A Window, set as MainWindow of the Application tekst Hierarchy of Layout ComponentsThursday 4 October 12
  31. 31. A basic Vaadin Application consists of... A Window, set as MainWindow of the Application tekst Hierarchy of Layout Components Bound and unbound Fields and ComponentsThursday 4 October 12
  32. 32. It all comes down to thisThursday 4 October 12
  33. 33. Learning it quickly the Vaadin SamplerThursday 4 October 12
  34. 34. contains all Vaadin ComponentsThursday 4 October 12
  35. 35. Immediate demoes of all these ComponentsThursday 4 October 12
  36. 36. ready to use code examples to get you goingThursday 4 October 12
  37. 37. Let’s go through itThursday 4 October 12
  38. 38. Basic Component featuresThursday 4 October 12
  39. 39. Thursday 4 October 12
  40. 40. setCaption() setDescription()Thursday 4 October 12
  41. 41. setCaption() setDescription() attach() detach()Thursday 4 October 12
  42. 42. setCaption() setDescription() attach() detach() setIcon() setStyleName()Thursday 4 October 12
  43. 43. Thursday 4 October 12
  44. 44. setEnabled() setVisible() setReadOnly()Thursday 4 October 12
  45. 45. setEnabled() setVisible() setReadOnly() setLocale()Thursday 4 October 12
  46. 46. setEnabled() setVisible() setReadOnly() setLocale() setWidth() setSizeFull() setHeight() setSizeUndefined()Thursday 4 October 12
  47. 47. Thursday 4 October 12
  48. 48. Thursday 4 October 12
  49. 49. Now sit and watch this demo applicationThursday 4 October 12
  50. 50. Putting Components into LayoutsThursday 4 October 12
  51. 51. Thursday 4 October 12
  52. 52. Seeing is believing And also remembering!Thursday 4 October 12
  53. 53. In Vaadin... All ComponentContainers have the VerticalLayout as default LayoutThursday 4 October 12
  54. 54. Theming to make it look NICEThursday 4 October 12
  55. 55. Thursday 4 October 12
  56. 56. Completely separated from logicThursday 4 October 12
  57. 57. Completely separated from logic Done with CSSThursday 4 October 12
  58. 58. Completely separated from logic Done with CSS CustomLayouts, images and other resourcesThursday 4 October 12
  59. 59. Thursday 4 October 12
  60. 60. Thursday 4 October 12
  61. 61. Name of the theme folder is the name of your themeThursday 4 October 12
  62. 62. Name of the theme folder is the name of your theme styles.css, recourses LayoutsThursday 4 October 12
  63. 63. Name of the theme folder is the name of your theme styles.css, recourses Layouts setTheme(‘name’) in ApplicationThursday 4 October 12
  64. 64. In Vaadin... Images from themes can be loaded via the ThemeResource objectThursday 4 October 12
  65. 65. In Vaadin... They can then be used as Icon on a Component or directly in an Embedded objectThursday 4 October 12
  66. 66. A demoThursday 4 October 12
  67. 67. Event driven development & bandwidth usageThursday 4 October 12
  68. 68. Thursday 4 October 12
  69. 69. Thursday 4 October 12
  70. 70. Thursday 4 October 12
  71. 71. Thursday 4 October 12
  72. 72. Thursday 4 October 12
  73. 73. Event driven Application ComponentsThursday 4 October 12
  74. 74. Data BindingThursday 4 October 12
  75. 75. Thursday 4 October 12
  76. 76. Coupling Components with a datasourceThursday 4 October 12
  77. 77. Coupling Components with a datasource Updated data in the Component will also update the datasourceThursday 4 October 12
  78. 78. Coupling Components with a datasource Updated data in the Component will also update the datasource And vice versaThursday 4 October 12
  79. 79. Thursday 4 October 12
  80. 80. PropertyThursday 4 October 12
  81. 81. Property Standardized API for a single data objectThursday 4 October 12
  82. 82. Property Standardized API for a single data object Allows to read and write data from and to this objectThursday 4 October 12
  83. 83. Property Standardized API for a single data object Allows to read and write data from and to this object Property value changes can be catched with a ValueChangeListenerThursday 4 October 12
  84. 84. Code fragment final  TextField  -  =  new  TextField("username:"); -.addListener(new  Property.ValueChangeListener()  {        public  void  valueChange(ValueChangeEvent  event)  {                ...        } }); -.setValue("...");Thursday 4 October 12
  85. 85. PropertyThursday 4 October 12
  86. 86. Property Field Components implement the Property interfaceThursday 4 October 12
  87. 87. Property Field Components implement the Property interface And thereby the Property.Viewer interfaceThursday 4 October 12
  88. 88. Property Field Components implement the Property interface And thereby the Property.Viewer interface Which means they can be bound to any kind of datasource and even to other Components implementing the Viewer interfaceThursday 4 October 12
  89. 89. Code fragment TextField  editor  =  new  TextField("username"); Label  viewer  =  new  Label(); viewer.setPropertyDataSource(editor); editor.setImmediate(true); Any change in the text field will immediatly update the LabelThursday 4 October 12
  90. 90. ItemThursday 4 October 12
  91. 91. Item Provides access to a set of named PropertiesThursday 4 October 12
  92. 92. Item Provides access to a set of named Properties Defines inner Interfaces for maintaining the Item Properties setThursday 4 October 12
  93. 93. Item Provides access to a set of named Properties Defines inner Interfaces for maintaining the Item Properties set And Interfaces for listening to changes made to itThursday 4 October 12
  94. 94. Code fragment 1 public  class  My_vaadinApplicaOon  extends  ApplicaOon  {        public  void  init()  {                Window  main  =  new  Window("Countries  Window");                PropertysetItem  setOfProperOes  =  new  PropertysetItem();                setOfProperOes.addItemProperty("first  name”,  new  ObjectProperty("haim"));                setOfProperOes.addItemProperty("last  name”,  new  ObjectProperty("michael"));                setOfProperOes.addItemProperty("email”,  new  ObjectProperty("haim@gmaail.com"));                Form  form  =  new  Form();                form.setItemDataSource(setOfProperOes);                setMainWindow(main);                main.addComponent(form);        }Thursday 4 October 12
  95. 95. Code fragment 2 public  class  My_vaadinApplicaOon  extends  ApplicaOon  {        public  void  init()  {                Window  main  =  new  Window("Countries  Window");                Person  person  =  new  Person(”Jeroen",  ”Benats",  123123);                BeanItem<Person>  data  =  new  BeanItem<Person>(person);                Form  form  =  new  Form();                form.setItemDataSource(data);                setMainWindow(main);                main.addComponent(form);        } }Thursday 4 October 12
  96. 96. ContainerThursday 4 October 12
  97. 97. Container Flexible way for managing a set of Items that share common propertiesThursday 4 October 12
  98. 98. Container Flexible way for managing a set of Items that share common properties Each Item within a Container is identified by an IDThursday 4 October 12
  99. 99. Container Flexible way for managing a set of Items that share common properties Each Item within a Container is identified by an ID Tree, Table and Select can be bound on Container ObjectsThursday 4 October 12
  100. 100. Code fragment public  class  My_vaadinApplicaOon  extends  ApplicaOon  {        public  void  init()  {                Window  main  =  new  Window("Countries  Window");                setMainWindow(main); BeanItemContainer<Bean> beans = new BeanItemContainer<Bean>(Bean.class);      beans.addBean(new Bean("Mung bean", 1452.0)); beans.addBean(new Bean("Chickpea",    686.0)); beans.addBean(new Bean("Lentil",     1477.0)); beans.addBean(new Bean("Common bean", 129.0)); beans.addBean(new Bean("Soybean",     1866.0)); Table table = new Table("Beans of All Sorts", beans); }Thursday 4 October 12
  101. 101. Thursday 4 October 12
  102. 102. A demoThursday 4 October 12
  103. 103. Vaadin Pizzeria Let’s try to create your first Vaadin ApplicationThursday 4 October 12
  104. 104. Questions Comments jeroe n.benats@c4j.be http://www.c4j.beThursday 4 October 12

×