Flex 2.0 - Usando MXML

Seguindo a rotina do artigo anterior de introdução ao Flex Builder, nesse artigo você vai aprender como usar o MXML em suas aplicações.

por Igor Costa

Seguindo a rotina do artigo anterior de introdução ao Flex Builder, nesse artigo você vai aprender como usar o MXML em suas aplicações.
Para isso, tentei seguir uma linha de raciocínio simples para que todos iniciantes nessa nova tecnologia possam aprender o mais rápido possível.

Como é possível criar aplicações Flex?

Simples como mostrado no artigo anterior o Flex é baseado em duas linguagens Actionscript e MXML, ambos são complementares. MXML é um XML comum que você já tá cansado de ouvirem falar, porém o que muitos podem confundir é que MXML serve apenas para criar layouts de interfaces para aplicações, o que é um argumento totalmente errado. MXML tanto cria layouts das aplicações como também serve para criar aspectos não visuais para camadas secundárias que ligam a interface com o banco de dados e vice-versa.

Não se espante com minha comparação de HTML com MXML, porque ambos tem a mesmas características as únicas coisas que os destigem um do outro é que o MXML tem tags que definem por exemplo um datagrind, uma tab, um accordions, menus de todos os formatos e navegação por árvores. Mas o que é mais legal na linguagem é que com a ajuda do actionscript, você pode extender sua capacidade de criação e criar novos tags.
E uma das novas vantagens de usar a tecnologia Flex é que você pode escrever vários MXML e criar apenas um arquivo final o .swf, por que quando você cria um aplicativo com vários MXML ou até mesmo um, você publica essa aplicação usando apenas um arquivo .swf que é focado na plataforma Flash Player, essa com toda certeza, não depende apenas do navegador para ser executada, então dái se tira quantas formas diferentes podemos usar o MXML.

Vamos à prática, criar um olá mundo novamente usando alguns containers, do Flex Builder. Abra seu Flex Builder e crie um novo projeto.

O primeiro tag que vou usar para criar um container é o tag <mx:Panel>
O tag <mx:Panel> está localizado na classe mx.containers.Panel, veja um mapa de seus métodos, atributos e propriedades abaixo.

Começamos então a delinear nosso código:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel> </mx:Panel> </mx:Application>

Após isso vamos dando alguns atributos ao painel como Título, altura, comprimento posição x e y.

<mx:Panel title="Flex 2 MXML" width="200" height="100" x="50" y="50">
Feito isso mude para o modo Design e ajuste a posição conforme você deseja.

Eu adicionei alguns tags para criar algum layout dentro do Panel, apenas para usar mais recursos do MXML, como você pode ver abaixo.
Os tags adicionais <mx:Title>, é usado como um div no HTML, você cria espaços e lacunas para posicionar certos objetos que você deseja. E o tag
<mx:Button>, o próprio nome já diz, para adicionar botão.
<mx:Panel title="Flex 2 MXML" width="312" height="212" x="50" y="50">
<!-- parte superior--> <mx:Tile width="100%" height="80%"> </mx:Tile> <!-- parte inferior --> <mx:Tile width="100%" height="20%" paddingLeft="60"> <mx:Button label="OK"/> <mx:Button label="Cancelar"/> <!-- colocar botão--> </mx:Tile> </mx:Panel>

Ok, feito o layout, vou usar agora o tag <mx:Script>, que tem como objetivo adicionar Actionscript ao seus aplicativos feitos em MXML.
Automaticamente quando você insere <mx:Script>, o editor cria isso.

<mx:Script> <![CDATA[ ]]> </mx:Script>

É dentro dos colchetes do CDATA que o Actionscript vai ser lido pelo compilador do MXML.

O que quero fazer é criar uma função que ao clicar no botão "OK" o meu painel aumente de tamanho. Então para isso não precisa criar algo ultra moderno ou algo como Poxa sou O Cara em Actionscript, é bem simples

private function aumentePainel():void{

}

Criei minha função como privada apenas para esse exemplo que irei usar mesmo e assumi a ela que não retornasse nenhum valor para mim, por que apenas vou setar novos valores a ela.
Para que funcione, como todo mundo sabe na plataforma Flash Player tudo é Objeto e Objeto precisa ter seu endereço registrado, é como em nossas casas, imagine se o correios não tivesse o CEP de cada rua, nome e número, tudo seria uma verdadeira bagunça. Então é o mesmo procedimento para tudo que você for usar no Flex você precisa setar o seu endereço, que nesse caso voltamos ao nosso tag <mx:Panel> e adicionamos o atributo id="". O id funciona como a instância do objeto como é igual ao nosso querido e conhecido Flash. Então vou lá no tag e adiciono o atributo id, com a instancia de exemplo.

Voltemos então ao nosso Actionscript.

private function aumentePainel():void{

// você adiciona a instancia que foi setada no caso foi "exemplo"
exemplo.width = 500;
exemplo.height = 500;
}

Pronto sua função tá pronta, vamos no tag <mx:Button> com o label "OK" e adicione o evento mouseDown="".

Dentro do evento, coloque o nome da função que você acabou de criar aumentePainel();
Que resulta nisso.
<mx:Button label="OK" mouseDown="aumentePainel();"/>
Feito isso, veja como fica o MXML final.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private function aumentePainel():void{ exemplo.width = 500; exemplo.height = 500; } private function voltaPainel():void{ exemplo.width = 310; exemplo.height = 200; } ]]> </mx:Script> <mx:Panel id="exemplo" title="Flex 2 MXML" width="312" height="200" x="50" y="50"> <!-- parte superior--> <mx:Tile width="100%" height="80%"> </mx:Tile> <!-- parte inferior --> <mx:Tile width="100%" height="20%" paddingLeft="60"> <mx:Button label="OK" mouseDown="aumentePainel();"/> <mx:Button label="Cancelar" mouseDown="voltaPainel()"/> <!-- colocar botão--> </mx:Tile> </mx:Panel> </mx:Application>

Entretanto, uma coisa bem legal do MXML é que você pode escrever folhas de estilo CSS, igualzinho como no HTML apenas declarando as tags ou atribuindo classes feitas no CSS ao seus objetos criados no Flex.
Veja como foi feito.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private function aumentePainel():void{ exemplo.width = 500; exemplo.height = 500; } private function voltaPainel():void{ exemplo.width = 310; exemplo.height = 200; } ]]> </mx:Script> <mx:Style> Panel { color:#222; background-color:#99cc66; border-color:#000; } </mx:Style> <mx:Panel id="exemplo" title="Flex 2 MXML" width="312" height="200" x="50" y="50"> <!-- parte superior--> <mx:Tile width="100%" height="80%"> </mx:Tile> <!-- parte inferior --> <mx:Tile width="100%" height="20%" paddingLeft="60"> <mx:Button label="OK" mouseDown="aumentePainel();"/> <mx:Button label="Cancelar" mouseDown="voltaPainel()"/> <!-- colocar botão--> </mx:Tile> </mx:Panel> </mx:Application>

Bom basicamente é isso que você vai lhe dá em algumas partes de seus futuros projetos com o Flex. Espero que tenham gostado e qualquer dúvida só participar da lista Flex-Brasil.

Forte abraço a todos.