Le premier site francophone dédié au développement Pocket PC

Le contrôle Treeview

Le contrôle TreeView permet d'afficher des données sous la forme d'une arborescence. Cette manière d'organiser les données permet à l'utilisateur de retrouver plus rapidement des informations structurées. Par exemple, nous avons pour habitude de voir l'organisation des périphériques d'un PC ou d'un Pocket PC affichée sous la forme d'un arbre, dans un contrôle TreeView.

eVB propose en standard un contrôle TreeView. Pour l'utiliser vous devez dans un premier temps cocher sa référence dans la liste des 'Components' (composants) de votre projet. Pour celà, vous devez sélectionner dans les menu eVB "Project -> Components", puis cocher la ligne correspondant au contrôle TreeView (voir image ci-contre).

Une fois le contrôle TreeView coché dans la liste des composants du projet, il devient disponible dans la boite à outils de eVB et vous pouvez à partir de ce moment le placer à volonté sur la feuille de votre choix.

Le contrôle TreeView dans la boîte à outils eVB

Notion de noeud, d'enfant et de parent

Le contrôle TreeView gère des noeuds, ou Nodes, un peu comme le contrôle ListView gère des ListItems (voir article sur le contrôle ListView). Chaque noeud est l'enfant d'un autre noeud ou de la racine, et peut être le parent d'autres noeuds. Cette notion de Parent/Enfant est à la base de tout le fonctionnement du contrôle TreeView.

Ajouter un noeud au TreeView, la méthode "Nodes.Add"

Pour ajouter un noeud à votre contrôle TreeView vous devez utiliser la méthode 'Add' de la collection 'Nodes' du contrôle. Cette collection liste tous les noeuds qui doivent être gérés, l'image à utiliser et les relations Parent/Enfant entre tous les noeuds.

Le prototype de cette méthode est le suivant :

Function Add([Relative], [Relationship], [Key], Text As String, [Image], [SelectedImage]) As Node

On se rend compte que cette méthode retourne l'objet Node qui vient d'être créé. Elle accèpte plusieurs paramètres optionnels (ceux entre crochet) et finalement, n'exige qu'un seul paramètre obligatoire, celui qui stipule le texte qui sera affiché en face du noeud.

Nous allons détailler chaque paramètre de cette méthode :

Avec tous ces paramètres vous pouver ajouter un noeud à n'importe quel endroit dans le TreeView (dans l'exemple, le TreeView a pour nom Tv1) :

Rem On place le noeud "$ROOT" à la racine du contrôle
call Tv1.Nodes.Add(, , "$ROOT", "Ma racine")

Rem On place le noeud "$CHILD1" comme enfant de "$ROOT"
Call Tv1.Nodes.Add("$ROOT", tvwChild, "$CHILD1", "Enfant 1")

Rem On place le noeud "$CHILD2" comme efant de "$ROOT"
Rem mais il doit être le premier enfant, donc il est comme
Rem "$CHILD1" sauf qu'il doit être le premier
Call Tv1.Nodes.Add("$CHILD1", tvwFirst, "$CHILD2", "Enfant en premier")

Récupérer un noeud avec sa clé : Problème !

Si vous avec un peu l'habitude de travailler avec le contrôle ListView, vous savez qu'il est très simple de récupérer un ListItem en donnant sa clé :

Set wItem = LV_Essai.ListItems("LaClé")

Avec le contrôle TreeView ça ne marche pas ! On ne peut récupérer un Node qu'en donnant son index car le paramètre attendu est converti en Long par le contrôle :

Set wNode = Tv1.Nodes(3)

Pourtant le fait de pouvoir récupérer un noeud par sa clé me semble un minimum. Il faut juste se créer une petite fonction qui prend comme paramètres le TreeView concerné et la clé à retrouver et qui retourne le Node trouvé ou Nothing si la clé ne correspond à aucun noeud :

Public Function RetournerNoeud(ByVal wTV As TreeViewCtl, ByVal wKey As String) As Node

 Dim i As Integer
         
 Set RetournerNoeud = Nothing
 For i = 1 To wTV.Nodes.Count
  If wTV.Nodes(i).Key = wKey Then
   Set RetournerNoeud = wTV.Nodes(i)
   Exit For
  End If
 Next

End Function

Et les événements dans tout ça ?

Le contrôle TreeView génère des événements lorsque l'utilisateur agit sur lui. Les plus importants sont :

Event NodeClick(Index As Long)

Cet événement est généré lorsqu'un noeud est sélectionné. Le paramètre Index indique de quel noeud il s'agit. Pour récupérer le noeud concerné dans une variable vous n'avez qu'à taper :

Dim wNode as Node
Set wNode = Tv1.Nodes(Index)

Event Collapse(Index As Long)

Cet événement est généré lorsqu'un noeud est fermé. Un noeud qui possède des enfants peut être affiché ouvert (on voit les enfants) ou fermé (on ne les voit pas, mais un signe + devant le noeud indique l'existance des enfants). Le paramètre Index fonctionne comme pour l'événement 'NodeClick'.

Event Expand(Index As Long)

Cet événement est le contraire de "Collapse". Il est généré lorsque'un noeud est déployé.

Les événements Expand et Collapse peuvent être utilisés pour modifier l'image du noeud. Par exemple, lorsque le noeud est fermé, on utilise une image de dossier fermé, et lorsque le dossier est ouvert (on voit les sous dossiers par exemple), on utlise l'image d'un dossier ouvert. C'est en réagissant aux événements 'Collapse' et "Expand' que l'on peut faire celà.

Treelines ou Rootlines ?

La propriété 'LineStyle' du TreeView permet de changer la manière dont est dessiné l'arbre. Faites l'essai vous même, vous verrez rapidement la différence.

Mode édition automatique

Il est possible de saisir directement sur le contrôle le libellé d'un noeud. Pour celà, vous devez placer la propriété 'LabelEdit' sur 'tvwAutomatic'. Dans ce mode, l'utilisateur peut, en cliquant longuement sur le libellé d'un noeud, saisir un autre libellé pour ce noeud.

Lors de cette manipulation un évément "BeforeLabelEdit" est généré, ce qui permet par exemple de vérifier que cette saisie automatique est valide à ce moment (le paramètre "Cancel" passé à True permet d'annuler la saisie avant même son véritable commencement). A la fin de la saisie, lorsque l'utilisateur valide, l'événement "AfterLabelEdit" est à son tour généré (le paramètre "Cancel" permet aussi d'annuler la saisie si besoin).

Avec une image c'est plus sympa !

Il est possible d'affecter à chaque noeud une image qui sera placée avant le libellé. Cette image est très utile car elle permet à l'utilisateur de se repérer dans l'arborescence.

Pour que le TreeView soit en mesure d'afficher des images il faut le lier avec un autre contrôle, un ImageList. Ce contrôle permet de stocker des images dans une liste (les images d'un contrôle ImageList doivent toutes faire la même taille), ce qui permet ensuite de les référencer par leur index.

Tout d'abord il faut cocher "Microsoft CE ImageList Controle 3.0" dans la liste des "Components" (comme nous l'avons déjà fait pour le contrôle TreeView). Cette opération ajoute à la boîte à outils eVB le contrôle "ListImage"

Vous devez ensuite placer une occurence de ce contrôle sur la même feuille que le TreeView avec lequel il doit être lié. Pour notre exemples nous allons appeler notre contrôle ImageList "IL_Images16" (IL pour ImageList). Les images gérés par ce contrôle doivent être au format 2bp, ou bmp 16 couleurs ou bmp 256 couleurs.

Avant de charger les images dans le contrôle ImageList, il faut indiquer quelle est la longueur (width) et la hauteur (height) des images. Pour celà, les propriétés "ImageWidth" et "ImageHeight" doivent être utilisées. La méthode "Add" permet le chargement d'une image, en donnant comme paramètre le nom de fichier de cette image :

Rem Chargement des images D1.BMP à D3.BMP qui
Rem se trouvent dans le dossier de l'application et qui
Rem font 16x16 pixels
IL_Images16.ImageHeight = 16
IL_Images16.ImageWidth = 16
Call IL_Images16.Add(App.Path & "\D1.BMP")
Call IL_Images16.Add(App.Path & "\D2.BMP")
Call IL_Images16.Add(App.Path & "\D3.BMP")

Il faut ensuite lier le contrôle ImageList avec le TreeView :

Tv1.ImageList = IL_Images16.hImageList

A partir de là, vous pouvez lors de la création d'un noeud indiquer quelle doit être son image, son image lors d'une sélection et changer ces paramètres à tout moment pendant l'exécution du programme.

Un programme d'exemple, et c'est pour vous...

Je vous ai préparé un petit programme d'exemple qui vous permettra de "jouer" avec le Treeview et le code associé. Ce programme permet de créer une arborescence avec plusieurs images possibles et en utilisant les différentes constantes de relation Parent/Enfant. Décortiquez le, il a été créé pour ça ! Sources eVB du programme d'exemple

N'oubliez pas que les forums sont à votre disposition si vous rencontrez des problèmes avec cet article.

Stéphane Sibué