Criação de componentes no Adobe Flash Builder 4.5

Caros Amigos,

Pretendo neste artigo apresentar e demonstrar a criação de componentes no Adobe Flash Builder 4.5.

Iremos criar um componente NumberInput que é um componente que tem como pai um TextInput, porém com restrição de entrada de dados baseada em números e vírgula possibilitando a inserção de casas decimais.

Segundo o help da Adobe, o componente TextInput é um componente de texto de única linha que representa um encapsulador do objeto nativo TextField do ActionScript. Se você precisar de um campo de texto de várias linhas, use o componente TextArea. Por exemplo, pode-se usar um componente TextInput como um campo de senha em um formulário. É possível também configurar um ouvinte que verifique se o campo tem caracteres suficientes quando um usuário acessa o campo usando a tecla tab. Esse ouvinte pode exibir uma mensagem de erro indicando que o número correto de caracteres deve ser digitado. Também é possível definir o estilo textFormat usando o método setStyle() para alterar o estilo do texto que aparece em uma ocorrência de TextInput. Um componente TextInput também pode ser formatado com HTML ou como um campo de senha que mascara o texto.

Passos para criação de componentes:

1) Com o Adobe Flash Builder aberto, na barra de menu escolher a opção “File -> New -> Flex Library Project”, como mostra a Figura 1.

Figura 1: Criação do Projeto

2)Na janela aberta, mostrada na Figura 2, definir:

a. Project Name (Nome do Projeto): NumberInput;
b. Folder (Localização do projeto): D:\WWW\NumberInput
c. As demais opções ficam com as configurações padrão.

Figura 2: Configurações do Projeto

3) A Figura 3 mostra a estrutura do projeto criado:

Figura 3: Estrutura do Projeto

Obs: Na pasta bin será gerado o componente swc que poderá ser utilizado em outras aplicações Flex.

4) Pressionando o botão direito do mouse na pasta src, escolher a opção “New -> Package”. Na janela aberta, mostrada na Figura 3, definir o nome do pacote:

a. Name: br.com.number.

Figura 4: Novo Pacote

5) Dentro da pasta “br.com.number” será criada a nova classe “NumberInput”. Novamente através da barra de menu do Adobe Flash Builder escolher a opção “File -> New -> ActionScript”. Na janela aberta, mostrada na Figura 5, definir:

a.Name: NumberInput.
b.SuperClass: spark.components.TextInput.

Figura 5: Criação da Classe

6) A Figura 6 mostra a estrutura do projeto:

Figura 6: Estrutura do Projeto

7) O código gerado pelo Flex para a classe “NumberInput” pode ser observado na Listagem 1:

Listagem 1: Código Gerado pelo Flex.

package br.com.number
{
	import spark.components.TextInput;
	
	public class NumberInput extends TextInput
	{
		public function NumberInput()
		{
			super();
		}
	}
} 

8)Antes de iniciarmos a implementação do componente, será apresentado uma breve descrição:

Componente: NumberInput

Objetivo: Formatar e arredondar valores com restrição de entrada de dados baseada em números e vírgula possibilitando a seleção de casas decimais.

Propriedades

Tabela 1: Variáveis da classe “NumberInput”

8.1. Na Listagem 2 são criadas as variáveis da classe “NumberInput”, juntamente com seus métodos “gets” e “sets” conforme Tabela 1.

8.1.1. A variável “nf” é uma variável do tipo “NumberFormatter”, com esse tipo de variável é possível formatar o número digitado, verificar se é válido, ajustar o seu arredondamento decimal e precisão, o separador de milhar e o sinal de negativo.

8.1.2. O atributo “Inspectable” do Flex permite criar uma propriedade para que o usuário possa acessar.

Obs: Note que o Flex realiza o “import” automaticamente.

Listagem 2: Criação das Variáveis

package br.com.number
{
	import mx.formatters.NumberFormatter;
	
	import spark.components.TextInput;
	
	public class NumberInput extends TextInput
	{			
		public var nf : NumberFormatter = new NumberFormatter();

		private var _precision : String = '';
		private var _rounding : String = NumberBaseRoundType.NONE;
	
		public function NumberInput()
		{
			super();
		}

		// *************************************** //
		// ***    GET AND SETS                 		   *** //
		// *************************************** //
		
		[Inspectable(category = "Other")]            
		public function get precision():String
		{
			return _precision;
		}
		
		public function set precision(value:String):void
		{
			_precision = value;
		}    
		
		[Inspectable(category = "Other", 
		   enumeration=NumberBaseRoundType)]            
		public function get rounding():String
		{
			return _rounding;
		}
		
		public function set rounding(value:String):void
		{
			_rounding = value;
		}        

	}	
}

8.2. Na Listagem 3 são criados os eventos.

8.2.1. “CREATION_COMPLETE”: Ao criar o componente este evento é disparado.

8.2.2. Dentro deste método define-se o alinhamento do texto para a direita, restringi o campo para aceitar apenas números e vírgulas e formata-se a variável “nf”.

8.2.3. “FOCUS_OUT”: Ao sair do foco do componente, é realizado a formatação do número digitado, se o número digitado for inválido será apresentado uma mensagem informativa para o usuário “Número Inválido!”.

Listagem 3: Criação dos Eventos

public function NumberInput()
{
	super();
			
	this.addEventListener(FlexEvent.CREATION_COMPLETE, 
                onCreationComplete);
	this.addEventListener(FocusEvent.FOCUS_OUT,  onFocusOut);    
}
		
// Create Complete 
protected function onCreationComplete(e: FlexEvent): void {
	this.setStyle("textAlign", "right");
	this.restrict = '0-9,';
	this.errorString='';
			
	nf.precision=this.precision;
	nf.rounding=this.rounding;
	nf.decimalSeparatorFrom=',';
	nf.decimalSeparatorTo=',';
	nf.thousandsSeparatorFrom='.';
	nf.thousandsSeparatorTo='.';
			
	this.text = (StringUtil.trim(this.text) == '') ? 
	 nf.format('0') : nf.format(this.text);                
}
		
// Focus Out
protected function onFocusOut(e: FocusEvent): void {
	var vlr : String = nf.format(this.text);
	this.errorString = ( nf.error != null ) ? 'Número Inválido!' : '';
			
	if ( StringUtil.trim(vlr) != '' )
		this.text = vlr;
}

8.3. Na Listagem 4 é apresentado toda a codificação do componente.

Listagem 4: Código Fonte do Componente

package br.com.number
{
	import flash.events.FocusEvent;
	import flash.ui.Keyboard;
	
	import mx.controls.Alert;
	import mx.events.FlexEvent;
	import mx.formatters.NumberBaseRoundType;
	import mx.formatters.NumberFormatter;
	import mx.utils.StringUtil;
	
	import spark.components.TextInput;
	
	public class NumberInput extends TextInput
	{
		// precision : int
		// Determina a quantidade de casas decimais
		// Padrão : 2
		private var _precision : String = '';
		
		// rounding : NumberBaseRoundType
		// Determina a forma de arredondamento do valor 
		// Padrão : NONE
		private var _rounding : String = NumberBaseRoundType.NONE;
		
		public var nf : NumberFormatter = new NumberFormatter();
		
		public function NumberInput()
		{
			super();
			
			this.addEventListener(FlexEvent.CREATION_COMPLETE,
 			   onCreationComplete);
			this.addEventListener(FocusEvent.FOCUS_OUT, 
			  onFocusOut);    
		}
		
		// Create Complete 
		protected function onCreationComplete(e: FlexEvent): void {
			this.setStyle("textAlign", "right");
			this.restrict = '0-9,';
			this.errorString='';
			
			nf.precision=this.precision;
			nf.rounding=this.rounding;
			nf.decimalSeparatorFrom=',';
			nf.decimalSeparatorTo=',';
			nf.thousandsSeparatorFrom='.';
			nf.thousandsSeparatorTo='.';
			
			this.text = (StringUtil.trim(this.text) == '') ? 
			 nf.format('0') : nf.format(this.text);                
		}
		
		// Focus Out
		protected function onFocusOut(e: FocusEvent): void {
			var vlr : String = nf.format(this.text);
			this.errorString = ( nf.error != null ) ? 
			   'Número Inválido!' : '';
			
			if ( StringUtil.trim(vlr) != '' )
				this.text = vlr;
		}
		
		// *************************************** //
		// ***    GET AND SETS                 		   *** //
		// *************************************** //
		
		[Inspectable(category = "Other")]            
		public function get precision():String
		{
			return _precision;
		}
		
		public function set precision(value:String):void
		{
			_precision = value;
		}    
		
		[Inspectable(category = "Other", 
		   enumeration=NumberBaseRoundType)]            
		public function get rounding():String
		{
			return _rounding;
		}
		
		public function set rounding(value:String):void
		{
			_rounding = value;
		}        
	}
}

9) Pronto, nosso componente foi criado. Para o Flex gerar o swc e possibilitar a utilização do componente em outros projetos, basta escolher na barra de menu a opção “Project -> Clean” e na janela aberta, mostrada na Figura 7, pressionar o botão “OK”.

Figura 7: Clean no Projeto

10) A Figura 8 mostra que o swc foi gerado com sucesso.

Figura 8: swc Gerado do Projeto

Referências

Obrigado e um abraço!