Phillip, So this is what I came up with for the index.template.html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <!-- Smart developers always View Source. This application was built using Adobe Flex, an open source framework for building rich Internet applications that get delivered via the Flash Player or to desktops via Adobe AIR. Learn more about Flex at http://flex.org // --> <head> <title>${title}</title> <meta name="google" value="notranslate"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as the percentage of the height of its parent container, which has to be set explicitly. Fix for Firefox 3.6 focus border issues. Initially, don't display flashContent div so it won't show if JavaScript disabled. --> <style type="text/css" media="screen"> html, body { height:100%; } body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; } object:focus { outline:none; } #flashContent { display:none; } /* Added Code */ #container { width: 100%; height: 100%; position: relative; } #flashContent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #vessels { height: 410px; position: absolute; padding-top: 5px; width: 80%; z-index: 10; border: 1px solid; top: 50px; left: 10px; background-color: #103c87; } /* End Added Code */ </style> ........................Code truncated to fit....................................... <!-- Added Code --> <script language="javascript"> function toggle() { var ele = document.getElementById("vessels"); if(ele.style.display == "block") { ele.style.display = "none"; }else{ ele.style.display = "block"; } } </script> <!-- End Added Code --> </head> <body> <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show when JavaScript is disabled. --> <!- Added/changed Code --> <div id="container"> <div id="vessels" style="display: none;"> <script type="text/javascript"> width='98.5%'; //the width of the embedded map in pixels or percentage height=400; //the height of the embedded map in pixels or percentage border=1; //the width of border around the map. Zero means no border notation=false; //true or false to display or not the vessel icons and options at the left shownames=false; //true or false to display ship names on the map latitude=37.4460; //the latitude of the center of the map in decimal degrees longitude=24.9467; //the longitude of the center of the map in decimal degrees zoom=9; //the zoom level of the map. Use values between 2 and 17 maptype=3; //use 0 for Normal map, 1 for Satellite, 2 for Hybrid, 3 for Terrain trackvessel=0; //the MMSI of the vessel to track, if within the range of the system fleet=''; //the registered email address of a user-defined fleet to display remember=false; //true or false to remember or not the last position of the map </script> <script type="text/javascript" src="http://www.marinetraffic.com/ais/embed.js"></script> </div> <div id="flashContent"> <p> To view this page ensure that Adobe Flash Player version ${version_major}.${version_minor}.${version_revision} or greater is installed. </p> <script type="text/javascript"> var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); </script> </div> </div> <!-- End Added/Changed Code --> ............ code truncated to fit................................ </body> </html>
Then as you may notice there is no show hyperlink because you can add that to the HeaderControllerWidget.mxml instead.//Add this import import flash.external.*; //Add this new function private function showFleet():void { ExternalInterface.call("toggle"); } //Find this HGroup and change it: <s:HGroup id="linkBox" horizontalAlign="right" paddingRight="5" verticalAlign="middle"> <s:Label buttonMode="true" click="showAbout()" styleName="BannerSubtitle" text="{labelText}" useHandCursor="true" verticalAlign="middle" visible="{labelVisible == 'true'}"/> <s:Label buttonMode="true" click="showFleet()" styleName="BannerSubtitle" text="Toggle Fleet" useHandCursor="true" verticalAlign="middle" visible="true"/> </s:HGroup>
