Mit RapidClipse entwickelte (Vaadin) Oberflächen basieren auf dem MVC-Konzept (Model-View-Control), bei dem die grafische Oberfläche aus 3 voneinander getrennten Schichten besteht:
...
Um Daten auf der Oberfläche anzeigen zu können, muss der UI-Komponente (View) immer explizit ein Daten-Container (Model) zugewiesen werden. Diese Verknüpfung von UI-Komponente und Daten-Container wird allgemein als Databinding bezeichnet. In RapidClipse kann die Verknüpfung wahlweise programmatisch oder auf einfache Weise im GUI-Builder mit Drag-and-Drop erfolgen.
Daten-Container Typen:
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:
- Container (Tabelle) - Kann eine Liste mit Datensätzen (Items) speichern. XdevBeanItemContainer ist eine Erweiterung von Container.
- Item (Datensatz) - Kann 1 Datensatz bestehend aus mehreren Properties speichern. BeanItem ist eine Erweiterung von Item.
- Property (Einzelner Wert) - Kann nur 1 einzelnen Wert speichern.
UI-Komponente mit Entity verknüpfen
Im GUI-Builder können Sie einer UI-Komponente ein beliebiges Entity und damit den benötigten Daten-Container per Drag-and-Drop zuweisen. Der Code dafür wird im Hintergrund automatisch generiert.
- Fügen Sie eine XdevTable in den GUI-Builder ein.
- Ziehen Sie ein Entity, z.B. Products per Drag-and-Drop auf die XdevTable.
- Klicken Sie bei Properties > Entity > Property auf ....
- Selektieren Sie im folgenden Assistenten die Property productname.
- Klicken Sie auf OK.
Entity in den Properties auswählen
...
Intern
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:
- Container (Tabelle) - Kann eine Liste mit Datensätzen (Items) speichern. XdevBeanItemContainer ist eine Erweiterung von Container.
- Item (Datensatz) - Kann 1 Datensatz bestehend aus mehreren Properties speichern. BeanItem ist eine Erweiterung von Item.
- Property (Einzelner Wert) - Kann nur 1 einzelnen Wert speichern.
Tipp: In RapidClipse kann der Daten-Container mit beliebigen Daten-Objekten (Beans) befüllt werden, i.d.R. mit Entities.
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.
Instanzierung:
Code Block | ||||
---|---|---|---|---|
| ||||
XdevBeanItemContainer<Products> productsContainer = new XdevBeanItemContainer<Products>(Products.class); |
Häufiger Anwendungsfall:
Auslesen eines Daten-Containers aus einer Table:
Code Block | ||||
---|---|---|---|---|
| ||||
XdevBeanItemContainer<Products> productsContainer = table.setContainerDataSource(); |
Zuweisung:
Erfolgt mit der Methode setContainerDataSource:
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.
...
Model für:
- XdevTextField
Instanzierung:
Code Block | ||||
---|---|---|---|---|
| ||||
BeanItem<Products> product = new BeanItem<Products>(null); |
Häufiger Anwendungsfall:
Auslesen eines Datensatzes aus der selektierten Zeile einer Table:
Code Block | ||||
---|---|---|---|---|
| ||||
BeanItem<Products> product = table.getSelectedItem(); |
Zuweisung:
Erfolgt mit der Methode setIemDataSource:
Code Block | ||||
---|---|---|---|---|
| ||||
fieldGroup.setItemDataSource(product); |
Property
Eine Property kann nur einen einzelnen Wert (Datenfeld) aufnehmen.
...
Model für:
- XdevTextField
- XdevPasswordField
- XdevInlineDateField
- XdevPopupDateField
- XdevNativeSelect
- XdevRichTextArea
Instanzierung:
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:
...
language | java |
---|---|
theme | Confluence |
...
.
...
In der Praxis wird jedoch i.d.R. die Methode setValue verwendet:
Code Block | ||||
---|---|---|---|---|
| ||||
textField.setValue(productName); |