Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 

Ein Container kann eine Liste mit beliebig vielen Datensätzen (BeanItems) aufnehmen. RapidClipse bietet mit dem XdevLazyEntityContainer und dem XdevBeanItemContainer 2 verschiedene Container-Varianten.

Image Removed

...

Der XdevBeanItemContainer ist der Standard Daten-Container für benutzerdefinierte Queries. 

  • Bietet kein vollautomatisiertes Lazy-Loading zwischen Datenbank und Server, sondern lediglich zwischen Server und Client. Das gesamte Abfrageergebnis wird im XdevBeanItemContainer zwischengespeichert. Das Abfrageergebnis muss eigenständig mit Hilfe gängiger Abfragebedingungen minimiert werden.  
  • Manuelles Hinzufügen von Datensätzen (BeanItems) möglich.
  • Wird von RapidClipse verwendet, wenn bei einer UI-Komponente in den Properties Entity > Data > findAll selektiert ist.
    Image Removed
Summary:

...

table.setContainerDataSource(productContainer);

...

  • XdevTable
  • XdevComboBox
  • XdevListSelect
  • XdevTwinColSelect
  • XdevTree
  • XdevTreeTable

...

XdevBeanItemContainer<Product> productContainer = table.getContainerDataSource();
Examples:

Abfrageergebnis in XdevBeanItemContainer speichern

...

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
languagejava
themeConfluence

...

ProductDAO selectProducts = new ProductDAO();
List<Product> productList = selectProducts.findAll();

...

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
languagejava
themeConfluence

...

XdevBeanItemContainer<Product> productContainer = new XdevBeanItemContainer<Product>(Product.class); 
productContainer.addAll(productList);

...

this.theComponent.getDataProvider().refreshItem(itemFromTheListThatChanged);

Falls Sie ein Element löschen oder neu hinzufügen, müssen Sie die refreshAll-Methode aufrufen:

Code Block
languagejava
themeConfluence

...

this.theComponent.getDataProvider().

...

refreshAll();

Wert via ID - Liefert den Wert mit der ID 5 zurück.

Code Block
languagejava
themeConfluence
Product selProduct = table.getContainerDataSource().getItem(5).getBean();

...

XdevBeanItemContainer einer UI-Komponente zuweisen - Weist der XdevTable mit der Methode setContainerDataSource den XdevBeanItemContainer productContainer zu. 

Code Block
languagejava
themeConfluence
table.setContainerDataSource(productContainer);

...

Gesamte Daten einer UI-Komponente auslesen - Erzeugt einen neuen XdevBeanItemContainer productContainer vom Typ Product und weist diesen mit der Methode getContainerDataSource den XdevBeanItemContainer der XdevTable zu.

Code Block
languagejava
themeConfluence
XdevBeanItemContainer<Product> productContainer = table.getContainerDataSource();

...

Der XdevLazyEntityContainer wird nur von RapidClipse verwendet, wenn bei einer UI-Komponente in den Properties Entity > Auto query data selektiert ist.

Image Removed

  • Bietet vollautomatisiertes Lazy-Loading zwischen Datenbank, Server und Client. 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.
Model für:

Item 

Ein Item kann eine Liste mit Properties (einzelne Werten) und damit nur 1 Datensatz aufnehmen. RapidClipse verwendet standardmäßig die Item-Erweiterung BeanItem

...

Summary:

...

BeanItem<Product> product = table.getSelectedItem();

...

      • XdevFieldGroup

...

setItemDataSource

...

BeanItem einer UI-Komponente zuweisen

...

fieldGroup.setItemDataSource(product);
Model für:
Examples:

BeanItem instanzieren

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
languagejava
themeConfluence
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:

...

Selektierte Zeile aus XdevTable auslesen

Code Block
languagejava
themeConfluence
BeanItem<Product> product = table.getSelectedItem();

...

Code Block
languagejava
themeConfluence

...

BeanItem<Product> product = new BeanItem<Product>(null);
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:

Code Block
languagejava
themeConfluence

...

this.grid.

...

Property

Eine Property kann nur einen einzelnen Wert (Datenfeld) aufnehmen.   

...

Summary:

...

BeanItem<Product> product = table.getSelectedItem();

...

      • XdevFieldGroup

...

setPropertyDataSource

...

Wert einer UI-Komponente zuweisen.

...

fieldGroup.setItemDataSource(product);
Model für: 
Exmaples: 

Property instanzieren 

addColumn(Customer::getAddress).setHeader("Addressen").setAutoWidth(true);

Es müssen aber nicht Methoden des Entities genutzt werden:

Code Block
languagejava
themeConfluence

...

Property<String> productName = new ObjectProperty<String>("Chai");

...

Datenfeld aus einer selektierten Zeile einer XdevTable auslesen

Code Block
languagejava
themeConfluence
Property<String> productName = product.getItemProperty("productname");

...

  • Zuweisung mit der Methode setPropertyDataSource:

    Code Block
    languagejava
    themeConfluence
    textField.setPropertyDataSource(productName);
  • Zuweisung mit der Methode setValue:

    Code Block
    languagejava
    themeConfluence
    textField.setValue(productName);

Workflow von Daten-Eingang bis Visualisierung

Image Removed

...

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.