...

Für das Designen mit dem GUI-Builder sind weitere Ansichten Eclipse Views wichtig oder hilfreich:

...

• 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.
• Structure Properties- Abbildung der Komponenten-Hierarchie in einer UI oder ViewAuflistung der Eigenschaften und Einstellungen für die selektierten UI-Komponente.
• Quick Launch - Bauen und starten des Maven-Projektes.
• Toolbox - Funktionen zum Positionieren und Layouten von UI-Komponenten.
• Properties - Auflistung der Eigenschaften und Einstellungen für die selektierten UI-Komponente.

...

Image Added

Refresh

Sollte es beim Designen zu Darstellungsproblemen kommen, klicken Sie rechts oben auf Image Added, 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 des Projektes ändern.

Image Added

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.

Image Added

Verwendung von Devices

Durch die Verwendung von Devices können Sie Ihrer Arbeitsfläche im GUI-Builder eine vordefinierte Größe geben. Wählen Sie dazu in der Toolbar Image Added aus und wählen dort Ihre zukünftige Größe der Oberfläche.

Image Added        Image Added

In Kombination mit dem Zoom können Sie somit auch auf kleinerem Raum Oberflächen mit sehr hoher Auflösung erstellen.

UI und Views bearbeiten

Durch das Selektieren einer Doppelklick auf eine UI oder View im Project Management > User Interface, wird main-java wird diese zum Bearbeiten in einem neuen GUI-Builder Tab geöffnet, z.B. MainUI.java.

Image Removed

Layouts

Um eine grafische Oberfläche bestehend aus UI-Komponenten erstellen zu können, müssen Sie Ihrer View ein Layout zuweisen.. 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. 

Image Added

Layouts

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

...

1. Klicken Sie in der Palette eine UI-Komponente an, z.B. XdevButton Button.
2. Ziehen Sie die UI-Komponente mit Drag-and-Drop von der Palette in die Arbeitsfläche.

...

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.

Image RemovedImage Added

UI-Komponente austauschen

...

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.
   Image RemovedImage Added

Hinweis:

• 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 (XdevTextFieldTextField), durch den neuen Typ (XdevComboBox) ersetztComboBox) 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.

...

Deklarativ entwickeln

RapidClipse unterstützt bidirektionales Entwickeln zwischen GUI-Builder und XML-Code, d.h. Sie können Ihre Oberflächen wahlweise im GUI-Builder designen oder mit XML deklarativ beschreiben. Der generierte Javacode kann dagegen nicht editiert werden.