Flex Examples » VDividedBox http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting a custom divider alpha on the DividedBox container in Flex http://blog.flexexamples.com/2008/10/14/setting-a-custom-divider-alpha-on-the-dividedbox-container-in-flex/ http://blog.flexexamples.com/2008/10/14/setting-a-custom-divider-alpha-on-the-dividedbox-container-in-flex/#comments Wed, 15 Oct 2008 03:53:35 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/14/setting-a-custom-divider-alpha-on-the-dividedbox-container-in-flex/ In a previous example, “Setting a custom divider color on the DividedBox container in Flex”, we saw how you could set a custom divider color on a Flex DividedBox container (HDividedBox or VDividedBox) by setting the dividerColor style.

The following example shows how you can set a custom divider alpha on a Flex DividedBox [...]]]> In a previous example, “Setting a custom divider color on the DividedBox container in Flex”, we saw how you could set a custom divider color on a Flex DividedBox container (HDividedBox or VDividedBox) by setting the dividerColor style.

The following example shows how you can set a custom divider alpha on a Flex DividedBox container (HDividedBox or VDividedBox) by setting the dividerAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/14/setting-a-custom-divider-alpha-on-the-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="dividerAlpha:"
                    direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.75"
                        snapInterval="0.05"
                        tickInterval="0.1"
                        liveDragging="true" />
                <mx:Label text="{Math.round(slider.value * 100)}%" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="dividedBox"
            dividerAlpha="{slider.value}"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="100" />
    </mx:HDividedBox>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/14/setting-a-custom-divider-alpha-on-the-dividedbox-container-in-flex/feed/ 0 Setting the vertical divider cursor on a VDividedBox container in Flex http://blog.flexexamples.com/2008/10/10/setting-the-vertical-divider-cursor-on-a-vdividedbox-container-in-flex/ http://blog.flexexamples.com/2008/10/10/setting-the-vertical-divider-cursor-on-a-vdividedbox-container-in-flex/#comments Sat, 11 Oct 2008 06:58:31 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/10/setting-the-vertical-divider-cursor-on-a-vdividedbox-container-in-flex/ In a previous example, “Setting the horizontal divider cursor on an HDividedBox container in Flex”, we saw how to set a horizontal divider cursor on a Flex HDividedBox container by setting the horizontalDividerCursor style.

The following example shows how you can set a vertical divider cursor on a Flex VDividedBox container by setting the [...]]]> In a previous example, “Setting the horizontal divider cursor on an HDividedBox container in Flex”, we saw how to set a horizontal divider cursor on a Flex HDividedBox container by setting the horizontalDividerCursor style.

The following example shows how you can set a vertical divider cursor on a Flex VDividedBox container by setting the verticalDividerCursor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/10/setting-the-vertical-divider-cursor-on-a-vdividedbox-container-in-flex/ -->
<mx:Application name="VDividedBox_verticalDividerCursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:VDividedBox id="vDividedBox"
            verticalDividerCursor="@Embed('assets/arrow_refresh.png')"
            width="100%"
            height="100%">
        <mx:HBox backgroundColor="haloGreen"
                width="100%"
                height="100%">
        </mx:HBox>
        <mx:HBox backgroundColor="haloBlue"
                width="100%"
                height="100%">
        </mx:HBox>
    </mx:VDividedBox>

</mx:Application>

View source is enabled in the following example.

You can also set the verticalDividerCursor style using 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/10/setting-the-vertical-divider-cursor-on-a-vdividedbox-container-in-flex/ -->
<mx:Application name="VDividedBox_verticalDividerCursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        VDividedBox {
            verticalDividerCursor: Embed("assets/arrow_refresh.png");
        }
    </mx:Style>

    <mx:VDividedBox id="VDividedBox"
            width="100%"
            height="100%">
        <mx:HBox backgroundColor="haloGreen"
                width="100%"
                height="100%">
        </mx:HBox>
        <mx:HBox backgroundColor="haloBlue"
                width="100%"
                height="100%">
        </mx:HBox>
    </mx:VDividedBox>

</mx:Application>

Or, you can set the verticalDividerCursor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/10/setting-the-vertical-divider-cursor-on-a-vdividedbox-container-in-flex/ -->
<mx:Application name="VDividedBox_verticalDividerCursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Embed("assets/arrow_refresh.png")]
            private const ArrowRefreshIcon:Class;

            private function vDividedBox_init():void {
                vDividedBox.setStyle("verticalDividerCursor", ArrowRefreshIcon);
            }
        ]]>
    </mx:Script>

    <mx:VDividedBox id="vDividedBox"
            width="100%"
            height="100%"
            initialize="vDividedBox_init();">
        <mx:HBox backgroundColor="haloGreen"
                width="100%"
                height="100%">
        </mx:HBox>
        <mx:HBox backgroundColor="haloBlue"
                width="100%"
                height="100%">
        </mx:HBox>
    </mx:VDividedBox>

</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/10/setting-the-vertical-divider-cursor-on-a-vdividedbox-container-in-flex/ -->
<mx:Application name="VDividedBox_verticalDividerCursor_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.VDividedBox;

            [Embed("assets/arrow_refresh.png")]
            private const ArrowRefreshIcon:Class;

            private var vDividedBox:VDividedBox;
            private var hBox1:HBox;
            private var hBox2:HBox;

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

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

                vDividedBox = new VDividedBox();
                vDividedBox.percentWidth = 100;
                vDividedBox.percentHeight = 100;
                vDividedBox.addChild(hBox1);
                vDividedBox.addChild(hBox2);
                vDividedBox.setStyle("verticalDividerCursor",
                            ArrowRefreshIcon);
                addChild(vDividedBox);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/10/setting-the-vertical-divider-cursor-on-a-vdividedbox-container-in-flex/feed/ 1 Setting the padding between children in a DividedBox in Flex http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/#comments Tue, 23 Sep 2008 05:42:47 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ The following example shows how you can adjust the horizontal padding between children in a Flex HDividedBox container by setting the horizontalGap style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ --> <mx:Application name="HDividedBox_horizontalGap_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="horizontalGap:" direction="horizontal"> <mx:HSlider id="slider" minimum="6" [...]]]> The following example shows how you can adjust the horizontal padding between children in a Flex HDividedBox container by setting the horizontalGap style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ -->
<mx:Application name="HDividedBox_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:"
                    direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="6"
                        maximum="20"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="dividedBox"
            horizontalGap="{slider.value}"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="100" />
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

You can also set the horizontalGap style 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/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ -->
<mx:Application name="HDividedBox_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        HDividedBox {
            horizontalGap: 6;
        }
    </mx:Style>

    <mx:HDividedBox id="dividedBox"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="100" />
    </mx:HDividedBox>

</mx:Application>

Or, you can set the horizontalGap style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ -->
<mx:Application name="HDividedBox_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                dividedBox.setStyle("horizontalGap", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:"
                    direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="6"
                        maximum="20"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="dividedBox"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="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/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ -->
<mx:Application name="HDividedBox_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Box;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.FormItemDirection;
            import mx.containers.HDividedBox;
            import mx.controls.HSlider;
            import mx.controls.Label;
            import mx.events.SliderEvent;

            private var slider:HSlider;
            private var dividedBox:HDividedBox;
            private var box1:Box;
            private var box2:Box;
            private var lbl:Label;

            private function init():void {
                slider = new HSlider();
                slider.minimum = 6;
                slider.maximum = 20;
                slider.value = 10;
                slider.snapInterval = 1;
                slider.tickInterval = 1;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                lbl = new Label();

                var formItem:FormItem = new FormItem();
                formItem.label = "horizontalGap:";
                formItem.direction = FormItemDirection.HORIZONTAL;
                formItem.addChild(slider);
                formItem.addChild(lbl);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                box1 = new Box();
                box1.percentWidth = 100;
                box1.percentHeight = 100;
                box1.minWidth = 100;
                box1.setStyle("backgroundColor", "haloGreen");

                box2 = new Box();
                box2.percentWidth = 100;
                box2.percentHeight = 100;
                box2.minWidth = 100;
                box2.setStyle("backgroundColor", "haloBlue");

                dividedBox = new HDividedBox();
                dividedBox.percentWidth = 100;
                dividedBox.percentHeight = 100;
                dividedBox.addChild(box1);
                dividedBox.addChild(box2);
                addChild(dividedBox);
            }

            private function slider_change(evt:SliderEvent):void {
                dividedBox.setStyle("horizontalGap", evt.value);
                lbl.text = evt.value.toString();
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/feed/ 1 Customizing the divider skin on a DividedBox container in Flex http://blog.flexexamples.com/2008/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/ http://blog.flexexamples.com/2008/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/#comments Fri, 19 Sep 2008 06:14:14 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/ The following example shows how you can customize the divider skin on a Flex HDividedBox or VDividedBox container by setting the dividerSkin style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/ --> <mx:Application name="HDividedBox_dividerSkin_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:HDividedBox id="dividedBox" dividerSkin="@Embed('assets/DividedBox.png')" horizontalGap="24" width="100%" height="100%"> <mx:Box id="box1" backgroundColor="haloGreen" width="100%" [...]]]> The following example shows how you can customize the divider skin on a Flex HDividedBox or VDividedBox container by setting the dividerSkin style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HDividedBox id="dividedBox"
            dividerSkin="@Embed('assets/DividedBox.png')"
            horizontalGap="24"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="100" />
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

You can also set the dividerSkin style 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/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        HDividedBox {
            dividerSkin: Embed("assets/DividedBox.png");
            horizontalGap: 24;
        }
    </mx:Style>

    <mx:HDividedBox id="dividedBox"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="100" />
    </mx:HDividedBox>

</mx:Application>

Or, you can set the dividerSkin style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            [Embed("assets/DividedBox.png")]
            private const customDividerSkin:Class;

            private function init():void {
                dividedBox.setStyle("dividerSkin", customDividerSkin);
            }
        ]]>
    </mx:Script>

    <mx:HDividedBox id="dividedBox"
            horizontalGap="24"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="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/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.Box;
            import mx.containers.HDividedBox;

            [Embed("assets/DividedBox.png")]
            private const customDividerSkin:Class;

            private var dividedBox:HDividedBox;
            private var box1:Box;
            private var box2:Box;

            private function init():void {
                box1 = new Box();
                box1.percentWidth = 100;
                box1.percentHeight = 100;
                box1.minWidth = 100;
                box1.setStyle("backgroundColor", "haloGreen");

                box2 = new Box();
                box2.percentWidth = 100;
                box2.percentHeight = 100;
                box2.minWidth = 100;
                box2.setStyle("backgroundColor", "haloBlue");

                dividedBox = new HDividedBox();
                dividedBox.percentWidth = 100;
                dividedBox.percentHeight = 100;
                dividedBox.setStyle("dividerSkin", customDividerSkin);
                dividedBox.setStyle("horizontalGap", 24);
                dividedBox.addChild(box1);
                dividedBox.addChild(box2);
                addChild(dividedBox);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/18/customizing-the-divider-skin-on-a-dividedbox-container-in-flex/feed/ 1 Setting a custom divider color on the DividedBox container in Flex http://blog.flexexamples.com/2008/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/ http://blog.flexexamples.com/2008/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/#comments Thu, 18 Sep 2008 06:03:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/ The following example shows how you can set a custom divider color on a Flex DividedBox container (HDividedBox or VDividedBox) by setting the dividerColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/ --> <mx:Application name="HDividedBox_dividerColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="dividerColor:"> <mx:ColorPicker id="colorPicker" [...]]]> The following example shows how you can set a custom divider color on a Flex DividedBox container (HDividedBox or VDividedBox) by setting the dividerColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="dividerColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="dividedBox"
            dividerColor="{colorPicker.selectedColor}"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="100" />
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

You can also set the dividerColor style 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/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        HDividedBox {
            dividerColor: red;
        }
    </mx:Style>

    <mx:HDividedBox id="dividedBox"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="100" />
    </mx:HDividedBox>

</mx:Application>

Or, you can set the dividerColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                dividedBox.setStyle("dividerColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="dividerColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="dividedBox"
            width="100%"
            height="100%">
        <mx:Box id="box1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%"
                minWidth="100" />
        <mx:Box id="box2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%"
                minWidth="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/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_dividerColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Box;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.HDividedBox;
            import mx.controls.ColorPicker;
            import mx.events.ColorPickerEvent;

            private var colorPicker:ColorPicker;
            private var box1:Box;
            private var box2:Box;
            private var dividedBox:HDividedBox;

            private function init():void {
                colorPicker = new ColorPicker();
                colorPicker.addEventListener(ColorPickerEvent.CHANGE,
                            colorPicker_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "dividerColor:";
                formItem.addChild(colorPicker);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                box1 = new Box();
                box1.percentWidth = 100;
                box1.percentHeight = 100;
                box1.minWidth = 100;
                box1.setStyle("backgroundColor", "haloGreen");

                box2 = new Box();
                box2.percentWidth = 100;
                box2.percentHeight = 100;
                box2.minWidth = 100;
                box2.setStyle("backgroundColor", "haloBlue");

                dividedBox = new HDividedBox();
                dividedBox.percentWidth = 100;
                dividedBox.percentHeight = 100;
                dividedBox.addChild(box1);
                dividedBox.addChild(box2);
                addChild(dividedBox);
            }

            private function colorPicker_change(evt:ColorPickerEvent):void {
                dividedBox.setStyle("dividerColor", evt.color);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/17/setting-a-custom-divider-color-on-the-dividedbox-container-in-flex/feed/ 4 Programmatically resizing a Flex HDividedBox container http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/ http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/#comments Wed, 10 Oct 2007 04:15:30 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/ The following example shows how you can programmatically resize an HDividedBox container in Flex using the moveDivider() and getDividerAt() methods.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <!-- Move the divider 20 pixels to the left for as long [...]]]> The following example shows how you can programmatically resize an HDividedBox container in Flex using the moveDivider() and getDividerAt() methods.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <!-- Move the divider 20 pixels to the left for as long as the
             Button control is pressed (autoRepeat=true). -->
        <mx:Button label="x-=20"
                autoRepeat="true"
                buttonDown="hdivbox.moveDivider(0, -20);" />
        <!-- Move the divider 20 pixels to the right for as long as the
             Button control is pressed (autoRepeat=true). -->
        <mx:Button label="x+=20"
                autoRepeat="true"
                buttonDown="hdivbox.moveDivider(0, 20);" />

        <mx:Spacer width="50" />

        <!-- Move the divider to 100 pixels from the left. -->
        <mx:Button label="x=100"
                click="hdivbox.getDividerAt(0).x = 100;" />
        <!-- Move the divider to 420 pixels from the left. -->
        <mx:Button label="x=420"
                click="hdivbox.getDividerAt(0).x = 420;" />
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="hdivbox" width="100%" height="100%">
        <mx:VBox backgroundColor="haloGreen" width="100%" height="100%">
            <!-- children -->
        </mx:VBox>
        <mx:VBox backgroundColor="haloBlue" width="100%" height="100%">
            <!-- children -->
        </mx:VBox>
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

In the previous example, the moveDivider() method is used to move the divider relative to its current position. So, calling moveDivider(0, 20) moves the first (and only) divider 20 pixels to the right. To move the divider 20 pixels to the right, you’d pass a negative value for the second parameter, like so:

moveDivider(0, -20)

To set the divider to a specific point, you can use the getDividerAt() method and set the divider’s x property (for a horizontal divided box, if you were using a vertical divided box you would set the y property instead). So again in the previous example, you would use the following code to set the first divider to 100 pixels from the left edge:

hdivbox.getDividerAt(0).x = 100;

If you wanted to force the nested VBox containers to have a minimum or maximum width, simply set the minWidth and/or maxWidth properties, as seen in the following snippet:

<mx:VBox backgroundColor="haloGreen"
        width="100%"
        height="100%"
        minWidth="50"
        maxWidth="250">
    <!-- children -->
</mx:VBox>

Now when you resize the HDividedBox container’s divider, the green VBox container will be at least 50 pixels wide and at most 250 pixels wide.

 
]]> http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/feed/ 19