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

By Minidxer | September 7, 2009

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



下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_HSlider_skinClass_dataTip_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <s:HSlider id="slider"
  8.             skinClass="skins.CustomHSliderSkin"
  9.             horizontalCenter="0"
  10.             verticalCenter="0" />
  11.  
  12. </s:Application>

下面是Skin类Skins/CustomHSliderSkin.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomHSliderSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         minHeight="11" minWidth="100"
  6.         alpha.disabled="0.5">
  7.     <s:states>
  8.         <s:State name="normal" />
  9.         <s:State name="disabled" />
  10.     </s:states>
  11.  
  12.     <fx:Metadata>
  13.         <![CDATA[
  14.             [HostComponent("spark.components.HSlider")]
  15.         ]]>
  16.     </fx:Metadata>
  17.  
  18.     <fx:Script>
  19.         /* Define the skin elements that should not be colorized.
  20.            For slider, the skin itself is colorized but the individual parts are not. */
  21.         static private const exclusions:Array = ["track", "thumb"];
  22.  
  23.         override public function get colorizeExclusions():Array {return exclusions;}
  24.     </fx:Script>
  25.  
  26.     <fx:Declarations>
  27.     <!--- Defines the appearance of the the Slider's DataTip. To customize the DataTip's appearance, create a custom HSliderSkin class. -->
  28.         <fx:Component id="dataTip">
  29.            <s:MXMLComponent minHeight="24" minWidth="40" y="-34">
  30.               <s:Rect top="0" left="0" right="0" bottom="0">
  31.                     <s:fill>
  32.                         <s:SolidColor color="haloBlue" alpha="0.9"/>
  33.                     </s:fill>
  34.                     <s:filters>
  35.                         <s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
  36.                     </s:filters>
  37.                 </s:Rect>
  38.                 <s:SimpleText id="labelElement" text="{data}"
  39.                          horizontalCenter="0" verticalCenter="1"
  40.                          left="5" right="5" top="5" bottom="5"
  41.                          textAlign="center" verticalAlign="middle"
  42.                          fontWeight="normal" color="black" fontSize="11" />
  43.             </s:MXMLComponent>
  44.        </fx:Component>
  45.     </fx:Declarations>
  46.  
  47.     <!--- Defines the skin class for the HSliderSkin's track. The default skin class is HSliderTrackSkin. -->
  48.     <s:Button id="track" left="0" right="0" top="0" bottom="0"
  49.               skinClass="spark.skins.default.HSliderTrackSkin" />
  50.     <!--- Defines the skin class for the HSliderSkin's thumb. The default skin class is HSliderThumbSkin. -->
  51.     <s:Button id="thumb" top="0" bottom="0" width="11" height="11"
  52.               skinClass="spark.skins.default.HSliderThumbSkin" />
  53.  
  54. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, HSlider | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll