2.6 Indicateurs de progression

Écrit par Neil Deakin , mise à jour par les contributeurs à MDC .
Traduit par Alain B. (04/04/2007).
Page originale : http://developer.mozilla.org/en/docs/XUL_Tutorial/Progress_Meters

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Dans cette section, nous étudierons la création d'indicateurs de progression.

Ajout d'un indicateur de progression

Un indicateur de progression est une barre qui indique l'état d'avancement d'une tâche. Typiquement, vous la voyez lors du téléchargement de fichiers ou quand une longue opération s'exécute. XUL a un élément qui peut être utilisé pour la création d'un indicateur de progression (NdT : progressmeter). Il y a deux types d'état pour un indicateur : déterminé et indéterminé.

Les indicateurs de progression déterminés sont utilisés quand vous connaissez la durée d'une opération. L'indicateur de progression va se remplir, et une fois plein, l'opération doit être terminée. Il peut être utilisé pour une boîte de dialogue de téléchargement lorsque la taille des fichiers est connue.

Les indicateurs de progression indéterminés sont utilisés quand vous ne connaissez pas la durée d'une opération. Une animation visuelle représentera cet indicateur, sous la forme d'un rectangle zébré ou un cylindre hachuré tournant, et elle sera dépendante de votre système d'exploitation et du thème graphique utilisé.

Indicateur de progression déterminé : 
Indicateur de progression indéterminé : 

Un indicateur de progression a la syntaxe suivante :

<progressmeter
   id="identifier"
   mode="determined"
   value="0%"/>

Ses attributs sont les suivants :

id
L'identifiant unique de l'indicateur de progression.
mode
Le type d'indicateur de progression. Si sa valeur est determined, l'indicateur de progression est déterminé et se remplit au fur et à mesure de la tâche en cours. Si sa valeur est undetermined, l'indicateur de progression est indéterminé et vous ne connaissez pas la durée de la tâche en cours. La valeur par défaut est determined si vous n'avez pas spécifié cet attribut.
value
La valeur courante de l'indicateur de progression. Vous ne devez utiliser cet attribut que pour un indicateur de progression déterminé. La valeur doit être un pourcentage compris entre 0% et 100%. La valeur sera changée par un script selon l'avancement de la tâche.

Ajoutons maintenant un indicateur de progression à notre boîte de dialogue 'Recherche de fichiers'. Nous devrions normalement mettre un indicateur de progression indéterminé car nous ne connaissons pas le nombre de fichiers recherchés ou combien de temps prendra la recherche. Toutefois, nous ajouterons un indicateur normal pour l'instant car un indicateur animé risque d'être perturbant lors du développement. L'indicateur de progression devrait normalement n'apparaître que lorsque la recherche est lancée. Nous ajouterons plus tard un script pour l'afficher ou non.

<hbox>

   <progressmeter value="50%" style="margin: 4px;"/>

   <spacer flex="1"/>
</hbox>

La valeur a été mise à 50% afin que vous puissiez voir la barre de progression dans la fenêtre. Une marge de 4 pixels a été définie pour séparer l'indicateur du bord de la fenêtre. Comme nous l'avons mentionné précédemment, nous voulons simplement que la barre de progression soit affichée pendant la recherche. Un script l'affichera et la masquera si nécéssaire.

Exemple 'Recherche de fichiers' : Source Voir

Nous allons voir dans la prochaine section comment ajouter des éléments additionnels à une fenêtre en utilisant HTML.

Mozilla® est une marque déposée de la fondation Mozilla.
Mozilla.org™, Firefox™, Thunderbird™, Mozilla Suite™ et XUL™ sont des marques de la fondation Mozilla.