Flex 3: How to Access a Component's Grandchildren

Question

Hi,

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>

Answer 1

//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.