Building a Custom HTML Wrapper with ANT

In 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 wrapper provided.

In many applications you’ll probably want the application focused by default, this javascript reliant functionality is not provided in the html-wrapper templates and there is no way to change the template files when using the html-wrapper FlexTask task. Now we need to create a custom wrapper and use ANT to produce it everytime we build our application.

Make The Template
First, you need to make the template that you will be using for your html file. Here is mine:

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

<html lang="en">



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<link rel="stylesheet" type="text/css" href="history/history.css" />


<title>@application@</title>
<script src="AC_OETags.js" language="javascript"></script>


<script src="history/history.js" language="javascript"></script>


<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">

</script>
</head>

<body scroll="no" onLoad="@application@.focus()">
<script language="JavaScript" type="text/javascript">

</script>

<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="@application@" width="@width@" height="@height@"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="@swf@.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="SeamlessTabbing" value="false"/>
<param name='flashVars' value='j_username=<%= user %>&j_password=<%= cred %>'/>
<embed src="@swf@.swf" quality="high" bgcolor="@bgcolor@"
width="@width@" height="@height@" name="@application@" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer" >
</embed>
</object>
</noscript>
</body>
</html>

I titled this file index.template.html so that future devs know that this is the template for the index file. Pretty simple right.

If you look through the HTML code you will see many new notations that look like: @width@. These are tokens used by ANT, and can quickly be replaced by ANT using a replacetoken task.

The buildCustomWrapper Target
Now we just need to add in a new target to handle taking the template, replacing the tokens with variables from the build.properties.

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

<target name="buildCustomWrapper">
<echo>Building Custom Wrapper...</echo>
<copy file="${Template.file}" tofile="${Deploy.dir}/${Output.file}" overwrite="true">
<filterchain>
<replacetokens>
<token key="version_major" value="${Major.version}"/>
<token key="version_minor" value="${Minor.version}"/>
<token key="version_revision" value="${Revision.version}"/>
<token key="application" value="${Application.name}"/>
<token key="width" value="100%"/>
<token key="height" value="100%"/>
<token key="bgcolor" value="#FFFFFF"/>
<token key="swf" value="${Application.name}${timestamp}"/>
</replacetokens>
</filterchain>
</copy>
<echo>Built Custom Wrapper</echo>
</target>

That’s it. It’s really simple. We just add a few more variables into our build.properties and we are set.

1
2
3
4

#Template File
Template.file=index.template.html
#Output HTML File
Output.file=index.html

Continue adding the names of these new targets into your compileProject depends and your build file will continue to build all of your targets in order.

I usually keep the base html-wrapper template build along with my custom wrapper so that I can use the Adobe created express install scripts and history scripts.