Xbl_rdfselector

Description

Dans un élément généré par <template>, ll est possible de sélectionner le contenu RDF affiché en utilisant l'élements <triple> et les attributs "predicat" et "object". L'attribut "predicat" indique la propriété littérale concernée, et "object" la valeur que doit prendre cette propriété.

Le plus intéressant, est que ces éléments peuvent être manipulés comme n'importe quels éléments du DOM, et donc il possible de changer la valeur des attributs dynamiquement !

Maintenant, imaginons que l'on ai besoin d'un élément XUL pour afficher un enregistrement particulier d'un fichier RDF à partir d'un ou plusieurs critères de sélections, et qui plus est, que l'on veuille utiliser ce composants à plusieurs endroits avec des informations differentes. Et bien une solution consiste à créer un composant via une liaison XBL , et de positionner la valeur de l'attribut "object" pour sélectionner les enregistrements que l'on désire afficher.

Exemple

Imaginons que l'on ait la source de données rdf suivante :

 <verbatim>
  <RDF:Seq about="[[http://www.xulplanet.com/rdf/weather/cities"]]>
    <RDF:li resource="[[http://www.xulplanet.com/rdf/weather/city/Paris"/]]>
    <RDF:li resource="[[http://www.xulplanet.com/rdf/weather/city/Manchester"/]]>
    <RDF:li resource="[[http://www.xulplanet.com/rdf/weather/city/Melbourne"/]]>
    <RDF:li resource="[[http://www.xulplanet.com/rdf/weather/city/Kiev"/]]>
  </RDF:Seq>

  <RDF:Description about="[[http://www.xulplanet.com/rdf/weather/city/Paris"]]>
    <[[cityset:name>Paris</cityset:name]]>
    ...
  </RDF:Description>

  .
  .
  .
 </verbatim>

Le binding :

 <verbatim>
   <binding id="citySelector">

     <[[xbl:content]] xmlns="[[http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul]]"
                  [[xmlns:xbl="http://www.mozilla.org/xbl]]" >

       <tree anonid="citiesTree" datasources="weather.rdf"
           ref="[[http://www.xulplanet.com/rdf/weather/cities"]]>

         <treecols>
           ...
         </treecols>

         <template>
           <rule>
             <conditions>
               <content uri="?list"/>
               <member container="?list" child="?city"/>
               <triple subject="?city"
                  predicate="[[http://www.xulplanet.com/rdf/weather#name]]"
                  [[xbl:inherits="object=city"/]]>
             </conditions>
             <action>
                ...
             </action>
           <rule>
         <template>
       </tree>

     </[[xbl:content]]>

     <implementation>

       <field name="mTree" readonly="true">
          <![CDATA[
              document.getAnonymousElementByAttribute(this,"anonid","citiesTree");
          ]]></field>

     </implementation>

     <handlers>
      <handler event="DOMAttrModified">
        <![CDATA[
          if(event.attrName == 'city') {
            this.mTree.builder.rebuild();
          }
        ]]>
      </handler>
    </handlers>

   </binding>
 </verbatim>

Le CSS :

   citySelector {
     -moz-binding: url ('[[chrome://myapp/content/mybindings.xml#citySelector')]];
   }

Le 'xbl:inherits' permet de passer le nom de la ville que l'on souhaite afficher directement à l'élément instancié.

  <citySelector city="Paris"/>

Du coté DOM, un simple setAttribute("city","Manchester") permet de changer la nature du contenu.

Remarque : il ne pas oublier de faire un builder.rebuild() pour que le changement soit pris en compte (dans l'exemple ci-dessus, il est effectué en prenant en charge l'évènement DOMAttrModified).