Changing the opening and closing easing functions on a Halo ComboBox control in Flex 4

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

8 thoughts on “Changing the opening and closing easing functions on a Halo ComboBox control in Flex 4

  1. Another cool usage for the PropertyReference() method I found today… You can use static constants in a <Style/> block:

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark">
     
        <fx:Script>
            <![CDATA[
                import flash.text.engine.FontPosture;
                import flash.text.engine.FontWeight;
                import flashx.textLayout.formats.TextAlign;
            ]]>
        </fx:Script>
     
        <fx:Style>
            @namespace s "library://ns.adobe.com/flex/spark";
     
            s|TextArea {
                color: haloBlue;
                fontStyle: PropertyReference("FontPosture.ITALIC");
                fontWeight: PropertyReference("FontWeight.BOLD");
                textAlign: PropertyReference("TextAlign.JUSTIFY");
            }
        </fx:Style>
     
        <s:TextArea id="txtArea"
                text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus volutpat fringilla. Suspendisse non lectus non erat ultrices lacinia quis id enim. Maecenas vehicula elementum justo, non tempus erat fringilla a. Duis congue egestas condimentum. Maecenas eu posuere justo. Morbi dignissim faucibus congue. Suspendisse ut metus velit, eleifend semper erat. Curabitur imperdiet mi at nulla ultrices nec blandit ipsum fringilla. Donec varius urna ac nisl blandit vitae tincidunt sapien varius. Maecenas urna quam, venenatis non pulvinar a, ultricies vel nisi. Nunc commodo nisi id elit sollicitudin vulputate. Curabitur varius sapien ut elit gravida at malesuada sapien rutrum. Duis non purus velit. Nulla sed justo tortor. Integer pulvinar pellentesque laoreet. Vestibulum vel tellus quam. Integer sed mauris eu urna ultricies suscipit nec sit amet velit."
                horizontalCenter="0" verticalCenter="0" />
     
    </s:Application>

    Peter

  2. fyi, in the final version, this won’t be supported:

    PropertyReference(“mx.effects.easing.Bounce.easeIn”);

    1. @daniel,

      Doesn’t matter, I’m pretty sure this was introduced sometime during Flex 4.0 beta and removed before Flex 4.0 release, so it won’t work anyways.

      Peter

    1. @daniel,

      I believe it is still in Flex 4, but I’m not sure that the original usage (of setting an easing function) is still supported.

      Peter

Comments are closed.