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

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.

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.

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.

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>

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.

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.

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>

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.

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.

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.