[flexcoders] Re: Simple Layout Question

[jamesfin]

Here's a version that uses the constraintColumn...


<?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="{slider.value}" />
                </mx:constraintColumns>

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

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


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

   
</mx:Application>




--- In flexcoders@yahoogroups.com, "jamesfin" <james.alan.finni...@...> wrote:
>
> 
> 
> 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 <warproof@> 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
> >
>