Building the HTML Wrapper with ANT

Again, building off the first post in this series: Using ANT to Build an Application, we are going to add another bit of functionality to our build.xml. This time, we will be building the html-wrapper via ANT.

Where we last left off
Our last build file looked like…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<?xml version="1.0" encoding="UTF-8"?>
<project name="Build File" basedir="." default="compileProject">




<description>Build Script</description>


<property file="./build.properties"
description="properities for builds" />


<tstamp>
<format property="timestamp" pattern="yyyyMMdd" />
</tstamp>


<taskdef resource="flexTasks.tasks" classpath="${FlexTasks.file}"/>




<target name="compileProject"
depends="cleanDeploy,buildWrapper,compileApplication"
description="compiles application"/>

<target name="cleanDeploy" description="Cleans the deploy file">
<echo>Deleting Deploy Directory...</echo>
<delete dir="${Deploy.dir}" failOnError="false"
includeEmptyDirs="true" />
<echo>Deleted Deploy Directory</echo>
<echo>Creating Deploy Directory...</echo>
<mkdir dir="${Deploy.dir}" />
<echo>Created Deploy Directory</echo>
</target>

<target name="compileApplication">
<echo>Compiling SWF To Deploy</echo>
<mxmlc file="${Src.dir}/${Application.name}.mxml"
incremental="false"
actionscript-file-encoding="UTF-8"
output="${Deploy.dir}/${Application.name}${timestamp}.swf"
debug="${Debug.Boolean}"
keep-generated-actionscript="false">
<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml" />
<default-background-color>0xFFFFFF</default-background-color>
<metadata>
<creator>Jonathan Campos</creator>
<publisher>UnitedMindset</publisher>
<language>EN</language>
</metadata>
<compiler.source-path path-element="${Src.dir}" />
</mxmlc>
<echo>Compiled SWF To Deploy</echo>
</target>



</project>

And our build.properties looked like…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

###############################################################################
#
# Compiler Properties
#
###############################################################################

# Flex SDK File Location
FLEX_HOME=C:/Program Files/Adobe/Flex Builder 3 Plug-in/sdks/3.5
#flextasks jar location
FlexTasks.file=flexTasks/flexTasks.jar
#deploy directory
Deploy.dir=deploy
#source directory
Src.dir=src
#debug flag
Debug.Boolean=false
#application name
Application.name=ANTBuildProject

Choose your Wrapper
In the wrapper task defined in FlexTasks.jar there are are 2 main variables that you need to be aware of, the first is template the second is history. A mixture of these two variables makes up the six different wrappers you can create using the wrapper task.

Later you can look at my post about creating your own custom wrapper, right now we are looking at the predefined wrappers.

The six options are:
Template: client-side-detection | History: false
Client-side detection only — Provides scripts that detect the version of the client’s player and return alternative content if the client’s player does not meet the minimum required version.

Template: client-side-detection | History: true
Client-side detection with history — Provides the same scripts as those in the client-side-detection template, but adds deep linking support.

Template: express-installation | History: false
Express installation — Provides scripts that support Express Install.

Template: express-installation | History: true
Express installation with history — Provides scripts that support Express Install and deep linking support.

Template: no-player-detection | History: false
No player detection — Provides a basic wrapper.

Template: no-player-detection | History: true
No player detection with history — Provides a basic wrapper with deep linking support.

The remaining options associated with your html wrapper should be pretty self explanatory. The options are:

application – application name
bgcolor – background color
file – name of the outputted file
height – of the swf in pixels or percentages
width – of the swf or percentages
output – directory to output to
swf – swf file name, do not include .swf, that is automatically added
title – of the html page
version-major / version-minor / version-revision – the required minimum version of the client Flash Player

The added wrapper task
With my selected options, my ANT task looks as such:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<target name="buildWrapper">
<echo>Building Wrapper...</echo>
<html-wrapper title="${Application.name}"
height="100%" width="100%"
bgcolor="#FFFFFF" file="${Application.name}.html"
application="${Application.name}"
swf="${Application.name}${timestamp}"
version-major="${Major.version}"
version-minor="${Minor.version}"
version-revision="${Revision.version}"
history="true"
template="express-installation"
output="${Deploy.dir}" />
<echo>Built Wrapper</echo>
</target>

The (Current) Final ANT File

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<?xml version="1.0" encoding="UTF-8"?>
<project name="Build File" basedir="." default="compileProject">




<description>Build Script</description>


<property file="./build.properties"
description="properities for builds" />


<tstamp>
<format property="timestamp" pattern="yyyyMMdd" />
</tstamp>


<taskdef resource="flexTasks.tasks" classpath="${FlexTasks.file}"/>




<target name="compileProject"
depends="cleanDeploy,buildWrapper,compileApplication"
description="compiles application"/>

<target name="cleanDeploy" description="Cleans the deploy file">
<echo>Deleting Deploy Directory...</echo>
<delete dir="${Deploy.dir}" failOnError="false"
includeEmptyDirs="true" />
<echo>Deleted Deploy Directory</echo>
<echo>Creating Deploy Directory...</echo>
<mkdir dir="${Deploy.dir}" />
<echo>Created Deploy Directory</echo>
</target>

<target name="buildWrapper">
<echo>Building Wrapper...</echo>
<html-wrapper title="${Application.name}"
height="100%" width="100%"
bgcolor="#FFFFFF" file="${Application.name}.html"
application="${Application.name}"
swf="${Application.name}${timestamp}"
version-major="${Major.version}"
version-minor="${Minor.version}"
version-revision="${Revision.version}"
history="true"
template="express-installation"
output="${Deploy.dir}" />
<echo>Built Wrapper</echo>
</target>

<target name="compileApplication">
<echo>Compiling SWF To Deploy</echo>
<mxmlc file="${Src.dir}/${Application.name}.mxml"
incremental="false"
actionscript-file-encoding="UTF-8"
output="${Deploy.dir}/${Application.name}${timestamp}.swf"
debug="${Debug.Boolean}"
keep-generated-actionscript="false">
<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml" />
<default-background-color>0xFFFFFF</default-background-color>
<metadata>
<creator>Jonathan Campos</creator>
<publisher>UnitedMindset</publisher>
<language>EN</language>
</metadata>
<compiler.source-path path-element="${Src.dir}" />
</mxmlc>
<echo>Compiled SWF To Deploy</echo>
</target>



</project>

The (Current) Final ANT Build Properties

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

January 19th, 2010 in Continuous Integration, Development | tags: ANT, html wrapper

Comments (3)

Building a Custom HTML Wrapper with ANT | The World In A State of FlexJanuary 20th, 2010 at 9:43 am

[...] the last part of this series you left with the ability to automatically generate your html-wrapper with the FlexTasks.jar provided html-wrapper task. This is extremely helpful, yet troublesome if you need even the smallest change to the html [...]

DaveJune 17th, 2010 at 11:33 am

How do you instruct the flex compiler to generate an HTML wrapper that contains “https” references instead of “http” references? For instance the codebase attribute in the object tag?