Ajouter

Styler le Bouton présent (Emphasized Button) dans un Halo Alert Control dans Flex 4

Cet exemple de Flex 4 vous montre comment définir un Skin / Style CSS personnalisé pour un bouton (component Button) présent dans un composant Halo Alert dans Flash Builder 4 Beta :

Mise en avant : emphasizedSkin – s:SparkSkin

Pour information, les sources du skin Halo se trouvent à l'emplacement suivant dans le SDK Flex :
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

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

Code source de l'application :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/25/styler-emphasized-button-sur-un-halo-alert-control-dans-flex-4/ -->
<s:Application name="Halo_Alert_buttonStyleName_emphasizedSkin_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" viewSourceURL="srcview/index.html">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Afficher l'alerte"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|Alert {
            buttonStyleName: alertBtnStyles;
        }
 
        .alertBtnStyles {
            emphasizedSkin: ClassReference("skins.CustomDefaultButtonSkin");
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            protected function btn_click(evt:MouseEvent):void {
                Alert.show("Text de l'alerte", "Titre de l'alerte", Alert.YES|Alert.NO);
            }
        ]]>
    </fx:Script>
 
</s:Application>

Code Source du composant skins/CustomDefaultButtonSkin :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/25/styler-emphasized-button-sur-un-halo-alert-control-dans-flex-4/ -->
<s:SparkSkin name="CustomDefaultButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="19"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var cornerRadius:Number = 2;
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                var cr:Number = getStyle("cornerRadius");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="{cornerRadius}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000"
                        color.downStates="0xFFFFFF"
                        alpha="0.01"
                        alpha.downStates="0" />
                <s:GradientEntry color="0x000000"
                        color.downStates="0xFFFFFF"
                        alpha="0.07"
                        alpha.downStates="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="{cornerRadius}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#FF0000"
                        color.selectedUpStates="#FF0000"
                        color.overStates="#FF0000"
                        color.downStates="#FF0000"
                        alpha="0.85"
                        alpha.selectedOver="1" />
                <s:GradientEntry color="#990000"
                        color.selectedUpStates="#990000"
                        color.over="#990000"
                        color.selectedOver="#990000"
                        color.downStates="#990000"
                        alpha="0.85"
                        alpha.selectedOver="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9" radiusX="{cornerRadius}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9" radiusX="{cornerRadius}">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"
                    alpha="0.33"
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22"
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="{cornerRadius}" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="#FF0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="#990000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - le mettre tout en haut du remplissage pour que ça ne disparraisse pas quand la taille est inférieure à 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="{cornerRadius}">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000"
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry color="0x000000"
                        alpha="0.75"
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
</s:SparkSkin>

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. Utilisation d'un Spark NavigatorContent dans un Halo Accordion dans Flash Builder 4 / Flex Gumbo
2. Gestion de la recyclage d'un composant via un Halo Repeater dans Flash Builder 4 / Flex Gumbo
3. Définir la couleur de base des scrollbars d'un Halo DataGrid control dans Flash Builder 4 / Flex Gumbo
4. Supprimer le Separator Skin d'un Halo DataGrid control dans Flex 4
5. Test des couleurs de remplissage (fillColors) d'un composant Halo Button
6. Créer une animation de couleur sur un composant Spark Button dans Flex 4 Gumbo
7. Ajouter un Style CSS aux différents états d'un composant Spark Button
8. Accéder à un Bouton Spécifique dans un composant Spark ButtonBar
9. Supprimer le « border » d'un « Tree Control » Halo dans Flex 4
10. Composants Spark et Halo – Flash Builder 4