Hola mundo Flex compilado con Ant

En este post vamos a ver como hacer un hola mundo en flex y construirlo con ant, esto les puede servir si no pueden obtener el flex builder o el pluguin para eclipse, pues de esta manera podriamos construir nuestros proyectos sin embargo sera un poco mas de trabajo.

Lo que necesitamos :

• Ant descargar
  
• Flex SDK descargar
• Editor de textos (Les recomiendo notepad++ descargar)

Que es flex ?

Flex es un conjunto de librerías o framework – para desarrollo de interfaces de usuario. Este framework usa ActionScript 3.0 (AS3). Si el código AS3 que se programe utiliza los componentes y métodos definidos en el Flex framework, entonces se esta usando Flex. Es decir, AS3 no es por si solo flex.

Tendremos la siguiente estructura de nuestro proyecto

• Carpeta raiz del proyecto: hello_flex_ant
• dentro de la carpeta raiz tendremos los archivos build.xml, build.properties, y una subcarpeta src
• dentro de la subcarpeta src creamos una subcarpeta flex y dentro de esta crearemos el archivo HelloFlexAnt.mxml

Les debe quedar asi:

En el archivo HelloFlexAnt.mxml colocaremos lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 xmlns:mx="http://www.adobe.com/2006/mxml"
 viewSourceURL="src/HelloWorld/index.html"
 horizontalAlign="center" verticalAlign="middle"
 width="300" height="160"
>
 <mx:Panel
     paddingTop="10" paddingBottom="10"
     paddingLeft="10" paddingRight="10"
     title="My Application"
 >
     <mx:Label text="Hello World!" fontWeight="bold"
            fontmxmlString">24"/>
 </mx:Panel>
</mx:Application>

En al archivo build.properties colocaremos la ruta donde tengamos instalado el SDK de flex, o podemos ponerlo directamente el el archivo build.xml

Ejemplo en build.properties :

ruta.FLEX_HOME = C:/flex_sdk_3

Ejemplo en build.xml

<property name="FLEX_HOME" location="/Users/mykola/java/flex">

Si colocamos la ruta de flex en el build properties entonces en nuestro build.xml tendremos la siguientes linas:

<property file="build.properties">

<property name="FLEX_HOME" location="${ruta.FLEX_HOME}">

El build.xml contendra lo siguiente:

<?xml version="1.0"?>
<project name="HelloFlexAnt" default="all">
<!-- Init the build process -->
<target name="init" unless="initialized">
<!-- Name of project and version -->
<property name="FLEX_HOME" location="/Users/mykola/java/flex"/>
<property name="proj.name" value="${ant.project.name}" />
<property name="proj.shortname" value="${ant.project.name}" />
<property name="version.major" value="0" />
<property name="version.minor" value="9" />
<property name="version.revision" value="0" />
<property name="APP_TITLE" value="Sample Application" />
<property name="APP_WIDTH" value="800" />
<property name="APP_HEIGHT" value="600" />
<!-- Global properties for this build -->
<property name="build.dir" location="${basedir}/build" />
<property name="flex_src" location="${basedir}/src" />
<path id="project.classpath">
<pathelement path="${java.class.path}" />
</path>
<taskdef resource="flexTasks.tasks"
classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />
<echoproperties/>
<property name="initialized" value="true" />
<mkdir dir="${build.dir}" />
</target>
<!-- Default target: clean and build the application -->
<target name="all" depends="init">
<antcall target="clean" />
<antcall target="build" />
</target>
<!-- Compile Flex files -->
<target name="compile.flex" depends="init">
<property name="module"
value="${ant.project.name}"
description="The name of the application module." />
<mxmlc file="${flex_src}/${module}.mxml"
keep-generated-actionscript="true"
output="${build.dir}/${ant.project.name}/${module}.swf"
actionscript-file-encoding="UTF-8"
incremental="true"
context-root="${ant.project.name}"
debug="true">
<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml" />
<source-path path-element="${FLEX_HOME}/frameworks" />
<compiler.source-path path-element="${flex_src}" />
</mxmlc>
<html-wrapper title="${APP_TITLE}"
file="index.html"
application="app"
swf="${module}"
width="${APP_WIDTH}"
height="${APP_HEIGHT}"
version-major="${version.major}"
version-minor="${version.minor}"
version-revision="${version.revision}"
history="true"
template="express-installation"
output="${build.dir}/${ant.project.name}/" />
</target>
<!-- Build the application -->
<target name="build" depends="init">
<antcall target="compile.flex" />
</target>
<!-- Clean build files -->
<target name="clean" depends="init">
<delete dir="${basedir}/generated" />
<delete dir="${build.dir}" />
</target>
<target name="usage" description="Usage documentation">
<echo>
all - clean and build the project
</echo>
</target>
</project>

Este build lo encontre en este blog : blog on programming

Para compilar nuestro hola mundo abrimos una consola de comandos, y nos vamos hasta la carpeta de nuestro proyecto donde se encuentra nuestro build xml, y ahi ejecutamos ant all, para observar lo que se ha compilado entramos a la carpeta build y ahi podemos darle en el index.html o darle en el archivo swf que se genera si tenemos el reproductor de flash

El codigo del hola mundo desde la pagina de flex hola mundo flex

Y al final debemos tener lo siguiente: