Uploaded byJeroen Benats
Quick course into Vaadin
This document provides a quick introduction to Vaadin, a Java framework for building web applications. It discusses the main components available in Vaadin and how they translate from traditional Java Swing components. It also covers layouts, themes, data binding, and building a basic Vaadin application with a window, components, and layouts. The document recommends using the Vaadin sampler application to see demos of all components and get started with ready-made code examples.
Quick course into Vaadin
- 1. Quick Course intoVaadin Jeroen Benats C4J - Java Consultant jeroen.benats@c4j.be Thursday 4 October 12
- 2.
- 3.
- 4.
- 5.
- 6. JFrame BoxLayout Thursday 4 October 12
- 7. JFrame BoxLayout Components FlowLayout Thursday 4 October 12
- 8. Everything you already know ... Thursday 4 October 12
- 9.
- 10. SpringLayout JButton JFrame GridLayout JSlider JRadioButton BorderLayout JList JTable JTree GridBagLayout JMenu JTextField JCheckBox FlowLayout JComboBox CardLayout BoxLayout Thursday 4 October 12
- 11. ... is VERYeasily “translated” into Vaadin ... Thursday 4 October 12
- 12.
- 13.
- 14.
- 15. Window VerticalLayout Thursday 4 October 12
- 16. Window VerticalLayout Components HorizontalLayout Thursday 4 October 12
- 17.
- 18. CustomLayout Window Button HorizontalLayout Slider AbsoluteLayout RadioButton Table Tree VerticalLayout MenuBar TextField CheckBox GridLayout ComboBox CssLayout TextArea Thursday 4 October 12
- 19. Contents Component overview Which are available? Thursday 4 October 12
- 20. Contents Component overview Which are available? Layouts Putting all those Components together Thursday 4 October 12
- 21. Contents Component overview Which are available? Layouts Theming Let’s make it all look nice! Putting all those Components together Thursday 4 October 12
- 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 together Thursday 4 October 12
- 23.
- 24. In Vaadin... Everything is a Component (Interface) Thursday 4 October 12
- 25. In Vaadin... Everything is an AbstractComponent (Class) Thursday 4 October 12
- 26. In Vaadin... Components that are not bound to a data model inherit AbstractComponent directly Thursday 4 October 12
- 27. Building your Application Thursday 4 October 12
- 28. A basic VaadinApplication consists of... tekst Thursday 4 October 12
- 29. A basic VaadinApplication consists of... A Window, set as MainWindow of the Application tekst Thursday 4 October 12
- 30. A basic VaadinApplication consists of... A Window, set as MainWindow of the Application tekst Hierarchy of Layout Components Thursday 4 October 12
- 31. A basic VaadinApplication consists of... A Window, set as MainWindow of the Application tekst Hierarchy of Layout Components Bound and unbound Fields and Components Thursday 4 October 12
- 32. It all comesdown to this Thursday 4 October 12
- 33. Learning it quickly the Vaadin Sampler Thursday 4 October 12
- 34. contains all Vaadin Components Thursday 4 October 12
- 35. Immediate demoes of all these Components Thursday 4 October 12
- 36. ready to use code examples to get you going Thursday 4 October 12
- 37. Let’s go throughit Thursday 4 October 12
- 38. Basic Component features Thursday 4 October 12
- 39.
- 40. setCaption() setDescription() Thursday 4 October 12
- 41. setCaption() setDescription() attach() detach() Thursday 4 October 12
- 42. setCaption() setDescription() attach() detach() setIcon() setStyleName() Thursday 4 October 12
- 43.
- 44. setEnabled() setVisible() setReadOnly() Thursday 4 October 12
- 45. setEnabled() setVisible() setReadOnly() setLocale() Thursday 4 October 12
- 46. setEnabled() setVisible() setReadOnly() setLocale() setWidth() setSizeFull() setHeight() setSizeUndefined() Thursday 4 October 12
- 47.
- 48.
- 49. Now sit and watch this demo application Thursday 4 October 12
- 50. Putting Components into Layouts Thursday 4 October 12
- 51.
- 52. Seeing is believing And also remembering! Thursday 4 October 12
- 53. In Vaadin... All ComponentContainers have the VerticalLayout as default Layout Thursday 4 October 12
- 54. Theming to make it look NICE Thursday 4 October 12
- 55.
- 56. Completely separated from logic Thursday 4 October 12
- 57. Completely separated from logic Done with CSS Thursday 4 October 12
- 58. Completely separated from logic Done with CSS CustomLayouts, images and other resources Thursday 4 October 12
- 59.
- 60.
- 61. Name of thetheme folder is the name of your theme Thursday 4 October 12
- 62. Name of thetheme folder is the name of your theme styles.css, recourses Layouts Thursday 4 October 12
- 63. Name of thetheme folder is the name of your theme styles.css, recourses Layouts setTheme(‘name’) in Application Thursday 4 October 12
- 64. In Vaadin... Images from themes can be loaded via the ThemeResource object Thursday 4 October 12
- 65. In Vaadin... They can then be used as Icon on a Component or directly in an Embedded object Thursday 4 October 12
- 66. A demo Thursday 4October 12
- 67. Event driven development & bandwidth usage Thursday 4 October 12
- 68.
- 69.
- 70.
- 71.
- 72.
- 73. Event driven Application Components Thursday 4 October 12
- 74. Data Binding Thursday 4 October 12
- 75.
- 76. Coupling Components witha datasource Thursday 4 October 12
- 77. Coupling Components witha datasource Updated data in the Component will also update the datasource Thursday 4 October 12
- 78. Coupling Components witha datasource Updated data in the Component will also update the datasource And vice versa Thursday 4 October 12
- 79.
- 80.
- 81. Property Standardized API for a single data object Thursday 4 October 12
- 82. Property Standardized API for a single data object Allows to read and write data from and to this object Thursday 4 October 12
- 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 ValueChangeListener Thursday 4 October 12
- 84. Code fragment final TextField - = new TextField("username:"); -.addListener(new Property.ValueChangeListener() { public void valueChange(ValueChangeEvent event) { ... } }); -.setValue("..."); Thursday 4 October 12
- 85.
- 86. Property Field Components implement the Property interface Thursday 4 October 12
- 87. Property Field Components implement the Property interface And thereby the Property.Viewer interface Thursday 4 October 12
- 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 interface Thursday 4 October 12
- 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 Label Thursday 4 October 12
- 90.
- 91. Item Provides access to a set of named Properties Thursday 4 October 12
- 92. Item Provides access to a set of named Properties Defines inner Interfaces for maintaining the Item Properties set Thursday 4 October 12
- 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 it Thursday 4 October 12
- 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. 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.
- 97. Container Flexible way for managing a set of Items that share common properties Thursday 4 October 12
- 98. Container Flexible way for managing a set of Items that share common properties Each Item within a Container is identified by an ID Thursday 4 October 12
- 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 Objects Thursday 4 October 12
- 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.
- 102. A demo Thursday 4October 12
- 103. Vaadin Pizzeria Let’s try to create your first Vaadin Application Thursday 4 October 12
- 104. Questions Comments jeroe n.benats@c4j.be http://www.c4j.be Thursday 4 October 12