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:

02

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

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:

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:

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

def01

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:

def02

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

01

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

stwindows10

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):

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:

stlavender

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.

Posted in Delphi Tagged with: , , , ,

Delphi 10.2 Tokyo Beta: Daten in einem TFDMemTable zur Laufzeit bearbeiten

Es handelt sich um eine Übersetzung durch den Autor des englischen Posts (Link) und keine maschinelle Übersetzung.

database-155892_640Ich habe heute die Erlaubnis erhalten über die Beta von Delphi 10.2 Tokyo zu bloggen.

Sicherlich habt ihr bereits viele Dinge zur Unterstützung von Linux und anderen Verbesserungen im Rahmen des Compilers gelesen. Als ein Entwickler von zahlreichen Datenbankanwendungen, finde ich die folgende Neuerung großartig:

 

 

FDMemTable  unterstützt nun das Editieren von Tabellen zur Entwicklungszeit. Die Daten werden zusammen mit dem Formular gespeichert und sind auch zur Laufzeit verfügbar.

Das eröffnet uns einige neue Möglichkeiten mit FDMemTable . In diesem Beispiel werde ich zeigen, wie man eine Tabelle mit Feldern definiert und dann zur Entwicklungszeit bereits mit Werten füllt. Natürlich könnten wir auch direkt XML oder eine binäre Datei laden. Weiterhin ist es sogar möglich bereits zur Entwicklungszeit Daten aus einer FDQuery  in den FDMemTable  einzufügen, um so auf eine gewisse Menge an Vorgabewerten zugreifen zu können, wenn noch keine Datenbankverbindung etabliert wurde. Dazu ist FDMemTable  in der Lage seine Daten auch für andere Komponenten für verschiedenste Szenarien während der Entwicklung bereitzustellen. FDMemTable  ist wesentlich flexibler und komplex als TFDTable . TFDMemTable  ist wohl eher mit der Komponente TClientDataset  gleichzusetzen.

Um die Funktionalität zu zeigen, habe ich die folgenden Schritte durchgeführt:

  1. Eine neue “VCL Forms Application” (VCL Formularanwendung) erstellt
  2. Einen TFDMemTable  auf das Formular gezogen.
  3. Das Kontextmenü von TFDMemTable  mit Rechtsklick geöffnet.

Jetzt kann man die neue Funktionalität erkennen. Jedoch können wir noch keine Daten erfassen, da wir keine Felddefinition festgelegt haben.

fd01

Aus diesem Grund öffnen wir zunächst den Feldeditor und fügen neue Felder hinzu. Zum Beispiel: Name, Street, City, Zip und State:

fd02

Da es keine Änderungen in Tokyo bei der Erstellung von Feldern  gibt, habe ich keinen Screenshot erstellt.

Abschließend nutzen wir die neue Funktion, indem wir auf  “Edit DataSet …” klicken:

fd03

Das Fenster zeigt einen Datenbanknavigator und ein Datengrid. Beide Komponenten erlauben es uns, Daten sehr einfach einzugeben, zu bearbeiten und zu löschen. Es gibt sogar eine “Clear” Schaltfläche, um alle Daten zu löschen. Die Schaltfläche mag überflüssig erscheinen, aber da man sehr große Datenmengen aus einer Datei laden kann, kann man gleichermaßen auf diesem Weg alle Daten ruckzuck löschen. Um Daten zu laden oder zu speichern müssen wir das Kontextmenü benutzen. Die Funktionalität ist in dem neuen Fenster nicht zu finden.

 

Mit Delphi 10.2 Tokyo können wir somit Daten für unsere TFDMemTables  bereits zum Zeitpunkt der Entwicklung bereitstellen. Die neue Funktionalität verbessert nicht nur die Gestaltungsmöglichkeiten während der Entwicklung, sondern gestattet es uns auch Daten für die Laufzeit bereitzustellen und vorzubvereiten.

 

Posted in Delphi Tagged with: , , , ,

5-Minute-Snack: Introduction to VCL Styling

One of the features I had not touched is VCL Styling. I do not create applications for an industry where graphic design of your applications is key – usability is key. That mostly means: big buttons and the most important information visible at all times. Especially the last part is something you have to get used to. Because – let’s be honest – if you show a certain value ‘all the time’ the customer wants to be able to make changes ‘all the time’ as well…

As an aside, you might need more like 20 minutes to read this, but the 5-Minute-Snack has become somewhat of a moniker associated with my blog in the Delphi Community, so I do not want to change the number …

It has been one of the features that flew by me without it actually noticing. I always associated it with FireMonkey and not the VCL. Especially, as Third-party components deliver on styles and themes already. One of these examples is the TMS Skin Factory (link).

Still, I got curious as I am also preparing for the workshop on component development in May (link). Obviously, new components need to support VCL styling.

So I started off by creating a very simple application that would allow me to switch styles and the form would immediately display that style. I want to share this demo with you so that you can get a hold of styles with VCL as well — may be it is an area you have not touched yourself either.

That being said, let’s create a VCL Forms Application and drop the following components, aligning them as seen in the screenshot. Use Anchors if you want, I did not. If even changed the FormStyle to something that is not resizable:

  • TComboBox : name it ‘cbStyles’ – the only mandatory component on the form. Set the st
  • TEdit 
  • TButton 
  • TRadioGroup  with a few items
  • TGroupBox  with two TCheckBox 
  • TPageControl  with a few tabs ( TTabSheet )

As a test-case that styling is also possible for third party controls, I did add a TAdvStringGrid  from TMS Software.

My demo application looks like this in the Delphi form designer:

02

In order to use VCL syling, we need to add the following unit to the uses-clause. 

Something critical for a change: I have no idea why there is no proper unified terminology. The whole IDE uses the term ‘style’ and ‘custom styles’, but the unit uses the term ‘theme’. Definitely an oversight that might confuse people at first as in some component sets a style is part of a theme or a skin. For VCL applications the term style seems to be used as well as theme for the same thing.

Browsing into that unit gives us some very useful information right at the top:

So we do know which controls support styles. 

So you can add more controls to your form if you want to see how they are affected by the different styles. My form just shows a select few. The only key control is the combo box as that will list all the available styles and allow to switch the style.

This unit also defines a key class when working with styles: TStyleManager .

We can use it to get a list of all the styles that are available in the application and set the style to be used.

Do we need to use an object derived from TStyleManager ? No. All methods are defined as class methods.

So, in order to fill the ComboBox with values we use the following code in the FormCreate -event:

Take note that we can iterate over the style names using a for-in-loop. Furthermore, we also set the current item to the name of the current style that can also be queried using the TStyleManager  class.

The combobox will now be filled with the names of all the style. At least that is what one could think… Sadly, that is not the case. There is only one style in the list called ‘Windows’.

def01

Delphi expects us to do one more thing. We need to tell the IDE which styles to add to our application. Thus, looking at the Project Options (Menu Project / Options…) under the section Application / Appearance we can clearly see that none of the custom styles are checked.

def02

Let’s be crazy and check all of them! 🙂

01

I also set the default style to ‘Windows 10’.

stwindows10

And … the app is styled. We also see the list of all the checked styles in the ComboBox. However, changing the selection does not do anything right now. We will fix that with the following event handler for the OnChange -event of the ComboBox:

We can use the SetStyle  method of TStyleManager  and provide the name of the style to be used. This is actually just a string, i.e. every style is uniquely identified by a string that can be persisted in the application settings, for example.

Now, when we change the style, the form immediately changes its appearance:

stlavender

The screenshot above shows the style called ‘Lavender Classico’. 

Also note that the third-party control is nicely styled as well. 

I have to be honest that the usage of styles with TStyleManager  is much easier than I anticipated. Using the IDE Project Options to determine which styles are to be included is very comfortable as well. Extending your existing apps that use standard components or third-party controls that have been built with styling in mind is very easy to achieve as only a few lines of code need to be added. Persistence of the currently selected style is also very easy as we just need to remember a single string that needs to be reset when the application is restarted.

Posted in Delphi Tagged with: , , ,

Delphi Code Camp, Frankfurt with Stefan Glienke, Bernd Ua …

well, and me. 🙂

(German language version below)

codecamp
The three day event consists of 3 separate workshops on 3 days and is scheduled for May 31st until June 2nd, 2017 (official link). 

We will start at 9 am and end at 5 pm. The language will be German. The following topics are planned:

May 31st Stefan Glienke Spring4D ORM
June 1st Bernd Ua REST APIs
June 2nd Bernd Ua, Holger Flick Component Development

All workshops will focus on delivering usable examples that can be transferred to your own projects. Best of all: On the first and second evening there will be snacks and free beer… basically, the best kind of networking with other professionals.

A quick word about the speakers:

  • Stefan Glienke is the mastermind behind Spring4D so his talk will give you some serious insights into Spring4D.
  • Bernd Ua has been presenting Delphi topics from the start. He has taught hundreds of developers since then. He is the author of many Delphi articles and a regular speaker on Delphi events world-wide.

I will post the agenda of our workshop within the next days.

We’re happy to meet you there!


 

Es werden 3 unabhängige Workshops an  3 Tagen (31.05.2017 bis 02.06.2017, Bristol Hotel Frankfurt am Main) angeboten (Link). 

Wir starten jeweils um 9 Uhr. Geplantes Ende ist jeweils 17 Uhr.

Geplant sind die folgenden Themen:

31.05. Stefan Glienke Spring4D ORM
01.06. Bernd Ua REST APIs
02.06. Bernd Ua, Holger Flick Komponentenentwicklung

All Workshops sind darauf ausgerichtet Praxiswissen zu vermitteln, das einfach auf eigene Projekte angeweendet werden kann. Nicht zu vergessen: Am ersten und zweiten Abend wird es Snacks und Freibier geben… so ziemlich der beste Weg andere Entwickler kennenzulernen und sich mit ihnen auszutauschen.

Ein paar kurze Worte zu den Vortragenden:

  • Stefan Glienke ist der Kopf hinter Spring4D.  In seinen Vorträgen zu Spring4D wird erGrundlagen als auch zahlreiches Insiderwissen vermittelt.
  • Bernd Ua präsentiert Delphi seit dem es Delphi gibt. Seit dem hat er hunderte von Entwicklern geschult. Er ist der Autor von zahlreichen Artikeln zum Thema Delphi und gibt sein Wissen regelmäßig als Vortragender auf Delphi Veranstaltungen auf der gesamten Welt weiter.

In den nächsten Tagen werde ich die Agenda von unserem Vortrag im Detail vorstellen.

Wir freuen uns auf eure Teilnahme!

Posted in Delphi Tagged with: , , , , ,