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>