Detalhes

Categoria: Flex

Atualização: Sexta, 24 Julho 2009 10:31

Autor: vovó Vicki

Acessos: 7380

O ActionScript é uma linguagem de programação muito versátil que permite, entre outras coisas, criar novos objetos em tempo de execução e associar efeitos a estes objetos. Neste tutorial veremos como fazer esta "mágica" no Flex.

Se você estiver seguindo esta série de tutoriais, então ainda deve estar com o projeto aloMundo.mxml aberto no Flex Builder. Se não, faça o download do projeto do tutorial anterior (todos os projetos estão na seção de downloads/tutoriais da Aldeia) e importe-o para o Flex Builder clicando em File/Import/Flex Project para podermos prosseguir.

Vitaminando o ActionScript

Vamos usar o arquivo aloMundo.as para criar um novo painel. Esta ação será executada assim que um novo botão no nosso aplicativo for clicado. Além de criar um novo painel em tempo de execução, queremos que este painel seja mostrado com um efeito especial.

Clique na aba aloMundo.as do painel de edição. Nosso plano é escrever uma função para criar um painel. Antes de prosseguir, vamos dar uma olhada no que já existe neste arquivo.

A nova função receberá o nome de novoPainel() (viiiixi, isto é que é criatividade!). Então, vamos lá. Abra uma nova linha, comece digitando "private function novoPainel:void {" para abrir a área de edição da nova função. A seguir, informe o Flex Builder que você quer um objeto Panel com "var painel:Panel = new Panel;". Aqui é preciso notar duas coisas.

A primeira é o modo como se cria variáveis: indica-se com var que se trata de uma variável, dá-se o nome (painel) e o tipo (:Panel) da mesma e lhe atribuímos um valor (= new Panel). Observe que o valor da variável pode ser um objeto, como neste caso um novo painel.

Para que o novo painel possa ser criado é preciso importar o modelo do painel (que é chamado de classe). Para ajudar os que costumam esquecer de fazer isto, o Flex Builder cuida da importação e coloca automaticamente no início do script a linha "import.containers.Panel". É mordomia na hora de criar novos objetos, mas o inverso não é válido. Se deletarmos a linha com a variável, a linha com importação NÃO é tirada. Neste caso, ao executarmos o aplicativo, uma importação desnecessária será feita sobrecarregando inutilmente o sistema. Esta limpeza do código depende exclusivamente do programador.

Veja como ficou o código:

Além de criarmos um objeto Panel, também criamos um componente Effect do tipo WipeDown. A seguir estabelecemos os valores de algumas das propriedades do painel - linhas 18 a 23. Na linha 24 determinamos que o alvo do efeito WipeDown (fazer aparecer de cima para baixo) é o painel. Na linha seguinte inserimos em this (cuja tradução é este e se refere ao aplicativo) o objeto filho (addChild significa adicionar filho) painel. Finalmente, mandamos executar o efeito com efeito.play().

Fazendo acontecer

Agora só falta criar um botão e atrelar seu evento click à função novoPainel(). Clique na aba aloMundo.mxml da área de edição e trabalhe no modo visual (clique no botão Design). Coloque um componente Button logo acima do botão já existente. No painel de propriedades (Common) mude os valores da ID para botao2, Label para Novo painel e On click para {novoPainel();}. Se você der uma espiada no script MXML (clique no botão Source) o código vai estar assim:

Agora é só pregar o chinelo. Rode o aplicativo e se divirta vendo um novo painel surgir na tela. Cada vez que você clicar o botão [Novo painel], um novo painel será criado e colocado nas mesmas coordenadas, ou seja, os painéis são colocados um em cima do outro. O certo seria evitar de criar painéis se já existir um, mas isto é um assunto que será tratado mais pra frente. Por enquanto é isto.

Espero que tenham se divertido e aprendido mais alguma coisinha.

Abraço da vó

Você pode fazer o download deste projeto na seção de downloads/tutoriais da Aldeia.