Richlistbox

Les "listes riches"

Avec Firefox 1.5 et son moteur de rendu Gecko 1.8, de nouveaux éléments tel que le <richlistbox> sont apparus. Cet élément permet de créer une liste de lignes pouvant être sélectionnées individuellement, comme il est déjà possible de le faire avec un <listbox>. La différence est que <listbox> ne permet d'avoir que de simples lignes de texte, tandis que <richlistbox> permet d'inclure n'importe quels autres éléments XUL.

Avec Firefox 1.5, cet élément est encore en développement; il ne permet par exemple pas de sélectionner plusieurs lignes en même temps. Le gestionnaire de téléchargement de Firefox l'utilise par exemple.

Sur cette capture, c'est la troisième ligne qui est sélectionnée.

Le code

 <?xml version="1.0" encoding="ISO-8859-1" ?>
 <?xml-stylesheet href="[[chrome://global/skin/]]" type="text/css"?>
 <window title="Les richlistbox"
        [[xmlns:html="!http://www.w3.org/1999/xhtml]]"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        >

 <[[html:h1>Exemple]] de richlistbox</[[html:h1]]>

 <hbox>
  <label value="Les principes de &lt;richlistbox&gt; :"/>
  <richlistbox>
   <richlistitem> <!-- 1ere ligne -->
     <label value="un simple texte."/>
     <label value="Suite du texte."/>
   </richlistitem>
   <richlistitem> <!-- 2nd ligne -->
     <label value="simple image"/>
     <image src="http://xulfr.org/images/xulfr_logo.png"/>
   </richlistitem>
   <richlistitem> <!-- 3eme ligne -->
     <label value="Zone de saisie :"/>
     <textbox value="..."/>
   </richlistitem>
   <richlistitem> <!-- 4eme ligne -->
     <vbox>
       <label value="Quatrième ligne."/>
       <label value="Suite de la 4ème ligne."/>
     </vbox>
   </richlistitem>
 </richlistbox>
 </hbox>

 </window>

Explications

La liste contient ici quatres lignes (ou items) :

• La première ligne ne contient que du texte. Cette ligne est mise en surbrillance par défaut.
• La seconde ligne contient un libellé et une image.
• La troisième ligne contient un libellé et un champ de saisie prérempli.
• La dernière ligne contient du texte sur deux lignes.

La construction d'une liste "riche" est donc très simple, car elle n'utilise que deux éléments, l'élément de groupe <richlistbox> et l'élément pour chaque item <richlistitem>.