A Better HTML Template for Flex 4
admin originally posted this on Saturnboy.
Adobe took a big step forward using swfobject.js to handle swf embedding in Flex 4’s index.template.html, but in my opinion they didn’t go quite far enough.
Here are my changes:
- Short and sweet, so I can understand what the hell is going on.
- Use Google AJAX Libraries API to include
swfobject.js. - No IE6 crap.
- No Browser History crap.
Here’s my current version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${application}</title>
<style type="text/css" media="screen">
html, body, #flashcontent { height:${height}; }
body { margin:0; padding:0; overflow:hidden; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
'${swf}.swf',
'flashcontent',
'${width}', '${height}',
'${version_major}.${version_minor}.${version_revision}',
'${expressInstallSwf}',
false,
{ 'bgColor':'${bgcolor}' });
</script>
</head>
<body>
<div id="flashcontent">
Flash is required. <a href="http://www.adobe.com/go/getflashplayer">Get it here!</a>
</div>
</body>
</html>Flashvars
Using flashvars is easy with SWFObject (see the embedSWF() method in the docs), just put them in as a Javascript hash like this:
<script type="text/javascript">
swfobject.embedSWF(
'${swf}.swf',
'flashcontent',
'${width}', '${height}',
'${version_major}.${version_minor}.${version_revision}',
'${expressInstallSwf}',
{ key1:'val1', key2:'val2', key3:'val3' },
{ 'bgColor':'${bgcolor}' });
</script>View Source
Lastly, here’s a little trick that I use to embed flash into a post on this blog (or anywhere else) that enables view source to work with a relative url, so I can leave the viewSourceURL attribute alone (defaults to viewSourceURL="srcview/index.html").
<script type="text/javascript">
swfobject.embedSWF(
'${swf}.swf',
'flashcontent',
'${width}', '${height}',
'${version_major}.${version_minor}.${version_revision}',
'${expressInstallSwf}',
false,
{ 'bgColor':'${bgcolor}', base:'.' });
</script>Adding the base parameter, and setting it to '.', tells the embedded SWF to lookup urls relative to itself. The net effect is that view source just works.