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 noeud dans notre treeview, et tous les employés en tant que noeuds 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). A la fin de l'assistant, vous avez 3 nouveaux XMLService: Default, le Frameset affichant le mnu 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:

 
Sélectionnez
<?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 noeuds dans notre treeview. La grammaire du Treeview est très simple: le moteur du treeview attend un paramètre Tree qui contient un ensemle de noeud (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 hierarchie en appliquant ces noeuds récursivement.

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

un noeud dans un treeview est un element Item suivi par un ensemble d'attributs.

Caption: Le libellé affiché dans le treeview

ImagePath: L'URL complète pour l'icone du noeud

HRef: L'URL à afficher quand l'utilisateur clique sur le noeud

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

OnClick: Javascript executé coté client quand l'utilisateur clique sur le lien

Expanded: 1 = le noeud est ouvert par défaut et affiche les fils; 0 = le noeud est fermé et les utilisateurs doivent cliquer sur l'icone + pour déployer le noeud.

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

Nous avons besoin de transformer nos enregistrements XML ORGANIZATION en éléments Item et les passer au Treeviw a 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:

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

Ce code xsl cré un noeud Organizations et appel la template ORGANIZATION à l'intérieur

Rajoutez la template suivante à la fin du fichier xsl:

 
Sélectionnez
<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'élements ORGANIZATION dans votre document XML. elle remplie l'attribut Caption avec le nom de l'organisation courrante 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 noeuds par défaut créés par l'assisant et la liste complète des organisations

VII. Afficher les enregistrements récursivement

Rappelez-vous, nous voulons affichr les employés de chaque organisation comme noeud 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 courrante. le paramètre ORG_ID sera rampli à l'exécution à partir de la valeur extraite dans l'instruction ORGANIZATION. Terminez l'assistant et jetez un oeil sur les données XML.

Vous devriez obtenir le document XML suivant:

 
Sélectionnez
                  
<?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

Maitnenant, nous devons transformer nos enregistrements nouvellement ajoutés en élements Item.

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

 
Sélectionnez
<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:

 
Sélectionnez
<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 executez le XMLService Default. Vous devriez voir votre treeview avec les noeuds par défaut créés par l'assisant et la liste complète des organisations maintenant suivi 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 tempalte ORGANIZATION.

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

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