Ajouter

Personnaliser le trackHighlight d'un Halo HSlider ou VSlider dans Flash Builder 4 / Flex 4

Cet exemple de Flash Builder 4 vous montre comment personnaliser le trackHighlight d'un component Halo HSlider ou VSlider de différentes manières dans Flex 4 Gumbo :

• 1. Définition des propriétés de Style CSS showTrackHighlight et trackHighlightSkin
• 2. Définition des propriétés de Style showTrackHighlight et trackHighlightSkin dans un fichier .CSS externe
  ou dans un container de style
• 3. Définition des propriétés de Style showTrackHighlight et trackHighlightSkin directement en ActionSript dans un container fx:Script

Mise en avant : showTrackHighlight – trackHighlightSkin

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.

1. Définition des propriétés de Style CSS showTrackHighlight et trackHighlightSkin

Source de l'application :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/26/personnaliser-trackhighlight-hslider-vslider-flash-builder-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_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:CheckBox id="chckBx"
                label="showTrackHighlight"
                selected="true" />
    </s:controlBarContent>
 
    <mx:HSlider id="sldr"
            showTrackHighlight="{chckBx.selected}"
            trackHighlightSkin="skins.CustomSliderTrackHighlightSkin"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Source du composant skins/CustomSliderTrackHighlightSkin.mxml :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/26/personnaliser-trackhighlight-hslider-vslider-flash-builder-flex-4/ -->
<s:Skin name="CustomSliderTrackHighlightSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        height="11" width="200"
        disabledAlpha="0.5">
 
    <s:Rect left="0" right="0" top="2" height="4">
        <s:fill>
            <s:SolidColor color="red" alpha="0.35" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

2. Définition des propriétés de Style showTrackHighlight et trackHighlightSkin dans un fichier .CSS externe ou dans un container de style

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/26/personnaliser-trackhighlight-hslider-vslider-flash-builder-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|HSlider {
            showTrackHighlight: true;
            trackHighlightSkin: ClassReference("skins.CustomSliderTrackHighlightSkin");
        }
    </fx:Style>
 
    <mx:HSlider id="sldr"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

Définition des propriétés de Style showTrackHighlight et trackHighlightSkin directement en ActionSript dans un container fx:Script

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/26/personnaliser-trackhighlight-hslider-vslider-flash-builder-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_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="Définir le skin du trackHighlight"
                click="btn_click(event);" />
        <s:CheckBox id="chckBx"
                label="showTrackHighlight"
                selected="true"
                change="chckBx_change(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.*;
 
            protected function btn_click(evt:MouseEvent):void {
                sldr.setStyle("showTrackHighlight", chckBx.selected);
                sldr.setStyle("trackHighlightSkin", CustomSliderTrackHighlightSkin);
            }
 
            protected function chckBx_change(evt:Event):void {
                sldr.setStyle("showTrackHighlight", chckBx.selected);
            }
        ]]>
    </fx:Script>
 
    <mx:HSlider id="sldr"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Rendu Final(nécessite Flash Player 10) :

Télécharger la source de l'exemple