TListView

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.

TListView Beispiel Programm herunterladen

Beispiel Programm herunterladen: [Download Link]. Größe (116kb). Bitte kompiliere das Programm selbst um eine ausführende Datei mit der Endung .Exe zu erzeugen. Die Software wurde mit der Kostenlosen Software 7Zip (https://www.7-zip.org) komprimiert.

ListView1 Eigenschaften

Nachdem Du die TListView in dein Programm gezogen hast, kannst du damit beginnen, dir die Eigenschaften der Komponente anzusehen.

Ich gehe hier auf die wichtigsten und spezifischen Eigenschaften der TListView ein. Eigenschaften die in allen sichtbaren Komponenten vorkommen wie Anchors übergehe ich hier. Dies wird später nach und nach ergänzt.

Die Eigenschaft Checkboxes fügt eine Checkbox zu der Caption hinzu bei uns im Programm wird dies die ID sein. Color ändert den gesamten Hintergrund der TListView. ColumnClick lässt es zu, dass wir eine Spalte anklicken können. Unter Columns können wir die benötigten Spalten einrichten. Enabled gleich True bedeutet unsere Komponente ist aktiv und kann genutzt werden. Ist diese Eigenschaft auf False wird die Komponente ausgegraut und ist nicht nutzbar. GridLines fügt Hintergrundlinien zur besseren Sichtbarkeit ein. Items sind die Einträge der TListView wir werden diese später nutzen um Einträge löschen zu können und den Index auslesen zu können. MultiSelect ermöglicht es mehrere Spalten auswählen zu können. Name ist die genaue Bezeichnung und Identifikation unserer Komponente, diesen benötigen wir um die Komponente im Quellcode ansprechen und damit arbeiten zu können. ReadOnly ermöglicht es das die Komponente nur gelesen, aber nicht damit gearbeitet werden kann. Row Select bedeutet das beim Klick auf ein Item in einer Spalte die ganze Reihe ausgewählt wird. ScrollBars hier kann ausgewählt werden, welche Scrollbars entstehen können. Die Standard Einstellung lautet hier ssBoth. Diese Einstellung ist bereits sehr gut. Die TListView kann damit nach beiden Seiten Scrollbars einsetzen, wenn diese benötigt werden. ViewStyle ist die Art der angezeigten Liste. Am besten für Daten kann man hier mit einem vsReport arbeiten. Die Standard Einstellung ist hier allerdings vsList. Visible ist die Eigenschaft die bei true die TListView anzeigt und bei false ausblendet. Dies waren auch schon die Wichtigsten Eigenschaften im kurzen Überblick.

Einstellungen

Nachdem Du dir die TListView Eigenschaften ein wenig näher angesehen hast, kannst du damit beginnen die Einstellungen der Eigenschaften vorzunehmen. Wir benötigen bei der Eigenschaft ViewStyle einen vsReport. Danach können wir die Columns einstellen. Wir benötigen hier für Items:

0 – ID; 1 – Nachname, 2 – Vorname, 3 – Tel, 4 – Mobil. Bei den Einträge ist die Null immer die Caption. Bei uns ist also die ID die Caption. Bei den Einstellungen könnt ihr noch eine Passende width (Weite) der Spalte auswählen damit ihr die eingetragenen Bezeichnungen und Items später besser lesen könnt. 0 – ID width = 50; 1 – Nachname width = 100, 2 – Vorname width = 100, 3 – Tel width = 100, 4 – Mobil width = 100.

TListView Software

TListView Einstellungen

Nachdem Du dir die TListView Eigenschaften ein wenig näher angesehen hast, kannst du damit beginnen die Einstellungen der Eigenschaften vorzunehmen. Wir benötigen bei der Eigenschaft ViewStyle einen vsReport. Danach kannst du die Columns einstellen. Du benötigst hierfür folgende Items:

0 – ID; 1 – Nachname, 2 – Vorname, 3 – Tel, 4 – Mobil. Bei den Einträgen ist die Null immer die Caption. Bei uns ist also die ID die Caption. Bei den Einstellungen kannst du noch eine passende width (Weite) der Spalte auswählen damit du die eingetragenen Bezeichnungen und Items später besser lesen kannst. 0 – ID width = 50; 1 – Nachname width = 100, 2 – Vorname width = 100, 3 – Tel width = 100, 4 – Mobil width = 100. Die Eigenschaft GridLines stelle bitte auf true. Bei ColumnClick bitte auch true einstellen.

ListView1 befüllen

Um die TListView befüllen zu können benötigst du eine Prozedure. Nachfolgend schon mal der Quelltext, eine Erklärung folgt.

procedure TForm1.AddToListView1(ID, LastName, FirstName, Tel, Mobilnum : string);
var
item : TListItem;
begin
item := Form1.ListView1.Items.Add;
item.caption := ID;
item.subItems.Add(LastName);
item.subItems.Add(FirstName);
item.subItems.Add(Tel);
item.subItems.Add(Mobilnum);
end;

In Zeile 1 steht der gesamte Kopf der Prozedure. Das Wort procedure leitet eine Procedure ein und TForm1 heißt, dass diese in der Unit vom Form1 erstellt wird. Das AddToListView1 ist der Name der Prozedur. Da du Strings für den Inhalt benötigst kommt nun noch eine Runde-Klammer auf ( und Variablen die als Strings gekennzeichnet sind, danach folgt eine Runde-Klammer zu ). In Zeile zwei folgt das Wort var hiermit leitest du die Variablendeklaration ein. In Zeile drei deklarierst (erstellst) du eine Variable vom Typ TListItem mit dem Namen Item. In Zeile vier leitest du die eigentliche Prozedure mit dem Wort begin ein. Der neu erstellten Variable Item fügst du nun in Zeile fünf die Items der TListView aus Form1 hinzu. Das hinzufügen der Items geschient über die Zusatz add. In Zeile sechs fügst du der caption wie oben beschrieben die ID hinzu. Die Caption ist der erste Eintrag einer TListView. In Zeile sieben bis zehn fügst du die weiteren Items der TListView hinzu. In Zeile elf wird die Prozedure durch das Wort end geschlossen.

Die Prozedure war der erste Teil den du benötigst, um Daten der TListView hinzuzufügen. Ich werde dir in diesem Beitrag erklären, wie man einzelne Einträge über einen Button einfügt.

Dies funktioniert natürlich auch, indem du eine Datenbank ausließt und die TListView über eine Schleife automatisch befüllst. Ich habe auch Software und Beispiele zu diesem Thema erstellt. Diesen findest du hier [Link einfügen].

Füge nun zu deiner erstellten Software einen Button hinzu und benenne diesen unter Name als BtnAddData1. Unter Ereignis nimmst du ein OnClick Ereignis und fügst folgenden Quellcode in die automatisch generierte Prozedure hinzu.

AddToListView1('1', 'Weistermann', 'Mareike', '5829634170', '123987456');

AddToListView1() ist unsere erstellte Prozedure. Diese nutzt du num um die ListView mit Daten zu füllen. Die eins ist unsere erste ID. Der Nachname lautet Weistermann. Der Vorname Mareike. Die Telefonnummer die wir eintragen ist die 5829634170 und die Mobile Handynummer lautet 123987456.

Der erste Datensatz ist nun bereit zum Eintragen. Um einige Test durchführen zu können fügst du nun drei weitere Button und Daten hinzu.

BtnAddData2
AddToListView1('2', 'Weistermann', 'Josefine', '45829634171', '0123987456');

BtnAddData3
AddToListView1('3', 'Naudermann', 'Jenni', '7529634170', '9323987456');

BtnAddData4

AddToListView1('4', 'Hesterlau', 'Dominik', '9429634170', '453987456');

Damit kannst du das Programm mal starten mit F9 oder auf den grünen Playbutton. Jetzt solltest du diese vier Daten, deiner TListView hinzufügen können. Die Inhalte der Daten können in gleichbleibender Reihenfolge (ID, Nachname, Vorname, Telefonnummer, Mobilnummer) angepasst werden. Beim Eintragen ist es der TListView egal, wie häufig welche ID eingetragen wird oder in welcher Reihenfolge.

Ausgewähltes Element löschen

So nun möchte ich dir zeigen, wie du Elemente löschen kannst. Erstelle dafür bitte einen weiteren Button mit der Caption Element löschen. Als Name trage bitte BtnDeleteData ein. Als Ereignis nimmst du wieder ein OnClick Ereignis und trägst in die Prozedure folgenden Quellcode ein.

ListView1.selected.Delete;

Dieser Quellcode sagt von ListView1 die ausgewählte Reihe (selected + Eigenschaft RowSelect in der TListView gesetzt) löschen (Delete). Gibt es in deiner TListView keine Einträge oder wurde kein Eintrag ausgewählt, kommt es beim Ausführen der Software zu einem Fehler, der diese abstürzen lässt. Diese Probleme und Fehlerbeschreibungen löse ich mit dir, unter dem Punkt – TListView Fehler beheben.

Inhalte komplett leeren

Mit einem weiteren Button möchte ich dir zeigen, wie du die TListView komplett mit einem Klick leeren kannst. In meiner Beispiel Software habe ich den Button mit dem Namen BtnLVClear und der Caption TListView leeren erstellt.

Bitte füge ein OnClick Ereignis hinzu und folgenden Quellcode in die automatisch erstellte Prozedur.

ListView1.clear;

Dies bedeutet ListView1 leeren (clear).

Ausgewählten ItemIndex anzeigen.

Der ItemIndex einer TListView ist wichtig zum Auswählen eines Eintrags. Den ItemIndex kann man bei Datendank Einträgen zum Löschen in einem SQL Statement nutzen, Bei einem Update für den Eintrag der aktualisiert werden soll. Der Nutzer wählt über deiner TListView so genommen den Eintrag der Datenbank aus und führt eine Aktion mit diesem aus. Damit du der Datenbank sagen kann welcher Eintrag betroffen ist, benötigst du die Datenbank ID die mit der TListView ID identisch ist, da du diese z.B. aus der DB ausgelesen hast.

Gut lass uns zur Programmierung kommen. Als erstes benötigst du eine TEdit Komponente mit dem Namen EdtListItemID und lösche bitte den Inhalt unter Text.

Um unser TEdit Feld nun mit Inhalten zu füllen erstellst du zwei Ereignisse bei unserer TListView. Unser erstes ist ein OnClick Ereignis. Sobald die TListView angeklickt wird unser Editfeld den angeklickten ItemIndex anzeigen. Füge dafür folgenden Quellcode dem Ereignis hinzu.

procedure TForm1.ListView1Click(Sender: TObject);
var
strID : string;
begin
if ListView1.Selected <> nil then
begin
strID := ListView1.Selected.caption;
EdtListItemID.Text := strID;
end
else
begin
// Wenn keine Reihe ausgewählt ist mache nichts.
end;

In Zeile zwei erstellen leitest du die Variablen Deklaration mit dem Wort var ein. In der dritten Zeile wird die Variable strID als String angelegt. Danach leitest du in der vierten Zeile mit dem Wort begin die eigentliche Prozedur ein. Jetzt folgt in Zeile fünf eine Wenn-Dann Abfrage. Diese lautet wie folgt: Wenn unsere Komponente TListView mit dem Namen ListView1 eine Reihe ausgewählt hat (Selected + Einstellung der Eigenschaft RowSelect = true) die kleiner oder größer nil (nicht gesetzt) ist, dann führe den nachfolgenden Quellcode aus. In der sechsten Zeile leiten du dann die Wenn-(If)-Abfrage ein, sollte eine Auswahl getroffen worden sein. Die erstellte Variable strID wird in der nächsten Zeile befüllt. Die siebte Zeile besagt folgendes setze strID mit der ausgewählten (Selected) Bezeichnung (Caption = Bezeichnung und das erste Element in der TListView). In der achten Zeile setzt du den Text des neu erstellten Editfeldes mit dem Namen EdtListItemID auf den Inhalt der Variablen StrID. Du kannst in der Software das Editfeld sofort befüllen lassen und das Erstellen der Variable weglassen. In den meisten Fällen willst du allerdings mit der ID noch etwas ausführen oder die Variable in einem SQL Statement nutzen. In Zeile neun beendest du das If Statement mit einem end ohne Semikolon. In der nächsten zehnten Zeile leitest du die dann Abfrage mit dem Schlüsselwort else ein. In der zehnten Zeile öffnest du mit dem Schlüsselwort Begin und schließen sie in der darauf folgenden Zeile elf direkt wieder mit einem Schlüsselwort end mit Semikolon. Damit sagst du dem Programm, ist nichts ausgewählt soll auch nicht passieren. Dies verhindert einen Fehler der TListView, der sogar das Programm zum Absturz bringen kann. Ich werde im nächsten Kapitel TListView Fehler beheben näher darauf eingehen.

Wenn sich der Nutzer für ein neues Item aus der TListView entscheidet und dieses auswählt, möchtest du, dass dieses angezeigt wird. Dafür benötigen wir ein weiteres Ereignis mit demselben Quellcode. Füge also zu unserer Komponente ListView1 ein weiteres Ereignis OnChange hinzu und kopiere den Quellcode des OnClick Ereignis in die OnChange Prozedur.

Die wichtigsten Funktionen der TListView hast nun von mir gezeigt bekommen. Jetzt müsst du dich um die Programm Stabilität kümmern und einige DAU = „dümmster anzunehmender User“ Abfragen durchführen.

TListView Fehler beheben

Fehler: Das Projekt … hat Exception-Klasse >>External SIGSEGV<< ausgelöst“

Der dümmste anzunehmende User der DAU weis z.B. nicht, dass du nur eine Auswahl in einem Bereich der TListView treffen kannst, der mit Inhalten gefüllt ist. Sollte er in einem leeren Bereich klicken folgt der Fehler: „Das Projekt … hat Exception-Klasse >>External SIGSEGV<< ausgelöst“

Diesen Fehler hast du durch die oben erklärte Wenn Dann Abfrage behoben.

if ListView1.Selected <> nil then

Auch beim Löschen muss ein Element ausgewählt sein. Der Fehler ist ebenfalls ein „Projekt … hat Exception-Klasse >>External: SIGSEGV<< ausgelöst“

Dies kannst du mit einer Anpassung der Prozedur auf zwei verschiedene Arten lösen.

Fehlerhafte Eingabe abfangen und dem User eine Nachricht ausgeben, dass er bitte ein Item auswählt.

if Assigned(ListView1.Selected) then

Begin

// Auswahl existiert

ListView1.Selected.Delete;

End
else
begin
end;

In der ersten Zeile fragst du ab, ob es richtig ist [Funtion Assigned()], dass in der ListView1 ein Item ausgewählt [Selected] wurde. Trifft dies zu existiert eine Auswahl und du kannst den Betrag löschen [ListView1.Selected.Delete;] . Trifft dies nicht zu gebe eine Meldung aus und informiere den User das es keine Auswahl oder kein Item gibt.

ShowMessage('Sie haben kein Item ausgewählt!');

Anstelle abzufragen ob ein Auswahl getroffen worden ist könnten wir auch eine Abfrage zusätzlich gestalten die prüft ob mehr als ein Item (Eintrag) in der TListView existiert.

If Listview.Count < 0 then
  Begin   
// Fehlerausgabe
end

Die Lösung funktioniert und unser Programm stürzt nicht mehr ab. Diese verhindert aber keinen Fehler, den der User angezeigt bekommt. Ich werde dir nun die  Lösung erklären ohne einen Fehler ausgeben zu müssen. Diese wurde von mir auch in der Beispiel Software umgesetzt.

Eine zweite Lösung wäre das deaktivieren des Löschen Buttons, wenn keine Elemente vorhanden sind oder kein Element ausgewählt ist. Da man kein Element auswählen kann, wenn auch keines vorhanden ist, löst du dies mit nur einer Zeile Quellcode.

BtnDeleteData.Enabled := Assigned(ListView1.Selected);

Dein Button mit dem Name BtnDeleteData ist aktiv (Enabled), wenn es wahr richtig ist [Funktion Assigned()], dass in deiner ListView1 ein Item ausgewählt ist [Selected]. Diese Anweisung fügen wir in das OnClick Ereignis und das OnChange Ereignis der TListView und in eine neue OnShow Funktion des Form1 ein.