Setting the open duration for an Accordion container in Flex

The following example shows how you can set the open duration for a Flex Accordion container by setting the openDuration style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/07/setting-the-open-duration-for-an-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.value = accordion.getStyle("openDuration");
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="openDuration:"
                    direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="3000"
                        liveDragging="true"
                        snapInterval="100"
                        tickInterval="500"
                        dataTipPrecision="0" />
                <mx:Label text="{slider.value} ms" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Accordion id="accordion"
            openDuration="{slider.value}"
            creationPolicy="all"
            width="100%"
            height="100%"
            initialize="init();">
        <mx:VBox label="Red"
                backgroundColor="red"
                width="100%"
                height="100%" />
        <mx:VBox label="Orange"
                backgroundColor="haloOrange"
                width="100%"
                height="100%" />
        <mx:VBox label="Yellow"
                backgroundColor="yellow"
                width="100%"
                height="100%" />
        <mx:VBox label="Green"
                backgroundColor="haloGreen"
                width="100%"
                height="100%" />
        <mx:VBox label="Blue"
                backgroundColor="haloBlue"
                width="100%"
                height="100%" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

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

<mx:Style>
    Accordion {
        openDuration: 800;
    }
</mx:Style>

Or, you could set the openDuration style using ActionScript, as seen in the following snippet:

accordion.setStyle("openDuration", 800);

Finally, due to popular demand, here is the “same” example in ActionScript format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/07/setting-the-open-duration-for-an-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MyBox width="100%" height="100%" />

</mx:Application>

comps/MyBox.as

package comps {
    import mx.containers.Accordion;
    import mx.containers.ApplicationControlBar;
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.containers.FormItemDirection;
    import mx.containers.VBox;
    import mx.controls.HSlider;
    import mx.controls.Label;
    import mx.core.Application;
    import mx.core.ContainerCreationPolicy;
    import mx.events.SliderEvent;

    public class MyBox extends VBox {
        public var appControlBar:ApplicationControlBar;
        public var slider:HSlider;
        public var lbl:Label;
        public var accordion:Accordion;
        public var vBox1:VBox;
        public var vBox2:VBox;
        public var vBox3:VBox;
        public var vBox4:VBox;
        public var vBox5:VBox;

        public function MyBox() {
            super();
            init();
        }

        private function init():void {
            vBox1 = new VBox();
            vBox1.label = "Red";
            vBox1.setStyle("backgroundColor", "red");
            vBox1.percentWidth = 100;
            vBox1.percentHeight = 100;

            vBox2 = new VBox();
            vBox2.label = "Orange";
            vBox2.setStyle("backgroundColor", "haloOrange");
            vBox2.percentWidth = 100;
            vBox2.percentHeight = 100;

            vBox3 = new VBox();
            vBox3.label = "Yellow";
            vBox3.setStyle("backgroundColor", "yellow");
            vBox3.percentWidth = 100;
            vBox3.percentHeight = 100;

            vBox4 = new VBox();
            vBox4.label = "Green";
            vBox4.setStyle("backgroundColor", "haloGreen");
            vBox4.percentWidth = 100;
            vBox4.percentHeight = 100;

            vBox5 = new VBox();
            vBox5.label = "Blue";
            vBox5.setStyle("backgroundColor", "haloBlue");
            vBox5.percentWidth = 100;
            vBox5.percentHeight = 100;

            accordion = new Accordion();
            accordion.creationPolicy = ContainerCreationPolicy.ALL;
            accordion.percentWidth = 100;
            accordion.percentHeight = 100;
            accordion.addChild(vBox1);
            accordion.addChild(vBox2);
            accordion.addChild(vBox3);
            accordion.addChild(vBox4);
            accordion.addChild(vBox5);
            addChild(accordion);

            slider = new HSlider();
            slider.minimum = 0;
            slider.maximum = 3000; // 3 seconds
            slider.value = accordion.getStyle("openDuration");
            slider.liveDragging = true;
            slider.snapInterval = 100;
            slider.tickInterval = 500;
            slider.setStyle("dataTipPrecision", 0);
            slider.addEventListener(SliderEvent.CHANGE, slider_change);

            lbl = new Label();

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

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

            appControlBar = new ApplicationControlBar();
            appControlBar.dock = true;
            appControlBar.addChild(form);

            /* Add docked ApplicationControlBar container to main application container. */
            Application.application.addChildAt(appControlBar, 0);
        }

        private function slider_change(evt:SliderEvent):void {
            accordion.setStyle("openDuration", evt.value);
            lbl.text = evt.value.toString();
        }
    }
}

View source is enabled in the following example.

Tagged as: openDuration