Flex Examples » HBox http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Modifying the corner white box on an MX Container when scroll bars are visible in Flex http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/#comments Wed, 05 May 2010 23:51:13 +0000 Peter deHaan http://blog.flexexamples.com/?p=2938 The following example shows how you can modify the visibility and alpha of the white box in the lower-right corner of an MX Container in Flex when both the horizontal and vertical scroll bars are visible by using the rawChildren property and getChildByName() method.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ --> <mx:Application name="MX_Container_whiteBox_alpha_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" [...]]]> The following example shows how you can modify the visibility and alpha of the white box in the lower-right corner of an MX Container in Flex when both the horizontal and vertical scroll bars are visible by using the rawChildren property and getChildByName() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ -->
<mx:Application name="MX_Container_whiteBox_alpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundGradientColors="[#FF0000,#FF00FF]">
 
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            protected var wBox:DisplayObject;
 
            protected function hBox_creationCompleteHandler(evt:FlexEvent):void {
                wBox = hBox.rawChildren.getChildByName("whiteBox");
            }
 
            protected function sldr1_changeHandler(evt:Event):void {
                wBox.alpha = sldr1.value;
            }
 
            protected function chckBx_changeHandler(evt:Event):void {
                wBox.visible = chckBx.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="whiteBox alpha:">
                <mx:HSlider id="sldr1"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="sldr1_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="whiteBox visible:">
                <mx:CheckBox id="chckBx"
                        selected="true"
                        change="chckBx_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="HBox backgroundAlpha:">
                <mx:HSlider id="sldr2"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="HBox backgroundColor:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="green" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HBox id="hBox"
            backgroundAlpha="{sldr2.value}"
            backgroundColor="{clrPckr.selectedColor}"
            horizontalScrollPolicy="on" verticalScrollPolicy="on"
            width="240" height="160"
            paddingLeft="10" paddingRight="10"
            paddingTop="10" paddingBottom="10"
            creationComplete="hBox_creationCompleteHandler(event);">
        <mx:Button label="MX Button" width="300" height="100%" />
    </mx:HBox>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/feed/ 0 Applying an effect when an HBox container is resized in Flex http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/ http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/#comments Thu, 02 Oct 2008 05:48:03 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/ The following example shows how you can apply a resize effect to a Flex HBox container by setting the resizeEffect style/effect.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/ --> <mx:Application name="HBox_resizeEffect_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:HDividedBox id="hDividedBox" width="100%" height="100%"> <mx:HBox id="hBox1" backgroundColor="haloGreen" resizeEffect="Resize" width="100%" height="100%" /> <mx:HBox [...]]]> The following example shows how you can apply a resize effect to a Flex HBox container by setting the resizeEffect style/effect.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/ -->
<mx:Application name="HBox_resizeEffect_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HDividedBox id="hDividedBox"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                backgroundColor="haloGreen"
                resizeEffect="Resize"
                width="100%"
                height="100%" />
        <mx:HBox id="hBox2"
                backgroundColor="haloBlue"
                resizeEffect="Resize"
                width="100%"
                height="100%" />
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

You can also set the resizeEffect style/effect in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/ -->
<mx:Application name="HBox_resizeEffect_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        HBox {
            resizeEffect: ClassReference("mx.effects.Resize");
        }
    </mx:Style>

    <mx:HDividedBox id="hDividedBox"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%" />
        <mx:HBox id="hBox2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%" />
    </mx:HDividedBox>

</mx:Application>

Or, you can set the resizeEffect style/effect using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/ -->
<mx:Application name="HBox_resizeEffect_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.effects.Resize;

            private function init():void {
                hBox1.setStyle("resizeEffect", Resize);
                hBox2.setStyle("resizeEffect", Resize);
            }
        ]]>
    </mx:Script>

    <mx:HDividedBox id="hDividedBox"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%" />
        <mx:HBox id="hBox2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%" />
    </mx:HDividedBox>

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/ -->
<mx:Application name="HBox_resizeEffect_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.HBox;
            import mx.containers.HDividedBox;
            import mx.effects.Resize;

            private var hBox1:HBox;
            private var hBox2:HBox;
            private var hDividedBox:HDividedBox;

            private function init():void {
                hBox1 = new HBox();
                hBox1.percentWidth = 100;
                hBox1.percentHeight = 100;
                hBox1.setStyle("backgroundColor", "haloGreen");
                hBox1.setStyle("resizeEffect", Resize);

                hBox2 = new HBox();
                hBox2.percentWidth = 100;
                hBox2.percentHeight = 100;
                hBox2.setStyle("backgroundColor", "haloBlue");
                hBox2.setStyle("resizeEffect", Resize);

                hDividedBox = new HDividedBox();
                hDividedBox.percentWidth = 100;
                hDividedBox.percentHeight = 100;
                hDividedBox.addChild(hBox1);
                hDividedBox.addChild(hBox2);
                addChild(hDividedBox);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resized-in-flex/feed/ 11 Clipping a Flex container’s content using the clipContent property http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/ http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/#comments Sun, 03 Feb 2008 01:42:03 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/ 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 [...]]]> 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. 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/ -->
<mx:Application name="Box_clipContent_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="clipContent:"
                labelPlacement="left"
                selected="false" />
    </mx:ApplicationControlBar>
 
    <mx:Box id="box"
            clipContent="{checkBox.selected}"
            width="320"
            height="240">
        <mx:Image id="img"
                source="http://www.helpexamples.com/flash/images/image1.jpg" />
    </mx:Box>
 
    <mx:Label text="{img.width} x {img.height}" />
 
</mx:Application>

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.

 
]]> http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/feed/ 10