Grafische Benutzeroberflächen - Frameworks www.delphi-treff.de
173
6. GRAFISCHE BENUTZEROBERFLÄCHEN
6.1. Frameworks
Be eits i „Hallo Welt -Kapitel zu Beginn dieses E-Books haben wir uns kurz mit grafischen Benutzeroberflächen beschäftigt. Auf allen folgenden Seiten ging es dann aber
– mit Ausnahme des Abschnitts „Be utze ei ga e – hauptsächlich um die Programmiersprache Object Pascal an sich und um
Programmiertechniken. Deshalb ist es jetzt mal wieder an der Zeit, uns der Oberfläche zuzuwenden. Wie s ho a de „Hallo Welt -Beispielen zu sehen war, gibt es in Delphi zwei Frameworks, um GUI-
Anwendungen GUI = Graphical User Interface zu erstellen: die VCL und FireMonkey. Die VCL Visual
Component Library ist immer dann zu wählen, wenn man eine Anwendung erstellen möchte, die unter Windows läuft. Zieht man es aber in Betracht, die Anwendung auch für andere Betriebssysteme zu kompilieren,
sollte man das mit Delphi XE2 eingeführte FireMonkey verwenden. Aktuell unterstützt FireMonkey neben
Windows auch das Erzeugen nativer Mac OS X-Anwendungen. In nächster Zeit soll mit dem Mobile Studio auch die Unterstützung von iOS und Android dazu kommen.
Während die VCL bei der Darstellung der bekannten Steuerungselemente Buttons, Menüs, Listboxen usw. direkt auf die Windows-Programmierschnittstelle zugreift und dadurch dafür sorgt, dass alles so aussieht wie in
jeder anderen Windows-Anwendung, zeichnet FireMonkey alle Steuerungselemente komplett selbst. Das macht es unabhängig vom darunter liegenden Betriebssystem.
6.2. Oberflächen-Stile
Seit Delphi XE2 ist es möglich, dass der Entwickler seiner Anwendung einen Stil verpasst. Das ist auch für VCL- Anwendungen möglich. Bei einem Stil handelt es sich um eine Ansammlung grafischer Definitionen für
Steuerelemente, also Farben, Schriften usw. Das lässt sich ganz leich ausprobieren.
6.2.1. VCL-Stile
Wir erstellen eine neue VCL-Formularanwendung mit einem Fenster und setzen einen Button drauf. Ohne eine Zeile Code starten wir die Anwendung durch Druck auf die Taste F9. Wie erwartet sieht sie so aus:
Dieses Kapitel
widmet sich
der Gestaltung von grafischen Benutzer-
oberflächen.
Grafische Benutzeroberflächen - Oberflächen-Stile www.delphi-treff.de
174
Abbildung 26: Anwendung mit Standard-Stil Windows
Natürlich bewirkt ein Klick auf den Button nichts, aber darauf kam es ja auch nicht an. Schließen wir die A e du g u d öff e die P ojektoptio e Me ü „P ojekt – „Optio e … . I de Bau a si ht auf de
li ke “eite gi t es de Pu kt „A e du g it de U te pu kt „E s hei u gs ild . Hie ist ei e Liste alle vorhandener VCL-Stile zu finden:
Abbildung 27: Projektoptionen mit Stilauswahl
Wähle i u eispiels eise de “til „C a Night aus, kli ke OK u d sta te die Anwendung wieder mit F9. Schon hat sich die Darstellung drastisch geändert:
Grafische Benutzeroberflächen - Oberflächen-Stile www.delphi-treff.de
175
Abbildung 28: Anwendung mit Stil Cyan Night
We die itgeliefe te “tile i ht aus ei he , de fi det i Me ü „Tools de „Bit ap-Stil-Desig e , über den er bestehende Stile verändern oder neue Stile schaffen kann.
6.2.2. FireMonkey-Stile
In FireMonkey funktionieren Stile etwas anders. Grundsätzlich ist der Standard-Stil einer FireMonkey- Applikation abhängig von der gewählten Zielplattform. Das führt dazu, dass eine Windows-Anwendung anders
aussieht als eine Mac OS-Anwendung. Für ein kleines Beispiel legen wir eine neue FireMonkey-Anwendung an DateiNeu, FireMonkey-Desktop-
Anwendung, HD-FireMonkey-Anwendung. Auf das Fenster setzen wir – wie im VCL-Beispiel – einen Button.
Nach Druck auf F9 sieht die Anwendung so aus:
Abbildung 29: FireMonkey-Anwendung mit Standard-Stil
Möchte man nun eigene Stile für Buttons verwenden, so klickt man mit der rechten Maustaste auf die TButton- Ko po e te u d ählt „Be utze defi ie te “til ea eite … . Es öff et si h de “til-Editor.
Grafische Benutzeroberflächen - Oberflächen-Stile www.delphi-treff.de
176
Abbildung 30: Button-Stil bearbeiten
Angenommen, wir wollen die Butto-Beschriftung vergrößern und in der Farbe ändern, so wählen wir in der Strukturansicht layout - button1style1 - text
aus. Im Objektinspektor erscheinen daraufhin die Eigenschaften eines TText. Hier können wir alle Eigenschaften einer Button-Beschriftung ändern, also z.B.
Color und Font. Ü e de Kli k auf „Ü e eh e u d s hließe i d de “til-Editor wieder
geschlossen. Auf unserem Formular können wir nun zwei Änderungen feststellen: 1.
Unser Button hat sich der geänderten Darstellung angepasst. 2.
Auf dem Formular existiert nun eine neue Komponente mit dem Namen StyleBook1 vom Typ TStyleBook. Diese Komponente ist für die Verwaltung der Stile
zuständig. Setzen wir einen zweiten Button auf das Formular, sieht dieser wieder ganz
gewöhnlich aus mit schwarzer Beschriftung. Soll dieser den gleichen Stil verwenden wie unser erster Button, so müssen wir hier nicht erneut alle
Eigenschaften von Hand ändern. Stattdessen werfen wir einen Blick auf die Eigenschaft StyleLookup im Objektinspektor. Hier existiert nämlich eine
Grafische Benutzeroberflächen - Oberflächen-Stile www.delphi-treff.de
177
Auswahlmöglichkeit. An erster Position der Liste befindet sich unser neuer Button-Style. Natürlich ist es auch in FireMonkey möglich, vorgefertigte Stile zu verwenden. Auch hierfür kommt das
StyleBook zum E i satz. I O jekti spekto ietet es die Eige s haft „‘esou e . Ei Kli k da auf wechselt in die
Bearbeiten-Ansicht mit den sieben Buttons am oberen Fensterrand. Ganz links befindet sich der Button „Lade … . Ei Kli k da auf öff et ei e o ale Datei-Öffnen-Dialog. Wir navigieren in das Verzeichnis der
RAD-Studio-Installation z.B. C:\Program Files\Embarcadero\RAD Studio\10.0\ und dann in das Unterverzeichnis Redist\styles\Fmx. Hierin sind einige FireMonkey-Style-Definitionen zu finden. Wir wählen
z.B. de Golde G aphite.“t le aus u d s hließe das “t leBook it „Ü e eh e u d s hließe . Na h ei e
Druck auf F9 sieht unsere Anwendung so aus:
Abbildung 31: FireMonkey-Anwendung mit Stil GoldenGraphite
6.2.3. Metropolis – der Windows 8-Stil
Kategori