Loading of additional JS and CSS files in the HTML document
Problem
There is necessary to use additional JavaScript API in embedded application
Solution
JavaScript files are located on your server, and JSInterface will be used for their loading.
Detailed explanation
JSInterface allows to load external JavaScript and CSS files directly into an HTML page. To do this, you must specify a URL of file and a callback function that is called after ending of the downloading.
jQuery JavaScript library used for example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="20" height="20"
preinitialize="{JSInterface.initialize()}"
creationComplete="{creationCompleteHandler(event)}">
<mx:Script>
<![CDATA[
import aw.external.JSInterface;
protected const JAVA_SCRIPT_FILE:String = "jquery-1.2.6.js";
protected const CSS_FILE:String = "main.css";
protected function creationCompleteHandler(event:Event):void{
JSInterface.loadJavaScript(JAVA_SCRIPT_FILE, this.javaScriptLoadCompleteHandler);
JSInterface.loadCSS(CSS_FILE, this.CSSLoadCompleteHandler);
}
protected var $:Function;
protected function javaScriptLoadCompleteHandler(event:Object=null):void{
trace("JavaScript loaded!");
$ = JSInterface.window.$;
trace($("FONT")[0].innerHTML);
}
// FireFox will not call onload handler for <LINK/> tag
protected function CSSLoadCompleteHandler(event:Object=null):void{
trace("CSS loaded!");
}
]]>
</mx:Script>
</mx:Application>
After downloading of the JavaScript file, the downloaded code can use the JavaScript code, that is located in the HTML page, and all Flash applications of this page.
FireFox browser does not handle the event of CSS loading - onload and thus transferred function will not be called. To determine the end of CSS file downloading in FireFox you can use timeouts and, for example, to verify the existence of a specific style.
Look into attached archive file for example Flex Builder project.
