FLEX: the custom component is still a Null Object when I invoke its method

Question

Hi,

I've created a custom component in Flex, and I've created it from the main application with actionscript. Successively I invoke its "setName" method to pass a String.

I get the following run-time error (occurring only if I use the setName method):

TypeError: Error #1009: Cannot access a property or method of a null object reference.

I guess I get it because I'm calling to newUser.setName method from main application before the component is completely created.

How can I ask actionscript to "wait" until when the component is created to call the method ? Should I create an event listener in the main application waiting for it ? I would prefer to avoid it if possible.

Here is the code:

Main app

...
newUser = new userComp();
//newUser.setName("name");

Component:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="200" >

<mx:Script>
    <![CDATA[


        public function setName(name:String):void {
            username.text = name;
        }

       public function setTags(Tags:String):void {

        }

    ]]>
    </mx:Script>

    <mx:HBox id="tagsPopup" visible="false">
        <mx:LinkButton label="Tag1" />
        <mx:LinkButton label="Tag2" />
        <mx:LinkButton label="Tag3" />      
    </mx:HBox>

    <mx:Image source="@Embed(source='../icons/userIcon.png')"/>
    <mx:Label id="username" text="Nickname" visible="false"/>

</mx:VBox>

thanks

Answer 1

You can try the creationcompleted method. Similar to the following:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="200" creationComplete="creationCompletedHandler(event)">

and add the following in the Script:

import mx.events.FlexEvent;

private function creationCompletedHandler(event:FlexEvent):void
{
   //Your code
}

Answer 2

You get the error message because the Label component with id "username" has not been initialized when you call setName function.

you can create a property in UserComp, and set Label's text property binded to it. And in your setName function, you assign the value to the property just created. When the Label component is created, it will use the value from the property to show on the screen.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="200" >

<mx:Script>
    <![CDATA[
        [Bindable]
        private var _name;
        public function setName(name:String):void {
            _name=name;
        }

       public function setTags(Tags:String):void {

        }

    ]]>
    </mx:Script>

    <mx:HBox id="tagsPopup" visible="false">
        <mx:LinkButton label="Tag1" />
        <mx:LinkButton label="Tag2" />
        <mx:LinkButton label="Tag3" />      
    </mx:HBox>

    <mx:Image source="@Embed(source='../icons/userIcon.png')"/>
    <mx:Label id="username" text="{_name}" visible="false"/>

</mx:VBox>

Answer 3

I just ran into this myself, and found another aspect to the issue, the creationPolicy attribute:

http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_05.html

If you set creationPolicy="all" in a custom component, then upon its creation, it will create all of its sub-components. Otherwise, it delays until the last minute. It makes for slower creation, but if you need it all available to code immediately, this allows you to do so without having to hack around it. This solved the problem for me, hope it helps.