Fill an HBox in from the right? VBox from the bottom?

Question

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

So I have an HBox that I want some text aligned from the left and some radios from the right. Like so:

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

I am currently doing this by having an invisible box with a width of 100% between the text and the radios, like this

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

I would prefer to just have the radios in their own HBox that is right aligned like this:

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

I've seen some posts talk about a horizontalAlign property, but I don't see it in the documentation anywhere.

So how can I accomplish this?

Thanks ~mike

Answer 1

There is a horizontalAlign property, and a verticalAlign property, on the VBox and HBox components (it's inherited from Box). They determine the horizontal and vertical alignment of the component's children.

I generally use the Spacer object, like Sam mentions. But for what you want to do, this will work great.

In MXML you could 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 the HBox with the horizontalAlign set has to have a width value, otherwise, it will only be wide enough to accommodate the width of its children, in which case alignment is moot.

Here's an 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're already using HBox/VBox for your layout, then using Spacer is the right way to go to move certain items all the way over to the right/bottom.

An alternative is constraint based layout. This is good when you want to anchor content to the left, you use a canvas as the parent and on the child set "right='0'" to position it all the way to the right. This is less ideal when you are stacking multiple items based on their size. You could use a binding, "right='{noComponent.width}" to put Yes just to the right of No.