DataSets imbriqués

Dans ce 3ème volet du tutorial consacré à Adobe Spry, nous allons voir comment gérer plusieurs datasets imbriqués dans le même fichier XML.

Le lecteur n'ayant pas lu les précédents volets de ce tutorial est encouragé à le faire.

Tutorial de Pat Biker sur Adobe Spry 1/3

Tutorial de Pat Biker sur Adobe Spry 2/3

Les données XML

ici toutes nos données sont réunies dans un unique fichier XML. Voici le contenu du fichier "bookmarks.xml".

<?xml version="1.0" encoding="iso-8859-1" ?>
<bookmarks>
    <bookmark>
        <title>Ressources sur le framework Adobe Spry</title>
        <id>1</id>
        <links>
        <link url="SpryTutorial.html Mon tutorial">Tutorial de Pat Biker sur Adobe Spry (partie 1)</link>
        <link url="SpryTutorial2.html Mon tutorial">Tutorial de Pat Biker sur Adobe Spry (partie 2)</link>
        </links>
    </bookmark>
    <bookmark>
        <title>Traitement d&apos;images en PHP</title>
        <id>2</id>
        <links>
        <link url="http://www.weberdev.com/...">Dynamic Thumbnail Generation</link>
        </links>
    </bookmark>
    <bookmark>
        <title>Free</title>
        <id>3</id>
        <links>
        <link url="http://adsl.free.fr/">Freebox</link>
        <link url="http://sql.free.fr/phpMyAdmin/">Gestion de votre base MySQL chez Free</link>
        </links>
    </bookmark>
</bookmarks>

A partir de ce fichier, nous voulons exploiter deux datasets. Le premier dataset contient les bookmarks (balise "bookmark").

Ce dataset sera composé de 3 éléments. Nous allons afficher dans une combobox, le titre (balise "title") de chacun.

Voici la déclaration du Dataset.

var bookmarks = new Spry.Data.XMLDataSet("bookmarks.xml", "bookmarks/bookmark");

Rien que du très classique, si vous avez bien suivi les deux premiers tutoriaux.

Le chargement de la combobox est réalisé par le code suivant, sans surprise lui non plus.

Page16.html : DataSet affiché dans une combobox

<div spry:region="bookmarks">
    <select spry:repeatchildren="bookmarks" onchange="bookmarks.setCurrentRow(this.value)">
        <option spry:if="{ds_RowNumber} == 0" value="{ds_RowID}" selected="selected">{title}</option>
        <option spry:if="{ds_RowNumber} != 0" value="{ds_RowID}">{title}</option>
    </select>
</div>

Un Dataset variable

Le deuxième DataSet, vous l'avez peut-être deviné, doit contenir les liens correspondant au bookmark choisi dans la combobox. On voit bien qu'il existe trois DataSet possibles. Par quel mécanisme allons-nous sélectionner le bon DataSet ? C'est justement le but de ce tutorial.

Voici la déclaration du deuxième DataSet.

var links = new Spry.Data.XMLDataSet("bookmarks.xml", "bookmarks/bookmark[id = '{bookmarks::id}']/links/link");

Pour déclarer un DataSet statique, le "path" aurait été défini ainsi : "bookmarks/bookmark/links/link". Notre déclaration est plus astucieuse. Elle utilise une condition. Cette condition pourrait se lire ainsi : parmi toutes les balises "bookmark" disponibles, sélectionner celle dont la balise "id" est identique à la valeurs "id" du dataSet "bookmarks". Le DataSet ayant une déclaration "dynamique", son contenu sera réévalué chaque fois que l'élément courant du DataSet "bookmarks" change. Et comme j'aime à le dire, la magie d'Ajax fait le reste.

Page17.html : DataSet dynamique

Voici le code affichant tous les liens du bookmark sélectionné.

<div spry:region="links">
    <p spry:repeat="links">{link}</p>
</div>

J'ai utilisé cette technique pour créer ma page de bookmarks. Cette page est visible sur mon site.

Une page de bookmarks utilisant la définition dynamique de DataSet