Creating JavaScript functions within an ActionScript class in AIR
These days I'm working on the O'Reilly AIR Cookbook creating the examples for the chapter on the HTMLLoader class.
The HTMLLoader class has a powerful method that lets you to load html content from a simple html string. The method is part of the public methods of the HTMLLoader class: loadString().
It accepts a parameter that contains the html content to load within an istance of the HTMLLoader class.
With this simple code you'll load the htmlToLoad string into the HTMLLoader class. The _html istance will be rendered as HTML the content through the WebKit engine:
private var _html:HTMLLoader;
private var _htmlToLoad:String;
_html = new HTMLLoader();
_html.width = stage.stageWidth;
_html.height = stage.stageHeight;
_htmlToLoad:String =
'<html><body>' +
'<div id="content">Hello from JavaScript !</div>'+
'</body></html> '
_html.loadString(_htmlToLoad);
The cool thing is that you can use this approach to write JavaScript objects, functions and properties as well as defining the HTML structure within an ActionScript class, and then access to the html DOM via ActionScript code.
Consider these three important considerations:
a) access to the DOM elements and JavaScript objects only after the page load event is dispatched. The page load event corresponds to the COMPLETE event dispatched by the HTMLLoader class. You can create an event listener for this event using the addEventListener() method:
_html.addEventListener(Event.COMPLETE, onComplete);
b) you can access to DOM elements using the window.document object and invoking the getElementById, and getElementsByTagNamer() methods. The window object represents the global JavaScript object for the content loaded into the HTML control.
c) you can edit and create the content of the html content using the innerText and innerHTML properties
In the next page I've created an example where an HTML content is created within an ActionScript class and then loaded into an HTMLLoader object. I've accessed using ActionScript to the HTML DOM to get the content within the DIV tag.
NOTE: Because of some formatting issues, this post was posted on my personal blog as well as Comtaste's blog. Sorry for that :)
package com.comtaste.training
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.html.HTMLLoader;
import flash.net.URLRequest;
public class CreateJSfromAS extends Sprite
{
private var _html:HTMLLoader;
private var htmlToLoad:XML = new XML();
public function CreateJSfromAS()
{
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
_html = new HTMLLoader();
_html.width = stage.stageWidth;
_html.height = stage.stageHeight;
loadHTMLcontent();
_html.addEventListener(Event.COMPLETE, onComplete);
this.addChild( _html );
}
private function onComplete (e:Event):void
{
// Returns the This is JavaScript written inside an ActionScript class string.
trace(html.window.document.getElementById("resultDiv").innerHTML);
}
private function loadHTMLcontent( ):void
{
htmlToLoad =
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function sendMess( message )
{
document.getElementById("resultDiv").innerHTML= message;
}
</script>
<body onload="sendMess('That's a JavaScript generated message within ActionScript code')">
<p>
<div id="contentData">This is JavaScript written inside an ActionScript class</div>
</p>
<p>
<div id="resultDiv">Waiting for something .... </div>
</p>
</body>
</html>;
_html.loadString(htmlToLoad.toString());
}
}
}
Preorder the AIR Cookbook on Amazon :)
Comments