Flex - Controle ProgressBar

Introdução

O controle ProgressBar fornece aos usuários uma representação visual do progresso de uma tarefa ao longo do tempo.

Declaração de Classe

A seguir está a declaração para mx.controls.ProgressBar classe -

public class ProgressBar 
   extends UIComponent 
      implements IFontContextComponent

Propriedades Públicas

Sr. Não	Descrição da Propriedade
1	alignToolTip : String = "Align" A dica de ferramenta que aparece quando o usuário passa o mouse sobre os botões de alinhamento de texto.
2	conversion : Number Número usado para converter o valor atual de bytes carregados de entrada e os valores totais de bytes carregados.
3	direction : String Direção na qual o preenchimento da ProgressBar se expande até a conclusão.
4	indeterminate : Boolean Se o controle ProgressBar tem uma aparência determinada ou indeterminada.
5	label : String Texto que acompanha a barra de progresso.
6	labelPlacement : String
7	maximum : Number Maior valor de progresso para o ProgressBar.
8	minimum : Number Menor valor de progresso para o ProgressBar.
9	mode : String Especifica o método usado para atualizar a barra.
10	percentComplete : Number [somente leitura] Porcentagem de processo concluído. O intervalo é de 0 a 100.
11	source : Object Refere-se ao controle do qual o ProgressBar está medindo o progresso.
12	value : Number [somente leitura] Propriedade somente leitura que contém a quantidade de progresso que foi feito - entre os valores mínimo e máximo.

Métodos Públicos

Sr. Não	Método e Descrição
1	ProgressBar() Construtor.
2	setProgress(value:Number, total:Number):void Define o estado da barra para refletir a quantidade de progresso feito ao usar o modo manual.

Eventos

Sr. Não	Descrição do Evento
1	complete Enviado quando o carregamento é concluído.
2	hide Enviado quando o estado de um objeto muda de visível para invisível.
3	progress Enviado conforme o conteúdo é carregado no modo de evento ou de pesquisa.
4	show Enviado quando o componente se torna visível.

Métodos herdados

Esta classe herda métodos das seguintes classes -

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

Exemplo de controle do Flex ProgressBar

Vamos seguir as etapas a seguir para verificar o uso do controle ProgressBar em um aplicativo Flex criando um aplicativo de teste -

Degrau	Descrição
1	Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo .
2	Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.

A seguir está o conteúdo do arquivo 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>

Quando estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]

↰ Previous page