Your SlideShare is downloading. ×
Quick course into Vaadin
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Quick course into Vaadin

2,012

Published on

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

'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
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,012
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Quick Course into Vaadin Jeroen Benats C4J - Java Consultant jeroen.benats@c4j.beThursday 4 October 12
  • 2. SwingThursday 4 October 12 ?
  • 3. Thursday 4 October 12
  • 4. Thursday 4 October 12
  • 5. JFrameThursday 4 October 12
  • 6. JFrame BoxLayoutThursday 4 October 12
  • 7. JFrame BoxLayout Components FlowLayoutThursday 4 October 12
  • 8. Everything you already know ...Thursday 4 October 12
  • 9. Thursday 4 October 12
  • 10. SpringLayout JButton JFrame GridLayout JSlider JRadioButton BorderLayout JList JTable JTree GridBagLayout JMenu JTextField JCheckBox FlowLayout JComboBox CardLayout BoxLayoutThursday 4 October 12
  • 11. ... is VERY easily “translated” into Vaadin ...Thursday 4 October 12
  • 12. Thursday 4 October 12
  • 13. Thursday 4 October 12
  • 14. WindowThursday 4 October 12
  • 15. Window VerticalLayoutThursday 4 October 12
  • 16. Window VerticalLayout Components HorizontalLayoutThursday 4 October 12
  • 17. Thursday 4 October 12
  • 18. CustomLayout Window Button HorizontalLayout Slider AbsoluteLayout RadioButton Table Tree VerticalLayout MenuBar TextField CheckBox GridLayout ComboBox CssLayout TextAreaThursday 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 togetherThursday 4 October 12
  • 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. 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. Thursday 4 October 12
  • 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 directlyThursday 4 October 12
  • 27. Building your ApplicationThursday 4 October 12
  • 28. A basic Vaadin Application consists of... tekstThursday 4 October 12
  • 29. A basic Vaadin Application consists of... A Window, set as MainWindow of the Application tekstThursday 4 October 12
  • 30. A basic Vaadin Application consists of... A Window, set as MainWindow of the Application tekst Hierarchy of Layout ComponentsThursday 4 October 12
  • 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. It all comes down to thisThursday 4 October 12
  • 33. Learning it quickly the Vaadin SamplerThursday 4 October 12
  • 34. contains all Vaadin ComponentsThursday 4 October 12
  • 35. Immediate demoes of all these ComponentsThursday 4 October 12
  • 36. ready to use code examples to get you goingThursday 4 October 12
  • 37. Let’s go through itThursday 4 October 12
  • 38. Basic Component featuresThursday 4 October 12
  • 39. Thursday 4 October 12
  • 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. Thursday 4 October 12
  • 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. Thursday 4 October 12
  • 48. Thursday 4 October 12
  • 49. Now sit and watch this demo applicationThursday 4 October 12
  • 50. Putting Components into LayoutsThursday 4 October 12
  • 51. Thursday 4 October 12
  • 52. Seeing is believing And also remembering!Thursday 4 October 12
  • 53. In Vaadin... All ComponentContainers have the VerticalLayout as default LayoutThursday 4 October 12
  • 54. Theming to make it look NICEThursday 4 October 12
  • 55. Thursday 4 October 12
  • 56. Completely separated from logicThursday 4 October 12
  • 57. Completely separated from logic Done with CSSThursday 4 October 12
  • 58. Completely separated from logic Done with CSS CustomLayouts, images and other resourcesThursday 4 October 12
  • 59. Thursday 4 October 12
  • 60. Thursday 4 October 12
  • 61. Name of the theme folder is the name of your themeThursday 4 October 12
  • 62. Name of the theme folder is the name of your theme styles.css, recourses LayoutsThursday 4 October 12
  • 63. Name of the theme folder is the name of your theme styles.css, recourses Layouts setTheme(‘name’) in ApplicationThursday 4 October 12
  • 64. In Vaadin... Images from themes can be loaded via the ThemeResource objectThursday 4 October 12
  • 65. In Vaadin... They can then be used as Icon on a Component or directly in an Embedded objectThursday 4 October 12
  • 66. A demoThursday 4 October 12
  • 67. Event driven development & bandwidth usageThursday 4 October 12
  • 68. Thursday 4 October 12
  • 69. Thursday 4 October 12
  • 70. Thursday 4 October 12
  • 71. Thursday 4 October 12
  • 72. Thursday 4 October 12
  • 73. Event driven Application ComponentsThursday 4 October 12
  • 74. Data BindingThursday 4 October 12
  • 75. Thursday 4 October 12
  • 76. Coupling Components with a datasourceThursday 4 October 12
  • 77. Coupling Components with a datasource Updated data in the Component will also update the datasourceThursday 4 October 12
  • 78. Coupling Components with a datasource Updated data in the Component will also update the datasource And vice versaThursday 4 October 12
  • 79. Thursday 4 October 12
  • 80. PropertyThursday 4 October 12
  • 81. Property Standardized API for a single data objectThursday 4 October 12
  • 82. Property Standardized API for a single data object Allows to read and write data from and to this objectThursday 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 ValueChangeListenerThursday 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. PropertyThursday 4 October 12
  • 86. Property Field Components implement the Property interfaceThursday 4 October 12
  • 87. Property Field Components implement the Property interface And thereby the Property.Viewer interfaceThursday 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 interfaceThursday 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 LabelThursday 4 October 12
  • 90. ItemThursday 4 October 12
  • 91. Item Provides access to a set of named PropertiesThursday 4 October 12
  • 92. Item Provides access to a set of named Properties Defines inner Interfaces for maintaining the Item Properties setThursday 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 itThursday 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. ContainerThursday 4 October 12
  • 97. Container Flexible way for managing a set of Items that share common propertiesThursday 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 IDThursday 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 ObjectsThursday 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. Thursday 4 October 12
  • 102. A demoThursday 4 October 12
  • 103. Vaadin Pizzeria Let’s try to create your first Vaadin ApplicationThursday 4 October 12
  • 104. Questions Comments jeroe n.benats@c4j.be http://www.c4j.beThursday 4 October 12

×