Neste tutotial mostro como criar e utilizar um componente customizado em actionScript e o melhor, reutilizável.
Optei por criar um projeto bem simples, nele, apenas faço uma tradução para o componente DateField(CampoData).
1. Utilizando o Flex Builder 3, criamos um novo projeto em File > New > Flex Project.
2. Nomeie como ComponentesCustomizados e Finish.
3. Entre as tags <mx:Application crie um novo DateField como abaixo:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:DateField y="10" x="10"/>
</mx:Application>
Obs.: Clique no ícone do calendário, note que os anos e os dias estão em inglês,
afim de melhorar a usabilidade e a experiência do usuário, deixaremos
nosso componente em português.
4. Crie uma nova classe ActionScript em File > New > ActionScript Class
5. Nomeie como CampoData e Finish.
6. Deixe o código da classe como abaixo:
package {
import mx.controls.DateField;
public class CampoData extends DateField {
public function CampoData() {
this.yearNavigationEnabled = true;
this.formatString = "DD/MM/YYYY";
this.monthNames = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho",
"Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
this.dayNames = ["D","S","T","Q","Q","S","S"];
}
}
}
a. Estendemos a classe apartir da classe DateField para a mesma herde todas as caractéristicas de DateField.
b. yearNavigationEnabled = true cria setas para navegar através do anos, tornando muito mais rápido alterar entre intervalo de anos.
c. formatString, é máscara de exibição da data, no padrão brasileiro dia, mês e ano.
d. monthNames, array que armazena o nome dos meses.
e. dayNames, array com a inicial do dia da semana.
7. Adicione ao codigo mxml o componente CampoData, escrevendo <CampoDat e dando um Ctrl + Espaço automaticamente o Flex Builder adiciona a namespace local.
Seu código ficará parecido com o código abaixo.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:DateField y="10" x="10"/>
<local:CampoData y="10" x="300" />
</mx:Application>
8. Rode a aplicação e note a melhoria.
Alex on Flex 
