domingo, 19 de julho de 2009

Hello World no Flex - MXML

O que vc vai precisar:

- Adobe Flex SDK 4
Faça download em http://opensource.adobe.com/flex
Eu estou usando a versão 4.0 Beta 1 (é o ZIP com mais de 100MB)

- ant 1.7.0
O de sempre:
apt-get install ant

Descompacte a SDK em algum lugar. Eu coloquei em /opt/flex_sdk
Dentro desse diretório, descompacte também o arquivo runtimes/player/10/lnx/flashplayer.tar.gz (se usar windows, não precisa, mas vai ter que colocar ".exe" em tudo quanto é canto)

Talvez vc precise acertar as permissões (leitura para todos, execução no "bin/*" e no "runtimes/player/10/lnx/flashplayer/flashplayer". Eu precisei. (Dica para dar permissão em todos os diretórios de 1x: "find . -type d -exec chmod uog+x {} \;")

Agora é preciso criar um diretório com o código Flex. É, na verdade, apenas um "hello world" com um MXML. No Flex, a interface fica em um XML e o código é em Action Script. Particularmente, gosto de separação assim (lembra o Glade e a libglade).

Arquivo HelloWorld.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="red">
<mx:Label text="Hello world!" color="white"/>
</mx:Application>


Sim, só isso, é um hello world basicão mesmo.

Agora a parte do ant. Isso é opcional, mas permite evitar repetir muitas vezes os mesmos comandos. Para isso, criamos um arquivo chamado build.xml

Arquivo build.xml
<project name="HelloWorld" default="compile">
<property name="sdkdir" value="/opt/flex_sdk"/>
<property name="flashplayer" value="${sdkdir}/runtimes/player/10/lnx/flashplayer"/>
<property name="flex.mxmlc" value="${sdkdir}/bin/mxmlc" />
<property name="dest.dir" value="./bin" />

<target name="init">
<delete dir="${dest.dir}" />
<mkdir dir="${dest.dir}" />
</target>

<target name="compile" depends="init">
<exec executable="${flex.mxmlc}" failonerror="true">
<arg line="-output '${dest.dir}/HelloWorld.swf'"/>
<arg line="HelloWorld.mxml"/>
</exec>
</target>

<target name="run">
<exec executable="${flashplayer}" failonerror="true">
<arg line="'${dest.dir}/HelloWorld.swf'"/>
</exec>
</target>
</project>


O que temos aqui... vejamos:
"<project>" é só a identificação do projeto.
o "default" é a ação ("target") que será executado quando chamarmos o ant sem argumentos
"<property>" funciona como uma veriável que podemos usar depois, nos comandos. Assim, ficou centralizado a localização do SDK e do FlashPlayer.
"<target>" é cada uma das ações que podemos executar com o ant.

No fim, isso só vai chamar o "mxmlc" (que é o compilador) com um parâmetro indicando para criar o arquivo "HelloWorld.swf" a partir do "HelloWorld.mxml".

Para compilar, é só chamar:

ant

Para executar dentro do flash player:

ant run

Era isso.

Documentação da Adobe (incluindo o Flex):
http://livedocs.adobe.com

Fontes:
https://admin.adobe.acrobat.com/_a200985228/p77346236/ (é um screencast em pt-BR)
http://eclipse.sys-con.com/node/309503
http://www.nutrixinteractive.com/HelloWorld/srcview/source/HelloWorld.mxml.html

Nenhum comentário: