Paris Vaadin & GWT Meetup

Bio @nicolas_frankel

Software Architect

http://blog.frankel.ch & http://morevaadin.com

Learning Vaadin

Main interests: GUI Software quality Build automation New things!

Vaadin 7 revolutions

SASS

Connectors

Client-side extensions

…

Vaadin 7 evolutions

Window API

Javascript API

FieldGroup

Converter

…

FieldGroup

Remember the old Form? It coupled display & field handling It is deprecated

Use FieldGroup And set the layout you want!

Data binding levels

1. Property Single value

Birthdate

2. Item Connected properties

First name, last name, birthdate

3. Container Collection of items

FieldGroup

Example

Person person = new Person(1L);

person.setFirstName("John");

person.setLastName("Doe");

person.setBirthdate(new Date(0));

BeanItem<Person> item = new BeanItem<Person>(person);

Naive implementation

TextField id = new TextField (item.getItemProperty("id"));

TextField firstName = new TextField(item.getItemProperty("firstName"));

TextField lastName = new TextField(item.getItemProperty("lastName"));

DateField birthdate = new DateField(item.getItemProperty("birthdate"));

Layout layout = new FormLayout(id, firstName, lastName, birthdate);

Result

FieldGroup implementation

FieldGroup group = new FieldGroup(item);

Field<?> id = group.buildAndBind("id");

Field<?> firstName = group.buildAndBind("firstName");

Field<?> lastName = group.buildAndBind("lastName");

Field<?> birthdate = group.buildAndBind("birthdate");

Layout layout = new VerticalLayout(id, firstName, lastName, birthdate);

Result

Custom FieldGroupFieldFactory

@Override

public <T extends Field> T createField(Class<?> dataType, Class<T> fieldType) {

if (dataType.isAssignableFrom(Date.class)) {

return (T) new DateField();

}

return delegate.createField(dataType, fieldType);

}

Rework

group.setFieldFactory(new CustomFieldGroupFieldFactory());

Layout layout = new FormLayout(id, firstName, lastName, birthdate);

Result

Final rework

Field<?> id = group.buildAndBind(null, "id");

Field<?> firstName = group.buildAndBind("Given name", "firstName");

Field<?> lastName = group.buildAndBind("Family name", "lastName");

Result

Converters

Separate model values from their String representations

Provides ways to convert From String to model And back

Converter hierarchy

Requirements

No side-effects, including GUI changes

Method implementation need to be symmetric

Implementation

TextField tf = new TextField();

tf.setConverter(new StringToIntegerConverter());

int i = (Integer) tf.getConvertedValue();

@learnvaadin

Thanks… & questions?