Finding descendent children by name in flex

Question

I am puzzled by what I am seeing here in this code below. I have a box container that has a child button (whose name I have specified). I have written a function that attempts to find the child button by name. However, this does not work as expected - The reason being the Box has numChildren=0 for some reason and I expect it to be 1 because I have a button added to it as a child. Can someone help me understand what I am doing wrong?

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>



<mx:Box height="100%" width="100%" initialize="initializeApp();" name="MyBox">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.core.FlexGlobals;

            public function initializeApp():void {
                var btn:Button = new Button();
                btn.name = "MyButton";
                addElement(btn);
                btn.addEventListener(MouseEvent.CLICK, clickCallback);
            }

            private function clickCallback(event:MouseEvent):void{
                var obj:DisplayObject = findChildByName(FlexGlobals.topLevelApplication as DisplayObjectContainer, "MyButton");
                if (obj==null){
                    Alert.show( "Not Found");
                }
                else{
                    Alert.show( "Found");
                }

            }

            private function findChildByName(parent:DisplayObjectContainer, name:String):DisplayObject{
                var childCount:Number = (parent==null) ? 0 : parent.numChildren;
                for (var i:Number=0;i<childCount;i++){
                    var child:DisplayObject = parent.getChildAt(i);
                    if (child is DisplayObjectContainer){
                        return findChildByName(child as DisplayObjectContainer, name);
                    }
                    else{
                        if (parent!=null && child == parent.getChildByName(name)){
                            return child;
                        }
                    }
                }
                return null;
            }



        ]]>

    </fx:Script>


</mx:Box>   
</s:WindowedApplication>

Thank you.

Answer 1

My guess, the item might be added to the child object , in your case it is Box, because, yor code is in the box directly , specify MyBox.addElement. or FlxGobal.toplevelapp.addElement(

Answer 2

findChildByName will return early if parent contains a DisplayObjectContainer.

if (child is DisplayObjectContainer){
    return findChildByName(child as DisplayObjectContainer, name);
}

This will return either a found object, or null if no object was found in that container.

Even better, since a Button is a DisplayObjectContainer, you'll try to dig into it without checking if the object itself is the one you're seeking.

You'll want to check if the child is your target first, before digging down further; then, only return from the recursive check if you found the child. Something like:

if (parent != null && child.name == name)   // Just check the name rather than getChildByName
{
    return child;
}
if (child is DisplayObjectContainer){
    var foundChild:DisplayObject = findChildByName(child as DisplayObjectContainer, name);
    if (foundChild) {
        return foundChild;
    }
}