Fill HBox on the right? Vbox bottom?

Question

I really need an HBox answer, but I think that if we get a good answer, it will help anyone trying to do a similar thing with VBox. It would be nice to know this in both actionscript and MXML.

So, I have an HBox that I want the text to align to the left and some radios to the right. For instance:

___________________________________________________ | | |Text Yes () No() | |___________________________________________________| 

I am currently doing this with an invisible block 100% wide between text and radios, for example

  _____ __________________________________ ________________ | | | | |Text | invisible box percentWidth=100; | Yes () No() | |_____|__________________________________|________________| 

I would rather just have the radio stations in my own HBox, which is right-aligned as follows:

  _____ ________________________________________________________ | | | |Text | Yes () No() | |_____|________________________________________________________| 

I saw some posts talking about the horizontalAlign property, but I don't see anything in the documentation.

So how can I do this?

Thank you ~ Microphone

Answer 1

There is a horizontalAlign property and a verticalAlign property for the VBox and HBox components (inherited from Box). They define the horizontal and vertical alignment of child components.

I usually use a Spacer object, as Sam mentions. But for what you want to do, this will work just fine.

In MXML, you can do something like:

 <mx:RadioButtonGroup id="yesNoRadioGroup"/> <mx:HBox id="containingHBox" width="100%"> <mx:Text id="textElement" width="200" text="lakdfa lkadslkjraklnd kadflk lakdsjlkja lksdlkjdflk jalkdlkjdfslksajdf lkjasdflkjdsalkjds lksdjlkj"/> <mx:HBox id="rightAlignedHorizontalContent" width="100%" horizontalAlign="right"> <mx:RadioButton id="yesRadio" label="Yes" groupName="yesNoRadioGroup"/> <mx:RadioButton id="noRadio" label="No" groupName ="yesNoRadioGroup"/> </mx:HBox> </mx:HBox> 

Note that an HBox with a horizontalAlign set must have a width value, otherwise it will be wide enough to fit the width of its children, in which case alignment is controversial.

Here is the AS version:

 <mx:Script> <![CDATA[ import mx.controls.RadioButton; import mx.controls.RadioButtonGroup; import mx.controls.Text; private var containingHBox:HBox; private var textElement:Text; private var rightAlignedHorizontalContent:HBox; private var yesNoRadioGroup:RadioButtonGroup; private var yesRadio:RadioButton; private var noRadio:RadioButton; override protected function createChildren():void { super.createChildren(); containingHBox = new HBox(); containingHBox.percentWidth = 100; textElement = new Text(); textElement.width = 200; textElement.text = "lakdfa lkadslkjraklnd kadflk lakdsjlkja lksdlkjdflk jalkdlkjdfslksajdf lkjasdflkjdsalkjds lksdjlkj"; rightAlignedHorizontalContent = new HBox(); rightAlignedHorizontalContent.percentWidth = 100; rightAlignedHorizontalContent.setStyle("horizontalAlign","right"); yesNoRadioGroup = new RadioButtonGroup(); yesRadio = new RadioButton(); yesRadio.label = "Yes"; yesRadio.groupName = "yesNoRadioGroup"; noRadio = new RadioButton(); noRadio.label = "No"; noRadio.groupName = "yesNoRadioGroup"; addChild(containingHBox); containingHBox.addChild(textElement); containingHBox.addChild(rightAlignedHorizontalContent); rightAlignedHorizontalContent.addChild(yesRadio); rightAlignedHorizontalContent.addChild(noRadio); } ]]> </mx:Script> 

Answer 2

If you are already using HBox / VBox for your layout, then using Spacer is the right way to move certain elements all the way to the right / bottom.

An alternative is constrained layout. This is good if you want to anchor content on the left, you use the canvas as a parent, and on the child set "right = '0" to position it all the way to the right. This is less convenient if you stack several items depending on their size. You can use the binding "right = '{noComponent.width}" to put Yes to the right of No.