[flexcoders] Re: Simple Layout Question

[jamesfin]

Copy / paste this and it will help you along...



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>


    <mx:VBox backgroundColor="0xff0000">
        <mx:HBox backgroundColor="0x00ff00">
            <mx:Button label="Test 1"/>
            <mx:Button label="Test 1"/>
            <mx:Button label="Test 1"/>
            <mx:Button label="Test 1"/>
        </mx:HBox>

        <mx:Canvas backgroundColor="0x0000ff" width="100%" id="testCanvas">

                        <mx:constraintColumns>
                <mx:ConstraintColumn id="col1" width="50" />
                </mx:constraintColumns>

            <mx:Button id="button2" label="Test 2" left="{slider.value}"/>
        </mx:Canvas>

                <mx:HBox paddingLeft="0" horizontalGap="0">
                        <mx:Spacer width="{slider.value}"/>
                <mx:Button label="Test 3" />
                </mx:HBox>
    </mx:VBox>


 <mx:HSlider id="slider"
                        minimum="0"
                        maximum="{testCanvas.width - button2.width}"
                        value="200"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="20"
                        dataTipPrecision="0" />

   
</mx:Application>



--- In flexcoders@yahoogroups.com, Rich Christiansen <warpr...@...> wrote:
>
> Hey all,
> 
> I just recently started working with Flex (3), and I've got a simple 
> layout question.
> 
> I've got a bunch of components inside of a vbox, and I've noticed that 
> the vbox positions them so they are all at the same x coordinate.  How 
> can I change the x-position (e.g. the indentation) of the components?
> 
> Here's some test code I've been fiddling with:
> 
> <?xml version="1.0" encoding="utf-8"?>
> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>
> 
>     <mx:VBox backgroundColor="0xff0000">
>         <mx:HBox backgroundColor="0x00ff00">
>             <mx:Button label="Test 1"/>
>             <mx:Button label="Test 1"/>
>             <mx:Button label="Test 1"/>
>             <mx:Button label="Test 1"/>
>         </mx:HBox>
> 
>         <mx:Canvas backgroundColor="0x0000ff" >
>             <mx:Button label="Test 2"/>
>         </mx:Canvas>
> 
>         <mx:Button label="Test 3" />
>     </mx:VBox>
>    
> </mx:Application>
> 
> How can I make it so that the blue and red buttons are indented, say, 50 
> pixels?  I've already tried fiddling with the 'left' and 'paddingLeft' 
> attributes with little success... :/
> 
> Any thoughts?  This has got to be possible with VBox, but I can't seem 
> to figure it out...
> 
> Thanks,
> -Rich
>