'VBox gap'에 해당되는 글 1건

  1. 2013.05.28 Setting the vertical gap between items in a Flex VBox container
00.Flex,Flash,ActionScript2013. 5. 28. 14:57
반응형

Setting the vertical gap between items in a Flex VBox container

By On January 3, 2008 · 7 Comments

The following example shows how you can control the amount of vertical spacing between items in a VBox container by setting the verticalGap style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/03/setting-the-vertical-gap-between-items-in-a-flex-vbox-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        HSlider {
            dataTipPlacement: bottom;
            dataTipPrecision: 0;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.SliderEvent;
 
            private function slider_change(evt:SliderEvent):void {
                vBox.setStyle("verticalGap", evt.value);
            }
 
            private function vBox_creationComplete(evt:FlexEvent):void {
                slider.value = vBox.getStyle("verticalGap");
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalGap:"
                    direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:VBox id="vBox"
            width="100%"
            creationComplete="vBox_creationComplete(event);">
        <mx:Box width="100%" height="50" backgroundColor="red" />
        <mx:Box width="100%" height="50" backgroundColor="haloOrange" />
        <mx:Box width="100%" height="50" backgroundColor="yellow" />
        <mx:Box width="100%" height="50" backgroundColor="haloGreen" />
        <mx:Box width="100%" height="50" backgroundColor="haloBlue" />
    </mx:VBox>
 
</mx:Application>

View source is enabled in the following example.

 

Posted by 1010