Comment générer un treeview à partir d'enregistrements de base de données ?

Jean-Philippe BEMPEL

Traduit par Jean-Philippe BEMPEL de l'article d'Oscar Newman sur xmlrad.com ♪

- Titre : Comment générer un treeview à partir d'enregistrements de base de données ?

- Auteur : Jean-Philippe BEMPEL

- Parution : 26 août 2004

- Mise à jour : 4 avril 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Jean-Philippe BEMPEL. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Création du XMLService Menu

- III. Récupérer les données à afficher de la base de données

- IV. Revue des données

- V. Explication de la grammaire du Treeview

- VI. Utilisation xsl:template pour transformer les enregistrements XML dans la grammaire du treeview

- VII. Afficher les enregistrements récursivement

- VIII. Modifier le code XSL pour afficher les données

- IX. Conclusion

- X. Pour aller plus loin

I - Introduction

XMLRAD fournit un composant treeview générique et facile à utiliser. Ce composant est souvent utilisé dans une application pour parcourir un menu, mais on voudrait l'utiliser aussi pour afficher des enregistrements provenant d'une base de données sous forme de vue hiérarchique.

Pour cet exemple, nous allons travailler sur la démo Training, qui fournit des écrans pour gérer des organisations (Organizations) et des personnes (Persons) qui travaillent pour ces organisations (donc des employés). Dans cet article, nous expliquerons comment afficher chaque organisation dans un nœud dans notre treeview, et tous les employés en tant que nœuds fils de chacune d'elle.

La première étape est d'effectuer une sauvegarde de votre application Training. Vous pouvez zipper le répertoire Training en utilisant un outil d'archivage. Les utilisateurs de XMLRAD 8 peuvent utiliser l'outil de Backup fourni pour conserver un instantané du projet.

II - Création du XMLService Menu

Nous allons créer notre treeview.

Utilisez l'assistant de création des XMLServices pour générer un portail d'application (Portal) dans l'onglet Divers (Misc.) à partir du module xmORGANIZATION. N'oubliez pas de sélectionner Menu Arbre (Menu Tree) dans les Gabarits (Templates). À la fin de l'assistant, vous avez trois nouveaux XMLService : Default, le Frameset affichant le menu sur la gauche et l'espace de travail sur la droite, Menu le treeview, et FromPortal le portail principal de votre application.

III - Récupérer les données à afficher de la base de données

Nous voulons afficher les organisations dans notre treeview. Nous devons extraire tous les enregistrements que nous avons besoin dans le document XML (Output). Nous devons éditer le XMLGram du XMLService Menu pour cela. Une fois dans l'éditeur XMLGram (XMLGram Editor), sélectionnez une instruction DBExtract, nommez-la ORGANIZATION et insérez-la après l'instruction Params. Un assistant vous aidera à construire la requête SQL. Sélectionnez la source de données Database, puis sélectionnez la table ORGANIZATION. Sélectionnez ORG_ID comme champ clé et ORG_NAME comme champ visuel. Vous devriez obtenir une requête du genre « SELECT ORGANIZATION.ORG_ID, ORGANIZATION.ORG_NAME FROM ORGANIZATION ». Vous pouvez ajouter une clause ORDER BY si vous le souhaitez. Terminez l'assistant.

IV - Revue des données

Vous pouvez maintenant vérifier vos données XML en cliquant sur le menu XML du XMLService dans XMLRAD.

Vous devriez avoir un document avec la structure suivante :

<?xml version="1.0" encoding="ISO-8859-1"?>
<document>
...
<ORGANIZATIONS ...>
<ORGANIZATION>
<ORG_ID>103</ORG_ID>
<ORG_NAME>Better-Office</ORG_NAME>
</ORGANIZATION>
...
</ORGANIZATIONS>
</document>

V - Explication de la grammaire du Treeview

Maintenant que nous avons nos données dans le document XML, nous pouvons travailler avec pour afficher les nœuds dans notre treeview. La grammaire du Treeview est très simple: le moteur du treeview attend un paramètre Tree qui contient un ensemble de nœuds (node-set) contenant des Items à afficher. Vous pouvez voir un exemple de cette grammaire dans XSLStudio pour le XMLService Menu. XSLStudio supporte parfaitement la grammaire du Treeview. Vous pouvez copier/coller les Items et modifier leurs attributs en utilisant l'inspecteur d'objet. Les Items sont organisés dans un node-set de façon hiérarchique. Le moteur du Treeview reconstruit cette hiérarchie en appliquant ces nœuds récursivement.

<Item
Caption="List All"
ImagePath="ico_service.gif"
HRef="{/document/Aliases/ProjectDLL}Service"
Target="Main"
OnClick="return false;"
Expanded="1"
/>

un nœud dans un treeview est un élément Item suivi par un ensemble d'attributs :

Caption: le libellé affiché dans le treeview ;

ImagePath : l'URL complète pour l'icône du nœud ;

Href : l'URL à afficher quand l'utilisateur clique sur le nœud ;

Target : la frame ou la fenêtre du navigateur dans lequel on ouvre le lien ;

OnClick : JavaScript exécuté côté client quand l'utilisateur clique sur le lien ;

Expanded : 1 = le nœud est ouvert par défaut et affiche les fils; 0 = le nœud est fermé et les utilisateurs doivent cliquer sur l'icône + pour déployer le nœud.

VI - Utilisation xsl:template pour transformer les enregistrements XML dans la grammaire du treeview

Nous avons besoin de transformer nos enregistrements XML ORGANIZATION en éléments Item et les passer au Treeviw à travers son paramètre Tree. Ce sera fait par l'utilisation d'un xsl:template.

Rajoutez le code xsl suivant dans le paramètre Tree :

<Item Caption="Organizations" Expanded="True" ImagePath="button_home.gif">
<xsl:apply-templates select="/document/ORGANIZATIONS/ORGANIZATION"/>
</Item>

Ce code xsl crée un nœud Organizations et appelle la template ORGANIZATION à l'intérieur

Rajoutez la template suivante à la fin du fichier xsl :

<xsl:template match="ORGANIZATION">
<Item
Caption="{ORG_NAME}"
Expanded="True"
ImagePath="button_home.gif"
HRef="{/document/Aliases/TrainingDLL}FormORGANIZATION?ORG_ID={ORG_ID}"
Target="Main" />
</xsl:template>

Cette template crée autant d'éléments Item qu'il y a d'éléments ORGANIZATION dans votre document XML. Elle remplit l'attribut Caption avec le nom de l'organisation courante et l'attribut HRef avec un lien vers le XMLService FormORGANIZATION de votre application.

Sauvegardez votre travail et exécutez le XMLService Default. Vous devriez voir votre treeview avec les nœuds par défaut créés par l'assistant et la liste complète des organisations.

VII - Afficher les enregistrements récursivement

Rappelez-vous, nous voulons afficher les employés de chaque organisation comme nœud fils. Maintenant de quoi avons-nous besoin ? Une fois encore, nous devons extraire nos données dans le document XML. Revenons dans l'éditeur XMLGram et insérons une autre instruction DBExtract. Sélectionnez le DBExtract, nommez-le PERSON et insérez-le en tant que fils de l'instruction ORGANIZATION. L'assistant vous aide à créer la requête SQL. Sélectionnez la source de données Database puis sélectionnez la table PERSON. Choisissez PSN_ID et ORG_ID comme champs clés, et PSN_FIRST_NAME et PSN_LAST_NAME comme champs visuels. Lorsque l'assistant demande à valider la requête SQL, rajoutez la clause WHERE suivante : « WHERE PSN.ORG_ID = :ORG_ID ». Cette clause WHERE restreindra la sélection des personnes travaillant dans l'ORGANIZATION courante. Le paramètre ORG_ID sera rempli à l'exécution à partir de la valeur extraite dans l'instruction ORGANIZATION. Terminez l'assistant et jetez un œil sur les données XML.

Vous devriez obtenir le document XML suivant :

<?xml version="1.0" encoding="ISO-8859-1"?>
<document>
...
<ORGANIZATIONS EOF="1" StartingRow="0" LastRow="3" RowCount="4" MaxRows="10" RecordName="ORGANIZATION">
<ORGANIZATION>
<ORG_ID>103</ORG_ID>
<ORG_NAME>Better-Office</ORG_NAME>
<PERSONS>
<PERSON>
<PSN_ID/>
<ORG_ID/>
<PSN_FIRST_NAME/>
<PSN_LAST_NAME/>
</PERSON>
</PERSONS>
</ORGANIZATION>
...
</ORGANIZATIONS>
</document>

VIII - Modifier le code XSL pour afficher les données

Maintenant, nous devons transformer nos enregistrements nouvellement ajoutés en éléments Item.

Insérez le xs:apply-templates suivant en tant que fils de l'élément Item dans la template ORGANIZATION :

<Item ...>
<xsl:apply-templates select="PERSONS/PERSON"/>
</Item>

Ce code dit à l'interpréteur XSL que pour chaque élément PERSON on applique la template correspondante.

Rajoutez la template suivante à la fin de votre fichier XSL :

<xsl:template match="PERSON">
<Item
Caption="{PSN_FIRST_NAME} {PSN_FIRST_NAME}"
ImagePath="button_Contact.gif"
HRef="{/document/Aliases/TrainingDLL}FormPERSON?ORG_ID={ORG_ID}&PSN_ID={PSN_ID}"
Target="Main" />
</xsl:template>

Cette template crée un élément Item pour chaque Person fils de l'élément Organization.

Sauvegardez votre travail et exécutez le XMLService Default. Vous devriez voir votre treeview avec les nœuds par défaut créés par l'assistant et la liste complète des organisations maintenant suivies par la liste des personnes pour chacune.

Le fichier XSL complet est fourni ici.

IX - Conclusion

Dans cet article nous avons vu comment extraire des données en utilisant des DBExtracts imbriquées. Nous avons expliqué les bases du moteur du composant Treeview. Nous avons créé de simples templates xsl pour transformer nos enregistrements XML en Items de Treeview.

X - Pour aller plus loin

Q : Comment créer récursivement mes éléments Item ?

R : Disons que vous avez une organisation (ou un département) qui dépend d'une autre organisation. Vous avez un élément ORGANISATION fils d'un autre élément ORGANISATION. Pour afficher récursivement cet élément, insérez un autre xsl:apply-templates s'appliquant sur les éléments ORGANIZATION dans la template ORGANIZATION.

N'oubliez pas que le XSL est nativement récursif !

Vous pouvez lire le fichier treeview.xsl pour comprendre tous les mécanismes du composant Treeview.