GUI-Komponente wie die Grid oder der Binder können programmatisch mit einem Entity verknüpft werden.
Liste an GUI-Komponente, welche Databinding benötigen:
Databinding mit CheckboxGroup, RadioButtonGroup, ComboBox, Select oder ListBox:
- Zuerst muss die Komponente typisiert werden, dazu im GUI-Builder die Komponente anwählen und dann in den Properties auf Property > Object > Type Arguments klicken z.B. java.lang.String
- Im folgenden Dialog den Typ auswählen, welchen Sie anzeigen wollen.
- Danach können Sie auswählen, welche Information pro Eintrag angezeigt werden soll.
Um die Komponente jetzt zu befüllen, können Sie folgenden Code schreiben:
this.theComponent.setItems(myListWithItems);
Im Hintergrund erstellt Vaadin dann für die übergebene Liste einen DataProvider. Wenn ein Element also in der Liste geupdated wird, muss diese dann auch der DataProvider geupdated werden:
this.theComponent.getDataProvider().refreshItem(itemFromTheListThatChanged);
Falls Sie ein Element löschen oder neu hinzufügen, müssen Sie die refreshAll-Methode aufrufen:
this.theComponent.getDataProvider().refreshAll();
Mit getValue() können Sie nach den ausgewählte(n) Elemente abfragen.
Databinding mit Binder:
Mit dem Binder lassen sich ganz einfach Formulare erstellen. Dafür einfach ein Entity per Drag and Drop auf den GUI-Builder ziehen. Danach öffnet sich ein Dialog, wo Sie die Attribute auswählen können, die angezeigt werden sollen.
Ein Entity kann jetzt wie folgt gebunden werden:
this.binder.writeBean(myBean);
Jetzt sind die Werte des Beans in die Felder des Binders übertragen worden.
Die Werte können jetzt wie folgt wieder geholt werden:
this.binder.readBean(myBean);
Databinding mit Grid:
Das Grid lässt sich ähnlich wie CheckboxGroup etc. binden. Zuerst das Entity per Drag and Drop in den GUI-Builder ziehen. Danach öffnet sich aber ein komplexerer Dialog. Dort können Sie die Attribute auswählen, die angezeigt werden sollen. Sie können aber auch Column per Code einfügen wie folgt:
this.grid.addColumn(Customer::getAddress).setHeader("Addressen").setAutoWidth(true);
Es müssen aber nicht Methoden des Entities genutzt werden:
this.grid.addColumn(customer -> "Address is: " + customer.getAddress()).setHeader("Addressen").setAutoWidth(true);
Das setzen der Items, sowie das Refreshen des Dataproviders ist identisch zu der CheckboxGroup etc.