Ajouter des boutons

Dans cette section, nous regarderons comment ajouter quelques boutons simples dans une fenêtre.

Ajouter des boutons dans une fenêtre

La fenêtre que nous avons créée jusqu'ici était vide, aussi n'est-elle pas encore très intéressante. Dans cette section, nous y ajouterons deux boutons, un bouton de recherche et un bouton d'annulation. Nous apprendrons également une manière simple de les positionner dans la fenêtre.

Comme pour HTML, XUL dispose d'un certain nombre de balises qui peuvent être utilisées pour créer des éléments d'interface utilisateur. Le plus basique d'entre eux est l'élément button. Cet élément sert à créer de simples boutons.

L'élément bouton a deux propriétés principales : un libellé label et une image image. Vous avez besoin soit de l'un, soit de l'autre, soit des deux en même temps. Ainsi, un bouton peut avoir seulement un libellé, seulement une image ou un libellé et une image à la fois. Les boutons sont souvent utilisés dans une boîte de dialogue pour valider ou annuler, par exemple.

Syntaxe des boutons

L'élément button a la syntaxe suivante :

<button
       id="identifier"
       class="dialog"
       label="OK"
       image="images/image.jpg"
       disabled="true"
       accesskey="t"/>

Les attributs sont définis comme suit, et ils sont tous optionnels :

id: Identifiant unique vous permettant d'identifier le bouton. Vous verrez cet attribut sur tous les éléments XUL. Vous pouvez l'utiliser pour vous référer au bouton dans une feuille de style ou dans un script. Cependant, vous devriez ajouter cet attribut à presque tous les éléments. Notez que pour des raisons de simplicité, il n'est pas toujours spécifié dans les exemples de ce tutoriel.
class: La classe de style du bouton. Elle fonctionne de la même manière qu'en HTML. Elle indique l'aspect du bouton dans la fenêtre. Dans le cas présent, la valeur 'dialog' est utilisée. Dans la plupart des cas, vous n'emploierez pas de classe pour un bouton.
label: Le libellé qui apparaîtra sur le bouton. Par exemple : 'OK' ou 'Annuler'. S'il est omis, aucun texte n'apparaît.
image: L'URL de l'image qui apparaît sur le bouton. Si cet attribut est omis, aucune image n'apparaîtra. Vous pouvez également indiquer l'image dans une feuille de style en utilisant la propriété list-style-image.
disabled: Si cet attribut prend la valeur true, le bouton est désactivé. Celui-ci est habituellement dessiné avec le texte écrit en gris. Si le bouton est désactivé, la fonction du bouton ne peut pas être exécutée. Si cet attribut est omis, le bouton est activé. Vous pouvez commuter l'état d'activation du bouton en utilisant Javascript.
accesskey: Cet attribut doit spécifier une lettre qui est employée comme raccourci clavier. Cette lettre doit apparaître, généralement soulignée, dans le libellé. Quand l'utilisateur presse la touche alt (ou une touche équivalente, qui varie en fonction de la plate-forme) et la touche de raccourci, à partir de n'importe où dans la fenêtre, le focus sera mis sur le bouton.

Notez qu'un bouton supporte plus d'attributs que ceux énumérés ci-dessus. Les autres seront abordés plus tard.

Quelques exemples de boutons :

Exemple 1: Source Voir

<button label="Normal"/> 
<button label="Désactivé" disabled="true"/>

Les exemples ci-dessus produiront des boutons comme dans la capture. Le premier bouton est un bouton normal. Le second bouton est désactivé, aussi apparaît-il grisé.

Nous commencerons par créer un bouton simple de recherche qui permettra de lancer la recherche de fichiers. Le code de l'exemple ci-dessous nous montre comment faire :

<button id="find-button" label="Rechercher"/>

Notez que Firefox ne vous permet pas d'ouvrir des fenêtres chrome à partir de pages Web. Aussi les liens « voir » dans le tutoriel s'ouvriront dans une fenêtre normale de navigation. À cause de cela, les boutons apparaîtront agrandis le long de la fenêtre. Vous pouvez ajouter align="start" sur l'élément window pour éviter cette déformation.

L'exemple findfile.xul

Ajoutons ce code au fichier findfile.xul que nous avons créé dans la section précédente. Le code doit être inséré entre les balises window. Le code à ajouter est mis en rouge ci-dessous :

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="findfile-window"
        title="Recherche de fichiers"
        orient="horizontal"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" label="Rechercher"/>
  <button id="cancel-button" label="Annuler"/>

</window>

Vous noterez que le bouton 'Annuler' a été également ajouté. La fenêtre a une orientation horizontale de sorte que les deux boutons apparaissent l'un à côté de l'autre. Si vous ouvrez le fichier dans Mozilla, vous devriez obtenir quelque chose de similaire à l'image montrée ici.

Notez que nous ne devrions pas mettre le texte des libellés directement dans le fichier XUL. Nous devrions plutôt employer des entités de sorte que le texte puisse être facilement traduit.

PAS SUR MDC L'exemple de la boîte de recherche : <a href='exemples/findfile/findfile-buttons.xul.txt'>Source</a> <a href="exemples/findfile/findfile-buttons.xul" onclick="window.open(this.href,'xulff','chrome,resizable'); return false;">Voir</a>

Dans la section suivante, nous découvrirons comment ajouter des libellés et des images dans une fenêtre XUL.

« Précédent Suivant »

Ajouter des boutons