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

By On August 5, 2009 · 8 Comments

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.

 
Tagged with: • • • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

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

  1. Peter deHaan says:
    August 5, 2009 at 11:23 pm

    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. stoimen says:
    August 6, 2009 at 12:05 am

    Very nice tutorial, it’s great we can find so much about Flex 4 here! Thanks.

  3. matt horn says:
    February 10, 2010 at 8:02 am

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

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

  4. daniel says:
    April 19, 2010 at 4:40 pm

    What if my CSS is in an external file? How do I declare the easing package to import in CSS?

  5. daniel says:
    May 25, 2010 at 6:12 pm

    So you mean that the property reference feature was removed from Flex 4 release?

    • Peter deHaan says:
      May 25, 2010 at 9:38 pm

      @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