Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle ProgressBar

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 13 avril 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Introduction

Le contrôle ProgressBar fait partie du jeu de composants MX. Il n'a pas d'équivalent dans le jeu de composants Spark.

Le contrôle ProgressBar fournit une représentation visuelle de l'état d'avancement d'une tâche au fil du temps. Il y a deux types de contrôles ProgressBar : déterminé et indéterminé. Un contrôle ProgressBar déterminé est une représentation linéaire de la progression d'une tâche au fil du temps. Vous pouvez l'utiliser lorsque l'utilisateur est obligé d'attendre pendant une période prolongée de temps, et quand la durée de la tâche est connue.

Un contrôle ProgressBar indéterminé représente des processus basés sur le temps dont la durée n'est pas connue. Dès que vous pouvez déterminer la durée, vous devez utiliser un contrôle ProgressBar déterminé.

L'exemple suivant montre les 2 types de contrôles ProgressBar:

Haut: Un contrôle ProgressBar déterminé - Bas: Un contrôle ProgressBar indéterminé

Utilisez le contrôle ProgressBar lorsque l'utilisateur est obligé d'attendre l'achèvement d'un processus sur une période de temps prolongée. Vous pouvez attacher le contrôle ProgressBar à tout type de contenu de chargement. Une légende peut afficher la progression du chargement quand elle est activée.

Les modes du contrôle ProgressBar

Vous utilisez la propriété mode pour spécifier le mode de fonctionnement du contrôle ProgressBar. Le contrôle ProgressBar prend en charge les modes de fonctionnement suivants:

event Utilisez la propriété source pour spécifier un processus de chargement qui diffuse des événements progress et complete. Par exemple, les contrôles SWFLoader et Image diffusent ces événements durant le chargement d'un fichier. En général, vous utilisez un contrôle ProgressBar déterminé dans ce mode. Le contrôle ProgressBar se met à jour uniquement si la valeur de la propriété source étend la classe EventDispatcher. C'est le mode par défaut.

Vous pouvez aussi utiliser ce mode si vous voulez mesurer la progression de chargements multiples; par exemple, si vous rechargez une image, ou si vous utilisez les contrôles SWFLoader et Image pour charger plusieurs images.

polled Utilisez la propriété source pour spécifier un processus de chargement qui expose les propriétés bytesLoaded et bytesTotal. Par exemple, les contrôles SWFLoader et Image exposent ces propriétés. En général, vous utilisez un contrôle ProgressBar déterminé dans ce mode.

manual Dans ce mode, vous spécifiez les propriétés maximum et minimum et utilisez la méthode setProgress() pour spécifier l’état. Vous utilisez généralement un contrôle ProgressBar indéterminé dans ce mode.

Création d'un contrôle ProgressBar

Vous définissez un contrôle ProgressBar en MXML en utilisant la balise <mx:ProgressBar>, comme le montre l'exemple suivant. Spécifiez une valeur à la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript.

L'exemple suivant utilise le mode event par défaut pour suivre la progression du chargement d'une image en utilisant le contrôle Image:

<?xml version="1.0"?>
<!-- controls\pbar\PBarSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
 
 
    <fx:Script>
        <![CDATA[
            public function initImage():void {
              image1.load('../assets/DSC00034.JPG');
            }
        ]]>
    </fx:Script>
 
    <mx:VBox id="vbox0" 
        width="600" height="600">
        <mx:Canvas>
            <mx:ProgressBar width="200" source="image1"/>
        </mx:Canvas>
        <s:Button id="myButton" 
            label="Show" 
            click="initImage();"/>
        <mx:Image id="image1" 
            height="500" width="600" 
            autoLoad="false" 
            visible="true"/> 
    </mx:VBox>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Après avoir exécuté cet exemple, la première fois, la grande image sera généralement stockée dans le cache de votre navigateur. Avant d'exécuter cet exemple, une seconde fois, vider le cache de votre navigateur de sorte que vous puissiez voir le fonctionnement du contrôle ProgressBar. Si vous n'effacez pas le cache de votre navigateur, Flash Player charge l'image à partir du cache et le contrôle ProgressBar peut aller de 0% à 100% trop rapidement pour voir le suivi de la progression du chargement.

Dans ce mode, le contrôle Image diffusent plusieurs événements progress durant le chargement, et un événement complete à la fin du chargement.

La balise <mx:Image> expose les propriétés bytesLoaded et bytesTotal, donc vous pouvez aussi utiliser le mode polled, comme le montre l'exemple suivant:

<mx:ProgressBar width="200" source="image1" mode="polled"/>

En mode manuel, mode=“manual”, vous utilisez un contrôle ProgressBar indéterminé avec les propriétés maximun et minimum et la méthode setProgress(). La méthode setProgress() possède la signature de méthode suivante:

setProgress(Number completed, Number total)

completed Spécifie la progression réalisée dans la tâche, et doit être comprise entre les valeurs maximum et minimum. Par exemple, si vous suivez le nombre d'octets à charger, ce serait le nombre d'octets déjà chargés.

total Spécifie la tâche total. Par exemple, si vous suivez le nombre d'octets chargés, ce serait le nombre total d'octets à charger. Typiquement, c'est la même valeur que maximum.

Pour mesurer la progression, vous devez appeler de façon explicite la méthode setProgress() pour mettre à jour le contrôle ProgressBar.

Définition de la légende d'un contrôle ProgressBar

Par défaut, le contrôle ProgressBar affiche la légende LOADING xx%, où xx est le pourcentage de l'image chargé. Vous utilisez la propriété label pour spécifier une chaîne de caractères différente à afficher.

La propriété label vous permet d'inclure dans la chaîne de caractères, les caractères spéciaux suivants:

%1 Correspond au nombre d'octets chargés
%2 Correspond au nombre total d'octets
%3 Correspond au pourcentage chargé
%% Correspond au signe %

Par exemple, pour définir une légende qui affiche:

Loading Image 1500 out of 78000 bytes, 2%

utilisez le code suivant:

<?xml version="1.0"?>
<!-- controls\pbar\PBarLabel.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
 
 
    <fx:Script>
        <![CDATA[
            public function initImage():void {
              image1.load('../assets/DSC00034.JPG');
            }
        ]]>
    </fx:Script>
 
    <mx:VBox id="vbox0" 
        width="600" height="600">
        <mx:Canvas>
            <mx:ProgressBar 
                width="300" 
                source="image1" 
                mode="polled" 
                label="Loading Image %1 out of %2 bytes, %3%%" 
                labelWidth="400"
            />        
        </mx:Canvas>
        <s:Button id="myButton" 
            label="Show" 
            click="initImage();"
        />
        <mx:Image id="image1" 
            height="500" width="600" 
            autoLoad="false" 
            visible="true"
        /> 
    </mx:VBox>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Comme dans l'exemple précédent, n'oubliez pas d'effacer le cache de votre navigateur avant d'exécuter cet exemple, une seconde fois.