[German] 5-Minuten-Snack: Einführung ins Styling der VCL

Es handelt sich um die deutsche Übersetzung eines Artikels (Link). Die Übersetzung erfolgte durch den Autor und nicht maschinell.

Ich habe mich mit einer Funktion der VCL bisher gar nicht beschäftigt: Styling. Ich erstelle in der Regel keine Anwendungungen für einen Industriezweig in dem das grafische Design einer Anwendung eine bedeutende Beachtung finden würde – der Fokus liegt meist auf der einfachen, intiutiven Nutzung.

Das bedeutet meistens: große Schaltflächen und die wichtigsten Informationen zu jedem Zeitpunkt darstellen. Insbesondere der letzte Teil bereitet häufig Kopfschmerzen. Denn — sind wir mal ehrlich — in dem Moment wo wir als Entwickler einen bestimmten Wert ‘immer’ anzeigen, dann möchte der Kunde genau den Wert auch ‘immer’ ändern können…

Ganz nebenbei… es mag länger dauern diesen Artikel zu lesen als 5 Minuten. Allerdings hat der 5-Minuten-Snack sich als ein fester Bestandteil meines Blogs in der Delphi Community etabliert, so dass ich nicht in Abhängigkeit von der Lesedauer die Zahl ändern werde…

Weiterhin handelt es sich beim Styling um die Funktionalität, die an mir vorbei ging ohne, dass ich darauf aufmerksam wurde. Ich habe diese Dinge immer mit FireMonkey in Verbindung gebracht, nicht aber mit der VCL. Insbesondere, das es im Bereich der Drittkomponenten zahlreiche Lösungen dieser Art bereits gibt. Eine dieser Lösungen ist z.B. die TMS Skin Factory (Link).

Trotzdem wurde ich darauf aufmerksam während ich einen Workshop zur Komponentenentwicklung mit Delphi im Mai vorbereitete (Link). Es ist offensichtlich, dass neue Komponenten für die VCL diese Funktionalität unterstützen sollten.

Somit begann ich damit, eine ganz einfache Anwendung zu bauen, die es mir gestattet die verschiedenen Stile eines Formulars durchzublättern und ich dann direkt eine visuelle Einschätzung des jeweiligen Stils habe.  Ich werde diese Demo hier veröffentlichen, damit auch euer Interesse an den Styles geweckt wird und ihr schnellstmöglich loslegen könnt. Vielleicht handelt es sich um einen Bereich, der auch euch noch nicht vertraut ist.

(Ab jetzt werde ich auch einheitlich von “Styles” sprechen und nicht mehr die deutsche Übersetzung verwenden….)

Genug der Vorrede, wir erstellen eine VCL Formularanwendung und fügen dem Formular die folgenden Komponenten hinzu. Die Anordnung sollte in Anlehnung an den Screenshot erfolgen. Anchor können benutzt werden; ich habe darauf verzichtet. Daher habe ich direkt den FormStyle auf einen Typ mit konstanter Fenstergröße geändert.

• TComboBox : ‘cbStyles’ zu nennen – die einzige Komponente, die einen bestimmten Namen erhalten muss.
• TEdit 
• TButton 
• TRadioGroup  mit einigen Einträgen
• TGroupBox  mit zwei TCheckBox 
• TPageControl  mit einigen Registern (TTabSheet)

Um auch zu testen, ob Komponenten von Drittparteien das Styling implementieren können, habe ich noch ein TAdvStringGrid  von TMS Software hinzugefügt.

Mein Demo sieht im Formdesigner wie folgt aus:

Um VCL Styling nutzen zu können, müssen wir die folgende Unit zur uses-Klausel hinzufügen:

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
 //  ...
  Vcl.Themes;

Auch mal etwas Kritisches von meiner Seite: Ich habe keine Ahnungm, warum es keine ordentliche, einheitliche Benennung der Terminologie gibt. Die gesamte IDE verwendet den Terminus ‘style’ und weiterhin ‘custom styles’ (angepasste Stile), aber die Unit benutzt ‘theme’. Sicherlich wurde das bei der Entwicklung übersehen, was sicherlich oftmals zu Verwirrungen führen dürfte. Ich kenne es nur, dass Styles Bestandteil eines Skins oder eines Themes sind. Im Bezug auf die VCL ist es also so, dass die Begriffe Style und Theme synonym verwendet werden.

Wenn wir die Unit unter die Lupe nehmen, finden wir direkt sehr nützliche Informationen zu Beginn der Datei:

type
  TThemedElement = (
    // Windows styles
    teButton,          // +
    teClock,           //
    teComboBox,        // +
    teDatePicker,      // new
    teEdit,            // +
    teExplorerBar,     //
    teFlyOut,          // new
    teHeader,          // +
    teLink,            // new
    teListView,        // +
    teMenu,            // +
    teMenuBand,        // new
    teMonthCal,        // new
    teNavigation,      // new
    tePage,            //
    teProgress,        // +
    teRebar,           // +
    teScrollBar,       // +
    teSpin,            //
    teStartPanel,      // +
    teStatus,          //
    teTab,             // +
    teTaskBand,        //
    teTaskBar,         // +
    teTaskDialog,      // new
    teTextStyle,       // new
    teToolBar,         // +
    teToolTip,         // +
    teTrackBar,        //
    teTrayNotify,      //
    teTreeview,        // +
    teWindow,          // +
    // VCL extensions
    teCategoryButtons,
    teCategoryPanelGroup,
    teCheckListBox,
    teControlBar,
    teDataNavButtons,
    teGrid,
    teHint,
    tePanel,
    teTabSet,
    teTextLabel,
    teMPlayerButtons,
    teToggleSwitch,
    teSearchIndicators
  );

Jetzt wissen wir, welche grafischen Komponenten das Styling unterstützen.

Gerne könnt ihr weitere grafische Komponenten auf eurer Formular des Demos aufnehmen, um zu schauen, wie sie von einem Style beeinflusst werden. Mein Formular enthält nur einige ausgewählte. Die einzige Komponente, auf die es ankommt, ist die ComboBox. Sie wird alle verfügbaren Styles auflisten und die Auswahl ermöglichen.

Weiterhin definiert die Unit auch noch eine Kernklasse des Stylings: TStyleManager.

Wir können sie benutzen, um eine Liste aller für die Anwendung verfügbaren Styles abzufragen. Zudem können wir den gewünschten Stil für die Anwendung bestimmen.

Müssen wir eine Instanz von TStyleManager ableiten? Nein. Alle Methoden sind als Klassenmethoden definiert.

Somit können wir den nachfolgenden Code im FormCreate -Ereignis verwenden, um die ComboBox mit den Namen der verfügbaren Styles zu befüllen:

procedure TForm1.FormCreate(Sender: TObject);
var
  style: string;
begin
  // alle Namen zur ComboBox hinzufügen
  for style in TStyleManager.StyleNames do
  begin
    cbStyles.AddItem(style, nil);
  end;

  // die Auswahl auf den aktuellen Style setzen
  cbStyles.ItemIndex := cbStyles.Items.IndexOf( TStyleManager.ActiveStyle.Name );
end;

Es ist anzumerken, dass wir die verschiedenen Namen der Styles per for-in-Schleife sehr komfortabel iterieren können. Zudem setzen wir den aktuellen Eintrag der ComboBox auf den Namen des zur Zeit aktiven Styles der Anwendung. Diese Information können wir ebenfalls über  TStyleManager abfragen.

Die ComboBox wird nun mit allen Namen befüllt werden. Zumindest gehen wir davon aus… Leider ist das nicht der Fall. Es wird nur ein Style gelistet mit dem Namen ‘Windows’.

Delphi erwartet, dass wir noch eine Sache mehr erledigen. Wir müssen der IDE mitteilen, welche Styles in unsere Anwendung einzubinden sind. Daher, wenn wir uns die Projektooptionen (Projekt/Optionen…) im Abschnitt “Anwendung/Aussehen” anschauen, können wir direkt erkennen, dass kein Style ausgewählt wurde:

Jetzt sind wir ein wenig verrückt und wählen alle aus! 🙂

Den Standard (d.h. zum Start der Anwendung) setze ich auf ‘Windows 10’.

Und… die Anwendung ist gestyled. Wir sehen nun auch die Liste aller markierten Styles in der ComboBox. Trotzdem können wir weiterhin den aktuellen Style nicht verändern. Das werden wir durch Implementierung eines Ereignisses bei Änderung der Auswahl der ComboBox erledigen (OnChange -Ereignis):

procedure TForm1.cbStylesChange(Sender: TObject);
begin
  TStyleManager.SetStyle( cbStyles.Items[ cbStyles.ItemIndex ] );
end;

Wir können die Methode SetStyle von TStyleManager verwenden, indem wir den Namen des zu verwendenden Styles übergeben. Es handelt sich tatsächlich nur um einen String, d.h. jeder Style ist eindeutig durch einen String bestimmt, der z.B. auch sehr einfach in den Anwendungseinstellungen abgelegt werden kann.

Nun verändert das Formular direkt sein Aussehen, wenn wir die Auswahl in der ComboBox ändern:

Der Screenshot oben zeigt den Style namens ‘Lavender Classico’. 

Es ist anzumerken, dass auch die Komponente der Drittpartei wunderbar gestyled wird.

Um ehrlich zu sein war ich sehr überrascht, wie viel einfacher als erwartet die Verwendung von Styles mit TStyleManager  ist. Die IDE ermöglicht komfortabel die Auswahl der bereitzustellenden Styles. Bestehende Anwendungen, die hauptsächlich Standardkomponenten verwenden oder mit Drittparteikomponeten, die die neue Technologie unterstützen, können mit nur wenigen Zeilen Code migriert werden. Die Anwendungseinstellungen mit dem ausgewählten Style zu erweitern ist ebenfalls sehr einfach, da es sich nur um einen einzigen String handelt, der gespeichert werden muss.