Generating HTML wrapper using ant script

Further to my post of compiling flex projects using Ant script, in this post I am going to tell that how you can generate the html wrapper file for the swf that is compiled using Ant.

If you haven’t read that post I request you to read it by clicking here.

In order to generate the html wrapper through Ant, we need to add only one extra tag, that is the “html-wrapper” tag, within the target tag in the Ant script.

In this tag, we have to define few important things like the title of the application (also shown in the browser title), the SWF name,  the width and height of the swf object, and a few other things like the minimum version of flash player that is required to run the swf correctly.

in order to add this tag to the previous example, first we will declare a few more properties, following is what I added:

<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="100%" />
<property name="APP_HEIGHT" value="100%" />

Next is that we need to add the html-wrapper tag, note that this tag should be added within the existing target tag if you want to generate the swf and the html at the same time, else you can make a different target only for generating the wrapper.

Here is how my html-wrapper tag looks like:

<html-wrapper title="${APP_TITLE}" file="index.html"
            application="app" swf="Main" width="${APP_WIDTH}"
            height="${APP_HEIGHT}" version-major="${version.major}"
            version-minor="${version.minor}" version-revision="${version.revision}"
            template="express-installation"
            output="${DEPLOY_DIR}" />

Note that I am using the properties that I defined above within this tag as attributes. It is also important to note that the swf attribute contains the name of the swf without the extension(.swf). After adding this much to my already existing build.xml, following is how my entire build.xml looks like:

<project name="My App Builder" basedir=".">
    <taskdef resource="flexTasks.tasks" classpath="${basedir}/libs/flexTasks.jar"/>
    <property name="FLEX_HOME" value="C:/Program Files/Adobe/Flex Builder 3/sdks/3.0.0"/>
    <property name="APP_ROOT" value="src"/>
    <property name="DEPLOY_DIR" value="D:/output"/>
    <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="100%" />
    <property name="APP_HEIGHT" value="100%" />
    <target name="main">
        <mxmlc file="${APP_ROOT}/Main.mxml"
            output="${DEPLOY_DIR}/Main.swf">
        <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
        <source-path path-element="${FLEX_HOME}/frameworks"/>
        </mxmlc>
        <html-wrapper title="${APP_TITLE}" file="index.html"
            application="app" swf="Main" width="${APP_WIDTH}"
            height="${APP_HEIGHT}" version-major="${version.major}"
            version-minor="${version.minor}" version-revision="${version.revision}"
            template="express-installation"
            output="${DEPLOY_DIR}" />
    </target>
</project>

And that’s it, now this build.xml is ready to be run as an Ant build. To run it, right click and select – Run As – Ant build, and it will generate the following files in the output directory:

AC_OETags.js
index.html
Main.swf
playerProductInstall.swf

Launch index.html to run the application.

 

原文：http://flex.gunua.com/?p=112