Für die Erstellung grafischer HTML5 Oberflächen bietet Ihnen RapidClipse einen auf Vaadin basierenden GUI-Builder.

Layouts

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

...

RapidClipse bietet Ihnen einen GUI-Builder, mit dem Sie grafische Oberflächen per Drag-and-Drop erstellen können. Im Hintergrund generiert RapidClipse Javacode auf Basis von Vaadin. Das Endergebnis zur Laufzeit ist eine HTML5 / JavaScript Oberfläche, die im Web-Browser dargestellt wird. 

Für das Designen mit dem GUI-Builder sind weitere 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.
• Properties - Auflistung 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.

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 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. 

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

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

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

Mehrfachauswahl

Für eine Mehrfachauswahl müssen Sie 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 Added

UI-Komponente austauschen

Im GUI-Builder bereits vorhandene UI-Komponenten oder Layouts lassen sich bei Bedarf austauschen und durch eine andere UI-Komponente bzw. Layout ersetzen.

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

Hinweis:

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

Optionen:

• 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.

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.