Vaadin 7 FieldGroup & Converter presentation for the Vaadin & GWT Developer Meetup Paris 2013

1. Paris Vaadin & GWT Meetup

2. Bio @nicolas_frankel
 Software Architect
 http://blog.frankel.ch & http://morevaadin.com
 Learning Vaadin
 Main interests:
 GUI
 Software quality
 Build automation
 New things!

3. Vaadin 7 revolutions
 SASS
 Connectors
 Client-side extensions
 …

4. Vaadin 7 evolutions
 Window API
 Javascript API
 FieldGroup
 Converter
 …

5. FieldGroup
 Remember the old Form?
 It coupled display & field handling
 It is deprecated
 Use FieldGroup
 And set the layout you want!

6. Data binding levels
1. Property
 Single value
 Birthdate
2. Item
 Connected properties
 First name, last name, birthdate
3. Container
 Collection of items

7. Example
Person person = new Person(1L);
person.setFirstName("John");
person.setLastName("Doe");
person.setBirthdate(new Date(0));
BeanItem<Person> item = new BeanItem<Person>(person);

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

9. Result

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

11. Result

13. 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);
}

14. Rework
group.setFieldFactory(new CustomFieldGroupFieldFactory());
Layout layout = new FormLayout(id, firstName, lastName, birthdate);

15. Result

16. Final rework
Field<?> id = group.buildAndBind(null, "id");
Field<?> firstName = group.buildAndBind("Given name", "firstName");
Field<?> lastName = group.buildAndBind("Family name", "lastName");

17. Result

18. Converters
 Separate model values from their String representations
 Provides ways to convert
 From String to model
 And back

19. Converter hierarchy

20. Requirements
 No side-effects, including GUI changes
 Method implementation need to be symmetric

21. Implementation
TextField tf = new TextField();
tf.setConverter(new StringToIntegerConverter());
int i = (Integer) tf.getConvertedValue();

22. @learnvaadin

23. Thanks… & questions?