apache-flexgrandchild

Flex 3: How to Access a Component's Grandchildren


I need to access topBox's grandchildren and determine whether they're buttons or not.

This function below (thank you Flextras.com) grabs topBox's immediate children which are the HBoxes. How do I go one level lower to topBox's grandchildren? Or is the only way to do this is to run this function on each HBox?

for (var i : int =0; i<topBox.numChildren; i++){
  var child : DisplayObject = topBox.getChildAt(i);
  var myButton:UIComponent = child as UIComponent;
    blah blah               
} 


<mx:VBox id="topBox">

    <mx:HBox id="Hbox1">
        <mx:Button id="button1"
            label="button1" 
            click="myClickHandler"/>

        <mx:Button id="button2" 
            label="button2" 
           click="myClickHandler"/>
    </mx:HBox>

   <mx:HBox id="Hbox2">
        <mx:Button id="button3"
            label="button3" 
            click="myClickHandler"/>

        <mx:Button id="button4" 
            label="button4" 
           click="myClickHandler"/>
    </mx:HBox>

<mx:VBox>

Solution

  • //declare child access function
    private function processChildren(target:DisplayObjectContainer, handler:Function):void
    {
        for (var i:int = target.numChildren - 1; i >= 0; i--)
        {
            handler(target.getChildAt(i));
        }
    }
    
    //call it with handler as anonymous function (may be plain one as well)
    processChildren(topBox, function(target:DisplayObjectContainer):void
       {
           processChildren(target, function(target:DisplayObjectContainer):void
           {
               //this will be called on grandchildren
               if (target is Button)
               {
                   //do something
               }
           });
       });
    

    To make it look less intimidating, one may replace anonymous functions with plain ones, but the idea should be clear.