Vaadin 8 - Data Binding with Binder

B U S I N E S S D ATA B I N D I N G
FOR VAADIN (8) APPLICATIONPETER LEHTO
@peter_lehto

Session’s content
• The Good Ol’ Boy - Vaadin 7
• The Brand New Field Model of Vaadin 8
• CustomField<T>
• Where are my Items & Properties?
• Being Lazy & Happy without Containers

H o w w o u l d y o u e d i t
c u s t o m e r r e c o r d s ?
VAADIN 7

@Override
protected void init(VaadinRequest vaadinRequest) {
VerticalLayout layout = new VerticalLayout();
TextField firstName = new TextField("Firstname");
TextField lastName = new TextField("Lastname");
No data binding
VAADIN 7

@Override
CustomerDTO customer = new CustomerDTO();
No data binding
VAADIN 7

@Override
firstName.addValueChangeListener(new ValueChangeListener() {
@Override
public void valueChange(ValueChangeEvent event) {
customer.setFirstName(firstName.getValue());
}
});
No data binding
VAADIN 7

@Override
@Override
}
});
lastName.addValueChangeListener(new ValueChangeListener() {
@Override
customer.setLastName(lastName.getValue());
}
});
No data binding
VAADIN 7

@Override
@Override
}
});
@Override
}
});
layout.addComponents(firstName, lastName);
setContent(layout);
}
No data binding
VAADIN 7

@Override
@Override
}
});
@Override
}
});
layout.addComponents(firstName, lastName);
setContent(layout);
}
• Setters used explicitly
• Every Field has a Listener
• No way to Save / Cancel
• Lots of code
• Prone to error and change
• Invalid values not prevented
WHAT’S WRONG?

@Override
LET’S IMPROVE!

@Override
Button save = new Button("Save", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
}
});
layout.addComponents(firstName, lastName, save);
setContent(layout);
}
LET’S IMPROVE!

• Centralized value setting
• Validation could be added
BENEFITS? @Override
@Override
}
});
setContent(layout);
}

• Setters used explicitly
• Lots of code
• Hard to Validate
@Override
@Override
}
});
setContent(layout);
}
WHAT’S WRONG?

@Override
With properties
VAADIN 7

@Override
FieldGroup fieldGroup = new FieldGroup();
fieldGroup.bind(firstName, "firstName");
fieldGroup.bind(lastName, "lastName");
fieldGroup.setItemDataSource(new
BeanItem<CustomerDTO>(customer));
With properties
VAADIN 7

With properties
VAADIN 7
@Override
@Override
try {
fieldGroup.commit();
}
catch(CommitException e) {
// show errors
}
}
});

• No more explicit setters
• Committable / Discardable
• Validation part of Commit
@Override
@Override
try {
}
// show errors
}
}
});
BENEFITS?

• Not type safe
• BeanItem boiler plate and
Checked CommitException
@Override
@Override
try {
}
// show errors
}
}
});
WHAT’S WRONG?

# F F S
FIGHT FOR SIMPLICITY ;)

c . v. u i . A b s t r a c t F i e l d < T >
VAADIN 7
1 8 5 3 l o c 2 1 3 l o c
VAADIN 8

F i e l d G r o u p
TO
B i n d e r

H o w w o u l d y o u e d i t
c u s t o m e r r e c o r d s ?
VAADIN 8

TextField firstName = …
TextField lastName = …
CustomerDTO customer = …
BeanBinder<CustomerDTO> binder = new BeanBinder<>(CustomerDTO.class);With Binder
VAADIN 8

BeanBinder<CustomerDTO> binder = new BeanBinder<>(CustomerDTO.class);
binder.bind(firstName, CustomerDTO::getFirstname, CustomerDTO::setFirstname);
With Binder
VAADIN 8

binder.bind(lastName, CustomerDTO::getLastname, CustomerDTO::setLastname);
With Binder
VAADIN 8

binder.readBean(customer);
With Binder
VAADIN 8

Commit / Discard?
VAADIN 8

Button save = new Button("Save" , e -> binder.writeBeanIfValid(customer));
Button discard = new Button("Discard" , e -> binder.removeBean());
Commit / Discard?
VAADIN 8

binder.setBean(customer);
Without Buffering?
VAADIN 8

TextField yearOfBirth = …
customer.setYearOfBirth(1984);
Conversion with
Binding
VAADIN 8

binder.forField(yearOfBirth)
Conversion with
Binding
VAADIN 8

.withConverter(Integer::valueOf, String::valueOf)
Conversion with
Binding
VAADIN 8

.bind(CustomerDTO::getYearOfBirth, CustomerDTO::setYearOfBirth);
Conversion with
Binding
VAADIN 8

BeanBinder<CustomerDTO> binder = new BeanBinder<>(CustomerDTO.class);Validation with
Binding
VAADIN 8

binder.forField(firstName)
Validation with
Binding
VAADIN 8

.withValidator(Validator::notEmpty, "Mandatory field")
Validation with
Binding
VAADIN 8

.withValidator(value -> value.length() < 10, "Must be less than 10 chars")
Validation with
Binding
VAADIN 8

.bind(CustomerDTO::getFirstname, CustomerDTO::setFirstname);
Validation with
Binding
VAADIN 8

.bind(CustomerDTO::getFirstname, CustomerDTO::setFirstname);
Button save = new Button("Save", e -> binder.writeBeanIfValid(customer));
Validation with
Binding
VAADIN 8

Va l i d a t i o n
w i t h
C o n v e r s i o n

Customer customer = …
BeanBinder<CustomerDTO> binder = new BeanBinder<>(CustomerDTO.class);Validation with
Conversion
VAADIN 8

Validation with
Conversion
VAADIN 8

.withValidator(value -> value.length() == 4, "Must have 4 characters")
Validation with
Conversion
VAADIN 8

Validation with
Conversion
VAADIN 8

.withValidator(value -> value < 2000, "Must be before year 2000")
Validation with
Conversion
VAADIN 8

Validation with
Conversion
VAADIN 8

Button save = new Button("Save", e -> {
try {
binder.writeBean(customer);
} catch (ValidationException ve) {
ve.getFieldValidationErrors().forEach(error -> …);
}
});
Validation with
Conversion
VAADIN 8

c . v. u i . C u s t o m F i e l d < T >

c . v. u i . C u s t o m F i e l d < T >
F o r m a k i n g F i e l d s f o r y o u r
b u s i n e s s t y p e s

CUSTOMFIELD
public class MoneyField extends CustomField<Money> {

CUSTOMFIELD
private TextField textField;
private Label currencyCode;

CUSTOMFIELD
private BigDecimal parseValue() throws ParseException {
return …;
}
private String formatValue(BigDecimal parsedValue) {
return …;
}

CUSTOMFIELD
private BigDecimal parseValue() throws ParseException {
return …;
}
private String formatValue(BigDecimal parsedValue) {
return …;
}
public Money getValue() {
if (StringUtils.isEmpty(textField.getValue())) {
return null;
}
try {
return Money.of(currencyCode.getValue(), parseValue());
} catch (ParseException e) {
textField.setComponentError(new UserError("Invalid format”));
return null;
}
}

protected void doSetValue(Money value) {
if (value == null) {
textField.clear();
currencyCode.setValue(null);
} else {
textField.setValue(formatValue(value.getAmount()));
currencyCode.setValue(value.getCurrencyCode());
}
}

c . v. d a t a . I t e m
TO
< T >

C o m b o B o x
C o m b o B o x < C o u n t r y >
TO

C o u n t r y c = ( C o u n t r y )
c o m b o B o x . g e t V a l u e ( )
TO
C o u n t r y c = c o m b o B o x . g e t V a l u e ( )

H o w w o u l d y o u m a k e
a d r o p d o w n o f c o u n t r i e s ?
VAADIN 7

BeanItemContainer<Country> container =
new BeanItemContainer<>(Country.class);

container.addAll(getCountries());

ComboBox countrySelector = new ComboBox();

countrySelector.setContainerDataSource(container);

countrySelector.setItemCaptionMode(ItemCaptionMode.PROPERTY);

countrySelector.setItemCaptionMode(ItemCaptionMode.PROPERTY);
countrySelector.setItemCaptionPropertyId("name");

H o w w o u l d y o u m a k e
a d r o p d o w n o f c o u n t r i e s ?
VAADIN 8

ComboBox<Country> countrySelector = new ComboBox<>();
countrySelector.setItems(getCountries());

ComboBox<Country> countrySelector = new ComboBox<>();
countrySelector.setItems(getCountries());
countrySelector.setItemCaptionGenerator(Country::getName);

H o w w o u l d y o u f i l t e r
e n t r i e s i n a d r o p d o w n ?
VAADIN 7

Vaadin 8 - Data Binding with Binder

N e t h e r l a n d s , a n y o n e ?

countrySelector.setFilteringMode(FilteringMode.CONTAINS);
countrySelector.setFilteringMode(FilteringMode.STARTSWITH);
OR

H o w w o u l d y o u f i l t e r
e n t r i e s i n a d r o p d o w n ?
VAADIN 8

D a t a P r o v i d e r < C o u n t r y, S t r i n g >

countrySelector.setDataProvider(DataProvider<Country, String> dataProvider)

countrySelector.setDataProvider(DataProvider<Country, String> dataProvider)
public interface DataProvider<Country, String> {
int size(Query<String> t);
Stream<Country> fetch(Query<String> query);
}

D a t a P r o v i d e r < C o u n t r y, S t r i n g >
java.util.function.Predicate<T>
CriteriaQuery.where(...)
Service.ﬁndCountries(String)

P l u g i n t o a n y d a t a s o u r c e l a z i l y !

public class Query<F> {
int getOffset();
int getLimit();
List<SortOrder<String>> getSortOrders();
Optional<F> getFilter();
}

T h e c l a s s i c C o n t a i n e r d i s c r e p a n c y
VAADIN 7

Grid grid = new Grid();
grid.addColumn("firstName");
grid.addColumn("lastName");
grid.addColumn("yearsOld");
grid.setContainerDataSource(
new BeanItemContainer<>(CustomerDTO.class));

HTTP Status 500 - com.vaadin.server.ServiceException:
java.lang.IllegalStateException:
Found at least one column in Grid that does not exist
in the given container: yearsOld with the header “Years
Old”.
Call removeAllColumns() before setContainerDataSource()
if you want to reconfigure the columns based on the new
container.

GeneratedPropertyContainer generatedProps =
new GeneratedPropertyContainer(
generatedProps.addContainerProperty("yearsOld", Integer.class, null);
grid.setContainerDataSource(generatedProps);

HTTP Status 500 - com.vaadin.server.ServiceException: java.lang.UnsupportedOperationException:
GeneratedPropertyContainer does not support adding properties.

# F F S
THIS ISN’T FUN ANYMORE…

GeneratedPropertyContainer generatedProps =
new GeneratedPropertyContainer(
grid.setContainerDataSource(generatedProps);

generatedProps.addGeneratedProperty("yearsOld", new
PropertyValueGenerator<Integer>() {
@Override
public Class<Integer> getType() {
return Integer.class;
}
@Override
public Integer getValue(Item item, Object itemId,
Object propertyId) {
return LocalDate.now().getYear() -
((CustomerDTO)itemId).getYearOfBirth();
}
});

B y e B y e C o n t a i n e r s ;
w e ’ v e h a d e n o u g h !
VAADIN 8

Grid<CustomerDTO> grid = new Grid<>();

grid.addColumn("firstName", customer -> customer.getFirstname());

grid.addColumn("lastName", customer -> customer.getLastname());

grid.addColumn("yearsOld",
customer -> String.valueOf(LocalDate.now().getYear() -
customer.getYearOfBirth()));

grid.addColumn("yearsOld",
customer -> String.valueOf(LocalDate.now().getYear() -
customer.getYearOfBirth()));
grid.setDataProvider(DataProvider<CustomerDTO, F> customerDataProvider);

Lessons learned
• Vaadin 8 - built on Java 8
• Lambdas and Functional paradigm at large
• DataBinding completely redone
• Targets simpliﬁcations and ﬂexibility
• Drops Containers, Items and Properties
• Gathers all DataBinding to Binder

T H A N K Y O U !
PLEASE RATE THE TALK
@
FLIP CHART BY THE DOOR!
@peter_lehto

Vaadin 8 - Data Binding with Binder

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Vaadin 8 - Data Binding with Binder (20)

Recently uploaded (20)

Vaadin 8 - Data Binding with Binder