...

• Events - Registrierung von Events.
• Outline - Abbildung der Komponenten-Hierarchie in einer UI oder View.
• Palette - In der Palette werden alle UI-Komponenten aufgeführt, die für die Erstellung einer grafischen Oberfläche zur Verfügung stehen.
• Project Management - Unter User Interface werden die UI sowie sämtliche Views einer Oberfläche verwaltet. 
• Properties - Auflistung der Eigenschaften und Einstellungen für die selektierten UI-Komponente.
• Quick Launch - Vorschau starten oder fertige Anwendung deployenBauen und starten des Maven-Projektes.
• Toolbox - Funktionen zum Positionieren und Layouten von UI-Komponenten.

Image RemovedImage Added

Refresh

Sollte es beim Designen zu Darstellungsproblemen kommen, klicken Sie rechts oben auf , um einen Refresh des GUI-Builders durchzuführen. . Für größere Änderungen (wie z.B. Löschen & Hinzufügen von CSS-Dateien) muss der Hintergrundserver neugestartet werden, dazu klicken Sie rechts oben auf Image Added.

Theme

Über die Theme Combobox können Sie das Theme für die gesamte Oberfläche wechselndes Projektes ändern.

Hinweis: Es wird mit dieser Einstellung aber nur das Theme des GUI-Builders gewechselt. Um auch bei der fertigen Anwendung ein bestimmtes Theme zu verwenden muss das Theme explizit noch einmal als Annotation im ersten Fenster oder in jedem RouterLayout gesetzt werden.

Image Removed

Folgende Theme Annotations sind möglich:

• @Theme(value = Lumo.class, variant = Lumo.LIGHT)
• @Theme(value = Lumo.class, variant = Lumo.DARK)
• @Theme(value = Material.class, variant = Material.LIGHT)
• @Theme(value = Material.class, variant = Material.DARK)

Zoom

Mit Hilfe der Zoom-Funktion können Sie Ihren Entwurf bei Bedarf vergrößern und verkleinern. Die Auswahl des Zoom-Faktors lässt sich sowohl über eine Combobox, als auch mit gedrückter Strg Taste + Mausrad einstellen.

...

Durch Doppelklick auf eine UI oder View im Project Management > main-java wird diese zum Bearbeiten in einem neuen GUI-Builder Tab geöffnet, z.B. MainView.ui.xml. Um den generierten Java-Code zu sehen kann auf MainView.java im Project Management geklickt werden, oder per 'Strg + Shift + E' umgeschalten werden. 

Layouts

Um eine grafische Oberfläche bestehend aus UI-Komponenten erstellen zu können, müssen Sie Ihrer View ein Layout zuweisen.

Standardmäßig wird ein VerticalLayout als das Root-Layout verwendet. Das kann mit einen "Rechtsklick → Change Bean Type" zu jedem anderen Layout (z.B. HorizontalLayout) umgeändert werden.

Image Added

UI-Komponenten einfügen

Alle GUI-Komponenten lassen sich mit Drag-and-Drop in die Arbeitsfläche einfügen.

...

Für eine Mehrfachauswahl müssen Sie die Shift Taste die Strg Taste gedrückt halten und die gewünschten GUI-Komponenten nacheinander anklicken. Die zuerst selektierte GUI-Komponente ist die führende GUI-Komponente, an der sich die anderen GUI-Komponenten der Mehrfachauswahl ausrichten lassen. Bei einer Mehrfachauswahl wird nur die führende GUI-Komponenten im Hierarchie-Pfad des GUI-Builders angezeigt. Um die führende GUI-Komponente zu wechseln, müssen Sie eine andere GUI-Komponente der Mehrfachauswahl anklicken.

...

1. Klicken Sie mit Rechtsklick die UI-Komponente an, die Sie austauschen möchten, z.B. ein XdevTextField TextField.
2. Wählen Sie im Kontextmenü > Change Bean Type.
3. Geben Sie im folgenden Dialog die neue UI-Komponente an, z.B. XdevComboBoxComboBox.
4. Klicken Sie auf OK.
5. Klicken Sie auf Speichern.
   

...

• Durch das Austauschen gelayouteter UI-Komponenten kann das Gesamtlayout beeinträchtigt werden.
• Layout-Änderungen - Nach dem Austauschen eines Layouts werden die darin enthaltenen UI-Komponenten nach den Regeln des gewählten Layouts völlig neu angeordnet.

...

• Mit Replace all ... werden in der aktuellen View alle UI-Komponenten des gewählten Typs (TextField), durch den neuen Typ (ComboBox) ersetzt.

Achtung!

    Manchmal geht der GUI-Builder kaputt und zeigt eine Fehlermeldung an. Das passiert wenn die Anwendung einen Runtime-Fehler hat. Dieser muss erst gefixed werden, bevor der GUI-Builder nach einen Background-Server-Neustart wieder funktioniert.
    Häufige Fehlerquellen sind hier zu finden.

Code-Generierung

Nach jeder Änderung im GUI-Builder generiert RapidClipse automatisch XML-Code und daraus Javacode.

...