Flex Examples » openDuration http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing the opening and closing easing functions on a Halo ComboBox control in Flex 4 http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/ http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/#comments Wed, 05 Aug 2009 14:20:05 +0000 Peter deHaan http://blog.flexexamples.com/?p=1504 In a previous example, “Changing the Flex ComboBox control’s opening and closing easing functions”, we saw how you could control how the open/close duration and easing functions on the drop down list in a Halo ComboBox control by setting the openDuration, openEasingFunction, closeDuration, and closeEasingFunction styles.

The following example shows how you can set [...]]]> In a previous example, “Changing the Flex ComboBox control’s opening and closing easing functions”, we saw how you could control how the open/close duration and easing functions on the drop down list in a Halo ComboBox control by setting the openDuration, openEasingFunction, closeDuration, and closeEasingFunction styles.

The following example shows how you can set the Halo ComboBox control’s openEasingFunction and closeEasingFunction styles in a <Style/> block using the new PropertyReference() method in Flex 4.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/ -->
<s:Application name="Halo_ComboBox_openEasingFunction_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|ComboBox {
            openDuration: 1000;
            openEasingFunction: PropertyReference("mx.effects.easing.Bounce.easeOut");
            closeDuration: 1000;
            closeEasingFunction: PropertyReference("mx.effects.easing.Bounce.easeIn");
            alternatingItemColors: #DFDFDF, #EEEEEE;
        }
    </fx:Style>
 
    <mx:ComboBox id="comboBox"
            prompt="Please select an item..."
            selectedIndex="-1"
            dropdownWidth="150"
            horizontalCenter="0"
            top="20">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Item 1" />
                <fx:Object label="Item 2" />
                <fx:Object label="Item 3" />
                <fx:Object label="Item 4" />
                <fx:Object label="Item 5" />
                <fx:Object label="Item 6" />
                <fx:Object label="Item 7" />
                <fx:Object label="Item 8" />
            </fx:Array>
        </mx:dataProvider>
    </mx:ComboBox>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/feed/ 8 Setting the open duration on a Menu control in Flex http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/#comments Wed, 20 Aug 2008 06:08:23 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ The following example shows how you can set the open duration of a Flex Menu control by setting the openDuration style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.controls.Menu; import mx.events.SliderEvent; private var menu:Menu; private function init():void [...]]]> The following example shows how you can set the open duration of a Flex Menu control by setting the openDuration style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

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

            private var menu:Menu;

            private function init():void {
                menu = Menu.createMenu(null, xmlDP, true);
                menu.labelField = "@label";
                menu.showRoot = false;
                menu.variableRowHeight = true;
            }

            private function showMenu():void {
                menu.show(50, 50);
            }

            private function slider_change(evt:SliderEvent):void {
                menu.hide();
                menu.setStyle("openDuration", evt.value);
                showMenu();
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="menuDataProvider.xml" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="openDuration:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="2000"
                        value="250"
                        snapInterval="50"
                        tickInterval="100"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Open Menu"
                click="showMenu();"/>
    </mx:ApplicationControlBar>

</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 example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Style>
        Menu {
            openDuration: 1500;
        }
    </mx:Style>

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

            private var menu:Menu;

            private function init():void {
                menu = Menu.createMenu(null, xmlDP, true);
                menu.labelField = "@label";
                menu.showRoot = false;
                menu.variableRowHeight = true;
            }

            private function showMenu():void {
                menu.show(50, 50);
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="menuDataProvider.xml" />

    <mx:ApplicationControlBar dock="true">
        <mx:Spacer width="100%" />
        <mx:Button label="Open Menu"
                click="showMenu();"/>
    </mx:ApplicationControlBar>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/feed/ 5 Setting the number of visible items in a ComboBox control’s dropdown menu in Flex http://blog.flexexamples.com/2008/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/ http://blog.flexexamples.com/2008/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/#comments Thu, 12 Jun 2008 06:37:19 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/ The following example shows how you can set the number of visible items in a Flex ComboBox control’s dropdown menu by setting the rowCount property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.NumericStepperEvent; private function numericStepper_change(evt:NumericStepperEvent):void { callLater(comboBoxOpen); [...]]]> The following example shows how you can set the number of visible items in a Flex ComboBox control’s dropdown menu by setting the rowCount property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

            private function numericStepper_change(evt:NumericStepperEvent):void {
                callLater(comboBoxOpen);
            }

            private function comboBoxOpen():void {
                comboBox.open();
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:NumericStepper id="numericStepper"
                minimum="0"
                maximum="10"
                change="numericStepper_change(event);" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            rowCount="{numericStepper.value}"
            openDuration="0"
            closeDuration="0"
            width="100" />

</mx:Application>

View source is enabled in the following example.

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/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.ComboBox;
            import mx.controls.NumericStepper;
            import mx.containers.ApplicationControlBar;
            import mx.events.NumericStepperEvent;

            private var arr:Array;
            private var appControlBar:ApplicationControlBar;
            private var numericStepper:NumericStepper;
            private var comboBox:ComboBox;

            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({label:"Four"});
                arr.push({label:"Five"});
                arr.push({label:"Six"});
                arr.push({label:"Seven"});
                arr.push({label:"Eight"});
                arr.push({label:"Nine"});

                numericStepper = new NumericStepper();
                numericStepper.minimum = 0;
                numericStepper.maximum = 10;
                numericStepper.addEventListener(NumericStepperEvent.CHANGE, numericStepper_change);

                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(numericStepper);
                Application.application.addChildAt(appControlBar, 0);

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.rowCount = 5;
                comboBox.width = 100;
                comboBox.setStyle("openDuration", 0);
                comboBox.setStyle("closeDuration", 0);
                addChild(comboBox);
            }

            private function numericStepper_change(evt:NumericStepperEvent):void {
                comboBox.rowCount = evt.value;
                callLater(comboBoxOpen);
            }

            private function comboBoxOpen():void {
                comboBox.open();
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/feed/ 6 Setting the open duration for an Accordion container in Flex http://blog.flexexamples.com/2008/05/07/setting-the-open-duration-for-an-accordion-container-in-flex/ http://blog.flexexamples.com/2008/05/07/setting-the-open-duration-for-an-accordion-container-in-flex/#comments Thu, 08 May 2008 03:49:50 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/07/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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2008/05/07/setting-the-open-duration-for-an-accordion-container-in-flex/feed/ 0 Toggling the text field in a Flex ColorPicker control http://blog.flexexamples.com/2007/12/31/toggling-the-text-field-in-a-flex-colorpicker-control/ http://blog.flexexamples.com/2007/12/31/toggling-the-text-field-in-a-flex-colorpicker-control/#comments Tue, 01 Jan 2008 06:29:42 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/31/toggling-the-text-field-in-a-flex-colorpicker-control/ The following example shows how you can toggle the nested text field in a ColorPicker control’s swatch panel in Flex by setting the showTextField property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/31/toggling-the-text-field-in-a-flex-colorpicker-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function checkBox_change(evt:Event):void { colorPicker.open(); } ]]> [...]]]> The following example shows how you can toggle the nested text field in a ColorPicker control’s swatch panel in Flex by setting the showTextField property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/toggling-the-text-field-in-a-flex-colorpicker-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="showTextField:"
                labelPlacement="left"
                selected="true"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker"
            showTextField="{checkBox.selected}"
            openDuration="0"
            closeDuration="0" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/31/toggling-the-text-field-in-a-flex-colorpicker-control/feed/ 0 Programmatically opening and closing ComboBox controls in Flex http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/#comments Fri, 14 Dec 2007 05:56:19 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ The following examples show how you can programmatically open and close a ComboBox control’s drop down menu in Flex by using the open() and close() methods of the ComboBox class in Flex.

Full code after the jump.

The following example shows how you can open and close a ComboBox control’s drop down menu by [...]]]> The following examples show how you can programmatically open and close a ComboBox control’s drop down menu in Flex by using the open() and close() methods of the ComboBox class in Flex.

Full code after the jump.

The following example shows how you can open and close a ComboBox control’s drop down menu by rolling over a Button control on the display list.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="open"
                rollOver="comboBox.open();"
                enabled="false" />
        <mx:Button label="close"
                rollOver="comboBox.close();"
                enabled="false" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            openDuration="2000"
            closeDuration="1000">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="one" />
                <mx:Object label="two" />
                <mx:Object label="three" />
                <mx:Object label="four" />
                <mx:Object label="five" />
                <mx:Object label="six" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

The following example shows how you can open a ComboBox control’s drop down menu using ActionScript if the combo box fails validation (if it doesn’t have an item selected, for example):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ValidationResultEvent;
            import mx.controls.Alert;

            private function numberValidator_invalid(evt:ValidationResultEvent):void {
                comboBox.errorString = "Please select a thing";
                comboBox.open();
            }

            private function numberValidator_valid(evt:ValidationResultEvent):void {
                comboBox.errorString = "";
                Alert.show("Success");
            }

            private function validateCheckBox():void {
                numberValidator.validate(comboBox.selectedIndex);
            }
        ]]>
    </mx:Script>

    <mx:NumberValidator id="numberValidator"
            minValue="0"
            invalid="numberValidator_invalid(event);"
            valid="numberValidator_valid(event);" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="validate"
                click="validateCheckBox();" />
        <mx:Button label="reset"
                click="comboBox.selectedIndex = -1;" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            prompt="Please select a thing..."
            openDuration="2000"
            closeDuration="1000"
            close="validateCheckBox();">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="one" />
                <mx:Object label="two" />
                <mx:Object label="three" />
                <mx:Object label="four" />
                <mx:Object label="five" />
                <mx:Object label="six" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/feed/ 0 Changing the open duration and easing function on a Flex Tree control http://blog.flexexamples.com/2007/11/27/changing-the-open-duration-and-easing-function-on-a-flex-tree-control/ http://blog.flexexamples.com/2007/11/27/changing-the-open-duration-and-easing-function-on-a-flex-tree-control/#comments Tue, 27 Nov 2007 08:04:59 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/27/changing-the-open-duration-and-easing-function-on-a-flex-tree-control/ The following example shows how you can change the open duration and open easing function on a Tree control in Flex by setting the openDuration and openEasingFunction styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/27/changing-the-open-duration-and-easing-function-on-a-flex-tree-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.effects.easing.*; ]]> </mx:Script> [...]]]> The following example shows how you can change the open duration and open easing function on a Tree control in Flex by setting the openDuration and openEasingFunction styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/27/changing-the-open-duration-and-easing-function-on-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="xmlListColl">
        <mx:source>
            <mx:XMLList>
                <node label="One">
                    <node label="One.1" />
                    <node label="One.2" />
                    <node label="One.3" />
                </node>
                <node label="Two">
                    <node label="Two.1" />
                    <node label="Two.2" />
                    <node label="Two.3" />
                </node>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Tree id="tree"
            dataProvider="{xmlListColl}"
            labelField="@label"
            selectionColor="haloBlue"
            textSelectedColor="white"
            openDuration="3000"
            openEasingFunction="Bounce.easeOut"
            fontSize="24"
            fontWeight="bold"
            rowHeight="40"
            rowCount="4"
            width="300" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/27/changing-the-open-duration-and-easing-function-on-a-flex-tree-control/feed/ 4 Changing the Accordion container’s easing duration and easing functions http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/#comments Tue, 28 Aug 2007 05:57:19 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ The following example shows how you can control the easing duration and easing function that the Accordion container uses when changing the visible child container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.effects.easing.*; private function init():void { [...]]]> The following example shows how you can control the easing duration and easing function that the Accordion container uses when changing the visible child container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

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

            private function init():void {
                /**    Back */
                arrColl.addItem({label:"Back.easeIn", func:Back.easeIn});
                arrColl.addItem({label:"Back.easeOut", func:Back.easeOut});
                arrColl.addItem({label:"Back.easeInOut", func:Back.easeInOut});
                /** Bounce */
                arrColl.addItem({label:"Bounce.easeIn", func:Bounce.easeIn});
                arrColl.addItem({label:"Bounce.easeOut", func:Bounce.easeOut});
                arrColl.addItem({label:"Bounce.easeInOut", func:Bounce.easeInOut});
                /** Circular */
                arrColl.addItem({label:"Circular.easeIn", func:Circular.easeIn});
                arrColl.addItem({label:"Circular.easeOut", func:Circular.easeOut});
                arrColl.addItem({label:"Circular.easeInOut", func:Circular.easeInOut});
                /** Cubic */
                arrColl.addItem({label:"Cubic.easeIn", func:Cubic.easeIn});
                arrColl.addItem({label:"Cubic.easeOut", func:Cubic.easeOut});
                arrColl.addItem({label:"Cubic.easeInOut", func:Cubic.easeInOut});
                /** Elastic */
                arrColl.addItem({label:"Elastic.easeIn", func:Elastic.easeIn});
                arrColl.addItem({label:"Elastic.easeOut", func:Elastic.easeOut});
                arrColl.addItem({label:"Elastic.easeInOut", func:Elastic.easeInOut});
                /** Exponential */
                arrColl.addItem({label:"Exponential.easeIn", func:Exponential.easeIn});
                arrColl.addItem({label:"Exponential.easeOut", func:Exponential.easeOut});
                arrColl.addItem({label:"Exponential.easeInOut", func:Exponential.easeInOut});
                /** Linear */
                arrColl.addItem({label:"Linear.easeIn", func:Linear.easeIn});
                arrColl.addItem({label:"Linear.easeOut", func:Linear.easeOut});
                arrColl.addItem({label:"Linear.easeInOut", func:Linear.easeInOut});
                /** Quadratic */
                arrColl.addItem({label:"Quadratic.easeIn", func:Quadratic.easeIn});
                arrColl.addItem({label:"Quadratic.easeOut", func:Quadratic.easeOut});
                arrColl.addItem({label:"Quadratic.easeInOut", func:Quadratic.easeInOut});
                /** Quartic */
                arrColl.addItem({label:"Quartic.easeIn", func:Quartic.easeIn});
                arrColl.addItem({label:"Quartic.easeOut", func:Quartic.easeOut});
                arrColl.addItem({label:"Quartic.easeInOut", func:Quartic.easeInOut});
                /** Quintic */
                arrColl.addItem({label:"Quintic.easeIn", func:Quintic.easeIn});
                arrColl.addItem({label:"Quintic.easeOut", func:Quintic.easeOut});
                arrColl.addItem({label:"Quintic.easeInOut", func:Quintic.easeInOut});
                /** Sine */
                arrColl.addItem({label:"Sine.easeIn", func:Sine.easeIn});
                arrColl.addItem({label:"Sine.easeOut", func:Sine.easeOut});
                arrColl.addItem({label:"Sine.easeInOut", func:Sine.easeInOut});
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="openEasingFunction:" />
        <mx:ComboBox id="openEasingFunc"
                dataProvider="{arrColl}" />

        <mx:Label text="openDuration:" />
        <mx:HSlider id="openDur"
                minimum="100"
                maximum="1500"
                value="1000"
                liveDragging="true"
                snapInterval="100"
                tickInterval="100"
                dataTipPrecision="0" />
    </mx:ApplicationControlBar>

    <mx:Accordion width="400" height="120"
            openDuration="{openDur.value}"
            openEasingFunction="{openEasingFunc.selectedItem.func}">
        <mx:VBox id="child1" label="Child 1" />
        <mx:VBox id="child2" label="Child 2" />
        <mx:VBox id="child3" label="Child 3" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/feed/ 0 Changing the ColorPicker control’s easing duration and easing functions http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/ http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/#comments Sat, 25 Aug 2007 06:31:49 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/ The following example shows how you can control the easing duration and easing functions that the ColorPicker control uses to display its drop-down swatch palette. Of course, this probably isn’t the best example of “useful animation” and will probably just annoy users (the long 2 second easing animation), but it is nice to know that [...]]]> The following example shows how you can control the easing duration and easing functions that the ColorPicker control uses to display its drop-down swatch palette. Of course, this probably isn’t the best example of “useful animation” and will probably just annoy users (the long 2 second easing animation), but it is nice to know that you can change these if you need to.

Full code after the jump.

If you wanted to remove the animation effects altogether, you could just set the openDuration and closeDuration styles to 0 milliseconds (both default to 250 milliseconds, or ¼ of a second).

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </mx:Script>

    <mx:Number id="easeDurationMS">2000</mx:Number>

    <mx:ColorPicker id="colorPicker"
            openDuration="{easeDurationMS}"
            openEasingFunction="Elastic.easeOut"
            closeDuration="{easeDurationMS}"
            closeEasingFunction="Elastic.easeIn"
            width="50"
            height="50" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/feed/ 0 Changing the Flex ComboBox control’s opening and closing easing functions http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/ http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/#comments Sun, 19 Aug 2007 01:19:46 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/ OK, I admit that this post probably doesn’t have much real-world use, and can probably annoy users if implemented poorly, but if you’ve ever wondered how/if you can change the opening/closing duration or easing function used for a ComboBox dropdown menu, this post is for you!

This entry looks at customizing the ComboBox control’s openDuration [...]]]> OK, I admit that this post probably doesn’t have much real-world use, and can probably annoy users if implemented poorly, but if you’ve ever wondered how/if you can change the opening/closing duration or easing function used for a ComboBox dropdown menu, this post is for you!

This entry looks at customizing the ComboBox control’s openDuration and closeDuration styles which control how long it takes for the dropdown menu to appear or disappear. By default both of these styles are set to 250 milliseconds (1/4 second). We’ll also look at changing the easing method used to animate the dropdown menu. Finally, we look at explicitly setting the dropdown menu’s width so it doesn’t inherit the ComboBox’s width and alternate the row colors for the items in the dropdown.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </mx:Script>
 
    <mx:ComboBox id="comboBox"
            openDuration="1000"
            openEasingFunction="Bounce.easeOut"
            closeDuration="1000"
            closeEasingFunction="Bounce.easeIn"
            prompt="Please select an item..."
            selectedIndex="-1"
            dropdownWidth="150"
            alternatingItemColors="[0xDFDFDF, 0xEEEEEE]">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="Item 1" />
                <mx:Object label="Item 2" />
                <mx:Object label="Item 3" />
                <mx:Object label="Item 4" />
                <mx:Object label="Item 5" />
                <mx:Object label="Item 6" />
                <mx:Object label="Item 7" />
                <mx:Object label="Item 8" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>
 
</mx:Application>

View source is enabled in the following example.

For an example of setting the openEasingFunction and closeEasingFunction styles in a <Style/> block in Flex 4, see “Changing the opening and closing easing functions on a Halo ComboBox control in Flex 4″.

 
]]> http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/feed/ 8