Component names and ids in Flex and Actionscript, where do they come from?

Question

To illustrate my question. Assume the following code snippet:

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

<mx:Script>
    <![CDATA[
     import mx.controls.Button;

     private function createButton():void
     {
      var myButton:Button = new Button();
      myButton.label = "Foo";
      this.btncontainer.addChild(myButton);
      trace ("New Button Created [" + myButton.toString() + "]"); 
     }  
    ]]>
</mx:Script>

<mx:Button label="Create Button" click="createButton()" />
<mx:VBox id="btncontainer" />

</mx:Application>

The behavior of this script should be obvious. Each click of the "Create Button" button will generate a new button with a label of "Foo". What the code does and why it does it makes sense to me. My question is about the console output. When I run the app in debug mode and click the "Create Button" four times I get the following in my console:

New Button Created [main0.btncontainer.Button15]
New Button Created [main0.btncontainer.Button19]
New Button Created [main0.btncontainer.Button23]
New Button Created [main0.btncontainer.Button27]

My question is where does the number appended to the object name come from? e.g. Button15, 19, 23, 27... etc? Is there some sort of array in the background that holds the objects and is this an index value? Is it some sort of internal counter? Is this a pointer value of some kind? In my tests, at least, why does it seem to always follow the same pattern 15, 19, 23, 27... separated by 4 each time in this case?

I understand conceptually what is happening here. A new Button object is spawned and allocated memory. Each time I click "Create Button" I am creating a new instance of the Button class and adding it as a child to the VBox object. I was just curious what is the meaning or significance of the numbers appended to the objects as they are created?

Answer 1

Don't forget that since Flex is open source you can track this sort of thing down in the code.

I found a function called NameUtil.displayObjectToString that seems to be responsible for creating the printable name of a Flex instance. There is also NameUtil.createUniqueName which creates the name property.

Have a look at the code, but basically createUniqueName splits getQualifiedClassName to get just the class name without the package details. NameUtil has a static counter that it then appends to the end of that name. so Button15 is the 15th FlexSprite created by your application.

displayObjectToString isn't too more complicated, except it follows the chain of components through the parents joining the names on a "."

---

One thing to note is a comment in UIComponent.as:

/**
 *  ID of the component. This value becomes the instance name of the object
 *  and should not contain any white space or special characters. Each component
 *  throughout an application should have a unique id.
 *
 *  <p>If your application is going to be tested by third party tools, give each component
 *  a meaningful id. Testing tools use ids to represent the control in their scripts and
 *  having a meaningful name can make scripts more readable. For example, set the
 *  value of a button to submit_button rather than b1 or button1.</p>
 */
public function get id():String
{
    return _id;
}

It says: "This value becomes the instance name of the object" and although that appears to be true I cannot find out where the assignment from id to name happens. It could be in the AS3 code that is generated from the MXML when it is converted during compilation.