Ajouter

Ajouter un effet d'ouverture et fermeture à un composant ComboBox

Voici un exemple vous montrant comment personnaliser les effets d'ouverture et fermeture d'un composant ComboBox dans Flex 4 Beta / Flash Builder Gumbo 4 Beta

Propriété mise en avant : openEasingFunction – closeEasingFunction

Attention : vous devez impérativement disposer du SDK 4.0.0.10007 ou supérieur.

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/20/halo-combobox-easingfunction-openeasingfunction-closeeasingfunction/ -->
<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: 500;
            closeEasingFunction: PropertyReference("mx.effects.easing.Exponential.easeIn");
            alternatingItemColors: #DFDFDF, #EEEEEE;
        }
    </fx:Style>
 
    <mx:ComboBox id="comboBox"
            prompt="Sélectionnez un élément..."
            selectedIndex="-1"
            width="250"
            dropdownWidth="250"
            horizontalCenter="0"
            top="20">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Element 1" />
                <fx:Object label="Element 2" />
                <fx:Object label="Element 3" />
                <fx:Object label="Element 4" />
                <fx:Object label="Element 5" />
                <fx:Object label="Element 6" />
                <fx:Object label="Element 7" />
                <fx:Object label="Element 8" />
            </fx:Array>
        </mx:dataProvider>
    </mx:ComboBox>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

Autre(s) source(s) proche(s) de ce sujet :

1. Effet d'AutoScrolling sur un composant Spark TextArea
2. Ajouter un Style CSS aux différents états d'un composant Spark Button