Vaadin DevDay 2016 talk about how to do databinding with Vaadin

1. Binding business data to
Vaadin components
Best practices
Peter Lehto
Senior Vaadin Expert
@peter_lehto

2. Application
architecture
Data transfer

3. Vaadin
Containers
Vaadin
Fields

4. Application
Architecture

5. Deployment

6. <<UI module>>
CustomerView ProductView

7. <<UI module>>
CustomerView ProductView
<<Commons module>>
DTOService CustomerDTOCustomerDTO

8. <<UI module>>
CustomerView ProductView
<<Backend module>>
<<Commons module>>
DTOService CustomerDTO
EntityService
CustomerDTO
DTOServiceBean

9. Application layers

10. Client Browser

11. DevDayUI
Client Browser

12. DevDayUI
Client Browser
CustomerView ProductView

13. DevDayUI
DTOService
Client Browser
CustomerView ProductView

14. DevDayUI
Client Browser
CustomerView ProductView
DTOService
Converters EntityService

15. DevDayUI
Client Browser
CustomerView ProductView
PersistenceUnit
DTOService
Converters EntityService

16. DevDayUI
Client Browser
CustomerView ProductView
PersistenceUnit
DTOService
Converters EntityService

17. @Local
public interface EntityService {
void storeEntity(AbstractEntity entity);
<E extends AbstractEntity> List<E> getAll(Class<E> entityType);
}

18. @Local
public interface EntityService {
void storeEntity(AbstractEntity entity);
<E extends AbstractEntity> List<E> getAll(Class<E> entityType);
<E extends AbstractEntity> E getEntityById(long id, Class<E> entityType);
<E extends AbstractEntity> List<E> getPagedEntities(Class<E> entityType,
int startIndex, int items, Object[] sortPropertyIds, boolean[] sortStates);
}

19. @Local
public interface DTOService {
<DTO extends AbstractDTOWithIdentity> List<DTO> getAllDtos(Class<DTO> dtoType);
}

20. @Local
public interface DTOService {
<DTO extends AbstractDTOWithIdentity> List<DTO> getAllDtos(Class<DTO> dtoType);
<DTO extends AbstractDTOWithIdentity> List<DTO> getPagedDtos(Class<DTO> dtoType,
int startIndex, int items, Object[] sortPropertyIds, boolean[] sortStates);
<DTO extends AbstractDTOWithIdentity> long getCount(Class<DTO> dtoType);
}

21. @Local
public interface DTOService {
<DTO extends AbstractDTOWithIdentity> List<DTO> getAllDtos(Class<DTO> dtoType);
<DTO extends AbstractDTOWithIdentity> List<DTO> getPagedDtos(Class<DTO> dtoType,
int startIndex, int items, Object[] sortPropertyIds, boolean[] sortStates);
<DTO extends AbstractDTOWithIdentity> long getCount(Class<DTO> dtoType);
<DTO extends AbstractDTOWithIdentity> DTO getDtoById(long itemId, Class<DTO> dtoType);
<DTO extends AbstractDTOWithIdentity> void storeDto(DTO dto);
}

22. @Stateless
public class DTOServiceBean implements DTOService, EntityService {
@PersistenceContext(unitName = "devday")
private EntityManager entityManager;
…
}

23. Data transfer

24. DTO (DataTransferObject)

25. POJO built by DTOService
DTO (DataTransferObject)

26. POJO built by DTOService
Minimal ondemand data item
DTO (DataTransferObject)

27. POJO built by DTOService
Minimal ondemand data item
Free from Entity model changes
DTO (DataTransferObject)

28. POJO built by DTOService
Minimal ondemand data item
Free from Entity model changes
No referenced property loading
concerns
DTO (DataTransferObject)

29. Entity <-> DTO Conversion

30. UI needs DTOs
Entity <-> DTO Conversion

31. UI needs DTOs
Backend knows about entities
Entity <-> DTO Conversion

32. UI needs DTOs
Backend knows about entities
Converter per DTO / usecase type
Entity <-> DTO Conversion

33. public interface EntityToDTOConverter {
AbstractDTOWithIdentity convertToDTO(AbstractEntity entity);
Class<? extends AbstractEntity> getEntityType();
Class<? extends AbstractDTOWithIdentity> getDTOType();
}

34. public interface EntityToDTOConverter {
AbstractDTOWithIdentity convertToDTO(AbstractEntity entity);
Class<? extends AbstractEntity> getEntityType();
Class<? extends AbstractDTOWithIdentity> getDTOType();
}
public interface DTOToEntityConverter {
<DTO extends AbstractDTOWithIdentity, E extends AbstractEntity> E convertToEntity(DTO dto);
Class<? extends AbstractEntity> getEntityType();
Class<? extends AbstractDTOWithIdentity> getDTOType();
}

35. How to find converter?

36. Runtime
Instance
selection

37. @Retention(RUNTIME)
@Target(TYPE)
@Qualifier
public @Interface DTOType {
}

38. @Retention(RUNTIME)
@Target(TYPE)
@Qualifier
public @Interface DTOType {
Class<? extends AbstractDTO> value();
}

39. @DTOType(CustomerListingDTO.class)
public class CustomerEntityToListingDTOConverter implements EntityToDTOConverter {
@Override
public Class<CustomerEntity> getEntityType() {
return CustomerEntity.class;
}
@Override
public Class<CustomerListingDTO> getDTOType() {
return CustomerListingDTO.class;
}
@Override
public CustomerListingDTO convertToDTO(CustomerEntity e) {
…
}
}

40. public class DTOTypeAnnotationLiteral extends AnnotationLiteral<DTOType> implements DTOType {
private Class<? extends AbstractDTO> dtoType;
public DTOTypeAnnotationLiteral(Class<? extends AbstractDTO> dtoType) {
this.dtoType = dtoType;
}
@Override
public Class<? extends AbstractDTO> value() {
return dtoType;
}
}

41. protected EntityToDTOConverter findEntityToDTOConverter(
Class<? extends AbstractDTO> dtoType) {
Instance<EntityToDTOConverter> converterSelection = converterInstantiator
.select(new DTOTypeAnnotationLiteral(dtoType));
if (converterSelection.isAmbiguous()) {
// more than one converter for same type exception…
}
if (converterSelection.isUnsatisfied()) {
// no converter available exception
}
return converterSelection.get();
}

42. DTOService + Converter

43. No need to change code
DTOService + Converter

44. No need to change code
Add new converters for new DTO types
DTOService + Converter

45. No need to change code
Add new converters for new DTO types
Converters via bean discovery
DTOService + Converter

46. No need to change code
Add new converters for new DTO types
Converters via bean discovery
UI knows and works only with DTOs
DTOService + Converter

47. Reading data through
Vaadin
Containers

48. Data binding
Container
Item
Property

49. In memory containers

50. In memory containers
IndexedContainer – Basic container
that is manually built

51. In memory containers
HierarchicalContainer – IndexedContainer
that supports parent/child relationships
IndexedContainer – Basic container
that is manually built

52. In memory containers
BeanItemContainer – A container that is
automatically built from a collection of
Java Beans
HierarchicalContainer – IndexedContainer
that supports parent/child relationships
IndexedContainer – Basic container
that is manually built

53. 100
Browser

54. Container
100
Server side UI Browser

55. DB Container
1 000 000 100
Backend Server side UI Browser

56. DB Container
1 000 000 100
Backend Server side UI Browser
Handled by the table
component

57. Reduce memory footprint with
Lazy loading

58. LazyQueryContainer

59. Add-on from Vaadin Directory
LazyQueryContainer

60. Add-on from Vaadin Directory
Retrieve data by index
LazyQueryContainer

61. Add-on from Vaadin Directory
Retrieve data by index
Will not expose backend assets
LazyQueryContainer

62. Grid grid = new Grid();
container = new LazyQueryContainer(queryFactory, PRIMARY_KEY_PROPERTY, BATCH_SIZE);
grid.setContainerDataSource(container);

63. public class LazyDTOQuery<DTO extends AbstractDTO> extends AbstractBeanQuery<DTO> {
private Class<DTO> dtoType;
private DTOService dtoService;
public LazyDTOQuery(Class<DTO> dtoType, DTOService dtoService,
QueryDefinition queryDefinition) {
super(…);
}
@Override
protected List<DTO> loadBeans(int startIndex, int numItems) {
return dtoService.getPagedDtos(dtoType, startIndex, numItems,
getSortPropertyIds(), getSortStates());
}
@Override
public int size() {
return dtoService.getCount(dtoType);
}
…
}

64. Binding data with
Vaadin Fields

65. Examples of Fields

66. Vaadin Fields

67. Fields are Components with databinding
Vaadin Fields

68. Fields are Components with databinding
Fields can be bound to properties
Vaadin Fields

69. Fields are Components with databinding
Fields can be bound to properties
Group of properties is an Item
Vaadin Fields

70. public class Person {
private String name;
private int age;
// Getters and setters omitted
}

71. public class Person {
private String name;
private int age;
// Getters and setters omitted
}
BeanItem<Person> item =
new BeanItem<Person>(person);

72. public class Person {
private String name;
private int age;
// Getters and setters omitted
}
BeanItem<Person> item =
new BeanItem<Person>(person);
Property ID Type Value
“name” String.class “John Doe”
“age” Integer.class 42

73. public class Person {
private String name;
private int age;
// Getters and setters omitted
}
BeanItem<Person> item =
new BeanItem<Person>(person);
Property ID Type Value
“name” String.class “John Doe”
“age” Integer.class 42

74. Separate Field value from
Property value with
Buffering

75. Buffering

76. setPropertyDatasource(property);
Buffering

77. setPropertyDatasource(property);
setBuffered(true);
Buffering

78. setPropertyDatasource(property);
setBuffered(true);
commit();
Buffering

79. setPropertyDatasource(property);
setBuffered(true);
commit();
discard();
Buffering

80. Buffering
Data source
UI Logic
AbstractField
Button
Browser

81. Buffering
Data source
UI Logic
AbstractField
Button
Browser
TextField
value
change

82. Buffering
Data source
UI Logic
AbstractField
Button
Browser
TextField
value
change
Save button
pressed

83. Buffering
Data source
UI Logic
AbstractField
Button
Browser
TextField
value
change
Save button
pressed
ClickEvent

84. commit()
Buffering
Data source
UI Logic
AbstractField
Button
Browser
TextField
value
change
Save button
pressed
ClickEvent

85. commit()
Buffering
Data source
UI Logic
AbstractField
Button
Browser
TextField
value
change
Save button
pressed
ClickEvent

86. FieldGroup
combining many Fields
together
(used to be Form)

88. setItemDataSource(Item item)

89. ?
What is the difference between
these two method calls?
comboBox.
setPropertyDataSource(property);
comboBox.
setContainerDataSource(container);