Changing the default HTML template of Flex
On June 24, 2008, Flex - 4 CommentsJust something that came to my mind the other day. Flex is using a rather ‘old’ way of embedding, we (me and my collegues) are more fond of the SWFObject embedding. So I was thinking, is it possible to change the default template of Flex. The Flex docs told me that I should simply change the files in [FLEX DIR]\Flex SDK 2\resources\html-templates. So I changed those files, restarted flex and…. nothing…
But I don’t give in that easily, there must be a way to change the template.So I searched in the flex builder dir for html template files and I found the real template files in [FLEX DIR]\plugins\com.adobe.flexbuilder.project_2.0.155577\resources\html-templates.zip
So this is what my template file looks like now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Product van: theFactor.e
Friesestraatweg 215 a
Groningen
www.tfe.nl
050-5757888
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="AUTHOR" content="theFactor.e" />
<meta name="googlebot" content="index,archive,follow" />
<meta name="robots" content="index,archive,follow" />
<title>${title}</title>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/history.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
var flashvars = {historyUrl: "history.htm%3F&lconid=" + lc_id};
var params = {};
var attributes = {};
swfobject.embedSWF("${swf}.swf",
"${application}",
"${width}",
"${height}",
"${version_major}.${version_minor}.${version_revision}",
"expressInstall.swf",
flashvars,
params,
attributes);
//-->
</script>
<style type="text/css">
html, body {
margin: 0px;
overflow:hidden;
width: 100%;
height: 100%;
}
.${application} {
width: ${width};
height: ${height};
}
</style>
</head>
<body>
<div id="${application}">
<!-- Include a screenshot of the application here, with the install button on top of it -->
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<iframe name="_history" src="history.htm" frameborder="0" scrolling="no" width="0" height="0"></iframe>
</body>
</html> |
It’s now sitting in a valid XHTML page, using SWFObject1.5 SWFObject 2.0 (tnx Boris 
).
The downside is that flex keeps copying the AC_OETags.js and the payerProductInstall.swf to the html-template dir. Even if you delete them from the zip file. I haven’t found a way around it, but if you just delete them in flex, they’re gone.
What others have to say:
Looks more than swfobject 2.0 than 1.5
I’ve just posted an article on Using a custom template in flex builder 3, I believe this should answer the questions you are having.
http://www.hemtalreja.com/?p=136
Enjoy!
-Hem
Well that’s another way, but that way you have to edit your settings for each project. My solution works straight out of the box, for every new flex project you create.
Thanks for sharing your experience!
Leave a Reply