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 ouvir 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.

Uma das novas vantagens de usar a tecnologia Flex é que você pode escrever vários MXML e criar apenas um arquivo final .swf, porque 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 se tira quantas formas diferentes podemos usar o MXML.

Vamos à prática, criando um "olá mundo" novamente usando alguns containers do Flex Builder.

Abra seu Flex Builder e crie um novo projeto.

A primeira tag que vou usar para criar um container é a <mx:Panel>.

O tag <mx:Panel> está localizado na classe mx.containers.Panel. Veja um mapa de seus métodos, atributos e propriedades abaixo.

<mx:Panel

Properties
layout="vertical|horizontal|absolute" status="" title="" titleIcon="null"

Styles
borderAlpha="0.4" borderThicknessBottom="NaN" borderThicknessLeft="10" borderThicknessRight="10" borderThicknessTop="2" closeButtonDisabledSkin="CloseButtonDisabled" closeButtonDownSkin="CloseButtonDown" closeButtonOverSkin="CloseButtonOver" closeButtonUpSkin="CloseButtonUp" controlBarStyleName="null" cornerRadius="4" dropShadowEnabled="true|false" footerColors="null" headerColors="null" headerHeight="Based on style of title" highlightAlphas="[0.3,0]" horizontalAlign="left|center|right" horizontalGap="8" modalTransparency="0.5" modalTransparencyBlur="3" modalTransparencyColor="#DDDDDD" modalTransparencyDuration="100" paddingBottom="0" paddingTop="0" roundedBottomCorners="false|true" shadowDirection="center|left|right" shadowDistance="2" statusStyleName="windowStatus" titleBackgroundSkin="TitleBackground" titleStyleName="windowStyles" verticalAlign="top|middle|bottom" verticalGap="6"
Effects
resizeEndEffect="Dissolve" resizeStartEffect="Dissolve"

Events
close="No default" > ... child tags ...
</mx:Panel>

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> são usados 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"><br />
<!-- 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 em Actionscript. É bem simples:

private function aumentePainel():void{

}

Criei minha função como privada, apenas para esse exemplo. Assumi a ela que não retornasse nenhum valor para mim, porque 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 tivessem o CEP de cada rua, nome e número. Tudo seria uma verdadeira bagunça.

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 instância 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 é com isso que você vai lidar em algumas partes de seus futuros projetos com o Flex. Espero que tenham gostado e qualquer dúvida só participar da lista Flex-Brasil ou entrar em contato comigo..

Forte abraço a todos.