5.3.10 Besonderheiten

In den folgenden Abschnitten werden einige besondere Möglichkeiten der Editierung und Modifikation von GUI-Elementen aufgezeigt.

5.3.10.1 GUI-Elemente anordnen

Im Gegensatz zu Statechart-Elementen spielt die Reihenfolge, in der die GUI-Elemente eines Layouts angezeigt werden, eine wesentliche Rolle. Das gegenseitige teilweise Verdecken der GUI-Elemente kann ein entscheidender Gestaltungspunkt der Ansicht sein. Deshalb ist es wichtig, die Reihenfolge bzw. Anordnung der GUI-Elemente explizit bestimmen zu können.

Eines der wichtigsten Hilfsmittel ist dabei der Outline-View. Dieser enthält eine Auflistung aller editierbaren GUI-Elemente (siehe Abb. 5.25). Die Reihenfolge in dieser Liste entspricht der Anordnung der GUI-Elemente. Dabei verdecken GUI-Elemente, die später in der Liste auftauchen, GUI-Elemente, die sich vor ihnen in der Liste befinden. GUI-Elemente am Anfang der Liste befinden sich also hinten, wogegen GUI-Elemenete am Ende der Liste sich vorne befinden. Anhand des Outline-Views lässt sich also jederzeit erkennen, wie sich die GUI-Elemente gegenseitig überdecken.

Figure 5.25: GUI-Elemente im Outline-View

 

Natürlich wird Ihnen im Layout-Fenster jederzeit die korrekte Anordnung der GUI-Elemente angezeigt, diese lässt sich aber nur dann erkennen, wenn sich GUI-Elemente auch tatsächlich überlappen. Außerdem kann der Überblick leicht verloren gehen, wenn sich mehrere GUI-Elemente paarweise überdecken. Im Outline-View können Sie sich aber jederzeit einen guten Überblick über die Situation verschaffen.

Desweiteren kann der Outline-View nicht nur dazu benutzt werden, um sich die Anordnung anzuschauen, sondern Sie können ihn auch dazu verwenden, um diese Anordnung zu verändern. Es ist nämlich möglich, mithilfe des Drag&Drop-Verfahrens, selektierte GUI-Elemente an eine beliebige Stelle zu verschieben. Das Umordnen der GUI-Elemente im Outline-View ist also kinderleicht und geht schnell von der Hand.

Als Alternative zum Outline-View befinden sich auch Anordnungsfunktionen im Kontextmenü. Lesen Sie dazu bitte den Abschnitt 5.3.6.

5.3.10.2 GUI-Elemente verstecken (Visibility)

Jedes GUI-Element hat eine ganz besondere Eigenschaft: seine Sichtbarkeit (Visibility). Standardmäßig ist jedes GUI-Element erst einmal sichtbar, das bedeutet, dass das GUI-Element in der Simulation des Layouts auch wirklich angezeigt wird. Diese Eigenschaft eines GUI-Elements lässt sich allerdings ändern. Die für diesen Zweck vorgesehene visible Option finden Sie sowohl im Properties-View als auch im Eigenschaften-Dialog, der sich über das Kontextmenü öffnen lässt, unter der Kategorie bzw. der Registerkarte Render(vgl. Abb. 5.26).

Figure 5.26: Sichtbarkeit eines GUI-Elements setzen

 

Wenn Sie die Sichtbarkeit eines GUI-Elements deaktivieren, so wird bei der Komposition der GUI-Ansicht so getan, als wäre das GUI-Element überhaupt nicht vorhanden. Das GUI-Element ist versteckt, aber es verschwindet natürlich nicht aus Ihrem Layout-Fenster, wenn Sie seine Sichtbarkeit deaktivieren. Schließlich wollen Sie das GUI-Element weiter editieren können. Vielmehr wird in der Simulation und im Layout-Preview so getan, als wenn das GUI-Element nicht existieren würde.

Eine Ausnahme liegt beim Sound-Element vor. Dieses GUI-Element ist standardmäßig nicht sichtbar und wird es auch nie sein, da die Sichtbarkeit dieses Elements nicht verändert werden kann. Das liegt daran, dass es sich beim Sound-Element nicht um ein graphisches Element handelt. Es soll ausschließlich im Layout-Fenster erscheinen, damit sich das Element vernünftig editieren lässt.

Doch wozu soll diese Funktion bitteschön nützlich sein? Nun, da es sich bei der Sichtbarkeit eines GUI-Elements um eine Eigenschaft handelt, kann diese wie jede andere auch manipuliert werden. Dadurch ist es zum Beispiel möglich, geerbte GUI-Elemente einfach auszublenden, falls sie für ein untergeordnetes Layout im Weg sind. Sollten Sie allerdings zu viele geerbte GUI-Elemente ausblenden müssen, um das Layout zu erstellen, das Ihnen vorschwebt, so sollten Sie sich fragen, ob nicht ein konzeptioneller Fehler in Ihrer Statechart-Struktur vorliegt. Denn anscheinend ist das von Ihnen geplante Layout keine Erweiterung bzw. Spezialisierung der bereits geerbten GUI-Elemente.

Sie können das Ganze aber auch anders herum aufziehen, indem Sie versteckte GUI-Elemente in Layouts platzieren, so dass andere Layouts die versteckten GUI-Elemente erben und gegebenfalls für ihr Layout wieder anzeigen können.

Dadurch lassen sich unterschiedliche Bereiche von Zuständen schaffen, in denen ein GUI-Element standardmäßig angezeigt bzw. versteckt ist, um es lediglich in den Ausnahmefällen dieser Bereiche wieder anzuzeigen.

5.3.10.3 GUI-Elemente rendern

Das Rendern eines GUI-Elements erhöht die Qualität, mit der es angezeigt wird (vgl. Abb. 5.27). Im Render-Modus werden nämlich Techniken wie Kantenglättung (Antialiasing) und Pixelinterpolation verwendet, die zu einem besseren Ergebnis führen. Das macht sich besonders bei Grafik-Elementen (Bildern) bemerkbar, wenn diese nicht in ihrer Originalgröße angezeigt werden, sondern skaliert sind. Auch bei Form-Elementen (Shapes) wird dadurch dazu beigetragen, dass die Ränder weicher und glatter gezeichnet werden.

Durch das Rendern eines GUI-Elements kann es auch passieren, dass dieses ein wenig anders dargestellt wird, da manche Features, wie zum Beispiel gestrichelte Umrandungen eines Form-Elements (Shape), umfangreicher und besser im Render-Modus unterstützt werden.

Figure 5.27: Bessere Qualität durch Rendern

 

Es gibt auch GUI-Elemente, die sich nicht rendern lassen. Dazu zählen das Sound-Element und der normale Button. Beim Sound-Element spielt die Qualität der graphischen Repräsentation natürlich keine Rolle, da dieses GUI-Element ja nur zu Editierzwecken angezeigt wird, und in der finalen Ansicht überhaupt nicht sichtbar ist. Beim Button-Element handelt es sich um ein Standardelement, das durch das Rendern keinen Qualitätszuwachs verzeichnen kann.

Für den technisch Interessierten sei an dieser Stelle erwähnt, dass GUI-Elemente normalerweise in einem SWT-Kontext erstellt und auch präsentiert werden, wogegen gerenderte GUI-Elemente in einem AWT-Kontext erstellt und anschließend mithilfe eines Bildes im SWT-Kontext angezeigt werden.

GUI-Elemente lassen sich im Layout-Fenster (5.3.1), Layout-Preview (5.3.4) und im Simulator-View (6.2) rendern. Für den Layout-Preview und den Simulator-View befinden sich dafür Schalter in den Toolbars (vgl. Abb. 5.28), so dass alle GUI-Elemente, die der entsprechende View anzeigt, automatisch gerendert werden, wenn Sie die Option aktivieren.

Figure 5.28: Schalter zum Rendern

 

Im Layout-Fenster können Sie dagegen für jedes einzelne GUI-Element entscheiden, ob Sie es rendern lassen wollen oder nicht. Dazu finden Sie die Option Render in editor in der Kategorie Render sowohl im Properties-View als auch im Eigenschaften-Dialog (siehe Abb. 5.29), den Sie über das Kontextmenü des jeweiligen GUI-Elements erreichen können.

Figure 5.29: Rendern im Editor aktivieren

 

Es wird empfohlen, die Render-Option im Layout-Fenster und besonders im Layout-Preview nur temporär zu aktivieren, da es mitunter zu erheblichen Leistungseinbußen kommen kann, die ein flüssiges Editieren von GUI-Elementen beeinträchtigen. Das gilt insbesondere bei einem groß eingestellten Bildschirmbereich. Im Simulator-View kann es insbesondere bei der Benutzung von Grafik-Buttons zu sehr langen Wartezeiten kommen, wenn diese gedrückt werden. Desweiteren sind merkbare Zeitverzögerungen bei Layout-Wechseln zu verzeichnen.

5.3.10.4 GUI-Elemente Klonen

Es ist möglich, GUI-Elemente zu klonen. Dazu müssen Sie die GUI-Elemente, die Sie replizieren wollen, selektieren. Nachdem Sie Ihre Auswahl getroffen haben, tun Sie so, als wollten Sie die ausgewählten GUI-Elemente lediglich verschieben, halten dabei aber die STRG-Taste gedrückt. Jetzt werden die selektierten GUI-Elemente nicht an die neue Position verschoben, sondern es werden Kopien von den GUI-Elementen an der ausgewählten Position erzeugt. Die kopierten GUI-Elemente unterscheiden sich dabei von ihren Originalen lediglich durch ihre Position.

5.3.10.5 Spezielle Bearbeitungsfunktionen eines Grafik-Elements (Bild)

Wird eine Grafik-Datei einem Grafik-Element zugewiesen, sei es das erste Mal, oder als Austausch eines bereits vorhandenen Bildes, so nimmt das GUI-Element nicht automatisch die Größe des in der Datei enthaltenen Bildes an. Das GUI-Element bleibt in seiner ursprünglichen Größe erhalten. Das ist besonders nützlich, wenn Sie das GUI-Element bereits ausgerichtet haben und nur noch das Bild aus der Datei hereinladen möchten, ohne dass die Position des Elements dadurch beeinträchtigt wird.

Wollen Sie aber das Bild in seiner unskalierten Form haben, so steht Ihnen dazu eine spezielle Funktion im Kontextmenü zur Verfügung (siehe Abb. 5.30). Die Funktion Apply Original Size bringt das Bild wieder zurück auf seine unskalierte Größe. Dabei taucht diese Funktion auch nur dann im Kontextmenü auf, wenn sich das Bild nicht in seiner Originalgröße befindet.

Figure 5.30: Kontextmenü eines Grafik-Elements

 

Beim Grafik-Element kann es zudem passieren, dass das angezeigte Bild nicht mehr mit dem übereinstimmt, welches in der zugehörigen Grafik-Datei enthalten ist. Dazu kann es kommen, wenn die Grafik-Datei während der laufenden Sitzung von GuiBuilder aus irgendeinem Grunde modifiziert wird (zum Beispiel durch manuelles Überschreiben der Datei). Da GuiBuilder zur Geschwindigkeitsoptimierung einen Cache verwendet, kann es passieren, dass das Bild weiterhin aus dem Cache geladen wird, anstatt die geänderte Version aus der Datei zu verwenden. Sie müssen dann mithilfe der Refresh-Funktion, die Sie im Kontextmenü eines Grafik-Elements finden, manuell den Synchronisierungsprozess einleiten. Das Bild wird dann aus dem Cache entfernt und neu aus der Datei geladen.

5.3.10.6 Positionierung von GUI-Elementen mit der Tastatur

GUI-Elemente lassen sich auch mit der Tastatur verschieben und in ihrer Größe ändern. Dazu müssen Sie einfach die GUI-Elemente selektieren, die Sie verschieben oder vergrößern bzw. verkleinern wollen. Danach können Sie die selektierten GUI-Elemente bei gedrückt gehaltener STRG-Taste mithilfe der Pfeiltasten in die entsprechenden Richtungen verschieben oder bei gedrückt gehaltener SHIFT-Taste in ihrer Größe ändern.

Die Abstufung, in denen ein GUI-Element durch einen Tastendruck in eine bestimmte Richtung verschoben bzw. in seiner Größe geändert wird, ist durch die eingestellte Rastergröße festgelegt. Rastergrößen lassen sich für jedes Layout-Fenster unabhängig festlegen. Mehr Informationen zum Layout-Fenster und seinem Raster erhalten Sie in Abschnitt 5.3.1.