To demonstrate how loading HTML could fit into a larger application, the following ActionScript 3 class uses the SimpleButton and TextField classes to build an application’s visual elements dynamically and then triggers the load method of the HTMLLoader upon the click event of the button. You can easily implement this snippet in a SWF-based application for loading into HTML content from a URL.

package com.oreilly.aircookbook.ch5
{
    import flash.display.NativeWindowInitOptions;
    import flash.display.SimpleButton;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;

    import flash.html.HTMLLoader;

    import flash.net.URLRequest;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFieldType;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;

    public class DisplayHTMLContent extends Sprite
    {
       private var _html:HTMLLoader;
       private var _field:TextField;
       private var _loadBtn:SimpleButton;

       public function DisplayHTMLContent()
       {
           this.stage.scaleMode = StageScaleMode.NO_SCALE;
           this.stage.align = StageAlign.TOP_LEFT;

           drawLayout();
       }

       private function drawLayout():void
       {
            // draw URL input bar
             _field = new TextField();
             _field.type = TextFieldType.INPUT;
             _field.multiline = false;
             _field.width = 300;
             _field.height = 50;
             _field.border = true;
             _field.borderColor = 0x999999;
             _field.x = 50;
             _field.y = 10;
             _field.textColor = 0x666666;
             _field.text = "http://www.comtaste.com/en";
             this.addChild(_field);

            createButton();
        }

      private function createButton():void
      {
           var upState:Sprite = new Sprite();
           upState.graphics.lineStyle( 1, 0x330000 );
           upState.graphics.beginFill( 0x999999 );
           upState.graphics.drawRect( 0,0,40,30 );
           upState.graphics.endFill();
           var upLabel:TextField = new TextField();
           upLabel.width = 50;
           upLabel.height = 30;
           upLabel.autoSize = TextFieldAutoSize.NONE;
           var upFo:TextFormat = new TextFormat();
           upFo.size = 12;
           upFo.color = 0x330000;
           upFo.align = TextFormatAlign.CENTER;
           upLabel.defaultTextFormat = upFo;
           upLabel.text = "LOAD";
           upState.addChild( upLabel );

           var downState:Sprite = new Sprite();
           downState.graphics.lineStyle( 1, 0x000033 );
           downState.graphics.beginFill( 0xcc0000 );
           downState.graphics.drawRect( 0,0,40,30 );
           downState.graphics.endFill();
           var downLabel:TextField = new TextField();
           downLabel.width = 50;
           downLabel.height = 30;
           downLabel.autoSize = TextFieldAutoSize.NONE;
           var downFo:TextFormat = new TextFormat();
           downFo.size = 12;
           downFo.color = 0x000000;
           downFo.align = TextFormatAlign.CENTER;
           downLabel.defaultTextFormat = downFo;
           downLabel.text = "LOAD";
           downState.addChild( downLabel );

           _loadBtn = new SimpleButton( upState, downState, downState, downState );
           _loadBtn.x = _field.x + _field.width + 10;
           _loadBtn.y = _field.y;

           _loadBtn.addEventListener(MouseEvent.CLICK, onClickLoad);

           addChild( _loadBtn );
     }

     private function onClickLoad( evt:MouseEvent ):void
     {
           if( _field.text == "" )
           trace ( "Button clicked but none URL to load has been specified !" );

           var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
           var bounds:Rectangle = new Rectangle(50, 30, 500, 400);

           _html = HTMLLoader.createRootWindow(false, initOptions, true, bounds);
           _html.stage.nativeWindow.activate();

           var urlReq:URLRequest = new URLRequest( _field.text );
           _html.load( urlReq );

     }
   }
}

The core of the class is in the private onClickLoad method, which is an event handler that is triggered by the click event dispatched from the SimpleButton instance. In this event handler, the load method is launched, and the text contained in the _field text field is assigned as a URL.

In Flex, only classes that extend the UIComponent class can be added as children of the Flex container. Because the HTMLLoader class is a Sprite subclass, you cannot add an HTMLLoader object as a child of a container. If you try, you’ll get an error. You can avoid this minor inconvenience in two ways. The first is to use the Flex component <mx:HTML>, whereas the second is to create an ActionScript class that extends the UIComponent class and that contains an HTMLLoader class, making it a child of this UIComponent instance.

To use the <mx:HTML> control in Flex, simply call it as you do with any other control on a page:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:HTML id="content" location="http://www.comtaste.com/en"/>

</mx:WindowedApplication>

Within the control tag definition, you assign the location property to specify the URL of an HTML page whose content is displayed in the control, or you can set the htmlText property to specify a String containing HTML-formatted text that is rendered in the control.

On the other hand, you can create an ActionScript 3 class that extends the UIComponent class, and then you can use the class within a Flex container. To do so, use code similar to this:

package com.oreilly.aircookbook.ch5
{
    import mx.core.UIComponent;


    import flash.events.Event;
    import flash.html.HTMLLoader;
    import flash.net.URLRequest;

    [Event(name="complete")]
    public class DisplayHTMLContentFromFlex extends UIComponent
    {
        private var _html:HTMLLoader;

        public function DisplayHTMLContentFromFlex()
        {
          super();
        }


        override protected function createChildren():void
        {
            _html = new HTMLLoader();
            _html.width = 800;
            _html.height = 600;
            addChild(_html);

            _html.addEventListener( Event.COMPLETE, onComplete );
        }


        override protected function measure():void
        {
            measuredWidth = 800;
            measuredHeight= 600;
        }

        override protected function updateDisplayList(unscaledWidth:Number, 
                                                      unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            _html.width = unscaledWidth;
            _html.height= unscaledHeight;
        }

        private function onComplete( event:Event ) : void
        {
            var newEvent:Event = new Event(Event.COMPLETE);
            dispatchEvent( newEvent );
        }

        public function load( url:String ) : void
        {
            var request:URLRequest = new URLRequest(url);
            _html.load(request);
        }
    }
}

Before the declaration of the class, the [Event] metadata has been used. The [Event] metadata tag defines events dispatched by a component. In this way, the Flex compiler can recognize them as MXML tag attributes in an MXML file.

Then an instance of the HTMLLoader class is created with the createChildren method, which creates child objects for the component. Next, the methods to assign a default dimension of the UIComponent class are overridden, first measure and then updateDisplayList(unscaledWidth:Number, unscaledHeight:Number). Finally, the complete event of the HTMLLoader is registered with the addEventListener method. Within the onComplete event handler, a new complete event is dispatched because this event does not bubble:

private function onComplete(event:Event):void
{
    var newEvent:Event = new Event(Event.COMPLETE);
    dispatchEvent( newEvent );
}

To implement this class in an AIR application created with Flex Builder, import the class as a custom component by creating a custom namespace:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
xmlns:comp="com.oreilly.aircookbook.ch5.*">

    <mx:Script>
    <![CDATA[

        private function loadHTML():void
        {
            htmlComp.load("http://www.comtaste.com");
        }

    ]]>
    </mx:Script>


    <comp:DisplayHTMLContentFromFlex id="htmlComp" />

    <mx:Button click="loadHTML()" label="Load HTML page" >

    </mx:Button>

</mx:WindowedApplication>

The JavaScript environment of AIR is represented by the HTMLLoader class. The environment provides an HTML renderer, DOM, and JavaScript interpreter.

Figure 5-1 illustrates the relationship between the JavaScript environment and AIR in a bit more detail.

Figure 5-1. JavaScript environment in the AIR architecture

In Figure 5-1 notice that the JavaScript environment has its Document and Window objects. As you can see, the JavaScript environment can communicate with AIR through the following properties:

The ActionScript code can access and communicate with the JavaScript environment through the following:

In JavaScript, you use the createRootWindow method, which returns an HTMLLoader object and accepts the following values as parameters:

Before invoking the createRootWindow method, you must create an instance of the air.NativeWindowInitOptions class, as well as a Rectangle object, which is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height.

This example implements an HTMLLoader in JavaScript and uses the activate method to bring the window to the front and give it focus:

var _initOptions = new air.NativeWindowInitOptions();
var _bounds = new air.Rectangle(50, 50, 320, 240);

var html = air.HTMLLoader.createRootWindow(false, _initOptions, true, _bounds);

var urlReq = new air.URLRequest( 'http://www.comtaste.com/en' );
html.load( urlReq );

html.stage.nativeWindow.activate();

The following ActionScript class accesses and manipulates the HTML DOM to dynamically change the elements of the HTML content that is loaded in an HTMLLoader object.

The class is a subclass of the Flex Framework’s UIComponent class and can, therefore, also be used in this environment:

package com.oreilly.aircookbook.ch5
{
     import flash.events.Event;
     import flash.html.HTMLLoader;
     import flash.net.URLRequest;

     import mx.core.UIComponent;


     [Event(name="complete")]
     public class AccessDOMElements extends UIComponent
     {

        private var _html:HTMLLoader;


        public function AccessDOMElements()
        {
            super();
        }

        override protected function createChildren():void
        {
            _html = new HTMLLoader();
            _html.width = 800;
            _html.height = 600;
            addChild(_html);

            _html.addEventListener( Event.COMPLETE, onComplete );
        }


        override protected function measure():void
        {
            measuredWidth = 800;
            measuredHeight= 600;
        }


        override protected function updateDisplayList(unscaledWidth:Number, 
                                                      unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            _html.width = unscaledWidth;
            _html.height= unscaledHeight;
        }


        private function onComplete( event:Event ) : void
        {
            var newEvent:Event = new Event(Event.COMPLETE);
            dispatchEvent( newEvent );

        }


        public function load( url:String ) : void
        {
            var request:URLRequest = new URLRequest(url);
            _html.load(request);

        }


        public function htmlCodebyID():String
        {

            var htmlCode:String = _html.window.document.getElementById("container").innerHTML;

            return htmlCode;
        }

        public function htmlCodebyTag():String
        {

            var htmlCode:Object = _html.window.document.getElementsByTagName("img");
            var htmlStr:String;

            if (htmlCode != null)

            for (var i:Number = 0; i < htmlCode.length; i++)
            {
                if (htmlCode[i].getAttribute("class") == "logo")
                {
                    htmlCode[i].src = 
"http://livedocs.adobe.com/air/1/devappsflash/images/adobe.png";
                    htmlStr += htmlCode[i].src +"
";
                    htmlStr += htmlCode[i].width +"
";
                    htmlStr += htmlCode[i].height +"
";
                }
        }

        return htmlStr;
        }

        private  function listElements(whichTag:String,
                                       whichAttr:String="",
                                       whichValue:String=""):Object
        {

            var startElement:Object = new Object();
            var listElement_arr:Object= new Object();

            if (whichTag) {
                startElement = 
_html.window.document.getElementsByTagName(whichTag);
            } else {
                startElement = (_html.window.document.all) ? 
_html.window.document.all :
                    _html.window.document.getElementsByTagName("*");
            }
            if (whichAttr) {
                for (var i:Number = 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;
        }

        public function walkingTree(tagName:String):String
        {
            var DOMList:Object = listElements(tagName);
            var walkingTreeList:String;

            if (DOMList != null)

            for (var i:Number = 0; i < DOMList.length; i++)
            {
             walkingTreeList += DOMList[i].innerHTML +"
";
            }

        return walkingTreeList;

        }

    }
}

The AccessDOMElements class navigates through the DOM elements of the HTML page loaded into the HTMLLoader instance looking for an explicit image within the HTML code. Upon finding the image, the code switches to the new one.

The AccessDOMElements class has three public methods. The first, htmlCodebyID, is a public method and returns a String that contains HTML code in the tag that is specified by using the getElementById method.

The second public method, htmlCodebyTag, returns the HTML code contained in a certain HTML tag that is specified with the getElementsByTagName method. Furthermore, this method uses the DOM getAttribute method, which allows access to certain attributes of the selected node. That way, you are able to act on the single HTML element and change any of its values. With a loop, this function looks in all the img tags of the content, and when it verifies a condition on the attribute class of that tag, it changes its src attribute, loading a new image from a new pathway:

public function htmlCodebyTag():String
{

    var htmlCode:Object = _html.window.document.getElementsByTagName("img");
    var htmlStr:String;

    if (htmlCode != null)

    for (var i:Number = 0; i < htmlCode.length; i++)
    {
        if (htmlCode[i].getAttribute("class") == "logo")
        {
        htmlCode[i].src = 
"http://livedocs.adobe.com/air/1/devappsflash/images/adobe.png";
        htmlStr += htmlCode[i].src +"
";
        htmlStr += htmlCode[i].width +"
";
        htmlStr += htmlCode[i].height +"
";
        }
    }

    return htmlStr;
}

The third public function, walkingTree, returns the content of the HTML DOM elements that correspond to the search criteria; it returns the content with the innerHTML property. This criteria is specified in another method that is launched by the walkingTree: the private listElements method. The listElements method accepts three parameters: whichTag (the name of the tag to point to), whichAttr (the attribute of the specified tag to use), and whichValue (the value of the attribute to compare). This method returns a collection of elements that verify the conditions of the parameters sent to it.

The property that is returned by the method is called listElement_arr. Even if in theory this property contains an array of elements and if you assign them as data type Array, the application will raise a Type coercion error:

Error #1034: Type Coercion failed: cannot convert __HTMLScriptObject@fb55b1 in 
Array.

Instead, you must type the properties as Object classes that return the elements by using the getElementsByTagName method.

You can use the AccessDOMElements class in a simple MXML application that will then be packaged in AIR. You can use Flex Builder 3 as an environment to write the following code, or you can write it with any text editor and then compile it with the AIR adl command-line compiler (which you can find in the AIR SDK):

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

    <mx:Script>
    <![CDATA[

        private var list_arr:Array;

        private function loadHTML():void
        {
            htmlComp.load("http://www.comtaste.com/en/training.htm");

        }

    ]]>
    </mx:Script>

    <mx:TextArea width="800" height="300" id="myTA" />
    <mx:HBox>

        <mx:Button label="Show HTML Code"  click="myTA.text = 
        htmlComp.htmlCodebyID()" />

        <mx:Button label="Change Image"  click="myTA.text = 
        htmlComp.htmlCodebyTag()" />

        <mx:Label text="Insert the name of the Tag: " />
        <mx:TextInput id="tagName" text="*" />
        <mx:Button label="Navigate The DOM Tree by Tag"
        click="myTA.text = htmlComp.walkingTree(tagName.text)" />

    </mx:HBox>

    <comp:AccessDOMElements xmlns:comp="com.oreilly.aircookbook.ch5.*" 
    id="htmlComp"
     initialize="loadHTML()" />

</mx:WindowedApplication>

It is the AccessDOMElements component that creates the instance of the AccessDOMElements ActionScript class, created in the com.oreilly.aircookbook.ch5 package and associated to the namespace comp.

Once the AIR application has been compiled, it will load the content of the page http://www.comtaste.com/en/training.htm in the HTMLLoader object and will expose three buttons (Figure 5-2), which will launch the previously mentioned three public methods of the ActionScript class.

When the user inserts the name of an HTML tag in the TexInput, the walkingTree method will be called by clicking the Navigate button, and all the elements on the page that have been declared with that tag will be returned.

By clicking the Change Image button, the image of the Comtaste logo will be replaced with an image loaded from a remote source at the following URL: http://livedocs.adobe.com/air/1/devappsflash/images/adobe.png.

This exchange of images is made possible thanks to the htmlCodebyID method that accesses the DOM element with the img tag and verifies the following condition with the DOM getAttribute:

htmlCode[i].getAttribute("class") == "logo"

Figure 5-2. The AIR example shows the HTML content within the HTMLLoader class and iterates through the HTML DOM in search of nodes meeting set criteria.

To access the history list from your Flex project, you need to create a custom ActionScript call that uses the HTMLLoader class and extends the UIComponent class. The code for this class, named HandleHistory, is shown later in this section.

As you examine it, focus your attention on the onComplete event handler of the COMPLETE event; here you need to register a listener for the LOCATION_CHANGE event:

_html.addEventListener(Event.LOCATION_CHANGE, showHistoryHTMLContent);

This event defines the value of the type property of a locationChange event object and is triggered every time the HTML content changes within the HTMLLoader object. This event is therefore used to monitor all navigation of a user in an HTML page. In the showHistoryHTMLContent event handler, an instance of the HTMLHistoryItem is created, from which the URL properties and titles of the HTML content are taken. This information is added to an ArrayCollection, which will contain the navigation history.

package com.oreilly.aircookbook.ch5
{
    import flash.events.Event;
    import flash.html.HTMLHistoryItem;
    import flash.html.HTMLLoader;
    import flash.net.URLRequest;

    import mx.collections.ArrayCollection;
    import mx.core.UIComponent;

    public class HandleHistory extends UIComponent
    {

        private var _html:HTMLLoader;
        private var _historyDP:ArrayCollection = new ArrayCollection();

        public function get html():HTMLLoader
        {
        return _html;
        }

        public function get historyDP():ArrayCollection
        {
        return _historyDP;
        }


        public function HandleHistory()
        {
        super();
        }

        override protected function createChildren():void
        {
            _html = new HTMLLoader();
            _html.width = 800;
            _html.height = 600;
            addChild(_html);

            _html.addEventListener( Event.COMPLETE, onComplete );
        }

        override protected function measure():void
        {
            measuredWidth = 800;
            measuredHeight= 600;
        }

        override protected function updateDisplayList(unscaledWidth:Number, 
                                                      unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            _html.width = unscaledWidth;
            _html.height= unscaledHeight;
        }

        private function onComplete( event:Event ) : void
        {
           _html.addEventListener(Event.LOCATION_CHANGE, showHistoryHTMLContent);
        }

        public function loadURL( url:String ) : void
        {
            var request:URLRequest = new URLRequest(url);
            _html.load(request);
        }

        public function showHistoryHTMLContent(evt:Event):void
        {
            _historyDP.removeAll();


            for (var i:int = 0; i< _html.historyLength ; i++)
            {
                var tempHistoryItem:HTMLHistoryItem = _html.getHistoryAt(i);

                _historyDP.addItem({label:tempHistoryItem.title,data:tempHistoryItem.url});
            }
        }

        public function gotToURL(selIndex:int):void
        {
            loadURL(historyDP.getItemAt(selIndex).data as String);
        }
    }
}

You now have access to the history list. To move backward and forward in the list, you’ll add the code for management of the Back and Forward buttons to your class. To do so, simply use the HTMLLoader class’s historyBack, historyForward, and historyGo methods as event handlers for the click event of the button instances. The historyBack and historyForward methods navigate back and forward through the history list, respectively. The historyGo method navigates forward and backward by passing a positive or negative number as a parameter (a positive number will make the historyGo method navigate forward).

You can use the HandleHistory class you created in a Flex project by creating an MXML file with three buttons to manage the historyGo, historyForward, and historyBack functions, as well as a list that contains the history list of the HTMLLoader object. To create the list, simply load the ArrayCollection instance of the HandleHistory class with a binding.

Here is the complete MXML file:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
xmlns:comp="com.oreilly.aircookbook.ch5.*">

    <mx:Script>
    <![CDATA[
        import mx.events.ListEvent;
        import mx.collections.ArrayCollection;
        import mx.events.CollectionEvent;

        private var list_arr:Array;
        [Bindable]
        private var myAC:ArrayCollection;

        private function loadHTML():void
        {
            htmlComp.loadURL("http://www.comtaste.com/");


            htmlComp.historyDP.addEventListener(CollectionEvent.COLLECTION_CHANGE, 
                                                onACChange);
            gotorul.addEventListener(MouseEvent.CLICK, onGotourl);

            myAC = htmlComp.historyDP;
        }

        private function onShowHistoryClick(evt:MouseEvent):void
        {
            hisList.dataProvider =  htmlComp.historyDP;
        }

        private function onGotourl(evt:MouseEvent):void
        {
            htmlComp.gotToURL(hisList.selectedIndex);
        }

        private function onACChange(evt:CollectionEvent):void
        {
            hisList.selectedIndex = htmlComp.html.historyPosition;
        }

    ]]>
    </mx:Script>
    <mx:HBox>
        <mx:Button label="Back" id="backBtn" click="htmlComp.html.historyGo(-1)" />
        <mx:Button label="Next" id="ffBtn" click="htmlComp.html.historyGo(1)" />
        <mx:Button label="Go to URL" id="gotorul" />
    </mx:HBox>

    <mx:List id="hisList" dataProvider="{myAC}" />

    <comp:HandleHistory id="htmlComp" initialize="loadHTML()" />

</mx:WindowedApplication>

In JavaScript, the implementation of the history list is identical to the one used in ActionScript. The methods shown by the HTMLLoader class are the same, and the history list corresponds to the window.history object in the HTML page.

The application sandbox can set up a bridge interface inside the nonapplication box called parentSandboxBridge that can be accessed by the nonapplication sandbox code. Consider the following example:

var parentBridge = {
    sayHello = function (msg) {
        alert("Hello from the application sandbox! "+msg);
};

function setupBridge(){
    document.getElementById("sandbox").contentWindow.parentSandbox
Bridge = parentBridge;
}

This example creates the bridge between the different sandboxes. Specifically, the following code includes the nonapplication sandbox content in the application:

<iframe id="sandbox" src="http://www.site_abc.com/sandbox.html"
     documentRoot="app:/"
     sandboxRoot="http://www.site_abc.com/"
     ondominitialize="setupBridge ()">
</iframe>

In this way, the nonapplication sandbox code (in sandbox.html) can invoke the method sayHello from the application sandbox:

window.parentSandboxBridge.sayHello("and from non-app sandbox");

The nonapplication code can access the parent via the parentSandboxBridge and can expose data and methods via the childSandboxBridge. You might immediately suppose that in this case it is possible to expose directly the childSandboxBridge of nonapplication sandbox 1 to nonapplication sandbox 2 (using the application sandbox’s parentSandboxBridge), but this setup does not work (for security reasons). The access to the bridges is very restricted. From outside the sandbox, the bridges are defined and are read-only. In addition, if you try to read an exposed method’s body in order to peek at the nonexposed objects, you will find out alert(childSandboxBridge.exposedMethod) will give you an empty function.

To exchange data between nonapplication sandboxes, you should set up a bridge proxy in the application sandbox code. The following example is an application that loads two different websites: one that has a database with clients and another where the user wants to copy some of those clients (of course, the two sites must implement the appropriate code, as described in a moment, for this setup to work).

The parent code (running on AIR) is as follows:

<html>
<head>
<script type="text/javascript">

    var bridgeProxy = {
        broadcast: function (method, args, sandbox) {
            document.getElementById(sandbox).contentWindow.childSandboxBridge.
callMethod(method, args)
            }
    }

    function setupBridge(sandbox){
        sandbox.contentWindow.parentSandboxBridge = bridgeProxy;
    }

</script>
</head>
<body>

<!-- that's the first non-app sandbox www.abc.com -->
<iframe id="site_abc" src="http://www.abc.com/site_abc.html" documentRoot="app:/" 
sandboxRoot="http://www.abc.com/" ondominitialize="setupBridge(this)"></iframe>

<!-- that's the second non-app sandbox www.xyz.com -->
<iframe id="site_xyz" src="http://www.xyz.com/site_xyz.html" documentRoot="app:/" 
sandboxRoot="http://www.xyz.com/" ondominitialize="setupBridge(this)"></iframe>

</body>
</html>

Note that each iframe calls the setupBridge function to create the parentSandboxBridge in its window object. This is the code of the view customer page on the website ABC (your first nonapplication sandbox):

<html>
<head>
<script type="text/javascript">

    function copyInfo() {
       // call the parent bridge with arguments : method name, data, iframe id
       window.parentSandboxBridge.broadcast('copyInfo1',
       {
           firstName: document.getElementById('firstName').value,
           lastName : document.getElementById('lastName').value,
           street : document.getElementById('street').value,
           city : document.getElementById('city').value
       },
      'site_xyz'),
    }

</script>
</head>
<body>

<b>Web site ABC</b><br />
View Client information:<br /><br />

First name: <input type="text" id="firstName" value="Ford" /> <br />
Last name: <input type="text" id="lastName" value="Prefect" /> <br />
Street: <input type="text" id="street" value="42, East side drive" /> <br />
City: <input type="text" id="city" value="Manchester" /> <br />

<input type="button" value="Copy information" onClick="copyInfo()" />

</body>
</html>

When the user clicks the Copy Information button, the form information is gathered and sent to the parent bridge proxy, and the data is addressed to the sandbox with the ID site_xyz. Here is the code in the other website, which has to receive the customer information:

<html>
<head>

<script type="text/javascript">
    function copyInfo (args)
    {
        document.getElementById('name').value = args.firstName +" "+ args.lastName;
        document.getElementById('address').value = args.street +", "+ args.city;
    }

   var childBridge = {

        callMethod : function(name, args) {
            if (window[name]) window[name](args);
            else alert("No "+name+" defined!");
        }
   }

   window.childSandboxBridge = childBridge;

</script>
</head>
<body>
<b>Web site XYZ</b><br />
Create new customer:<br /><br />

Name: <input type="text" id="name" value="" /> <br />
Address: <input type="text" id="address" value="" /> <br />

<input type="button" value="Create customer" onClick="alert('New
 customer created!')" />

</body>
</html>

The bridge interface of site_xyz just calls the required method and passes the data—in this case, the method copyInfo, which reformats the customer data and fills in the form. The user now has to just click Create Customer, and you’re done.

This example shows how far you can go by exposing the window’s methods via the bridge. In most cases, it would have been better to encapsulate the exposed methods in the bridge object.

The following example creates HTML content directly in an ActionScript class. The htmlToLoad property, typed as XML, is set with HTML content, which loads a text message into a div:

package com.oreilly.aircookbook.ch5
{

    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
        {
            // The window.document object includes the contentData element
            // that we access using the getElementById method.
            // It returns the text into the contentData div

            trace(html.window.document.getElementById("contentData").innerText);

        }


        private function loadHTMLcontent( ):void
        {

            // Define the HTML string to pass to the
            // loadString() method of the _html istance

            _htmlToLoad = <![CDATA[
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>

            <title>Solution 15.X: Creating a JavaScript function from 
                ActionScript</title>

            <script type="text/javascript">

            function showMessage(message)
            {
            document.getElementById("contentData").innerHTML = message;
            }

            </script>

            <body onload=" showMessage ('This is a JavaScript function created 
                within an ActionScript class')">

            <p>

            <div id="contentData" style="overflow:auto; width:100%; height:100%"> 
            </div>

            </p>

            <p>


            </p>

            </body>
            </html> ]]>;

            // Loads the htmlToLoad string within the
            // HTMLLoader class

            _html.loadString(htmlToLoad.toString());


        }
    }
}

The long HTML string contained in the htmlToLoad property is assigned to the loadString method. The onComplete event handler provides access to the resultDiv element through ActionScript, specifically with the getElementById method specified in the HTML string:

private function onComplete (e:Event):void
{
    // The window.document object includes the contentData element
    // that we access using the getElementById method.
    // It returns the text into the contentData div

    trace(html.window.document.getElementById("contentData").innerText);

}

Only after the page has been completely loaded, when the HTMLLoader object dispatches the complete event, can you access the HTML DOM through the ActionScript code.