Vamos mostrar formas de comunicar dois componentes customizados, que hora trataremos como classe e horas como custom components.
A princípio veremos como passar valores de custom component para outro e em um segundo post iremos passar eventos.
Espero que gostem e seja útil.
O Flex é uma ferramenta muito eficiente e um dos vários motivos para isso é a grande quantidade de componentes já existentes, pois imagine se você tivesse de construir, por exemplo, um componente do tipo Slider, você teria que dedicar um tempo escrevendo este componente, mas este e outros vários componentes já estão incorporados no Flex SDK 3. Mesmo assim se você tiver uma necessidade muito específica, como por exemplo, de construir um Slider e um Label que mostre o valor do Slider, e tenha de usar esta combinação de componentes diversas vezes no projeto, seria tedioso ter que ficar montando esta estrutura todas as vezes em que ela fosse necessária, por isso temos à nossa disposição os MXML Components ou também chamados de Custom Components que são como que classes que podemos montar nossa estrutura uma única vez e usá-la a qualquer momento quantas vezes for preciso.
Bem, como o objetivo desse post é mostrar a comunicação entre esses componentes, vamos ao trabalho.
São dois os tipos de comunicação entre Custom Components que queremos abordar aqui:
Um tipo seria de passar valores de um para outro e vice-versa e o outro tipo seria de comunicar um evento.
Apresentando uma situação:
Digamos que você tenha em seu projeto dois Custom Components, o CC1 seria o do exemplo acima, ( um Slider e um Label ) e o outro, CC2, seria um teclado formado por 6 botões numéricos, um botão para o "Ok", um Label que exibe o valor do botão numérico pressionado e um botão para limpar o Label... ok..
Abaixo estão os dois Custom Components:
Exemplificando o primeiro tipo (Passando valores):
No cenário acima, quando você pressionar uma tecla numérica no CC2 e depois pressionar "Ok" o valor da tecla irá fazer com que o Slider lá do outro componente, o CC1, se mova para este tal valor e o Label o exiba.
Exemplificando o segundo tipo (Passando eventos):
Imagine que nesse mesmo projeto teríamos a necessidade de que quando o usuário passar o mouse sobre algum número do CC2 o Slider do CC1 tenha que ficar com a cor de fundo diferente e quando o mouse sair de sobre o número o Slider volte à cor de origem.
Obs.: Trataremos desse segundo tipo em um próximo post.
Temos, então, duas situações diferentes e formas diferentes de implementá-las, mas o projeto é o mesmo, então vamos montar o ambiente:
Crie um novo projeto no Flex chamado "com_custom_comp".
Logo de cara crie os componentes indicados em nosso exemplo.
Coloque os dois componentes em seu Stage como se fossem componentes nativos do Flex, simplesmente arratando-os.
Pronto, o ambiente está montado e agora podemos começar a codificar os tipos de comunicação.
Implementando o primeiro tipo (Passando valores):
O primeiro tipo, que é o de passar valor, é um tanto intuitivo e segue a lógica mais próxima da que estamos habituados a trabalhar, então vamos mostrar como se faz.
No com_custom_comp.mxml:
Repare que temos alguns elementos importantes no código acima:
- A variável publica "valor" do tipo int ( linha10 ), servirá para receber o valor numérico do CC2, pois quando ela receber qualquer valor, este será espelhado imediatamente para o CC1, ou seja, ela é uma variável de ligação entre os dois Custom Components;
- As TAGs "ns1:cc1" ( linha 16 ) e "ns1:cc2" (linha 20) são os Custom Components em questão.
No cc2.mxml:
No código acima, quando o usuário clicar em algum botão numérico ( linhas 24 a 29 ) o "TextInput" ( linha 23 ) é alterado, exibindo o valor correspondente, mas é quando o botão "OK" ( linha 32 ) é pressionado que acontece o envio do valor para o outro componente.
A função "__exportar_valor ()" ( linhas 8 a 11 ) manipula a variável "valor", porém ela está presente em outra classe, então como acessá-la?
A resposta vem a seguir.
Vejamos a estrutura hierárquica do nosso pequeno sistema:
Verificamos claramente na ilustração acima que temos 3 classes que na verdade são os arquivos ou os componentes:
- main class com_custom_comp: Esta é a classe que abriga os outros dois Custom Components e a variável "valor".
- class CC1: Podemos dizer que este Custom Component fica lendo a variável "valor", então qualquer alteração nesta variável é refletida no Custom Component CC1.
- class CC2: Este Custom Component também tem uma relação com a variável "valor", mas apenas de escrita.
- var valor: Esta variável foi declarada na class mãe e para que os dois Custom Components acessem-na é preciso um recurso.
Repare que no Custom Component CC2 existe uma chamada para a classe "Application" seguido do método "application" ( Application.application.valor ) que diz para o CC2 olhar para os atributos, métodos e eventos da classe mãe com_custom_comp e neste caso para a variável "valor".
Sendo assim, a função citada acima "__exportar_valor ()" diz para o CC2 olhar para a variável "valor" que está na classe mãe e atribui o valor do "TextInput" a ela. Então pense que a variável apenas recebeu um valor que veio do CC2, ok.
No cc1.mxml:
Agora sim é que tudo se complementa, pois o Slider, presente no CC1, está recebendo um valor de "Application.application.valor" ( linha 10 ) , isto é, da mesma forma que acontece com o caso do CC2, o CC1 consegue acessar a variável "valor" por causa das chamadas "Application.application".
Dêem uma olhada na aplicação em funcionamento:
No próximo post trataremos de como comunicar eventos, que é o segundo tipo citado acima.
Até mais.
0 comentários:
Postar um comentário