DataSets dynamiques

Dans ce 2ème volet du tutorial consacré à Adobe Spry, nous allons voir comment charger un DataSet dynamiquement.

Le lecteur n'ayant pas lu le 1er volet de ce tutorial est encouragé à le faire.

Tutorial de Pat Biker sur Adobe Spry

Les données XML

Jusqu'à présent, toutes nos données étaient réunies dans un unique fichier XML. Nous allons maintenant utiliser plusieurs fichiers. Un fichier principal, qui joue le rôle d'une table des matières et des fichiers complémentaires.

Voici notre fichier principal, series.xml. Il contient une liste de séries télé. A chaque série correspond un fichier XML (attribut "file") localisé dans un répertoire déterminé (attribut "base").

Par exemple, les informations concernant la série "Friends" sont dans le fichier "friends.xml", lui-même placé dans le répertoire "friends/".

<series>
    <serie base="er/" file="urgence.xml">
    <name>Urgence (ER)</name>
    </serie>
    <serie base="friends/" file="friends.xml">
    <name>Friends</name>
    </serie>
    <serie base="friends/" file="tng.xml">
    <name>Star Trek The Next Generation</name>
    </serie>
</series>

Voici le fichier "friends.xml". Il liste les personnages principaux de la série. Les autres fichiers XML sont construits sur le même modèle.

<characters>
    <character>Ross Geller</character>
    <character>Chandler Bing</character>
</characters>

Le fichier XML principal

Remplir une combobox avec le nom de différentes séries est un jeu d'enfant pour nous maintenant, n'est-ce pas ? Il suffit de déclarer un DataSet sur le fichier "series.xml" et d'utiliser une itération.

Page11.html : Affichage des séries dans une combobox

var monDataSet = new Spry.Data.XMLDataSet("series.xml", "series/serie");
...
<div spry:region="monDataSet">
<select spry:repeatchildren="monDataSet" onchange="alert(this.selectedIndex);">
    <option spry:if="{ds_RowNumber} == 0" selected="selected">{name}</option>
    <option spry:if="{ds_RowNumber} != 0" >{name}</option>
</select>
</div>

Ce code n'est pas strictement identique à celui que nous avons utilisé dans le 1er tutorial sur Spry. Ici, il n'y a pas de valeur affectée explicitement à chaque option (pas d'attribut "value"). Nous utilisons la propriété .selectedIndex pour repérer l'option choisie. Pour la 1ère ligne, selectedIndex retourne zéro, puis un pour la 2ème ligne, etc.

Fichier XML chargé dynamiquement

Nous souhaitons maintenant afficher les personnages principaux de la série qui est sélectionnée dans la combobox. Il y a 3 séries décrites dans le fichier "series.xml", devons-nous définir aussi 3 DataSet ? Heureusement non !

Il suffit de déclarer un seul DataSet. Le point particulier de cette déclaration est qu'elle utilise les attributs "base" et "file" de monDataSet pour localiser le fichier XML contenant les données.

Grâce à ce mécanisme, le dataset "bestCharacters" est réinitialisé chaque fois que l'élément courant du dataset "monDataSet" change.

Page12.html : Chargement dynamique d'un DataSet

var bestCharacters = new Spry.Data.XMLDataSet("{monDataSet::@base}{monDataSet::@file}", "characters/character");
...
<div spry:region="bestCharacters">
<p spry:repeat="bestCharacters" >{character}</p>
</div>

Tri des données

En exécutant les précédents exemples, vous avez peut-être remarqué que les noms des séries n'apparaissent pas triés. Spry permet de trier facilement les données d'un DataSet au chargement de celui-ci. Ceci est réalisé en ajoutant une directive sortOnLoad dans la déclaration du DataSet.

Page13.html : Tri d'un DataSet

var monDataSet = new Spry.Data.XMLDataSet("series.xml", "series/serie", {sortOnLoad: "name"} );

Il est également possible de trier les données sur une action de l'utilisateur, par exemple en cliquant sur un lien. Il faut appeler la méthode .sort. Le 2ème paramètre facultatif "toggle" permet d'inverser le tri à chaque appel.

Comme d'habitude la magie d'Ajax fait le reste. Les données modifiées par le tri sont réaffichées automatiquement.

Page14.html : Tri sur action de l'utilisateur

Ce lien permet de trier les personnages affichés par ordre alphabétique ascendant ou descendant (paramètre "toggle").

<a href="#" onclick="bestCharacters.sort('character','toggle');">Inverser le tri</a>

Caractères accentués et retour à la ligne

Dans la réalisation des exemples, j'ai remarqué que les caractères accentués ou spéciaux (comme le c cédille) n'étaient pas rendus correctement. Il est temps d'adresser ce problème.

Pour les accents et les caractères spéciaux du français (àéèùîûüïç), la solution est très simple. Il suffit d'ajouter au début du fichier XML, une déclaration d'encodage. Pour le français, l'encodage iso-8859-15 convient très bien.

<?xml version="1.0" encoding="iso-8859-15" ?>

Concernant les marques de "retour à la ligne", elles sont correctement restituées par le XML. En revanche ces marques sont ignorées par le HTML. C'est normal, les RC présents dans le source de la page sont ignorés.

Il n'y a rien à faire au niveau XML, le problème est à traiter dans le source HTML de la page. La balise <pre> est faite pour ça.

<pre spry:repeat="textePoeme">{strophe}</pre>

Le fichier XML suivant a été utilisé pour l'exemple.

<?xml version="1.0" encoding="iso-8859-15" ?>
<strophes>
 
<infos titre="Le dormeur du val" auteur="Arthur Rimbaud"></infos>
 
<strophe>C'est un trou de verdure où chante une rivière,
Accrochant follement aux herbes des haillons
D'argent ; où le soleil, de la montagne fière,
Luit : c'est un petit val qui mousse de rayons.</strophe>
 
<strophe>Un soldat jeune, bouche ouverte, tête nue,
Et la nuque baignant dans le frais cresson bleu,
Dort ; il est étendu dans l'herbe, sous la nue,
Pâle dans son lit vert où la lumière pleut.</strophe>
 
<strophe>Les pieds dans les glaïeuls, il dort. Souriant comme
Sourirait un enfant malade, il fait un somme :
Nature, berce-le chaudement : il a froid.</strophe>
 
<strophe>Les parfums ne font pas frissonner sa narine ;
Il dort dans le soleil, la main sur sa poitrine,
Tranquille. Il a deux trous rouges au côté droit.</strophe>
 
</strophes>

Page15.html : Caractères accentués et retour à la ligne dans les données XML

Bilan et perspective

Nous l'avons vu, le framework Spry de Adobe est particulièrement séduisant pour qui connait déjà un peu HTML et Javascript. Il apporte la puissance d'Ajax avec un minimum de codage. Les pages sont légères et lisibles. Nul doute que ce framework actuellement en stade bêta au moment de la rédaction de ce tutorial (juillet 2006) pourra s'imposer rapidement auprès des développeurs de sites Web.

Pour ma part, j'ai le projet de réaliser une nouvelle version de WDGalerie qui utilisera Spry. J'ai déjà trouvé le nom : WDSpryGalerie. Consultez mon blog pour suivre l'évolution de ce projet.

Le blog de PatBiker pour suivre le projet WDSpryGalerie.

Ressources Spry sur le Web

Voici une liste des sites qui m'ont aidé à préparer ce tutorial et le précédent.

(carehart.org) spry_resources

Spry's Gotchas

DataSet et région dynamique "Adobe labs"

Exemple de table avec un DataSet décrit en Javascript sans XML

Plusieurs pages concernant Spry, notamment une galerie avec un caddie

Comment convertir une requête MySQL en XML pour Spry

Présentation multimédia de Adobe Spry (durée 46 minutes)