Databinding programmatisch

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.