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 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>

11 thoughts on “Applying an effect when an HBox container is resized in Flex

  1. mg,

    Good catch!
    I haven’t tested it, but you may be able to solve the problem by defining a minimum width on each of the HBox containers (I only saw the problem if you were dragging left to right, and the second HBox was 0 pixels), or possibly you could fix the example by setting the resizeEffect style/effect on only one of the two HBox containers.

    Peter

  2. defining a minWidth=”1″ on the right one “solves” the thing, but why the hell is it happening when you drag left to right border and not when you drag right to left border???

  3. Hello,

    I want to show or hide left box on clicking of divider. And while hiding on showing i want to use resize effect.

    I tried but its not working properly… :'(

    Here is my code

  4. Hi P8r,
    I applied the Resize effect in Adobe AIR and its weired. Isn’t AIR supposed to handle the effects ? I had 2 components inside . Anyways Nice demonstration of resize effect.

Comments are closed.