Da sich die UI-Komponenten in ihrer Fähigkeit Daten anzuzeigen zum Teil stark unterscheiden, stehen in RapidClipse 3 verschiedene Daten-Container Typen zur Verfügung:
...
- Wird von RapidClipse automatisch verwendet, wenn Property > Data > findAll oder eine benutzerdefinierte Query-Methode ausgewählt wird.
- Bietet kein Lazy-Loading zwischen Datenbank und Server. Das Abfrageergebnis wird vollständig an den XdevBeanItemContainer (Server) übertragen.
- Manuelles Hinzufügen von Datensätzen (BeanItems) möglich.
...
Wird i.d.R. nur von RapidClipse intern verwendet, wenn Property > Auto query data selektiert wird.
Bietet Lazy-Loading zwischen Datenbank und Server. Es werden immer nur so viele Datensätze zwischen Datenbank und Server übertragen, wie vom Client durch Scrollen oder Paging angefordert werden.
- Nimmt keine dynamischen SQLs entgegen (automatisch immer SELECT * FROM ...)
- Manuelles Hinzufügen von BeanItems nicht möglich.
...
Container
Ein Container kann eine Liste mit beliebig vielen Datensätzen (BeanItems) aufnehmen.
Model für:
- XdevTable
- XdevComboBox
- XdevListSelect
- XdevTwinColSelect
- XdevTree
- XdevTreeTable
...
Der XdevBeanItemContainer ist eine Erweiterung, die von Container ableitet.
- Wird von RapidClipse automatisch verwendet, wenn Property > Data > findAll oder eine eigene Query-Methode ausgewählt wird.
- Bietet kein Lazy-Loading zwischen Datenbank und Server. Das Abfrageergebnis wird vollständig an den XdevBeanItemContainer (Server) übertragen.
- Manuelles Hinzufügen von Datensätzen (BeanItems) möglich.
...
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:
Code Block | ||||
---|---|---|---|---|
| ||||
XdevBeanItemContainer<Products> productsContainer = new XdevBeanItemContainer<Products>(Products.class); |
Häufiger Anwendungsfall:
Auslesen eines Daten-Containers aus einer Table:
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:
Code Block | ||||
---|---|---|---|---|
| ||||
XdevBeanItemContainer<Products> productsContainer = table.setContainerDataSource(); |
Zuweisung:
...
this.theComponent.getDataProvider().refreshItem(itemFromTheListThatChanged); |
Falls Sie ein Element löschen oder neu hinzufügen, müssen Sie die refreshAll-Methode aufrufen:
Model für:
- XdevTextField
Instanzierung:
Code Block | ||||
---|---|---|---|---|
| ||||
table.setContainerDataSource(productsContainer); |
...
Der XdevLazyEntityContainer ist eine Erweiterung, die von Container ableitet.
Wird i.d.R. nur von RapidClipse intern verwendet, wenn Property > Auto query data selektiert wird.
Bietet Lazy-Loading zwischen Datenbank und Server. Es werden immer nur so viele Datensätze zwischen Datenbank und Server übertragen, wie vom Client durch Scrollen oder Paging angefordert werden.
- Nimmt keine dynamischen SQLs entgegen (automatisch immer SELECT * FROM ...)
- Manuelles Hinzufügen von BeanItems nicht möglich.
BeanItem
Das BeanItem ist eine Erweiterung, die von Item ableitet. Ein BeanItem kann eine Liste mit Properties (einzelne Werten) und damit 1 Datensatz aufnehmen.
...
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:
Code Block | ||||
---|---|---|---|---|
| ||||
BeanItem<Products> product = new BeanItem<Products>(null); |
Häufiger Anwendungsfall:
...
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:
Code Block | ||||
---|---|---|---|---|
| ||||
BeanItem<Products> product = table.getSelectedItem(this.binder.readBean(myBean); |
Zuweisung:
...
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:
Code Block | ||||
---|---|---|---|---|
| ||||
fieldGroupthis.grid.setItemDataSource(product); |
Property
Eine Property kann nur einen einzelnen Wert (Datenfeld) aufnehmen.
...
Model für:
- XdevTextField
- XdevPasswordField
- XdevInlineDateField
- XdevPopupDateField
- XdevNativeSelect
- XdevRichTextArea
Instanzierung:
addColumn(Customer::getAddress).setHeader("Addressen").setAutoWidth(true); |
Es müssen aber nicht Methoden des Entities genutzt werden:
Code Block | ||||
---|---|---|---|---|
| ||||
Property<String> productName = new ObjectProperty<String>("Chai"); |
Häufiger Anwendungsfall:
Auslesen eines Datenfeldes aus einem Item, z.B. der selektierten Zeile einer Table:
Code Block | ||||
---|---|---|---|---|
| ||||
Property<String> productName = product.getItemProperty("productname"); |
Zuweisung:
Erfolgt mit der Methode setPropertyDataSource:
Code Block | ||||
---|---|---|---|---|
| ||||
textField.setPropertyDataSource(productName); |
In der Praxis wird jedoch i.d.R. die Methode setValue verwendet:
Code Block | ||||
---|---|---|---|---|
| ||||
textField.setValue(productName); |
...
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.