flex 4 scroller skin自定义2
根据前一篇的理论 ，想要自定义一个scroller皮肤，最简易的。用于dropdownlist以及datagrid等组件。要求如下：
1.没有上下按钮
2.thumb（拖动条）宽度细一些
3.鼠标划过和按住的时候显示橙色#ff9900，其他时候是灰色#222222
4.确保加载到dropdownlist上时不影响其他功能。
经过测试，代码和效果图如下：
1.dropdownlist skin添加
s:Scroller skinClass="skins.skin_scroller"
2.新建皮肤skin_scroller,自定义VScrollBar皮肤
<!--- A vertical scrollbar that lets you control the portion of data that is displayed
when there is too much data to fit vertically in a display area.
The Scroller determines whether the vertical ScrollBar is visible. -->
<s:VScrollBar id="verticalScrollBar" visible="false" skinClass="skins.myVscrollBar" fixedThumbSize="false"/>
3.新建皮肤myVscrollBar
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark VScrollBar component. The thumb and track skins are defined by the
VScrollBarThumbSkin and VScrollBarTrackSkin classes, respectively.
@see spark.components.VScrollBar
@see spark.skins.spark.VScrollBarThumbSkin
@see spark.skins.spark.VScrollBarTrackSkin
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="15" minHeight="35"
alpha.disabled="0.5" alpha.inactive="0.5" >
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.VScrollBar")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For scroll bar, the skin itself is colorized but the individual parts are not. */
static private const exclusions:Array = ["track", "thumb"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="inactive" />
</s:states>
<!--- The default skin class is VScrollBarTrackSkin.
@copy spark.components.supportClasses.TrackBase#track
@see spark.skins.spark.VScrollBarTrackSkin -->
<s:Button id="track" top="5" bottom="5" height="54"
focusEnabled="false" tabEnabled="false" visible="false"
skinClass="spark.skins.spark.VScrollBarTrackSkin" />
<!--- The default skin class is VScrollBarThumbSkin.
@copy spark.components.supportClasses.TrackBase#thumb
@see spark.skins.spark.VScrollBarThumbSkin -->
<s:Button id="thumb" skinClass="skins.skin_Vscroller_thumb" horizontalCenter="0" width="6"
focusEnabled="false" visible.inactive="false" tabEnabled="false"
/>
</s:SparkSkin>
4.新建skin_Vscroller_thumb
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Button component.
@see spark.components.Button
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.Group;
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0" />
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x222222"
color.over="0xff9900"
color.down="0xee7700"
alpha="0.85" />
<s:GradientEntry color="0x222222"
color.over="0xff9900"
color.down="0xee7700"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<!--- @private -->
<s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="0" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x222222" alpha.over="0.22" />
<s:GradientEntry color="0x222222" alpha.over="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<!--- @private -->
<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="0" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- @private -->
<s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="0" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
</s:SparkButtonSkin>