Flex - Control ProgressBar

Introducción

El control ProgressBar proporciona a los usuarios una representación visual del progreso de una tarea a lo largo del tiempo.

Declaración de clase

A continuación se muestra la declaración de mx.controls.ProgressBar clase -

public class ProgressBar 
   extends UIComponent 
      implements IFontContextComponent

Propiedades publicas

No Señor	Descripción de propiedad
1	alignToolTip : String = "Align" La información sobre herramientas que aparece cuando el usuario se desplaza sobre los botones de alineación del texto.
2	conversion : Number Número utilizado para convertir el valor cargado de bytes actuales entrantes y el valor total de bytes cargados.
3	direction : String Dirección en la que el relleno de ProgressBar se expande hacia el final.
4	indeterminate : Boolean Si el control ProgressBar tiene una apariencia determinada o indeterminada.
5	label : String Texto que acompaña a la barra de progreso.
6	labelPlacement : String
7	maximum : Number Mayor valor de progreso para ProgressBar.
8	minimum : Number Valor de progreso más pequeño para ProgressBar.
9	mode : String Especifica el método utilizado para actualizar la barra.
10	percentComplete : Number [solo lectura] Porcentaje de proceso completado. El rango es de 0 a 100.
11	source : Object Se refiere al control del que ProgressBar mide el progreso.
12	value : Number [solo lectura] Propiedad de solo lectura que contiene la cantidad de progreso que se ha realizado, entre los valores mínimo y máximo.

Métodos públicos

No Señor	Método y descripción
1	ProgressBar() Constructor.
2	setProgress(value:Number, total:Number):void Establece el estado de la barra para reflejar la cantidad de progreso realizado al usar el modo manual.

Eventos

No Señor	Descripción del evento
1	complete Se envía cuando se completa la carga.
2	hide Se envía cuando el estado de un objeto cambia de visible a invisible.
3	progress Se envía a medida que se carga el contenido en modo evento o encuesta.
4	show Se envía cuando el componente se vuelve visible.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de control Flex ProgressBar

Sigamos los siguientes pasos para verificar el uso del control ProgressBar en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page