Flex Gumbo中如何自定义HSlider数据Tip样式的例子

接下来的Flex Gumbo中如何通过skinClass样式，自定义HSlider数据Tip样式。

 

下面是main.mxml：<?xml version="1.0" encoding="utf-8"?> 

<s:Application name="Spark_HSlider_skinClass_dataTip_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"> 

  

    <s:HSlider id="slider" 

            skinClass="skins.CustomHSliderSkin" 

            horizontalCenter="0" 

            verticalCenter="0" /> 

  

</s:Application>

 

 

下面是Skin类Skins/CustomHSliderSkin.mxml的代码：<?xml version="1.0" encoding="utf-8"?> 

<s:SparkSkin name="CustomHSliderSkin" 

        xmlns:fx="http://ns.adobe.com/mxml/2009" 

        xmlns:s="library://ns.adobe.com/flex/spark" 

        minHeight="11" minWidth="100" 

        alpha.disabled="0.5"> 

    <s:states> 

        <s:State name="normal" /> 

        <s:State name="disabled" /> 

    </s:states> 

  

    <fx:Metadata> 

        <![CDATA[ 

            [HostComponent("spark.components.HSlider")] 

        ]]> 

    </fx:Metadata> 

  

    <fx:Script> 

        /* Define the skin elements that should not be colorized. 

           For slider, the skin itself is colorized but the individual parts are not. */ 

        static private const exclusions:Array = ["track", "thumb"]; 

  

        override public function get colorizeExclusions():Array {return exclusions;} 

    </fx:Script> 

  

    <fx:Declarations> 

    <!--- Defines the appearance of the the Slider's DataTip. To customize the DataTip's appearance, create a custom HSliderSkin class. --> 

        <fx:Component id="dataTip"> 

           <s:MXMLComponent minHeight="24" minWidth="40" y="-34"> 

              <s:Rect top="0" left="0" right="0" bottom="0"> 

                    <s:fill> 

                        <s:SolidColor color="haloBlue" alpha="0.9"/> 

                    </s:fill> 

                    <s:filters> 

                        <s:DropShadowFilter angle="90" color="0x999999" distance="3"/> 

                    </s:filters> 

                </s:Rect> 

                <s:SimpleText id="labelElement" text="{data}" 

                         horizontalCenter="0" verticalCenter="1" 

                         left="5" right="5" top="5" bottom="5" 

                         textAlign="center" verticalAlign="middle" 

                         fontWeight="normal" color="black" fontSize="11" /> 

            </s:MXMLComponent> 

       </fx:Component> 

    </fx:Declarations> 

  

    <!--- Defines the skin class for the HSliderSkin's track. The default skin class is HSliderTrackSkin. --> 

    <s:Button id="track" left="0" right="0" top="0" bottom="0" 

              skinClass="spark.skins.default.HSliderTrackSkin" /> 

    <!--- Defines the skin class for the HSliderSkin's thumb. The default skin class is HSliderThumbSkin. --> 

    <s:Button id="thumb" top="0" bottom="0" width="11" height="11" 

              skinClass="spark.skins.default.HSliderThumbSkin" /> 

  

</s:SparkSkin>