How to use automatic layout while retaining some control?

I have two panels and a button nested within an hbox. I want the panels to appear side-by-side and the button to appear under both panels equi-distant from the sides of the hbox (i.e. in the center).

Getting the panels side-by-side was easy, but how do I get the button below both panels and in the center. Currently, the but开发者_运维问答ton show up to the right of the second panel.

It'd be easier to answer if you show your code.

but, I see two approaches.

Use nested containers, something like this:

<mx:HBox>
 <mx:VBox>
  <mx:panel />
  <mx:panel />
 </mxVBox>
 <mx:button />
</mx:HBox>

This will work, but it adds excess containers to your application, which long term can cause performance issues.

The second approach is to extend UIComponent and use updateDisplayList to calculate the size and positioning of your children. this is more complicated, but gives you a lot more control. I'm not adventurous enough to write real code for that in the browser, but psuedo code might be something like this:

override public function updateDisplayList(unscaledHeight:Number, unscaledWidth: Number){
 panel1.x = 0
 panel1.y = 0;
 panel2.x = panel1.width;
 pane2.y = 0
 button.x = panel1.height;
 button.y = 0;
}

This would be my preferred approach, although it is not as simple as the first one.