flex 4 dropdownlist skin自定义 1

dropdownlist的皮肤1自定义，达到一下效果：

1.label 字体改变

2.长度宽度背景色改变content..corol

3.下拉框的背景色改变,鼠标滚动和选择时候的条目背景变橙色

4.小三角的button无边框

5.没有高光效果

基本皮肤：skin_dropdownlist

<?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 DropDownList component.

? ? ?The skin for the anchor button for a DropDownList component

? ? ?is defined by the DropDownListButtonSkin class. ?

? ? ?<p>In a custom skin class that uses transitions,set the

? ? ?<code>itemDestructionPolicy</code> property to <code>none</code>

? ? ?for the PopUpAnchor defined by the popUp property.</p> ? ? ?

? ? ?@see spark.components.DropDownList ? ? ? ?

? ? ?@see spark.skins.spark.DropDownListButtonSkin

? ? ?@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" alpha.disabled=".5">

? ?<!-- host component -->

? ?<fx:Metadata>

? ?<![CDATA[

? ? ? ?/**

? ? ? ? * @copy spark.skins.spark.ApplicationSkin#hostComponent

? ? ? ? */

? ? ? ?[HostComponent("spark.components.DropDownList")]

? ?]]>

? ?</fx:Metadata>

? ?<fx:Script fb:purpose="styling">

? ? ? ?<![CDATA[ ? ? ? ? ? ?

? ? ? ? ? ?/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */

? ? ? ? ? ?static private const contentFill:Array = ["bgFill"];

? ? ? ? ? ?/**

? ? ? ? ? ? * @private

? ? ? ? ? ? */

? ? ? ? ? ?override public function get contentItems():Array {return contentFill};

? ? ? ? ? ? ? ? ? ? ? ?/**

? ? ? ? ? ? * @private

? ? ? ? ? ? */

? ? ? ? ? ?override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void

? ? ? ? ? ?{

? ? ? ? ? ? ? ?if (getStyle("borderVisible") == false)

? ? ? ? ? ? ? ?{

? ? ? ? ? ? ? ? ? ?if (border)

? ? ? ? ? ? ? ? ? ? ? ?border.visible = false;

? ? ? ? ? ? ? ? ? ?if (background)

? ? ? ? ? ? ? ? ? ?{

? ? ? ? ? ? ? ? ? ? ? ?background.left = background.top = background.right = background.bottom = 0;

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?if (scroller)

? ? ? ? ? ? ? ? ? ? ? ?scroller.minViewportInset = 0;

? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ?else

? ? ? ? ? ? ? ?{

? ? ? ? ? ? ? ? ? ?if (border)

? ? ? ? ? ? ? ? ? ? ? ?border.visible = true;

? ? ? ? ? ? ? ? ? ?if (background)

? ? ? ? ? ? ? ? ? ?{

? ? ? ? ? ? ? ? ? ? ? ?background.left = background.top = background.right = background.bottom = 1;

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?if (scroller)

? ? ? ? ? ? ? ? ? ? ? ?scroller.minViewportInset = 1;

? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ?if (dropShadow)

? ? ? ? ? ? ? ? ? ?dropShadow.visible = getStyle("dropShadowVisible");

? ? ? ? ? ? ? ?openButton.setStyle("cornerRadius",getStyle("cornerRadius"));

? ? ? ? ? ? ? ?if (borderStroke)

? ? ? ? ? ? ? ?{

? ? ? ? ? ? ? ? ? ?borderStroke.color = getStyle("borderColor");

? ? ? ? ? ? ? ? ? ?borderStroke.alpha = getStyle("borderAlpha");

? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ?super.updateDisplayList(unscaledWidth,unscaledHeight);

? ? ? ? ? ?}

? ? ? ?]]>

? ?</fx:Script>

? ?<s:states>

? ? ? ?<s:State name="normal" />

? ? ? ?<s:State name="open" />

? ? ? ?<s:State name="disabled" />

? ?</s:states>

? ?<!---

? ? ? ?The PopUpAnchor control that opens the drop-down list.

? ? ? ?<p>In a custom skin class that uses transitions,set the

? ? ? ?<code>itemDestructionPolicy</code> property to <code>none</code>.</p>

? ?-->

? ?<s:PopUpAnchor id="popUp" ?displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"

? ? ? ?left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"

? ? ? ?popUpPosition="below" popUpWidthMatchesAnchorWidth="true">

? ? ? ?<!---

? ? ? ? ? ? ?This includes borders,background colors,scrollers,and filters.

? ? ? ? ? ? ?@copy spark.components.supportClasses.DropDownListBase#dropDown

? ? ? ?-->

? ? ? ?<s:Group id="dropDown">

? ? ? ? ? ?<!--- @private -->

? ? ? ? ? ?<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"

? ? ? ? ? ? ? ? angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

? ? ? ? ? ?<!--- @private -->

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

? ? ? ? ? ? ? ?<s:stroke>

? ? ? ? ? ? ? ? ? ?<!--- border stroke @private -->

? ? ? ? ? ? ? ? ? ?<s:SolidColorStroke id="borderStroke" weight="1"/>

? ? ? ? ? ? ? ?</s:stroke>

? ? ? ? ? ?</s:Rect>

? ? ? ? ? ?<!-- fill 下拉框的背景色-->

? ? ? ? ? ?<!--- Defines the appearance of drop-down list's background fill. -->

? ? ? ? ? ?<s:Rect id="background" left="1" right="1" top="1" bottom="1" >

? ? ? ? ? ? ? ?<s:fill>

? ? ? ? ? ? ? ?<!--- ?

? ? ? ? ? ? ? ? ? ?The color of the drop down's background fill.

? ? ? ? ? ? ? ? ? ?The default color is 0xFFFFFF.

? ? ? ? ? ? ? ?-->

? ? ? ? ? ? ? ? ? ?<s:SolidColor id="bgFill" color="0xffffff" />

? ? ? ? ? ? ? ?</s:fill>

? ? ? ? ? ?</s:Rect>

? ? ? ? ? ?<!--- @private -->

? ? ? ? ? ?<s:Scroller ? skinClass="skins.skin_scroller" id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1" ?>

? ? ? ? ? ? ? ?<!--- @copy spark.components.SkinnableDataContainer#dataGroup-->

? ? ? ? ? ? ? ?<s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">

? ? ? ? ? ? ? ? ? ?<s:layout>

? ? ? ? ? ? ? ? ? ? ? ?<s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>

? ? ? ? ? ? ? ? ? ?</s:layout>

? ? ? ? ? ? ? ?</s:DataGroup>

? ? ? ? ? ?</s:Scroller>

? ? ? ?</s:Group>

? ?</s:PopUpAnchor>

? ?<!--- ?The default skin is DropDownListButtonSkin.

? ? ? ? ? ?@copy spark.components.supportClasses.DropDownListBase#openButton

? ? ? ? ? ?@see spark.skins.spark.DropDownListButtonSkin -->

? ?<s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" tabEnabled="false"

? ? ? skinClass="skins.skin_droplistbtn"/> ?

? ?<!--- @copy spark.components.DropDownList#labelDisplay -->

? ?<s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"

? ? ? ?mouseEnabled="false" mouseChildren="false" fontFamily="Arial" fontSize="14"

? ? ? ?left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />

</s:SparkSkin>

btn重构：

<?xml version="1.0" encoding="utf-8"?>

<!--

? ?ADOBE SYSTEMS INCORPORATED

? ?Copyright 2008 Adobe Systems Incorporated

? ?All Rights Reserved.

? ?NOTICE: Adobe permits you to use,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"

? ? ? ? ? ? minWidth="21" minHeight="21"

? ? ? ? ? ? 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 2: fill -->

? ?<!--- @private -->

? ?<s:Rect id="fill" left="1" right="1" top="1" bottom="1" >

? ? ? ?<s:fill>

? ? ? ? ? ?<s:LinearGradient rotation="90">

? ? ? ? ? ? ? ?<s:GradientEntry color="0xFFFFFF"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color.over="0xFFFFFF"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color.down="0xFFFFFF"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alpha="1" />

? ? ? ? ? ? ? ?<s:GradientEntry color="0xFFFFFF"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color.over="0xFFFFFF"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color.down="0xFFFFFF"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alpha="1" />

? ? ? ? ? ?</s:LinearGradient>

? ? ? ?</s:fill>

? ?</s:Rect>

? ?<!-- layer 3: fill lowlight -->

? ?<!--- @private -->

? ?<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1">

? ? ? ?<s:fill>

? ? ? ? ? ?<s:LinearGradient rotation="270">

? ? ? ? ? ? ? ?<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />

? ? ? ? ? ? ? ?<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />

? ? ? ? ? ? ? ?<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />

? ? ? ? ? ?</s:LinearGradient>

? ? ? ?</s:fill>

? ?</s:Rect>

? ?<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->

? ?<!--- @private -->

? ?<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" >

? ? ? ?<s:stroke>

? ? ? ? ? ?<s:LinearGradientStroke rotation="90" weight="1">

? ? ? ? ? ? ? ?<s:GradientEntry color="0x000000"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alpha="0.5625"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alpha.down="0.6375" />

? ? ? ? ? ? ? ?<s:GradientEntry color="0x000000"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alpha="0.75"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alpha.down="0.85" />

? ? ? ? ? ?</s:LinearGradientStroke>

? ? ? ?</s:stroke>

? ?</s:Rect>

? ?<!-- layer 8: text -->

? ?<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay ?-->

? ?<s:Label id="labelDisplay"

? ? ? ? ? ? textAlign="center"

? ? ? ? ? ? maxDisplayedLines="1" ?fontFamily="Arial" fontSize="14"

? ? ? ? ? ? horizontalCenter="0" verticalCenter="1" verticalAlign="middle"

? ? ? ? ? ? left="10" right="10" top="2" bottom="2">

? ?</s:Label>

<!-- layer 9: arrow -->

<!--- The arrow graphic displayed in the anchor button. -->

<s:Path right="6" verticalCenter="0" id="arrow"

data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0 L 3.0 4.0 L 4.0 4.0">

<s:fill>

<s:RadialGradient rotation="90" focalPointRatio="1"> ?

<!--- @private

The first part of the arrow's gradient fill.

The default alpha is .6. The default color if 0x000000. -->

<s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />

<!--- @private

The second part of the arrow's gradient fill.

The default alpha is .6. The default color if 0x000000. -->

<s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />

</s:RadialGradient>

</s:fill>

</s:Path>

</s:SparkButtonSkin>