Mit RapidClipse entwickelte (Vaadin) Oberflächen basieren auf dem MVC-Konzept (Model-View-Control), das bei dem die Aufteilung der grafische Oberfläche in 3 von einander völlig unabhängigen Schichten vorgibtaus 3 voneinander getrennten Schichten besteht:
- Model - Daten-Container, der die Daten enthält. für die Datenausgabe aufnimmt und im Hauptspeicher zwischenspeichert, z.B. das Abfrageergebnis einer Datenbankabfrage oder Rückgabedaten die ein Webservice-Call liefert. In RapidClipse kann das Model mit beliebigen Daten-Objekten (Beans) befüllt werden, i.d.R. mit Entities (mit JPA Annotation markierte Beans).
- View - UI-Komponente, welche die Daten aus dem Daten-Container (Model) auf der Oberfläche anzeigt.
- Contoller - Registriert Ereignisse auf der UI-Komponente und reagiert darauf (Events).
Damit also eine Um Daten auf der Oberfläche anzeigen zu können, muss der UI-Komponente (View) Daten anzeigen kann, muss dieser immer explizit ein Daten-Container (Model) übergeben werden.
...
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.
UI-Komponente mit Entity im GUI-Builder verknüpfen
Entity einer UI-Komponente programmatisch zuweisen
Im GUI-Builder
UI-Kompnoente mit Entity im GUI-Builder 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.
- Klicken Sie bei Properties > Entity auf ....
- Suchen Sie im folgenden Assistenten nach dem Entity Products.
- Klicken Sie auf OK.
Intern
In RapidClipse kann das Model mit beliebigen Daten-Objekten (Beans) befüllt werden, i.d.R. mit Entities (mit JPA Annotation markierte Beans). 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 (Liste mit Datensätzen) Container (Tabelle) - Kann eine Liste an mit Datensätzen (Items) speichern. XdevBeanItemContainer ist ist eine Erweiterung , die von von Container ableitet.
- Item - (Datensatz) - Kann 1 Datensatz bestehend aus mehreren Properties speichern. BeanItem ist eine Erweiterung , die von Item ableitet.
- 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
...
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(); |
...
Chai | 10 boxes x 20 bags | 18 | 39 | 0 | false | 10 |
Model für:
- XdevTextField
Instanzierung:
...
Code Block | ||||
---|---|---|---|---|
| ||||
fieldGroup.setItemDataSource(product); |
Property
Eine Property kann nur einen einzelnen Wert (Datenfeld) aufnehmen.
Chai |
Model für:
- XdevTextField
- XdevPasswordField
- XdevInlineDateField
- XdevPopupDateField
- XdevNativeSelect
- XdevRichTextArea
...