Aktuelles

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

Abb. 1.01 Komponente TTrackbar „Slider“ oder „Schieberegler“

Ihr seht hier auf der Abbildung in grün umrandet die TTrackBar als Komponente. Diese könnte man auch als Slider oder Schieberegler bezeichnen. Um diese zu nutzen und en aktuellen Stand des Ziegers im einen Editfeld anzeigen zu lassen, dafür ist dieser Artikel erstellt worden. ich möchte als erstes auf die Eigenschaften der TTrackBar eingehen.

Eigenschaften der TTrackBar

Die grüne Umrandung könnte durch die Eigenschaft Color hinzufügen. Leider könnt ihr damit nur die Umrandung farblich markieren und nicht die TrackBar selber.
Unter Frequency stellte ihr die grauen Unterteilungen ein. Bei einer TrackBar die von 0 – 100 geht und eine Frequency von 20 hat habt ihr also 5 Unterteilung bei 10 dann 10 usw..

(mehr …)

Abb. 1.01 TSplitter

Die Komponente TSplitter findest du im Hauptmenü von Lazarus unter Addtional und sie ist die zehnte Komponente von Links und befindet sich direkt rechts neben der TLabeledEdit Komponente.

Bitte füge als erstes eine Komponente vom Typ TPanel ein. Diese findest du im Lazarus Hauptfenster unter Standard und ist die dritte Komponente von rechts. Du kannst die Komponente TPanel anklicken und dann in das Form1 klicken um sie zum Form1 hinzufügen. Jetzt gehst hin und vergrößerst die Komponente auf eine Breite von 246. In der Höhe nimmst du einen Abstand von 0 und zum Ende des Formulars ebenfalls von 0. Jetzt klickst du in den Objektinspektor und stellst die Eigenschaft Align auf alLeft. Der Panel nimmt nun auch bei einer Vergrößerung oder Verkleinerung des Form1 auf der linken Seite, oben und unten 100% sein.

Jetzt wähle im Hauptfenster von Lazarus die Komponente TSplitter aus und klicke es an und füge es an der rechten Seite des Panel1 an. Die beiden Komponenten sollten im Objektinspektor untereinander dargestellt werden und nicht hieratisch. Du kannst den Splitter nun positionieren und in an die linke Seite anheften lassen. Wenn du dein Programm jetzt startest kannst du deinen Panel1 nach links und nach rechts verschieben und den Panel1 sogar so verkleinern das es verschwindet.