Freepascal.de geht offline am 9.2.2025

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

TListView Beispiel Software

TListView Allgemeines

Die TListView Komponente findest du unter Common Controls und es ist die vierte Komponente von Links. Wenn du die Komponente in das Form1 ziehst wird diese mit dem Namen ListView1 angelegt. Wir erstellen in diesem Artikel ein kleines Beispiel Programm. Lade dir das kleine Beispiel Programm herunter [Download Link]. Damit kannst du die Erklärungen besser nachvollziehen.

(mehr …)

Abb. 1.01 Software TProcessBar

Jeder kennt eine Processbar wie bei einer Installation vom Windows Betriebssystem Software wie z.B. Firefox. Wenn Ihr wissen wollt, wie diese Komponente von der Lazarus IDE funktioniert, bist du hier genau richtig!

Für die Komponente benötigst du einen Timer vom Typ TTimer, diesen findest du unter dem Reiter System->TTimer. Die Komponente Typ TProcessBar findest du unter Common Controls. Der Timer zählt bei unserer Variante von 0 auf 100 hoch und das in verschiedenen Schritten, die du selber wählen kann. Dies ist natürlich nur ein Hilfsmittel, stellt euch vor ihr könnt auch einen Datentransfer mit der TProcessBar darstellen. So z.B. 36MB von 200MB = 18% Fortschritt.

Abb. 1.02 Software Quellcode

Gut fangen wir an! Die Komponente TTimer trägt den Namen Timer1 und die Komponente TProcessBar trägt den Namen PBLadestatus. Dazu kommen drei TLabel, das erste hat den Namen  Label1 und das zweite LblLadestatus das dritte Label3 und die Caption %. In dem Quellcode ab Zeile 39 findest du die dazugehörige Procedure, diese ist Teil des Timers. Als Eigenschaft hat der Timer einen Intervall von 500 (Millisekunden = 0,5 Sekunden). Die Eigenschaft Enabled ist auf True gesetzt. Für die Procedure nehmt ihr das Ereignis OnTimer und klickt auf den Button mit den drei Punkten. Das Grundgerüst der Procedure im Bild ab Zeile 39 wird eingefügt. Ab Zeile 40 wird diese durch das begin eingeleitet. In Zeile 30 leite ich mit einer If Abfrage die Frage ein: „Wenn PBLadestatus und die Eigenschaft Position kleiner gleich 100 ist dann: (Zeile41) Erhöhe die Eigenschaft Position von der ProcessBar PBLadestatus um 20 (Zeile 43) und Wandel den neuen Wert von PBLadestatus.position in einen String um und zeige diesen im LBLLadestatus.caption an (Zeile44)!“ Weiterhin frage ich damit die zweite if Abfrage ein: „Wenn PBLadestatus.position >= 100 ist dann (Zeile 46) beende den Timer1, indem die Eigenschaft Timer1.enabled auf false gesetzt wird!“

Das wars auch schon, anbei erhaltet ihr noch ein Link zum YouTube Video von mir zum Thema und am Ende den Quellcode zu der kleinen Software.

Link YouTube Video: Video TProcessBar

Link Software awpbar.exe als 7Zip Datei Download: software-awbar

Vielen Dank für deine Zeit

Lazarus IDE GUI Aufbau.

Abb 1.01 Bild vom Image-List Editor

In der Abbildung 1.00 siehst du das kleine Programm was ich mit dir heute erstellen möchte. Als erstes öffnest du in Lazarus eine neue Anwendung und fügst zu deinem Programm die Komponente TTreeView hinzu. Diese findest du bei den Komponenten unter dem Reiter Common Controls<< und es ist die dritte Komponente von links. Ich habe den Namen der TreeView auf TVDatenbanken geändert.
Für die Beschriftung der Komponenten setzt du die Komponente vom Typ TLabel ein. Das Editfeld trägt den Namen: EdtEintragTxt und hat in der Eigenschaft Text keinen Inhalt. Die beiden Buttons tragen den Namen BtnAddChildNote und die Eigenschaft Caption >>Kind Knoten hinzufügen<< und beim zweiten Button lautet der Name BtnDeleteNode und die Eigenschaft Caption >>Knoten löschen. Für die Plus und Minus Icons benötigen wir für die TTreeView noch eine TImageList diese trägt den Namen ImageList1 und wird in den Eigenschaften der TreeView unter Images angegeben.

TListView Einstellungen

Abb 1.02 TTreeView Editor Einstellungen

Wenn du nun die ImageList1 mit einem Rechtsklick anklickst kommst du auf ein Untermenü in dem ganz oben der ImageList-Editor steht. Hier kannst du deine Icons hinzufügen. Die Zahl hinter dem Icon steht für den ImageIndex. Über den ImageIndex kannst du für die TreeView Einträge die Bilder auswählen (siehe Abb 1.02). Die beiden Icons füge ich dem Download Ordner am Ende des Artikels bei.

TTreeView Einstellungen

Abb 1.03 TTreeView Editor Einstellungen

Klickst du mit einem Rechtsklick auf die Komponente TTreeView öffnet sich der Editor für TreeView-Einträge (Abb 1.02) Hier kannst du die linksstehenden Einträge anlegen. Mit einem neuen Eintrag legst du eine Root Node (Wurzelkonten) an. Dieser ist der Startpunkt deines Baumes. Alle anderen Knoten sind Child Nodes (Kind Knoten). Klickst einen der Knoten an kannst du hier einen Bildindex angeben. Der Bildindex 0 ist das Minuszeichen und der Bildindex 1 ist das Pluszeichen.

Child Node hinzufügen Button Quellcode

Um den Button mit einer Funktion auszustatten klickst du den Button an und gehst im Obejektinspektor auf den Reiter Ereignisse und klickst dann OnClick an und klickst ein weiteres mal auf den Button mit den drei Punkten. Es öffnet sich nun der Quelltexteditor und du gibt für den Button die in Abb. 1.03 stehende Prozedure ein.

procedure TForm1.BtnAddChildNoteClick(Sender: TObject);
var
Kindknoten: TTreeNode;
begin
Kindknoten := TVDatenbanken.Selected;
if Assigned(Kindknoten) then
Begin
Kindknoten := TVDatenbanken.Items.AddChild(Nil, EdtEintragTxt.Text);
Kindknoten.ImageIndex:=0; // 0 ist das Minuszeichen
end;
end;

In Zeile 01 steht der Name der Prozedure dieser wird durch den Klick (s.o.) zusammen mit dem Begin in Zeile 4 und dem end in Zeile 11 automatisch angelegt. In Zeile zwei leitest du mit var die Variablendeklaration für die Prozedure ein. In Zeile 03 legst du die Variable vom Objekttyp TTreeNode mit dem Namen Kindknoten fest. In Zeile 05 weist du der Variable Kindknoten die TreeView (TVDatenbanken, TV = TreeView) zu und wählst, die mit der Maus ausgewählte Node aus. In Zeile 06 prüfst du mit einer IF Else Schleife ob die TreeView Kindknoten einer ausgewählten Node zugewiesen wurde. In Zeile 07 öffnest du mit dem Begin die Schleife und schließen diese wieder in Zeile 10. In Zeile 08 weist du unserem Objekt Kindnoten ein neue ChildNode hinzu. Hierbei wird durch die Verbindung mit einem Punkt auf die Items zugegriffen und ein Item mit der Funktion ADDChild() hinzugefügt. In der Funktion AddChild() greift Nil wieder auf das Objekt zu Kindknoten zu und setzt den Text des Edit Feldes EdtEintragTxt.Text als Text des Kindknoten.

Quellcode und Prozedure des Buttons BtnDeleteNode

procedure TForm1.BtnDeleteNodeClick(Sender: TObject);
begin
TVDatenbanken.Selected.Delete;
end;

Auch hier wird die Zeile 01, 02 und 04 automatisch angelegt, wenn du das Ereignis im Objektinspektor durch einen Klick auf den Button mit der Caption Konten löschen ausführst.
Zeile 03 zeigt das auf die TreeView TVDatenbanken und das mit der vom Nutzer ausgewählten Eintrag auswählen und mit der Funktion Delete löschen wir den Eintrag dann.

Bonusmaterial

TTreeView während der Laufzeit mit Einträgen füllen.

procedure TForm1.FormShow(Sender: TObject);
var
myNode0: TTreeNode;
myNode1: TTreeNode;
myNode2: TTreeNode;
myNode3: TTreeNode;
begin
myNode0 := TVDatenbanken.Items.Add(nil, 'LazMyAdminDB');
myNode0.ImageIndex:=1;
myNode0.SelectedIndex := 0;
myNode1 := TVDatenbanken.Items.AddChild(myNode0, 'Table');
myNode1.ImageIndex:=0;
myNode1.SelectedIndex := 1;
myNode2 := TVDatenbanken.Items.Add(nil, 'LazSysDokuDB');
myNode2.ImageIndex:=1;
myNode2.SelectedIndex := 2;
myNode3 := TVDatenbanken.Items.AddChild(myNode2, 'Table (18)');
myNode3.ImageIndex:=0;
myNode3.SelectedIndex := 3;
end;

In meinem Beispiel lade ich den Namen einer Datenbank und lasse mir einen Verweis auf die Tabellen ausgeben. Um dies bei unterschiedlichen Datenbanken durchführen zu können kann man die Einträge nicht vorher erstellen, sondern Sie müssen zur Laufzeit durch eine Datenbank Abfrage erstellt werden.
In Zeile 01 steht der Name der Prozedure diese wird durch das begin in Zeile 07 eingeleitet und in Zeile 22 beendet. In Zeile 02 beginn die Variablen Deklaration. Wir legen hier 4 Variablen vom Objekt Typ TTreeNode mit dem Namen myNode0 bis myNode3 fest. In Zeile 08 erstellst du einen Wurzelkonten und setzen in Zeile 09 den ImageIndex (Bildindex) auf 1 (Pluszeichen) und in Zeile 10 den SelectedIndex (Ausgewählter Index) auf 1.
Für den ersten Child Note (Kindknoten) wiederholst du das. Es ändert sich nur die Funktion und der Verweis auf die Node myNode0.
Diese führst du mit fortlaufender Nummerierung ein zweites Mal durch. Dies ist hauptsächlich der Fall, weil wir jedem Knoten weitere Informationen wie dem ImageIndex hinzufügen möchten. Ohne ItemIndex kannst du denselben Aufbau auch mit nur einer Node aufbauen.

Abb 1.04 Erweitertes Programm

Du fügst zum Löschen des TreeView Inhaltes einen weiteren Button hinzu dieser Trägt den Namen BtnTreeViewClear und die Caption TreeView Inhalte löschen. Danach fügst du ein OnClick Ereignis hinzu und fügst den Quellcode: TVDatenbanken.Items.Clear; hinzu. Diesen Befehl schreibst du zwischen dem begin und dem end der Funktion. Dieser greift beim Ausführen auf die Items der TreeView zu und löscht alle Inhalte.
Der zweite Button trägt den Namen BtnAddContent und die Caption Inhalte hinzufügen. Erstelle auch hier ein OnClick Ereignise und programmiere die folgende Prozedure für den Button.

procedure TForm1.BtnAddContentClick(Sender: TObject);
var
myNode0: TTreeNode;
begin
myNode0 := TVDatenbanken.Items.Add(nil, 'Datenbanken');
TVDatenbanken.Items.AddChild( TVDatenbanken.items[0], 'LazMyAdmin');
TVDatenbanken.Items.AddChild( TVDatenbanken.items[1], 'Table');
TVDatenbanken.Items.AddChild( TVDatenbanken.items[0], 'lazMyDoku');
TVDatenbanken.Items.AddChild( TVDatenbanken.items[3], 'Table (18)');
end;

Abb. 1.05 TreeView sortiert ohne Images

In der Zeile 1 leitest du mit der Bezeichnung Prozedure die Prozedure ein und danach folgt das Form auf dem diese ausgeführt werden soll TForm1 dann der Name des Buttons BtnAddContentClick(). In Zeile 2 leitest du die Variablendeklaration ein, in Zeile 4 beginnt die Funktion und in Zeile 10 wird dieser wieder geschlossen. In Zeile 3 legst du eine Variable mit dem Namen myNode0 vom Objekttyp TTreeNode an.
In Zeile 5 weitest du deine Variable die TTreeView TVDatenbanken zu und fügen ein neue Root (Wurzel) hinzu. In Zeile 6,7,8 und 9 fügst du die Child Notes hinzu und ordnest diese den Itemindex des Partent (Eltern) Elementes zu. Dies führt zu der Struktur die du im Abbildung 1.04 sehen kannst.

Download der Demo Software inkl. PDF Artikel: DownloadKomTTreeView (932,121kb) 7Zip Datei