Flex Examples » VBox

Displaying a drop shadow behind a VBox container in Flex

Peter deHaan — Thu, 25 Sep 2008 06:31:10 +0000

The following example shows how you can display a drop shadow behind a Flex VBox container by setting the borderStyle and dropShadowEnabled styles.

Full code after the jump.

View MXML

View source is enabled in the following example.

You can also set the borderStyle and dropShadowEnabled styles in an external .CSS file or block, as seen in the following example:

View MXML





    
        VBox {
            dropShadowEnabled: true;
            borderStyle: solid;
            borderThickness: 0;
            backgroundColor: red;
        }

Or, you can set the borderStyle and dropShadowEnabled styles using ActionScript, as seen in the following example:

View MXML

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

Setting effects with ActionScript in Flex

Peter deHaan — Thu, 28 Feb 2008 03:55:23 +0000

The following example shows how you can set effects on a Flex Image control using ActionScript by setting the showEffect and hideEffect effects using the setStyle() method.

Full code after the jump.

View MXML

View source is enabled in the following example.

Or, you can also create the effect using ActionScript instead of MXML, as seen in the following example:

View MXML

View source is enabled in the following example.

Clipping a Flex container’s content using the clipContent property

Peter deHaan — Sun, 03 Feb 2008 01:42:03 +0000

The following example shows how you can clip a container’s content in Flex by setting the clipContent property.
According to the Flex 3 documentation for the Container class’s clipContent property:

Whether to apply a clip mask if the positions and/or sizes of this container’s children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.
If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container’s children extend outside the border of the container.
The default value is true.

"1.0" encoding="utf-8"?>

 name="Box_clipContent_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
     dock="true">
         id="checkBox"
                label="clipContent:"
                labelPlacement="left"
                selected="false" />
    >
 
     id="box"
            clipContent="{checkBox.selected}"
            width="320"
            height="240">
         id="img"
                source="http://www.helpexamples.com/flash/images/image1.jpg" />
    >
 
     text="{img.width} x {img.height}" />
 
>

View source is enabled in the following example.

As you can see, the Box container is set to 320 pixels wide by 240 pixels high. The image being loaded is 400 pixels high by 267 pixels wide. When the clipContent property is set to false, the image exceeds the bounds of the Box container causing it to overlap the Label control. If you set the clipContent property to true, the image doesn’t exceed the bounds of the Box container and horizontal and vertical scroll bars appear, allowing you to scroll to see the rest of the content.

Changing a VBox container’s background size in Flex

Peter deHaan — Sat, 05 Jan 2008 22:17:07 +0000

The following example shows how you can set a background image and background size for a Flex VBox container by setting the backgroundImage, and backgroundSize styles.

Full code after the jump.

View MXML





    
        VBox {
            backgroundImage: Embed("Fx.png");
            backgroundColor: red;
        }

View source is enabled in the following example.

Changing a VBox container’s background alpha in Flex

Peter deHaan — Sat, 05 Jan 2008 22:01:09 +0000

The following example shows how you can set both an background image and background color and change its alpha to for a Flex VBox container by setting the backgroundImage, backgroundColor, and backgroundAlpha styles.

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    >
        .containerVBox {
            backgroundColor: haloBlue;
            borderThickness: 1;
            borderColor: black;
            borderStyle: solid;
            paddingLeft: 5;
            paddingRight: 5;
            paddingTop: 5;
            paddingBottom: 5;
        }
    >
 
    
        
            [Bindable]
            [Embed("Fx.png")]
            private var flexLogo:Class;
 
            private function backImage_change(evt:Event):void {
                if (backImage.selected) {
                    vBox.setStyle("backgroundImage", flexLogo);
                } else {
                    vBox.setStyle("backgroundImage", null);
                }
            }
 
            private function backColor_change(evt:Event):void {
                if (backColor.selected) {
                    vBox.setStyle("backgroundColor", colorPicker.selectedColor);
                } else {
                    vBox.setStyle("backgroundColor", null);
                }
            }
        ]]>
    
 
     id="lorem" source="lorem.txt" />
 
     dock="true">
         styleName="plain">
             label="backgroundAlpha:">
                 id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        liveDragging="true"
                        tickInterval="0.1" />
            >
             label="show backgroundImage:">
                 id="backImage"
                        selected="true"
                        change="backImage_change(event);" />
            >
             label="show backgroundColor:">
                 id="backColor"
                        selected="true"
                        change="backColor_change(event);" />
            >
             label="backgroundColor:">
                 id="colorPicker"
                        selectedColor="white"
                        enabled="{backColor.selected}"
                        change="backColor_change(event);" />
            >
        >
    >
 
     styleName="containerVBox">
         id="vBox"
                backgroundImage="{flexLogo}"
                backgroundAlpha="{slider.value}"
                backgroundColor="white"
                backgroundAttachment="fixed"
                width="500"
                height="250">
             width="100%" text="{lorem}" />
        >
    >
 
>

View source is enabled in the following example.

Changing a VBox container’s background image attachment in Flex

Peter deHaan — Sat, 05 Jan 2008 21:35:31 +0000

The following example shows how you can set a background image and change its attachment to scrolling or fixed for a Flex VBox container by setting the backgroundImage and backgroundAttachment styles.

Full code after the jump.

View MXML





    
        .containerVBox {
            backgroundColor: white;
            borderThickness: 1;
            borderColor: black;
            borderStyle: solid;
            paddingLeft: 5;
            paddingRight: 5;
            paddingTop: 5;
            paddingBottom: 5;
        }

View source is enabled in the following example.

If you want to set the backgroundImage and backgroundAttachment styles using an external .CSS file or block, you can use code similar to the following snippet:


    VBox {
        backgroundImage: Embed("Fx.png");
        backgroundAttachment: fixed;
    }

Or, if you want to set the backgroundImage and backgroundAttachment styles using ActionScript, you can use code similar to the following snippet:

Setting the vertical gap between items in a Flex VBox container

Peter deHaan — Fri, 04 Jan 2008 07:26:02 +0000

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.

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    >
        HSlider {
            dataTipPlacement: bottom;
            dataTipPrecision: 0;
        }
    >
 
    
        
            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");
            }
        ]]>
    
 
     dock="true">
         styleName="plain">
             label="verticalGap:"
                    direction="horizontal">
                 id="slider"
                        minimum="0"
                        maximum="20"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
                 text="{slider.value}" />
            >
        >
    >
 
     id="vBox"
            width="100%"
            creationComplete="vBox_creationComplete(event);">
         width="100%" height="50" backgroundColor="red" />
         width="100%" height="50" backgroundColor="haloOrange" />
         width="100%" height="50" backgroundColor="yellow" />
         width="100%" height="50" backgroundColor="haloGreen" />
         width="100%" height="50" backgroundColor="haloBlue" />
    >
 
>

View source is enabled in the following example.

Setting a Flex container’s vertical scroll policy

Peter deHaan — Sat, 10 Nov 2007 06:51:19 +0000

The following example shows how you can use the verticalScrollPolicy property on a Flex VBox container to control the appearance of the vertical scroll bar when the container’s contents exceed the dimensions of the container.

Full code after the jump.

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            private function updateScrollPosition():void {
                vSP.text = vBox.verticalScrollPosition.toString();
                mVSP.text = vBox.maxVerticalScrollPosition.toString();
            }
        ]]>
    
 
    >
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    >
 
     dock="true">
        >
             label="verticalScrollPolicy:">
                 id="comboBox">
                    >
                        >
                             label="auto" />
                             label="on" />
                             label="off" />
                        >
                    >
                >
            >
             label="height:">
                 id="slider"
                        minimum="50"
                        maximum="300"
                        value="50"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="50" />
            >
             label="verticalScrollPosition:">
                 id="vSP" />
            >
             label="maxVerticalScrollPosition:">
                 id="mVSP" />
            >
        >
    >
 
     id="vBox"
            verticalScrollPolicy="{comboBox.selectedItem.label}"
            backgroundColor="haloSilver"
            width="200"
            height="200"
            updateComplete="updateScrollPosition();"
            creationComplete="updateScrollPosition();">
         id="box"
                backgroundColor="haloBlue"
                width="100%"
                height="{slider.value}" />
    >
 
>

View source is enabled in the following example.

Toggling a Flex container’s visibility using states

Peter deHaan — Fri, 24 Aug 2007 14:10:36 +0000

In a previous post, “Toggling a Flex container’s visibility”, we looked at toggling a VBox container’s visibility by setting both the visible property and includeInLayout property. While the approach felt a little crude, we can build the same thing using the much more powerful view states. What are view states and how do we use them? Well, if you’re new to states, this should clear everything up: “Adobe – Flex Quick Start Basics: Creating States”.

Now, with that out of the way, lets look at some code and a basic example.

Full code after the jump.

View MXML





    
        
            
                
                
            
        
    

    
        
            
                
                    
                
            
        
    

    
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }

View source is enabled in the following example.

Toggling a Flex container’s visibility

Peter deHaan — Fri, 24 Aug 2007 06:07:45 +0000

The following example shows a pretty crude method for toggling a container’s visibility and removing it from the Flex application layout. Mind you, this probably isn’t the preferred/recommended method of doing this (I imagine using states would be a lot nicer/cleaner) but hey, I’ll have to save that method up for another entry.

Full code after the jump.

View MXML





    
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }

View source is enabled in the following example.

For an example of using states to toggle containers, see “Toggling a Flex container’s visibility using states”.