Criação de componentes no Adobe Flash Builder 4.5
Veja neste artigo a criação de componentes no Adobe Flash Builder 4.5
Artigos Canal Mais Criação de componentes no Adobe Flash Builder 4.5
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
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
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.
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:
Figura 5: Criação da Classe
7) O código gerado pelo Flex para a classe "NumberInput" pode ser observado na Listagem 1:
Listagem 1: Código Gerado pelo Flex.
8)Antes de iniciarmos a implementação do componente, será apresentado uma breve descrição:
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.
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
public var nf : NumberFormatter = new NumberFormatter();
private var _precision : String = '';
private var _rounding : String = NumberBaseRoundType.NONE;
// ***    GET AND SETS                 		   *** //
[Inspectable(category = "Other")]
public function get precision():String
public function set precision(value:String):void
[Inspectable(category = "Other",
enumeration=NumberBaseRoundType)]
return _rounding;
_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
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);
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
// precision : int
// Determina a quantidade de casas decimais
// Padrão : 2
// rounding : NumberBaseRoundType
// Determina a forma de arredondamento do valor
// Padrão : NONE
this.addEventListener(FocusEvent.FOCUS_OUT,
onFocusOut);
this.errorString = ( nf.error != null ) ?
'Número Inválido!' : '';
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
http://help.adobe.com/pt_BR/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f9f.html