Scripting the HTML DOM from ActionScript 3 within AIR applications - Part 1 (AIR Cookbook Highlight)

The AIR 1.5 Cookbook contains many useful recipes. I want to take some time to highlight some of the useful (and cool) recipes that are included in the book.
You can order your copy of the AIR 1.5 Cookbook from Amazon. You can also start to look for the book in your local bookstore over the next week.

When you use HTML content in an application, you need to understand how to interact with the AIR environment by using JavaScript as well as ActionScript. In the Chapter 5 of the AIR Cookbook about HTML Content,you will learn how to access JavaScript from ActionScript, as well as how to access ActionScript from JavaScript in an HTML container.

The solution highlighted today is:  Scripting the HTML DOM from ActionScript 3 within AIR applications

Problem
You need to access and manipulate the elements in the HTML DOM for the page loaded within the HTMLLoader class.

Solution

Use the getElementById and getElementsByTagName methods, as well as innerText and innerHTML, to access DOM elements in AIR.

Discussion

The term DOM refers to an object model to represent XML and related formats. By using the DOM, you can dynamically edit any element in an HTML page through ActionScript, as well as create new pages programmatically. To do so, you use some methods and properties of the DOM. The DOM  methods and properties you need to use are as follows:

getElementsByTagName (in DOMString tagname)

This method enables you to access a DOM element of the document by referring to the name of the tag. This method is very useful when you want to number and access all the elements of the same kind. The following code iterates the entire document of the HTML document node tree and returns the nodes that have been passed onto the function in an Array:

function listElements(whichTag, whichAttr, whichValue)
{
var startElement;
var listElement_arr= new Array();
if (whichTag) {
startElement = document.getElementsByTagName(whichTag);
} else {
startElement = (document.all) ? document.all :
document.getElementsByTagName("*");
}
if (whichAttr) {
for (var i = 0; i < startElement.length; i++) {
if (startElement[i].getAttribute(whichAttr)) {
if (whichValue) {
if (startElement[i].getAttribute(whichAttr) == whichValue) {
listElement_arr[listElement_arr.length] = startElement[i];
}
} else {
listElement_arr[listElement_arr.length] = startElement[i];
}
}
}

} else {
listElement_arr= startElement;
}
return listElement_arr;
}

This function can be invoked by ActionScript by using the name of the instance of the HTMLLoader object and its window property:

var myElementArray:Array = _html.window.listElements("a","class", "trainingLink");

Be aware that before the COMPLETE event is dispatched, the DOM elements may not have been parsed or created. As best practice, wait for this event before accessing any HTML DOM elements.

Upon the COMPLETE event, the onComplete event handler is invoked. Within the event handler, you’ll write the code to access the HTML DOM. The following example accesses the DOM element with the same ID of the container and returns the HTML content of that node.
The hmtlCode variable contains the following HTML content:

<ul class="primary-links">
<li><a href="company.htm">COMPANY</a></li>
<li><a href="solutions.htm">SOLUTIONS</a></li>
<li><a href="consulting.htm">CONSULTING</a></li>
<li><a href="training.htm" class="active">TRAINING</a></li>
<li><a href="clients.htm">CLIENTS</a></li>
<li><a href="casestudieslist.htm">CASE STUDIES</a></li>
</ul>

This content corresponds precisely with the HTML code contained in the div with ID="menu" of the http://www.comtaste.com/en/training.htm page.
In addition to accessing the DOM elements, you can change their properties. For example, you could change the src attributes of the img tag, add the alt attribute to all the a links, or even dynamically add elements to the page with ActionScript. The following example adds a portion of HTML code that creates a div element with a text value to the onComplete event handler:

private function onComplete( event:Event ) : void
{
var htmlCode:String = _html.window.document.getElementById("menu").innerHTML;
_html.window.document.getElementById("menu").innerHTML = "<div
style=\"overflow:hidden; height:20px\" id=\"fromAS\"><strong>This is an HTML string
generated by ActionScript</strong></div>"
}

In the previous example, you programmatically changed the elements of an HTML page accessing the DOM directly. Accessing HTML DOM directly from ActionScript offers many possibilities for creating highly interactive AIR applications. For example, you could create applications that exploit HTML and JavaScript by programming directly from ActionScript and by leveraging the more advanced functions of the programming language of Flash and Flex.

In the second part of this article I'll show you a real example in Flex. Keep waiting until this afternoon ;)

By launching the JavaScript function with these parameters, an Array will be returned with all the a type nodes that will have the attribute class set to the value trainingLink.

getElementById (in DOMString elementId)

This method enables you to access an element by referring to its ID attribute, specified in the tag node. You have already seen an example that uses this method in Recipe 5.3:

function accessingASProperty()
{
document.getElementById("contentData").innerText = "Hello World" ;
}

innerText
This DOM property sets or retrieves the text between the start and end tags of the object.

innerHTML
This DOM property returns or sets all the content of the specified element in the html tag of the page. This property also enables you to set the content for one or more of the DOM’s elements.

To see which DOM classes are contained in the WebKit engine, visit
http://developer.apple.com/documentation/AppleApplications/Reference/WebKitDOMRef/index.html.

After you create an HTMLLoader object, you can navigate the DOM tree of the elements contained in the HTML contents. The following example of ActionScript code creates an HTMLLoader object that loads the page http://www.comtaste.com/en/training.htm:

var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
var bounds:Rectangle = new Rectangle(50, 30, 800, 600);
var _html = HTMLLoader.createRootWindow(false, initOptions, true, bounds);
_html.stage.nativeWindow.activate();
var _urlReq:URLRequest = new URLRequest( "http://www.comtaste.com/en/training.htm" );
_html.load( _urlReq );
_html.addEventListener( Event.COMPLETE, onComplete );

Comments

[Giuseppe Sorce]

Interesting article !! :). I home that in future next release of "AIR code" or Actionscript there will be a datatype for tags or element of Html.

[Betty]

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

Betty

http://www.my-foreclosures.info

[mdbtlq emfnh]

ymdplivz nrtoq birsdlkq tanh ostmiryuv fbmpo vlqsbdkwx