Aula 1.3 - Gerando endereço de e-mail usando data binding (dados vinculados).
Nesse exercício vamos aprender a customizar componentes Flex e vinculá-los a dados para criar um gerador de endereço de e-mail institucional automático.
Requisitos
Exercício 1.1
O espaço de trabalho padrão e manipulação de arquivos no Flash Builder 4.
Software necessário:
Flash Builder 4 (Download trial)
Arquivo de exemplo dessa aula:
Exercício 1.2: ex1_02_inicial.zip - Criando uma aplicação UI
Introdução:
Nesse exercício vamos aprender a customizar componentes Flex e vinculá-los a dados para criar um gerador de endereço de e-mail institucional automático (Veja Figura 1).
Figura 1: Tela da aplicação pronta.
Nessa aula você aprenderá:
- I. Implementar a vinculação de dados.
Nesta seção usaremos data binding (vinculação de dados) para popular um controle Flex do tipo input text com dados de e-mail de funcionários que sempre seguem a regra de primeironome.ultimonome@nomedaempresa.com.br.
I. Implementando vinculação de dados.
1. Baixe o arquivo aula_1_3_inicial.zip, descompacte-o em seu computador.
2. Abra o Flash Builder.
3. Importe o arquivo aula_1_3_inicial.fxp.
4. Abra o arquivo aula_1_3_inicial.mxml.
5. Vá para o modo de código (aba Source) localize o container FormItem com o Label Primeiro Nome:
6. No controle TextInput aninhado entre a tag <mx:FormItem>, adicione a propriedade id com o valor "primeiroNome", veja abaixo como deve ficar.
<mx:FormItem label="Primeiro nome:"> <s:TextInput id="primeiroNome" width="200"/> </mx:FormItem>
7. Localize o controle FormItem com o Label Último nome:
8. No controle TextInput aninhado, adicione a propriedade id com o valor ultimoNome.
<mx:FormItem label="Último nome:"> <s:TextInput id="ultimoNome" width="200"/> </mx:FormItem>
9. Localize o controle FormItem com o Label Email:
10.No controle TextInput aninhado, vincule o valor da propriedade text aos valores das propriedades text primeiroNome e ultimoNome separadas por um ponto. Acrescentando ainda @aprendofacil.com.br ao final da propriedade text.
<mx:FormItem label="Email:">
<s:TextInput text="{primeiroNome.text}.{ultimoNome.text}@aprendofacil.com.br" width="300"/>
</mx:FormItem>
11. Salve o arquivo.
12. Rode a aplicação.
13. Digite Alessandra no textInput Primeiro nome.
14. Digite Rodriguez no textInput Segundo nome.
Você verá o campo de e-mail ser preenchido com um endereço de a-mail baseado no primeiro nome e no último nome no terceiro controle Text Input (veja Figura 2).
Figura 2: Usando os campos primeiro e último nome para criar um endereço de e-mail padronizado.
15. Mude o primeiro nome para Antonio Carlos.
Repare que o endereço de e-mail é criado com um espaço entre os nomes (Figura 3).
Figura 3: Editando o primeiro nome.
16. No campo de e-mail remova o espaço entre os nomes. Você vera que a edição do campo de e-mail não afeta os valores dos campos primeiro e último nome (Figura 4). Este é um exemplo de one-way binding.
Figura 4: Mudando endereço de e-mail não afeta os outros campos.
Conhecimentos adquiridos
Neste tutorial você aprendeu como criar e reutilizar um componente Flex personalizado e a vincular dados.
Agora já sabemos como responder, por exemplo as perguntas abaixo:
P.1. Que caractere é usado para vinculação no Flash Builder?
R.1. O endereço de e-mail desse exemplo é gerado usando texto estático e one-way binding.
P.2 Por que este tipo de vinculação de dados é considerado um one-way binding?
R.2. Porque uma alteração no valor nome afeta o valor de endereço de e-mail, mas a mudança no endereço de e-mail não afeta o valor do nome.
Comments (1)
Sei que esse tutorial já é um pouco antigo, mas fiquei sabendo dele somente agora, tenho acompanhado com entendimento bem claro até o momento.
Gostaria de saber se há alguma forma de o próprio flex, suprimir o espaço em tempo de execução, sem a intervenção do usuário ?