Quick course into Vaadin

Quick Course into Vaadin
Jeroen Benats
C4J - Java Consultant
jeroen.benats@c4j.be

Thursday 4 October 12

Swing
?

JFrame


JFrame
BoxLayout


JFrame
BoxLayout
Components
FlowLayout


Everything you
already know ...


SpringLayout
JButton
JFrame
GridLayout
JSlider
JRadioButton BorderLayout
JList
JTable
JTree GridBagLayout
JMenu
JTextField JCheckBox
FlowLayout
JComboBox CardLayout
BoxLayout


... is VERY easily
“translated” into
Vaadin ...


Window


Window
VerticalLayout


Window
VerticalLayout
Components
HorizontalLayout


CustomLayout
Window
Button
HorizontalLayout Slider
AbsoluteLayout
RadioButton
Table
Tree VerticalLayout
MenuBar
TextField CheckBox
GridLayout
ComboBox CssLayout
TextArea


Contents

Component
overview
Which are available?


Contents

Component
overview

Layouts
Putting all those
Components together


Contents

Component
overview

Layouts Theming
Let’s make it all look nice!
Putting all those
Components together


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


In Vaadin...

Everything is a Component (Interface)


In Vaadin...

Everything is an AbstractComponent (Class)


In Vaadin...

Components that are not bound to a data
model inherit AbstractComponent directly


Building your
Application


A basic Vaadin Application consists of...

tekst



A Window, set as MainWindow
of the Application

tekst



of the Application

tekst
Hierarchy of Layout
Components



of the Application

tekst
Hierarchy of Layout
Components

Bound and unbound Fields
and Components


It all comes down to this


Learning it
quickly
the Vaadin
Sampler


contains
all
Vaadin
Components


Immediate
demoes
of all these
Components


ready to use
code examples
to get you going


Let’s go through it


Basic
Component
features


setCaption()
setDescription()


setCaption()
setDescription()

attach()
detach()


setCaption()
setDescription()

attach()
detach()

setIcon()
setStyleName()


setEnabled() setVisible()
setReadOnly()


setReadOnly()

setLocale()


setReadOnly()

setLocale()

setWidth() setSizeFull()
setHeight() setSizeUndeﬁned()


Now sit and
watch this demo
application


Putting
Components
into Layouts


Seeing is
believing
And also remembering!


In Vaadin...

All ComponentContainers have the
VerticalLayout as default Layout


Theming
to make it look NICE


Completely separated
from logic


from logic

Done with
CSS


from logic

Done with
CSS

CustomLayouts, images and
other resources


Name of the theme folder is
the name of your theme



styles.css, recourses
Layouts



styles.css, recourses
Layouts

setTheme(‘name’) in
Application


In Vaadin...

Images from themes can be loaded via the
ThemeResource object


In Vaadin...

They can then be used as Icon on a Component
or directly in an Embedded object


A demo


Event driven
development &
bandwidth usage


Event driven
Application
Components


Data
Binding


Coupling Components with a
datasource


datasource

Updated data in the Component
will also update the datasource


datasource

Updated data in the Component
will also update the datasource

And
vice versa


Property


Property
Standardized API for a single
data object


Property
data object

Allows to read and write data
from and to this object


Property
data object

Allows to read and write data
from and to this object

Property value changes can be
catched with a ValueChangeListener


Code fragment

ﬁnal
TextField
-
=
new
TextField("username:");

-.addListener(new
Property.ValueChangeListener()
{

public
void
valueChange(ValueChangeEvent
event)
{

...

}
});

-.setValue("...");


Property
Field Components implement
the Property interface


Property

And thereby the Property.Viewer
interface


Property

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


Code fragment

TextField
editor
=
new
TextField("username");
Label
viewer
=
new
Label();

viewer.setPropertyDataSource(editor);
editor.setImmediate(true);

Any change in the text ﬁeld will immediatly update the Label


Item


Item
Provides access to a set of
named Properties


Item
named Properties

Deﬁnes inner Interfaces for
maintaining the Item Properties set


Item
named Properties

Deﬁnes inner Interfaces for
maintaining the Item Properties set

And Interfaces for listening
to changes made to it


Code fragment 1
public
class
My_vaadinApplicaOon
extends
ApplicaOon
{

public
void
init()
{

Window
main
=
new
Window("Countries
Window");

PropertysetItem
setOfProperOes
=
new
PropertysetItem();

setOfProperOes.addItemProperty("ﬁrst
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);

}


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);


main.addComponent(form);

}
}


Container


Container
Flexible way for managing a set of
Items that share common properties


Container

Each Item within a Container is
identiﬁed by an ID


Container

Each Item within a Container is
identiﬁed by an ID

Tree, Table and Select can be bound on
Container Objects


Code fragment
public
class
My_vaadinApplicaOon
extends
ApplicaOon
{

public
void
init()
{

Window
main
=
new
Window("Countries
Window");


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);

}


Vaadin Pizzeria

Let’s try to create your
ﬁrst Vaadin
Application


Questions
Comments

jeroe n.benats@c4j.be
http://www.c4j.be


Quick course into Vaadin

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Quick course into Vaadin