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
| Variável | precision | Rounding |
| Tipo | int | NumberBaseRoundType |
| Padrão | 2 | NONE |
| Objetivo | Determinar a quantidade de casas decimais | Determina a forma de arredondamento do valor |
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
http://help.adobe.com/pt_BR/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f9f.htmlObrigado e um abraço!
