Flex - Contrôle ProgressBar

introduction

Le contrôle ProgressBar fournit aux utilisateurs une représentation visuelle de la progression d'une tâche au fil du temps.

Déclaration de classe

Voici la déclaration pour mx.controls.ProgressBar classe -

public class ProgressBar 
   extends UIComponent 
      implements IFontContextComponent

Propriétés publiques

Sr.Non	Propriété et description
1	alignToolTip : String = "Align" Info-bulle qui s'affiche lorsque l'utilisateur survole les boutons d'alignement du texte.
2	conversion : Number Nombre utilisé pour convertir la valeur chargée des octets actuels entrants et le nombre total d'octets chargés.
3	direction : String Direction dans laquelle le remplissage de ProgressBar se développe vers la fin.
4	indeterminate : Boolean Indique si le contrôle ProgressBar a une apparence déterminée ou indéterminée.
5	label : String Texte qui accompagne la barre de progression.
6	labelPlacement : String
sept	maximum : Number Plus grande valeur de progression pour ProgressBar.
8	minimum : Number Plus petite valeur de progression pour ProgressBar.
9	mode : String Spécifie la méthode utilisée pour mettre à jour la barre.
dix	percentComplete : Number [lecture seule] Pourcentage de processus terminé. La plage est comprise entre 0 et 100.
11	source : Object Fait référence au contrôle dont ProgressBar mesure la progression.
12	value : Number [lecture seule] Propriété en lecture seule qui contient la quantité de progression qui a été effectuée - entre les valeurs minimale et maximale.

Méthodes publiques

Sr.Non	Méthode et description
1	ProgressBar() Constructeur.
2	setProgress(value:Number, total:Number):void Définit l'état de la barre pour refléter la progression de l'utilisation du mode manuel.

Événements

Sr.Non	Description de l'évenement
1	complete Envoyé une fois le chargement terminé.
2	hide Distribué lorsque l'état d'un objet passe de visible à invisible.
3	progress Distribué lors du chargement du contenu en mode événement ou interrogé.
4	show Distribué lorsque le composant devient visible.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemple de contrôle Flex ProgressBar

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle ProgressBar dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	
   <fx:Script>
      <![CDATA[
         private var increment:uint = 10;

         private function runProgressBar():void {
            if(increment < =  100) {
               progressBar.setProgress(increment,100);
               progressBar.label =  "Current Progress" + " " + increment + "%";
               increment+ = 10;
            }
            
            if(increment > 100) {
               increment = 0;
            }
         }
      ]]>
   </fx:Script>  
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
            
         <s:Panel id = "progressBarPanel" title = "Using ProgressBar" 
            width = "500" height = "300">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>				
               
            <s:Label color = "0x323232"
               text = "Click the button to start the progress bar." />
            <s:Button id = "btnStart" label = "Start" 
               click = "runProgressBar();" />
               
            <mx:ProgressBar id = "progressBar" 
               labelPlacement = "bottom" minimum = "0" 
               visible = "true" maximum = "100"
               color = "0x323232" label = "CurrentProgress 0%" 
               direction = "right" mode = "manual" width = "90%" />
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

↰ Previous page