Tree- og ListView

Jeg har lidt på fornemmelsen, at der hersker en del uvidenhed omkring disse to komponenter. "Hvordan tilføjer jeg et item?", "Hvordan sletter jeg et eller flere items?" osv. Da jeg selv skulle lære at bruge dem (og man skal nok få brug for dem på et eller andet tidspunkt), syntes jeg at det var rimeligt svært at hitte rundt i, og kan i dag stadig komme så meget i tvivl om et eller andet, at jeg er nødt til at finde noget gammelt kode frem :-). Komponenterne er ikke helt ens, så derfor kommer de i to dele, dog prøver jeg at behandle de samme ting for begge komponenter. Vi starter med med ListView.

Personligt bruger jeg tit ListView, fordi der er så mange muligheder i det, og fordi det ser godt ud næsten alle steder i mine programmer (og andres, naturligvis). Nå, men drop et ListView på en tom form, samt 3 knapper, og lad os så komme i gang.

// Knap 1, vi tilføjer et par items som vi kan lege lidt med.
procedure TForm1.Button1Click(Sender: TObject);
var
 NytItem:TListitem
begin
NytItem := ListView1.Items.Add; 
NytItem.Caption := 'Hej';
NytItem := ListView1.Items.Add;
NytItem.Caption := 'med';
NytItem := ListView1.Items.Add;
NytItem.Caption := 'dig';
end;

Med denne kode tilføjer vi 3 Items til vores ListView. Hvis du prøver at køre programmet og trykker på den første knap, kan du se at de tilføjes. ListViewet er dog pr. default indstillet til at blive vist med store ikoner, og da vi ikke har tilføjet nogen af dem, ser det ikke særlig pænt ud. Det kan vi dog hurtigt lave om på. Smid en ImageList på formen, sæt dens Height og Width til 32, og tilføj så 3 32x32 ikoner. Klik på dit ListView og sæt dens "LargeImages" til ImageList1 eller hvad du nu har kaldt din Imagelist. Hvis du kører programmet nu, vil du (håber jeg) se at der er kommet billeder på, men at de allesammen er det første billede i din liste. Ved at sætte følgende kode ind efter hver "Add" sætning, kan du styre hvilket ikon der bruges:

NytItem.ImageIndex := 2;

Nu får du så billede nummer 2 på det item, i stedet for billede nummer 0. Ved at ændre på ViewStyle kan du ændre den måde dit ListView viser sine data på, men dem må du selv eksperimentere lidt med, får nu skal vi lege lidt med "Selected", en af de ting jeg bruger meget i ListViewet.

For at få fat i det Item brugeren har valgt, skal du tjekke ListView1.Selected. Lad os sige at du har en Edit control, hvor du hele tiden gerne vil vise det valgte item i ListView1. Smid en Edit control på formen, og skriv følgende kode i ListView1's onChange event:

If ListView1.Selected = nil then exit;
Edit1.Text := ListView1.Selected.Caption;

Den første kode linie er temmelig vigtig. Hvis du fx prøver at få adgang til det valgte item, uden at der er valgt noget (det kan fx være fordi du klikker et forkert sted), kommer der straks fejl. Derfor hopper vi straks uden af proceduren, hvis der ikke er valgt noget item. Ellers sætter vi bare Edit1.Text til at være det valgte items caption (altså tekst). Ganske simpelt. Men hvad nu hvis vi vil af med noget af de valgte items?

At slette items fra et ListView er yderst simpelt. Vi kan slette et valgt item med denne kode, som jo passende kan indsætte i Button2:

If ListView1.Selected = nil then exit; //husk det nu :-)
ListView1.Selected.Delete;

Hvis du vil slette et bestemt item, kan det gøres således:

ListView1.Items[1].Delete;

Med den kode sletter vi Item nr. 1. Det er næsten for nemt, så lad os prøve at gøre det bare lidt mere avanceret. Sæt MultiSelect til true. Det gør os nemlig i stand til at at vælge mere end et Item, ved hjælp af Shift og Ctrl. Brug så følgende kode til at slette de valgte items i dit ListView:

var
 i,v:integer;
begin
for i := 0 to ListView1.SelCount - 1 do
begin
  V := ListView1.Selected.Index;
  ListView1.Items[v].Delete;
end;

Ved hjælp af en simpel for løkke kører vi de valgte Items igennem. V sættes til det valgte Index, hvor efter vi bruger V til at slette Item'et. Smart!

Det dækker vist ListViewet, så lad os komme i gang med TreeView'et.

Vi lægger hårdt ud med at tilføje items. Et TreeView viser jo, ikke så overraskende, ting i en træstruktur. I det her tilfælde bliver der et Item øverst, samt nogle "childs", altså Items der ligger "under" den øverste! Lidt svært at forklare, så drop et TreeView og nogle buttons på din form. Vi starter med Button1:

procedure TForm1.Button1Click(Sender: TObject);
var
 NytItem, NytSubItem:TTreeNode;
begin
 NytItem := TreeView1.Items.Add(nil, 'Indhold');
 NytSubItem := TreeView1.Items.AddChild(NytItem, 'Hejsa');
 NytSubItem := TreeView1.Items.AddChild(NytItem, 'med');
 NytSubItem := TreeView1.Items.AddChild(NytItem, 'dig');
end;

Her bruger vi igen NytItem, men denne gang er det af typen TTreeNode, som er et TreeViews items. På første linie tilføjer vi et item med add metoden. Vi tilføjer teksten "Indhold", under ingen eksisterende node, da dette er vores første Node (altså bruger vi nil). Nu vil vi så gerne have nogle Nodes under den første, så dem tilføjer vi ved hjælp af AddChild metoden. Som i kan se bruger vi det første Item til at ligge de nye ind under (lidt svært at forklare, men i grunden ganske logisk). Nu har vi så nogen Nodes (eller Items om man vil), som vi kan lege lidt med. Lad os hellere starte med at få lidt billeder på.

Smid en ImageList på formen, og tilføj et par billeder i 16x16 størrelsen. Sæt derefter TreeView'ets Image property til ImageList1, kør programmet og tryk på knappen. Nu er der pludselig billeder på! Det er dog det samme billede på dem alle sammen, så igen skal vi altså ind og rette dem når de bliver tilføjet. Det kunne gøres med følgende linie, der skal smides ind efter hvert SubItem er oprettet:

NytSubItem.ImageIndex := 1;

På den måde får det øverste Item et billede, og SubItems får et andet. Jeg vil dog lige bruge denne chance til at vise en smart lille funktion, der kan gøre dette arbejde efter at man har tilføjet en masse Items. Denne funktion kigger på en Nodes "Level", altså niveauet hvor det ligger. Vores øverste Item vil have Level 0, og vores SubItems vil have Level 1. SubItems til vores SubItems vil have Level 2 osv.

var
 i:integer;
begin
for i := 0 to TreeView1.Items.Count - 1 do
 begin
  TreeView1.Items[i].ImageIndex := TreeView1.Items[i].Level;
  TreeView1.Items[i].SelectedIndex := TreeView1.Items[i].Level;
 end;
 TreeView1.Refresh;

Jeg forklarer det kun lige kort. Vi kigger alle vores items igennem med en løkke, sætter deres ImageIndex til at være lig med deres Level, og Refresher til sidst. Ganske simpeltl, og alligevel ekstremt smart, synes jeg :-)

Sådan her kan vi slette det valgte Item fra et TreeView:

If not (TreeView1.Selected = nil) then
 TreeView1.Selected.Delete;

Det er da ganske simpelt! Hvis der er et valgt item, sletter vi det. Kort og kontant :-). Skal vi have fat i det valgte Items tekst, gøres det lige så simpelt som med ListView'et:

If not (TreeView1.Selected = nil) then
 Edit1.Text := TreeView1.Selected.Text;

Det var det! Vi har nu været det mest basale igennem omkring List- og TreeView. Hvis du har nogen lidt mere avacerede spørgsmål, så stil dem i Udviklerens Delphi forum!