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.
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
28. A basic Vaadin Application consists of...
tekst
Thursday 4 October 12
29. A basic Vaadin Application consists of...
A Window, set as MainWindow
of the Application
tekst
Thursday 4 October 12
30. A basic Vaadin Application consists of...
A Window, set as MainWindow
of the Application
tekst
Hierarchy of Layout
Components
Thursday 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 Components
Thursday 4 October 12
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
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
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
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