These days I'm working on the <a
href="http://www.amazon.com/Adobe-AIR-Cookbook-Application-Developers/dp/0596522509">O'Reilly AIR Cookbook</a> 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:
private var _html:HTMLLoader;
private var _htmlToLoad:String;
_html = new HTMLLoader();
htmlToLoad =
'<html>' +
'<body>' +
'<div id="content">Hello from JavaScript !</div>'+
'</body></html>';
_html.width = stage.stageWidth;
_html.height = stage.stageHeight;
_html.loadString(htmlToLoad);
With this simple code you'll load the htmlToLoad string into the HTMLLoader class. The _html istance will render as HTML the content through the WebKit engine.
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.
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.
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
Because of some formatting issues I had on our company's blog, to speed it up I've duplicated this post on both blogs (personal and company). Sorry for that :)
You can see the complete ActionScript 3 class on my personal blog (next page).
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 HTML 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());
}
}
}
Great post!very informative post.. I like what's introduced in your blog. Thank you!
Posted by: coach outlet | April 01, 2011 at 08:16 AM
Very good blog, I got a lot of things! If you need to watch, please click on my name, visit our website, where you need to be able to find watch and look forward to your visit!
Thank you!
Posted by: Replica Rolex | September 19, 2010 at 10:39 AM
Web application developers can now reuse existing open source C and C++ client or server-side code on the Flash Platform.
Posted by: Supra Shoes | July 27, 2010 at 05:22 AM