2.5 Les contrôles de listes

XUL a de nombreux types d'éléments pour créer des boîtes de listes.

Zones de listes

Une zone de liste est utilisée pour afficher un nombre d'items dans une liste. L'utilisateur doit pouvoir choisir un item dans la liste.

XUL propose deux types d'éléments pour créer des listes, un élément listbox pour créer des zones de liste multi-lignes, et un élément menulist pour créer des zones de listes déroulantes. Ils fonctionnent de la même manière que l'élément select du langage HTML, qui réalise ces deux fonctions, mais les élements XUL ont plus de fonctionnalités.

La zone de liste la plus simple utilise l'élément listbox pour créer la boite, et l'élément listitem pour chacun des items. Par exemple, cette zone de liste à quatre lignes, une pour chaque item.

Exemple 2.5.1 : Source Afficher

<listbox>
   <listitem label="Beurre de cacahuète"/>
   <listitem label="Chocolat à tartiner"/>
   <listitem label="Confiture de fraise"/>
   <listitem label="Crême chantilly"/>
</listbox>

À l'instar de la balise option du langage HTML, vous pouvez assigner une valeur à chaque item en utilisant l'attribut value. Vous pouvez ensuite utiliser cette valeur dans un script. Par défaut, la zone de liste ajustera sa taille à son contenu, mais vous pouvez contrôler sa taille avec l'attribut rows. Affectez lui le nombre de lignes que vous souhaitez voir apparaître dans la zone de liste. Un ascenseur apparaîtra pour permettre à l'utilisateur d'afficher les lignes supplémentaires.

L'exemple suivant montre ces fonctionnalités supplémentaires :

Exemple 2.5.2 : Source Afficher

<listbox rows="3">
   <listitem label="Beurre de cacahuète" value="becacah"/>
   <listitem label="Chocolat à tartiner" value="chotart"/>
   <listitem label="Confiture de fraise" value="confraise"/>
   <listitem label="Creme chantilly" value="crchant"/>
</listbox>

L'exemple a été modifié pour n'afficher que 3 lignes à la fois. Des valeurs ont également été ajoutées à chaque item de la liste. Les zones de liste ont beaucoup d'autres fonctionnalités qui seront décrites plus tard.

Zones de listes déroulantes

Des listes déroulantes peuvent être créées en HTML avec la balise select. L'utilisateur peut voir un unique choix dans une boite de texte et doit cliquer sur une flèche ou un bouton similaire à côté de la boite de texte pour changer la sélection. Les autres choix apparaitront alors dans une fenêtre surgissante. XUL dispose de l'élément menulist qui peut être utilisé pour cet usage. Il est formé d'une boite de texte et d'un bouton à côté. Son nom a été choisi parce qu'il propose un menu surgissant pour le choix.

Trois éléments sont nécessaires pour former une liste déroulante. Le premier est l'élément menulist, qui crée la boite de texte avec son bouton à côté. (Pour les menulist non modifiables, la boite de texte se comporte comme un bouton). Le second, menupopup, créé la fenêtre surgissante qui apparaît lorsque le bouton est cliqué. Le troisième, menuitem, créé les choix individuels.

Cette syntaxe est mieux décrite dans l'exemple ci dessous :

Exemple 2.5.3 : Source Afficher

<menulist label="Bus">
   <menupopup>
     <menuitem label="Voiture"/>
     <menuitem label="Taxi"/>
     <menuitem label="Bus" selected="true"/>
     <menuitem label="Train"/>
   </menupopup>
</menulist>

Ce menu contient quatre choix, un pour chaque élément menuitem. Pour voir les choix possibles, cliquez sur le bouton flèche du menu. Lorsqu'un item est sélectionné, il apparaît comme le choix fait dans le texte du menu. L'attribut selected est utilisé pour spécifier la valeur sélectionnée par défaut.

Par défaut, vous ne pouvez sélectionner qu'un seul choix proposé dans la liste. Vous ne pouvez pas entrer votre propre sélection en la tapant au clavier, comme vous pouvez le faire dans certaines listes déroulantes. Une variante du menulist le permet. Au lieu qu'un bouton serve à l'affichage de la sélection en cours, une boite de texte est utilisée dans laquelle vous pouvez entrer la sélection. Par exemple, le champ URL du navigateur a une liste déroulante pour afficher les adresses précédemment utilisées, mais vous pouvez aussi la saisir vous même.

Pour créer une liste déroulante éditable, ajoutez l'attribut editable comme ceci :

Exemple 2.5.4 : Source Afficher

<menulist editable="true">
   <menupopup>
     <menuitem label="www.mozilla.org"/>
     <menuitem label="www.xulplanet.com"/>
     <menuitem label="www.dmoz.org"/>
   </menupopup>
</menulist>

Le champ URL créé ici a trois adresses pré-saisies que l'utilisateur peut sélectionner ou alors il peut taper la sienne dans le champ. Le texte entré par l'utilisateur ne sera pas ajouté comme un futur choix à cette liste. Comme l'attribut value n'a pas été utilisé dans cet exemple, sa valeur par défaut sera vide.

---

Dans la section suivante, nous apprendrons comment ajouter des élements à la fenêtre en utilisant HTML.