R – Using a composite MXML component from ActionScript

actionscriptairapache-flexmxml

I'm trying componentize one of the pieces of UI in an AIR application that I'm developing in Flex. In this example, I want to display file information on a single line (which has an icon, some text/link and the size).

My code looks like this (component is called FileDisplay):

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            public function set iconType(source:String):void {
                this.ficon.source = source;
            }

            public function set fileName(name:String):void {
                this.fname.htmlText = name;
            }

            public function set fileSize(size:String):void {
                this.fsize.text = size; 
            }
        ]]>
    </mx:Script>
    <mx:Image id="ficon" />
    <mx:Label id="fname" left="20" right="30" text="Filename" />
    <mx:Label id="fsize" right="0" text="0 K" />
</mx:Canvas>

When I'm using this component in my main application, the actionscript looks like:

for each (var file:XML in result.files) {
    var fd:FileDisplay = new FileDisplay();
    fd.fileName = '<a href="blah">'+file.name+'</a>';
    fd.iconType = getFileTypeIcon(file.name);
    fd.fileSize = getFileSizeString(file.size);

    this.file_list.addChild(fd);
}

However, when I do this, I get an error: Error #1009: Cannot access a property or method of a null object reference. This is because the child components of the FileDisplay are null (or at least they show up that way in the debugger).

Does anyone know if there's a way around this? Am I supposed to be waiting for events indicating the child components were created? Is there a more common pattern that solves this problem?

For now I can manually do everything in ActionScript in my main app (create a Canvas and add children to it) but I would appreciate any insight on how to separate the code more cleanly.

Best Answer

Bindable to the rescue:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
                [Bindable]
                public var iconType:String;
                [Bindable]
                public var fileName:String = "Filename";
                [Bindable]
                public var fileSize:String = "0 K";
        ]]>
    </mx:Script>
    <mx:Image id="ficon" source="{iconType}"/>
    <mx:Label id="fname" left="20" right="30" text="{fileName}" />
    <mx:Label id="fsize" right="0" text="{fileSize}" />
</mx:Canvas>

the values will be automatically updated when the components are created.

Related Solutions

Actionscript – flex 3 accessing main mxml from actionscript code

David is right -- while you can access the public members of your Application.mxml object statically and from anywhere in your application, design-wise that's a bit of a no-no. It's better to strive for loose coupling between your objects, and the way that's done in the Flex idiom is generally to extend EventDispatcher and to dispatch events. So for example, your WebService wrapper might look something like this:

public class MyWrapperClass extends EventDispatcher
{
    [Event(name="webserviceComplete", type="flash.events.Event")]

    public function MyWrapperClass(target:IEventDispatcher=null)
    {
        super(target);
    }

    private function handleWebServiceLoadComplete(event:ResultEvent):void
    {
        dispatchEvent(new Event("webserviceComplete"));
    }

    public function doWork():void
    {
        // Load the service, etc., and ultimately call handleWebServiceLoadComplete()...
    }       
}

... and your Main.mxml file like this:

<mx:Script>
    <![CDATA[

        private function app_creationComplete(event:Event):void
        {
            var myWrapper:MyWrapperClass = new MyWrapperClass();
            myWrapper.addEventListener("webserviceComplete", mywrapper_webServiceComplete, false, 0, true);
            myWrapper.doWork();
        }

        private function mywrapper_webServiceComplete(event:Event):void
        {
            // Do the work you would've otherwise done in the public method
        }

    ]]>
</mx:Script>

In this case, the end result is the same -- completing the web-service load triggers the function in Main.mxml. But notice how mywrapper_webServiceComplete() is declared privately -- it's not called directly by MyWrapperClass. Main.mxml simply subscribes (with addEventListener()) to be notified when MyWrapperClass is finished doing its work, and then does its own work; MyWrapperClass knows nothing about the details of Main.mxml's implementation, nor does Main.mxml know anything about MyWrapperClass other than that it dispatches a webserviceComplete event, and exposes a public doWork() method. Loose coupling and information hiding in action.

Good luck!

R – How to access Actionscript from Javascript in Adobe AIR

You have to use air.trace where air is a predefined Javascript wrapper over utility AS packages.

I was assuming you were doing AIR development using HTML/AJAX.

However, otherwise, you need to use ExternalInterface to have the AS functions available to JS. Can you tell us why you need this?

Best Answer

Related Solutions

Actionscript – flex 3 accessing main mxml from actionscript code

R – How to access Actionscript from Javascript in Adobe AIR

Related Topic