2.4 - Exemple simple

Attention : Ce tutoriel est ancien, incomplet, et n'est pas mis à jour. Il ne contient pas toutes les nouveautés du système de template de Gecko 1.9 / Firefox 3.0 qui est largement simplifié et permet d'utiliser sqlite ou xml comme source de données. Aussi est-il préférable d'aller consulter la version anglaise sur developer.mozilla.org.

Étudions un exemple plus utile, cette fois pour un gabarit affichant une liste de photos. Dans cette situation, un conteneur RDF sera employé pour contenir la liste des images.

<?xml version="1.0" encoding="iso-8859-1" ?>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:dc="http://purl.org/dc/elements/1.1/">

  <rdf:Seq rdf:about="http://www.xulplanet.com/rdf/myphotos">
    <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/>
    <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/>
    <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/>
  </rdf:Seq>
  <rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"
                   dc:title="Le palais vu de dessus"/>

  <rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"
                   dc:title="Canal"/>
  <rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"
                   dc:title="Obélisque"/>
</rdf:RDF>

Dans cet exemple, nous avons trois images identifiées par leurs URLs. Les ressources URIs correspondent à leurs URLs actuelles bien que cela ne soit pas nécessaire. Chaque image dispose également d'une propriété, le titre de l'image. Un gabarit affichant cette information est très simple à créer. Contrairement aux exemples précédents où nous parcourions les propriétés pour naviguer dans le graphe, ici nous voulons parcourir les fils d'un conteneur RDF. Le conteneur, un Seq RDF, a l'URI http://www.xulplanet.com/rdf/myphotos. Il sera le point de départ de la navigation. Nous voulons que les points d'arrivées soient les trois images. Tout d'abord, nous définissons les attributs datasources et ref comme ceci :

<vbox datasources="template-guide-ex11.xul"
      ref="http://www.xulplanet.com/rdf/myphotos">

Cette fois ci, nous utiliserons une nouvelle condition, la condition member en complément d'un triplet triple.

<conditions>
  <content uri="?start"/>
  <member container="?start" child="?photo"/>
  <triple subject="?photo"
          predicate="http://purl.org/dc/elements/1.1/title"
          object="?title"/>
  </conditions>

La graine est définie de manière similaire aux exemples précédents, par la création effective d'un premier résultat avec la variable ?start initialisée avec la ressource de référence http://www.xulplanet.com/rdf/myphotos. La même variable de départ est utilisée dans cet exemple, mais vous pouvez très bien utiliser une autre variable si vous le désirez.

(?start = http://www.xulplanet.com/rdf/myphotos)

La condition member est utilisée pour parcourir les fils d'un conteneur (ou le contraire). Premièrement, toutes les variables connues sont remplies à l'intérieur de la condition member pour le résultat courant. À ce stade, il n'y a qu'un seul résultat ; l'attribut container de l'élément member reçoit la valeur de la variable ?start de ce résultat. Cela donne le résultat suivant :

<member container="http://www.xulplanet.com/rdf/myphotos" child="?photo"/>

Comme en procédant avec un triplet, le constructeur va maintenant essayer de trouver autant de valeurs pour la variable ?photo que possible et créer les résultats potentiels en les utilisant. L'attribut container spécifie le conteneur et l'attribut child spécifie les fils. Dans la source de données RDF, le conteneur http://www.xulplanet.com/rdf/myphotos a trois fils, donc il y a trois valeurs possibles pour la variable ?photo. Si ce noeud n'avait pas de fils ou n'était pas un conteneur, il n'y aurait pas eu de résultats possibles. Le réseau d'information ressemble maintenant à ceci :

(?start = http://www.xulplanet.com/rdf/myphotos,
 ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg)
(?start = http://www.xulplanet.com/rdf/myphotos,
 ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg)
(?start = http://www.xulplanet.com/rdf/myphotos,
 ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg)

Le triple est ensuite évalué, et il sera examiné pour chaque résultat potentiel trouvé jusqu'ici. Le constructeur remplira tout d'abord autant de variables qu'il pourra. Pour le premier résultat, la valeur de la variable ?photo est connue, donc le triplet sera évalué comme ceci :

<triple subject="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"
        predicate="http://purl.org/dc/elements/1.1/title"
        object="?title"/>

Le constructeur calcule ensuite la valeur de ?title en utilisant le prédicat http://purl.org/dc/elements/1.1/title. Dans le RDF, la ressource 'palace' a la valeur Le palais vu de dessus qui sera ajoutée au réseau d'information, assignée à la variable ?title. Notez que cette valeur est un littéral plutôt qu'une ressource.

(?start = http://www.xulplanet.com/rdf/myphotos,
 ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg)
 ?title = 'Le palais vu de dessus')

Le processus continue de manière similaire pour les deux autres résultats. À la fin, le réseau contiendra les données suivantes :

(?start = http://www.xulplanet.com/rdf/myphotos,
 ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg)
 ?title = 'Le palais vu de dessus')
(?start = http://www.xulplanet.com/rdf/myphotos,
 ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg)
 ?title = 'Canal')
(?start = http://www.xulplanet.com/rdf/myphotos,
 ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg)
 ?title = 'Obelisque')

Puisque le triple est la dernière condition, les trois correspondances ont été trouvées. Le corps d'action, qui affiche l'image en utilisant son URL et son titre dans un libellé, devrait ressembler à ce qui suit. Vous noterez que l'attribut src de l'image utilise la variable ?photo de member.

<action>
  <vbox uri="?photo" align="start">
    <image src="?photo"/>
    <label value="?title"/>
  </vbox>
</action>

Il ne devrait pas être trop difficile de dire ce qui va apparaître dans la fenêtre pour cet exemple. Si vous avez deviné, vous pouvez le vérifier en affichant cet exemple.