Div
Ein Div eine sehr simple Komponente. Es können weitere Komponente in ein Div gepackt werden, diese werden aber in keiner bestimmten Weise angeordnet. Ein Div eignet sich deshalb prima als Platzhalter, welcher später per Code mit z.B. einen Layout gefüllt werden kann.
LoginForm
Eine LoginForm stellt eine einfache Möglichkeit da, ein Benutzerlogin zu bauen. Dazu muss lediglich die Komponente per Drag and Drop in den GUI-Builder gezogen werden und dann die Events belegt werden. Dazu einfach auf die Komponente rechtsklicken und dann Events > login > onLogin [add] auswählen. Das LoginEvent Objekt enthält alle wichtigen Informationen wie der Username und das Passwort.
Details
Mit der Details Komponente können Informationen ganz leicht vom Benutzer ein- und ausgeblendet werden. Dazu einfach per Drag and Drop eine Komponente (oder ein Layout um mehrere Komponente einfügen zu können) auf die Details Komponente ziehen.
Mit Properties > Object > SummaryText kann der Details Komponente eine Erklärung gegeben werden, welche neben dem Ein- und Ausklappicon angezeigt wird.
Accordion
Das Accordion ist so ähnlich wie die Detail Komponente, mit welcher der Benutzer Informationen auf- und zuklappen kann. Der Unterschied liegt darin, dass pro Accordion jeweils nur ein AccordionPanel gleichzeitig aufgeklappt werden kann. AccordionPanels können per Drag and Drop zu einen Accordion hinzugefügt werden.
Tabs
Mit der Tabs Komponente können mehrere Tab Komponente angezeigt werden. Diese eignet sich gut, um verschiedenen Content auf einer View anzuzeigen.
Um das zu erreichen kann wie folgt vorgegangen werden:
Hinzufügen von Tabs per Drag and Drop
Button und NativeButton
Mit den Button lassen sich viele verschiedene Aufgaben erledigen. Der NativeButton ist eine primitive Variante eines Buttons. Diese hat standardmäßig kein Styling. Um ein Click-Event zu einen Button hinzuzufügen, kann der Button gedoppelklickt werden.
Mit der Object > Text Property kann dem Button eine Beschriftung gegeben werden
Anchor
Mit Anchors können auf andere Webseiten verlinkt werden, z.B. https://www.rapidclipse.com/
Wichtige Properties:
Text - Der angezeigte Text
RouterLink
Mit RouterLinks können Links zu anderen Routen auf der gleichen Webseite erstellt werden. Der Vorteil gegenüber eines Anchors ist, dass wenn sich die Route zu einer View ändert, passt sich der RouterLink automatisch an.
Wichtige Properties:
Text - Text, welcher den RouterLink beschreibt
FilterComponent
Die FilterComponent ist eine leistungsfähige Filter-Komponente, mit der sich alle Tables und List-Komponenten durchsuchen und filtern lassen. Die Filter-Bedingung kann sich der Endanwender zur Laufzeit selbständig zusammenklicken. Dazu müssen Sie die FilterComponent lediglich mit einer Grid verknüpfen, in dem Sie bei Properties > Connected Grid die gewünschte Grid auswählen.
Binder
Mit dem Binder können einzelne Felder einer View mit einem Entity verbunden werden. Es können Attribute des Entities in die Felder geladen werden, als auch die Werte der Felder in das Entity zurückgeschrieben werden.
Ein Entity kann wie folgt verbunden werden:
Entity per Drag and Drop auf die View ziehen.
TextField, TextArea, PasswordField, EmailField und NumberField
Mit einen TextField kann eine Vielzahl an Informationen von dem Benutzer an das Programm weitergegeben werden. Durch verschiedene Validierungsmöglichkeiten können diese Eingaben auch vorerst auf Korrektheit überprüft werden.
Die TextArea ist identisch zu dem TextField, mit dem kleinen Unterschied, dass eine Eingabe über mehreren Zeilen möglich ist.
Checkbox, CheckboxGroup und RadioButtonGroup
Checkbox
Mit der Checkbox kann ganz einfach ein boolescher Wert vom Benutzer an das Programm weitergeleitet werden. Durch die Einfachheit der Checkbox muss der Wert nicht zuvor validiert werden.
Wichtige Properties:
ComboBox, Select und ListBox
Mit diesen drei Komponenten, kann der Benutzer von einer Liste an Optionen eine Option auswählen. Diese Komponenten unterscheiden sich wie folgt:
Mit der ComboBox kann der Benutzer nach dem gewünschten Objekt suchen.
DatePicker und TimePicker
Mit diesen Komponenten kann der Benutzer jeweils ein Datum oder eine Uhrzeit eingeben. Wenn auf das Feld geklickt wird, öffnet sich ein ein kleiner Dialog, in welchen der Benutzer seine Auswahl betätigen kann.
Wichtige Properties:
Required - Gibt an, dass das Feld ausgewählt sein muss, bevor der Benutzer z.B. in einen Formular auf Weiter klicken kann.
Upload
Mit der Upload-Komponente kann der Benutzer Dateien hochladen. Wenn der Benutzer auf den Upload Files Button drückt, öffnet sich ein Dialog, mit welchen der Benutzer dann die Dateien auswählen kann, die er hochladen will.
Wichtige Properties:
DropAllowed - Gibt an, ob der Benutzer per Drag and Drop Dateien hochladen kann.
Grid
Eine sehr komplexe Komponente, mit der viel Informationen auf einmal angezeigt werden kann.
Benutzen des Grids:
Ziehen Sie das Grid in den GUI-Builder.
ProgressBar
Mit der ProgressBar kann der Ablauf von etwas angezeigt werden. Durch das setzten der Value verändert sich die Größe der Bar.
Wichtige Properties:
Indeterminate - Symbolisiert, dass der Status des Progress unbekannt ist z.B. dass der Progress noch auf etwas wartet, bevor er gestartet werden kann
Icon
Mit der Icon-Komponente können ganz leicht Icons von Vaadin auf einer View angezeigt werden. Es gibt mehrere Möglichkeiten Icons hinzuzufügen.
Icon-Komponente aus der Palette - Dazu einfach aus der Palette ein Icon per Drag and Drop in den GUI-Builder ziehen. Um das Icon jetzt zu ändern, können Sie unter Properties > Object > Icon das Icon ändern.
Image
Mit der Image-Komponente können Bilder, die sich auf dem Server liegen, als auch Bilder von anderen Servern, ganz einfach in einer View anzeigen.
Bilder vom eigenen Server anzeigen:
Es gibt zwei Möglichkeiten, wie man Bilder vom eigenen Server anzeigen kann.
Label, H1-H6 und Emphasis
Ein Label ist eine simple Komponente, mit welcher Sie ganz einfach einen Text anzeigen können.
Die H1 - H6 Komponenten sind Text-Komponenten, welche für Überschriften und Unterüberschriften benutzt werden. Diese haben standardmäßig eine größere font-size als auch einen größeren margin. Diese können unter Properties > Styling > Styles angepasst werden.
Hr
Mit der Hr-Komponente, auch bekannt als Horizontal Ruler, können verschiedene Komponente mit einer Trennlinie getrennt werden.
Beispiel in Chrome:
Navigation Komponente
Mit den Navigation Komponenten können Sie ganz leicht eine Navigation in Ihrer Applikation erstellen. Dazu einfach z.B. die NavigationBarHorizontal-Komponente per Drag and Drop in den GUI-Builder ziehen. Sie sollten jetzt eine leere Komponente sehen:
Diese wird dann während der Laufzeit befüllt.
NavigationItemProperties: