Indicateurs de progression

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é : 

Image:xultu_prog-det.jpg

Indicateur de progression indéterminé : 

Image:xultu_prog-udet.jpg

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>
Image:xultu_progress1.png

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
<hr>

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

Interwiki

Pièces jointes

Fichier Taille Date Joint par
xultu_prog-det.jpg
598 octets 2007-08-14 08:32:54 Fredchat
xultu_prog-udet.jpg
1251 octets 2007-08-14 08:36:21 Fredchat
xultu_progress1.png
13764 octets 2007-08-14 08:27:33 Fredchat
htmlelem-ex1.png
5052 octets 2006-11-12 11:40:35 Morishoji
htmlelem-ex2.jpg
6603 octets 2006-04-05 17:33:40 Morishoji
htmlelem-ex2.png
6185 octets 2006-11-12 11:41:37 Morishoji

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : E.cg, Fredchat, Chbok
Dernière mise à jour par : E.cg,