ComboBox引用皮肤类:<fx:Style>s|ComboBox{skinClass:ClassReference("com.kingtop.skins.CustomComboBoxSkins")}</fx:Style>
1.在com.kingtop.skins目录下创建CustomComboBoxSkins.mxml文件
<?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 ComboBox component.
The skin for the anchor button for a ComboBox component
is defined by the ComboBoxButtonSkin class. The skin for the text input
is defined by the ComboBoxTextInputSkin class.
@see spark.components.ComboBox
@see spark.skins.spark.ComboBoxButtonSkin
@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.ComboBox")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
private var paddingChanged:Boolean;
private var cornerRadiusChanged:Boolean;
private var cornerRadius:Number = 0;
/* 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 commitProperties():void
{
super.commitProperties();
if (paddingChanged && textInput)
{
// Push padding styles into the textDisplay
var padding:Number;
padding = getStyle("paddingLeft");
if (textInput.getStyle("paddingLeft") != padding)
textInput.setStyle("paddingLeft", padding);
padding = getStyle("paddingTop");
if (textInput.getStyle("paddingTop") != padding)
textInput.setStyle("paddingTop", padding);
padding = getStyle("paddingRight");
if (textInput.getStyle("paddingRight") != padding)
textInput.setStyle("paddingRight", padding);
padding = getStyle("paddingBottom");
if (textInput.getStyle("paddingBottom") != padding)
textInput.setStyle("paddingBottom", padding);
paddingChanged = false;
}
if (cornerRadiusChanged)
{
cornerRadiusChanged = false;
/* var cr:Number = getStyle("cornerRadius");
if (openButton)
openButton.setStyle("cornerRadius", cr);
if (textInput)
textInput.setStyle("cornerRadius", cr); */
}
}
/**
* @private
*/
override public function styleChanged(styleProp:String):void
{
var allStyles:Boolean = !styleProp || styleProp == "styleName";
super.styleChanged(styleProp);
if (allStyles || styleProp.indexOf("padding") == 0)
{
paddingChanged = true;
invalidateProperties();
}
if (allStyles || styleProp == "cornerRadius")
{
cornerRadiusChanged = true;
invalidateProperties();
}
}
/**
* @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>never</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">
<!-- drop shadow -->
<!--- @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"/>
<!-- border -->
<!--- @private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0">
<s:stroke>
<!--- @private -->
<s:SolidColorStroke id="borderStroke" weight="0"/>
</s:stroke>
</s:Rect>
<!-- fill -->
<!--- Defines the appearance of drop-down list's background fill. -->
<s:Rect id="background" left="0" right="0" top="0" bottom="0" >
<s:fill>
<!---
@private
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 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 ComboBoxButtonSkin.
@copy spark.components.supportClasses.DropDownListBase#openButton
@see spark.skins.spark.ComboBoxButtonSkin -->
<s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
skinClass="com.kingtop.skins.ComboBoxButton" tabEnabled="false" focusAlpha="0" />
<!--- @copy spark.components.ComboBox#textInput -->
<s:TextInput id="textInput" enabled.disabled="false"
left="0" right="18" top="0" bottom="0"
skinClass="spark.skins.spark.ComboBoxTextInputSkin" borderVisible="false"/>
</s:SparkSkin>
2.再创建一个ComboBoxButton.mxml文件
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2010 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 anchor button on a Spark ComboBox component.
@see spark.components.ComboBox
@see spark.skins.spark.ComboBoxSkin
@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="19" minHeight="23">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For dropDownList buttons, the graphics are colorized but the arrow is not. */
static private const exclusions:Array = ["arrow"];
private var cornerRadius:Number = 0;
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/* Define the symbol fill items that should be colored by the "symbolColor" style. */
static private const symbols:Array = ["arrowFill1", "arrowFill2"];
/**
* @private
*/
override public function get symbolItems():Array {return symbols};
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
fill.bottomRightRadiusX = fill.topRightRadiusX = cornerRadius;
lowlight.bottomRightRadiusX = lowlight.topRightRadiusX = cornerRadius;
highlight.bottomRightRadiusX = highlight.topRightRadiusX = cornerRadius;
border.bottomRightRadiusX = border.topRightRadiusX = cornerRadius;
}
if (highlightStroke)
highlightStroke.bottomRightRadiusX = highlightStroke.topRightRadiusX = cornerRadius;
if (hldownstroke1)
hldownstroke1.bottomRightRadiusX = hldownstroke1.topRightRadiusX = cornerRadius;
if (hldownstroke2)
hldownstroke2.bottomRightRadiusX = hldownstroke2.topRightRadiusX = cornerRadius;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
</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: fill -->
<!--- @private -->
<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.over="0xFFFFFF"
color.down="0xAAAAAA"
alpha="0.0"
alpha.down="0.0"
alpha.over="0.0" />
<s:GradientEntry color="0xFFFFFF"
color.over="0xFFFFFF"
color.down="0x929496"
alpha="0.0"
alpha.over="0.0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color="0xFFFFFF" ratio="0.0" alpha="0.0" />
<s:GradientEntry color="0xFFFFFF" ratio="0.48" alpha="0.0" />
<s:GradientEntry color="0xFFFFFF" ratio="0.48001" alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill highlight -->
<!--- @private -->
<s:Rect id="highlight" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.0"
alpha.over="0.0"
alpha.down="0.0"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.0"
alpha.over="0.0"
alpha.down="0.0" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: highlight stroke (all states except down) -->
<!--- @private -->
<s:Rect id="highlightStroke" left="0" right="0" top="0" bottom="0" radiusX="0" radiusY="0" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha.over="0.0" />
<s:GradientEntry color="0xD8D8D8" alpha.over="0.0" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 5: highlight stroke (down state only) -->
<!--- @private -->
<s:Rect id="hldownstroke1" left="0" right="0" top="0" bottom="0" radiusX="0" radiusY="0" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha="0.0" ratio="0.0" />
<s:GradientEntry color="0xFFFFFF" alpha="0.0" ratio="0.001" />
<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.0011" />
<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.965" />
<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.9651" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- @private -->
<s:Rect id="hldownstroke2" left="0" right="0" top="0" bottom="0" radiusX="0" radiusY="0" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.0" />
<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.0001" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: 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="18" height="21">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.0"
alpha.down="0.0" />
<s:GradientEntry color="0x000000"
alpha="0.0"
alpha.down="0.0" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 7: 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.4" />
<!---
@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.6" />
</s:RadialGradient>
</s:fill>
</s:Path>
</s:SparkSkin>