frameworks/projects/experimental/src/spark/skins/ArrowDownToggleButtonSkin.mxml - flex-sdk - Git at Google

 <?xml version="1.0" encoding="utf-8"?>
 <!--
 ////////////////////////////////////////////////////////////////////////////////
 //
 //  Licensed to the Apache Software Foundation (ASF) under one or more
 //  contributor license agreements.  See the NOTICE file distributed with
 //  this work for additional information regarding copyright ownership.
 //  The ASF licenses this file to You under the Apache License, Version 2.0
 //  (the "License"); you may not use this file except in compliance with
 //  the License.  You may obtain a copy of the License at
 //
 //      http://www.apache.org/licenses/LICENSE-2.0
 //
 //  Unless required by applicable law or agreed to in writing, software
 //  distributed under the License is distributed on an "AS IS" BASIS,
 //  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 //  See the License for the specific language governing permissions and
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
 -->
 <!--- A skin class that displays an arrow pointing down for a Spark ToggleButton component.

       @see spark.components.ToggleButton

       @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="21" minHeight="21" alpha.disabledStates="0.5">

     <!-- host component -->
     <fx:Metadata>
     <![CDATA[
         /**
          * @copy spark.skins.spark.ApplicationSkin#hostComponent
          */
         [HostComponent("spark.components.ToggleButton")]
     ]]>
     </fx:Metadata>

     <fx:Script fb:purpose="styling">
         /* Define the skin elements that should not be colorized.
            For toggle button, the graphics are colorized but the label is not. */
         static private const exclusions:Array = ["labelDisplay","arrow"];

         /**
          * @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;
                 shadow.radiusX = cornerRadius;
                 fill.radiusX = cornerRadius;
                 lowlight.radiusX = cornerRadius;
                 highlight.radiusX = cornerRadius;
                 border.radiusX = cornerRadius;
             }

             if (highlightStroke) highlightStroke.radiusX = cornerRadius;
             if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
             if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;

             super.updateDisplayList(unscaledWidth, unscaledHeight);
         }

         private var cornerRadius:Number = 2;
     </fx:Script>

     <!-- states -->
     <s:states>
         <s:State name="up" />
         <s:State name="over" stateGroups="overStates" />
         <s:State name="down" stateGroups="downStates" />
         <s:State name="disabled" stateGroups="disabledStates" />
         <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
         <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
         <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
         <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
     </s:states>

     <!-- layer 1: shadow -->
     <!--- @private -->
     <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
         <s:fill>
             <s:LinearGradient rotation="90">
                     <s:GradientEntry color="0x000000"
                                    color.downStates="0xFFFFFF"
                                    alpha="0.01"
                                    alpha.downStates="0" />
                     <s:GradientEntry color="0x000000"
                                    color.downStates="0xFFFFFF"
                                    alpha="0.07"
                                    alpha.downStates="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="2">
         <s:fill>
             <s:LinearGradient rotation="90">
                 <s:GradientEntry color="0xFFFFFF"
                                color.selectedUpStates="0xBBBDBD"
                                color.overStates="0xBBBDBD"
                                color.downStates="0xAAAAAA"
                                alpha="0.85"
                                alpha.overAndSelected="1" />
                 <s:GradientEntry color="0xD8D8D8"
                                color.selectedUpStates="0x9FA0A1"
                                color.over="0x9FA0A1"
                                color.overAndSelected="0x8E8F90"
                                color.downStates="0x929496"
                                alpha="0.85"
                                alpha.overAndSelected="1" />
             </s:LinearGradient>
         </s:fill>
     </s:Rect>

     <!-- layer 3: fill lowlight -->
     <!--- @private -->
     <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
         <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 4: fill highlight -->
     <!--- @private -->
     <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
         <s:fill>
             <s:LinearGradient rotation="90">
                 <s:GradientEntry color="0xFFFFFF"
                                  ratio="0.0"
                                  alpha="0.33"
                                  alpha.selectedUpStates="0.22"
                                  alpha.overStates="0.22"
                                  alpha.downStates="0.12"/>
                 <s:GradientEntry color="0xFFFFFF"
                                  ratio="0.48"
                                  alpha="0.33"
                                  alpha.selectedUpStates="0.22"
                                  alpha.overStates="0.22"
                                  alpha.downStates="0.12"/>
                 <s:GradientEntry color="0xFFFFFF"
                                  ratio="0.48001"
                                  alpha="0" />
             </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="2" excludeFrom="downStates">
         <s:stroke>
             <s:LinearGradientStroke rotation="90" weight="1">
                 <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                 <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
             </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="2"
             includeIn="downStates, selectedUpStates, overAndSelected">
         <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="2"
             includeIn="downStates, selectedUpStates, overAndSelected">
         <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>

     <!-- 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" radiusX="2">
         <s:stroke>
             <s:LinearGradientStroke rotation="90" weight="1">
                 <s:GradientEntry color="0x000000"
                                alpha="0.5625"
                                alpha.down="0.6375"
                                alpha.selectedStates="0.6375" />
                 <s:GradientEntry color="0x000000"
                                alpha="0.75"
                                alpha.down="0.85"
                                alpha.selectedStates="0.85" />
             </s:LinearGradientStroke>
         </s:stroke>
     </s:Rect>

     <!-- layer 8: text -->
     <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
     <s:Label id="labelDisplay"
              textAlign="center"
              verticalAlign="middle"
              maxDisplayedLines="1"
              horizontalCenter="0" verticalCenter="1"
              left="10" right="23" top="2" bottom="2">
     </s:Label>

 	<!-- layer 8: 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:SparkSkin>
	<?xml version="1.0" encoding="utf-8"?>
	<!--
	////////////////////////////////////////////////////////////////////////////////
	//
	// Licensed to the Apache Software Foundation (ASF) under one or more
	// contributor license agreements. See the NOTICE file distributed with
	// this work for additional information regarding copyright ownership.
	// The ASF licenses this file to You under the Apache License, Version 2.0
	// (the "License"); you may not use this file except in compliance with
	// the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing, software
	// distributed under the License is distributed on an "AS IS" BASIS,
	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	// See the License for the specific language governing permissions and
	// limitations under the License.
	//
	////////////////////////////////////////////////////////////////////////////////
	-->
	<!--- A skin class that displays an arrow pointing down for a Spark ToggleButton component.

	@see spark.components.ToggleButton

	@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="21" minHeight="21" alpha.disabledStates="0.5">

	<!-- host component -->
	<fx:Metadata>
	<![CDATA[
	/**
	* @copy spark.skins.spark.ApplicationSkin#hostComponent
	*/
	[HostComponent("spark.components.ToggleButton")]
	]]>
	</fx:Metadata>

	<fx:Script fb:purpose="styling">
	/* Define the skin elements that should not be colorized.
	For toggle button, the graphics are colorized but the label is not. */
	static private const exclusions:Array = ["labelDisplay","arrow"];

	/**
	* @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;
	shadow.radiusX = cornerRadius;
	fill.radiusX = cornerRadius;
	lowlight.radiusX = cornerRadius;
	highlight.radiusX = cornerRadius;
	border.radiusX = cornerRadius;
	}

	if (highlightStroke) highlightStroke.radiusX = cornerRadius;
	if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
	if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;

	super.updateDisplayList(unscaledWidth, unscaledHeight);
	}

	private var cornerRadius:Number = 2;
	</fx:Script>

	<!-- states -->
	<s:states>
	<s:State name="up" />
	<s:State name="over" stateGroups="overStates" />
	<s:State name="down" stateGroups="downStates" />
	<s:State name="disabled" stateGroups="disabledStates" />
	<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
	<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
	<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
	<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
	</s:states>

	<!-- layer 1: shadow -->
	<!--- @private -->
	<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
	<s:fill>
	<s:LinearGradient rotation="90">
	<s:GradientEntry color="0x000000"
	color.downStates="0xFFFFFF"
	alpha="0.01"
	alpha.downStates="0" />
	<s:GradientEntry color="0x000000"
	color.downStates="0xFFFFFF"
	alpha="0.07"
	alpha.downStates="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="2">
	<s:fill>
	<s:LinearGradient rotation="90">
	<s:GradientEntry color="0xFFFFFF"
	color.selectedUpStates="0xBBBDBD"
	color.overStates="0xBBBDBD"
	color.downStates="0xAAAAAA"
	alpha="0.85"
	alpha.overAndSelected="1" />
	<s:GradientEntry color="0xD8D8D8"
	color.selectedUpStates="0x9FA0A1"
	color.over="0x9FA0A1"
	color.overAndSelected="0x8E8F90"
	color.downStates="0x929496"
	alpha="0.85"
	alpha.overAndSelected="1" />
	</s:LinearGradient>
	</s:fill>
	</s:Rect>

	<!-- layer 3: fill lowlight -->
	<!--- @private -->
	<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
	<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 4: fill highlight -->
	<!--- @private -->
	<s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
	<s:fill>
	<s:LinearGradient rotation="90">
	<s:GradientEntry color="0xFFFFFF"
	ratio="0.0"
	alpha="0.33"
	alpha.selectedUpStates="0.22"
	alpha.overStates="0.22"
	alpha.downStates="0.12"/>
	<s:GradientEntry color="0xFFFFFF"
	ratio="0.48"
	alpha="0.33"
	alpha.selectedUpStates="0.22"
	alpha.overStates="0.22"
	alpha.downStates="0.12"/>
	<s:GradientEntry color="0xFFFFFF"
	ratio="0.48001"
	alpha="0" />
	</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="2" excludeFrom="downStates">
	<s:stroke>
	<s:LinearGradientStroke rotation="90" weight="1">
	<s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
	<s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
	</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="2"
	includeIn="downStates, selectedUpStates, overAndSelected">
	<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="2"
	includeIn="downStates, selectedUpStates, overAndSelected">
	<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>

	<!-- 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" radiusX="2">
	<s:stroke>
	<s:LinearGradientStroke rotation="90" weight="1">
	<s:GradientEntry color="0x000000"
	alpha="0.5625"
	alpha.down="0.6375"
	alpha.selectedStates="0.6375" />
	<s:GradientEntry color="0x000000"
	alpha="0.75"
	alpha.down="0.85"
	alpha.selectedStates="0.85" />
	</s:LinearGradientStroke>
	</s:stroke>
	</s:Rect>

	<!-- layer 8: text -->
	<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
	<s:Label id="labelDisplay"
	textAlign="center"
	verticalAlign="middle"
	maxDisplayedLines="1"
	horizontalCenter="0" verticalCenter="1"
	left="10" right="23" top="2" bottom="2">
	</s:Label>

	<!-- layer 8: 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:SparkSkin>