Grafische Benutzeroberfläche – General User Interface kurz GUI

Jeder kennt sie die modernen Benutzeroberflächen der Software des alltäglichen Bedarfs, wie das E-Mail-Programm Thunderbird Mail oder dazu die passenden Produkte von Microsoft Outlook.  In diesen Programmen wird der Standard Header des Form1 geändert. Es befinden sich im Programm Kopf mehr Buttons, eine Suche, das Nutzerprofil, eine Hintergrundgrafik und die Caption in der Mitte. Dieser ist dazu auch noch wählbar in verschiedenen Designs wie Hell, dunkel, Modus des Betriebssystems verfügbar. Ab Windows 11 hat Windows sogar runde Ecken mit diesem Header.

Die Lazarus-IDE bietet hier nur sehr wenig Möglichkeiten dies im Standard Form1 anzupassen. Selbst ein Dunkelmodus gibt es nicht.

Ich berate und schule euch gerne. Meine Erfahrung im Bereich Lazarus und Freepascal geht auf jahrelange Softwareentwicklung zurück. Von eigener Anwendungssoftware über Hilfssoftware und Individuallösungen. Für Schulungen nutzte ich eigene Unterlagen und meine Homepage FreepascalDE.

Auftragsarbeiten für Firmen kann ich in kleineren Umfang durchführen. Sprechen Sie mich noch heute an und wir finden eine Lösung.

Alle Beratungen, Schulungen und Auftragsarbeiten werden über meine Firma Andre Winkelmann (Einzelunternehmer) durchgeführt. Die Webseite von Winkelmann.Software findet ihr hier.

Bitte denkt daran ausreichend Zeit einzuplanen. Am Abend vor einer Klassenarbeit ist nicht der richtige Zeitpunkt mit dem lernen anzufangen.

Hinweise 10% der Einnahmen gehen bei einer Kontaktaufnahme über eines der Kontaktformulare von FreepascalDE auch an FreepascalDE.

70 Euro pro Stunde Netto / 83,30 Euro pro Stunde Brutto

Kontaktdaten:

Telefon: 0 20 43 – 20 58 95

Kontaktformular:

Allgemeines und ein wenig Theorie zur TImageList

Die Komponente TImageList ist für das speichern und ablegen von Bildern dar. Die Komponente erstellt einem Index für die Bilder. Der Index kann durch einen Doppelklick auf die Komponente per Drag and Drop verwaltet werden siehe Abbildung 1.00 von TImageList.

Abb. 1.01 Bildeditor leer

Um Bilder und Grafiken zur TImageList hinzuzufügen können wir nun auf den Button hinzufügen klicken und Bilder, Icons oder andere Grafiken auswählen. In meinem Beispiel werde ich Icons auswählen und diese in einem TMainMenü verwenden. Ihr bekommt kostenlose Icons unter Flaticon.com. Ich habe dazu bereits einen Artikel geschrieben. Kostenpflichtige Icons gibt auf Stockfotoseiten wie fotolia.com und stockfoto.com für die kommerzielle Nutzung und bereits in verschiedenen schönen Farben.

Abb. 1.02 Icons

Ich habe mir die folgenden drei Icons kostenlos in der Größe von 16×16 Pixel heruntergeladen siehe Abbildung 1.01. Mit einem Klick im Bildeditor auf Hinzufügen können wir die zu unserer TImage List hinzufügen.

Abb. 1.03 Bild Editor mit Icon

In Abbildung 1.02 sehen wir nun den Bildeditor mit den hinzugefügten Bildern. Das Pluszeichen hat den Index 0 erhalten, der geöffnete Ordner hat den Index 1 erhalten und der Pfeil nach rechts hat den Index 2 erhalten. Wie bereits erwähnt möchte ich die Icons im Beispiel gleich in einem TMainMenu verwenden und dafür möchte ich den Index ändern. Der geöffnete Ordner soll den Index 0 erhalten, der Pfeil den Index 1 und das Pluszeichen den Index 2. Mit den Buttons >>Nach oben bewegen<< und >>nach unten bewegen<< kannst du die Icons neu positionieren siehe Abbildung 1.03 Bildeditor mit sortieren Icons.

Mit den anderen Buttons replace.. können wir die vorhandenen Icons ersetzen. Mit löschen können wir Einzeleinträge löschen. Mit leeren können wir die gesamte Liste löschen. Mit den Buttons sichern und alles sichern können wir die Einstellungen speichern.
Man kann bei der TMainMenü Komponente auch einzelne Icons hinzufügen, genau wie bei einem BitBtn einem Button mit Bild. Wieso solltest du also eine TImageList nutzen? Es ist eigentlich ganz einfach den sind die Indexierungen einmal festgelegt in den Komponenten, kann die GUI schnell modernisiert werden ohne jede Komponente neu anzufassen zu müssen. Du kannst dir sicher vorstellen das bei einem großen Programm, das auswechseln aller Icons von Hand sehr viel Arbeit in Anspruch nimmt. Hast du z.B. verschiedene Buttons mit jetzt speichern, kannst du hier eine TImageList nehmen und immer auf den selben IconIndex verweisen. Das Design ändern sich schnell für Software Programme. Früher waren 3D Icons mit Farbverläufen modern. Heute sind es Flat Icons, die nur in 2D dargestellt sind. Ihr müsstet für euer Programm bei der Nutzung einer TImageList also nur ein modernes Icon Set kaufen, es nach eurer Liste sortieren und die Designanpassung eurer Software wäre fertig.

Gut, kommen wir zu einem kleinen Beispiel:

Abb. 1.04 TImageList im Einsatz

Zieht in eurem TForm ein TMainMenu hinein und erstellt ein Menü mit der Struktur:
Datei

• Öffnen (geöffneter Ordner, ImageIndex 0)
• Neu (Pluszeichen, ImageIndex 2)
• Info (Pfeil rechts, ImageIndex 1)

Wie du ein TMainMenu erstellt erfährst in der Lazarus und Free Pascal Komponenten Bibliothek unter TMainMenu.
Gehe nun in den Objektinspektor und wähle in der Hauptkomponente und in allen MenuItems des TMainMenu unter der Eigenschaft SubMenuImages die erstellte ImageList1 aus. Du kannst für jeden Eintrag eine TImageList auswählen, wenn du das möchtest. Dies ist allerdings nicht sinnvoll. Man sollte pro Komponentenart maximal eine TImageList haben. Ich meine also für alle TBitBtn, für alle TTreeView, für alle TMainMenu’s usw. Jetzt kannst du bei jedem Eintrag im Objektinspektor unter Eigenschaften den ImageIndex auswählen. Aktuell stehen diese auf -1 um kein Image anzuzeigen. Nach dem zuweisen der Icons sollte dein TForm1 wie in Abbildung 1.03 aussehen.

Für dich zum herunterladen:

software-timagelist (650kb)

Abb. 1.01 TPageControl Seite01 und Seite02

Die nächste Komponente die ich dir vorstellen möchte ist die Komponente TPageControl. Die Komponente findest du in der Lazarus-IDE im Hauptmenü unter dem Reiter CommonControls. Die Komponente ist die sechste von rechts. Klick die TPageControl Komponente an und füge sie in dein neues Programm in das Form1 ein. Du erhältst ein weises Viereck mit einer hellgrauen Umrandung. Klicke das Viereck mit einem Rechtsklick an und gehe auf Seite hinzufügen. Wiederhole dies ein weiteres Mal und benennen die beiden Seiten über den Objektinspektor in Seite01 und Seite 02 um. Ich habe jetzt einfach unterschiedliche Komponenten in die beiden Seiten eingefügt. In Abbildung 1.00 kannst du die von mir erstellen Seiten: Seite 01 und Seite 02 ansehen. Die Komponente bietet dir die Möglichkeit mehrere Seiten für dein Programm zu erstellen.

Update:

Auf die einzelnen Seiten Eigenschaften wie die Caption kann man wie folgt zugreifen.

PageControl1.Pages[0].caption := 'Neuer Name'; // Seite 01
TabSheet1.caption := 'Neuer Name'; // Seite 01

Pages[0] ist ein Array diese fängt immer bei Null an. Seite 01 ist Also Pages[0] Seite 02 ist Pages[1].

Einleitung

Um in einem Projekt eine Menüleiste wie bei z.B. LibreOffice Writer einfügen zu können kann man eine Toolbar einsetzen. Diese ist vom Typ TToolBar. In LibreOffice Writer sind die einzelnen Programm Funktionen in kleinen Bildern dargestellt die eine TToolBar nutzen um diese anzuzeigen. Als Beispiel siehst du hier die TToolBar des LibreOffice Writer.

Abb. 1.01Beispiel ToolBar LibreOffice Writer

Das Tutorial als Video

Teil 01: Verhalten der TToolBar

Die TToolBar befindet sich bei Lazarus unter Common Controls und ist das 6te Icon von links. Klickt man das Icon an und dann in ein TForm wird die TToolBar immer ganz oben und über die komplette Breite platziert.

Abb. 1.02 TToolBar im oberen Bereich des Form1

Die kann gewünscht sein um, die Toolbar zu palzieren können wir diese auch in einem TPanel laden. Auch im TPanel wird die TToolBar über die gesamte Breite dargestellt. Der TPanel kann danach nur noch sehr schwer per Mausklick bewegt werden. Über den Objektinspektor lässt er sich allerdings noch spazieren. Nachfolgend siehst du ein Bild indem die Beispiel Software mit einer TToolBar umgesetzt wurde.

Abb. 1.03 TToolBar Software

Teil 02: Buttons anlegen

Im Objektinspektor können wir durch einen Rechtsklick auf die Komponente TToolBar Buttons anlegen.

Abb. 1.04 Neuen Button anlegen

Zusätzlich können hier CheckButton und neue Trennlinien, sowie neue Teile angelegt werden. Beim anlegen kann man die Buttons leider kaum erkennen da diese keine Icons haben.

Teil 03: Button mit Icon anlegen

Um bei einem Button ein Icon zu hinterlegen benötigen wir eine TImageList. In dieser Können wir in einer Liste verschiedene Icon Laden und der Komponente TToolBar im Objektinspektor unter Images die neu erstellte ImageList1 vom Typ TImageList hinzufügen. Bei den einzelnen Buttons im Objektinspektor können wir nun unter ImageIndex den Index des Bildes auswählen und hinterlegen. Die Image Liste fängt immer bei 0 an. Um in den Bildlisteneditor zu kommen klick ihr auf die Komponente TImageList mit einem Rechtsklick und wählt dann ImageList Editor… aus.

Abb. 1.05 Bildlisteneditor / ImageList Editor…

Die Bedienung des Editors ist selbstbeschreibend. Schöne Icons bekommt ihr z.B. unter Remixicon. Diese verwende ich hier in einer Größe von 16 Pixel * 16 Pixel. Dafür müsst Ihr diese in einem Bildbearbeitungsprogramm anpassen.

Teil 04: Button Funktion

Der einzelne Button hat im Objektinspektor dieselben Eigenschaften wie ein normaler TButton und können z.B. mit einem OnClick Ereignis ausgestattet werden. In unserem Beispiel habe ich den ersten Button mit einem OnClick Ereignis ausgestattet und ein TLabel in unserer Beispiel Software hinzugefügt. Durch den Klick auf den Button ändere Ich die Caption des TLabels von Label1 nach Hallo Welt. Nachfolgend der Quellcode.

procedure TForm1.ToolButton1Click(Sender: TObject);
begin
Label1.caption := 'Hallo Welt';
end;

Teil 05: Software Download

Nachfolgend könnt ihr die Software ohne ausführende EXE-Datei herunterladen. Die Software wurde mit Lazarus v 2.0.12 erstellt und sollte unter Windows und Linux ausführbar sein.

Der Software Download ist 190kb groß und ist mit der Software 7Zip komprimiert.

Download Link (190kb): TToolBar Beispiel Software