Public Pastes
Guest

IconButtonSkin.mxml

By: a guest on May 6th, 2010  |  syntax: MXML  |  size: 7.08 KB  |  hits: 245  |  expires: Never
download  |  raw  |  embed  |  report abuse
Copied
  1. <s:SparkSkin
  2.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.         xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo"
  6.         currentStateChanging="onCurrentStateChanging(event)"
  7.         >
  8.         <fx:Metadata>
  9.                 [HostComponent("Components.IconButton")]
  10.         </fx:Metadata>
  11.         <fx:Script fb:purpose="styling">
  12.                 <![CDATA[
  13.                         import mx.events.StateChangeEvent;
  14.                        
  15.                         private function onCurrentStateChanging(event:StateChangeEvent):void{
  16.                                 switch(event.newState){
  17.                                         case "up":
  18.                                                 setIcon("iconUp");
  19.                                                 break;
  20.                                         case "over":
  21.                                                 setIcon("iconOver");
  22.                                                 break;
  23.                                         case "down":
  24.                                                 setIcon("iconDown");
  25.                                                 break;
  26.                                         case "disabled":
  27.                                                 setIcon("iconDisabled");
  28.                                                 break;
  29.                                 }
  30.                         }
  31.                         private function setIcon(type:String):void{
  32.                                 if(hostComponent.getStyle(type) != null){
  33.                                         icon.source = hostComponent.getStyle(type);
  34.                                 }
  35.                         }
  36.                         /* Define the skin elements that should not be colorized.
  37.                         For button, the graphics are colorized but the label is not. */
  38.                         static private const exclusions:Array = ["labelDisplay"];
  39.                        
  40.                         /**
  41.                          * @private
  42.                          */    
  43.                         override public function get colorizeExclusions():Array {return exclusions;}
  44.                        
  45.                         /**
  46.                          * @private
  47.                          */
  48.                         override protected function initializationComplete():void
  49.                         {
  50.                                 useChromeColor = true;
  51.                                 super.initializationComplete();
  52.                         }  
  53.                        
  54.                         /**
  55.                          *  @private
  56.                          */
  57.                         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
  58.                         {
  59.                                 var cr:Number = getStyle("cornerRadius");
  60.                                
  61.                                 if (cornerRadius != cr)
  62.                                 {
  63.                                         cornerRadius = cr;
  64.                                         shadow.radiusX = cornerRadius;
  65.                                         fill.radiusX = cornerRadius;
  66.                                         lowlight.radiusX = cornerRadius;
  67.                                         highlight.radiusX = cornerRadius;
  68.                                         border.radiusX = cornerRadius;
  69.                                 }
  70.                                
  71.                                 if (highlightStroke) highlightStroke.radiusX = cornerRadius;
  72.                                 if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
  73.                                 if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
  74.                                
  75.                                 super.updateDisplayList(unscaledWidth, unscaledHeight);
  76.                         }
  77.                        
  78.                         private var cornerRadius:Number = 2;
  79.                 ]]>
  80.         </fx:Script>
  81.        
  82.         <s:layout>
  83.                 <s:BasicLayout/>
  84.         </s:layout>
  85.        
  86.         <s:states>
  87.                 <s:State name="up"/>
  88.                 <s:State name="over"/>
  89.                 <s:State name="down"/>
  90.                 <s:State name="disabled"/>
  91.         </s:states>
  92.        
  93.        
  94.         <!-- layer 1: shadow -->
  95.         <!--- @private -->
  96.         <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
  97.                 <s:fill>
  98.                         <s:LinearGradient rotation="90">
  99.                                 <s:GradientEntry color="0x000000"
  100.                                                                  color.down="0xFFFFFF"
  101.                                                                  alpha="0.01"
  102.                                                                  alpha.down="0" />
  103.                                 <s:GradientEntry color="0x000000"
  104.                                                                  color.down="0xFFFFFF"
  105.                                                                  alpha="0.07"
  106.                                                                  alpha.down="0.5" />
  107.                         </s:LinearGradient>
  108.                 </s:fill>
  109.         </s:Rect>
  110.        
  111.         <!-- layer 2: fill -->
  112.         <!--- @private -->
  113.         <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
  114.                 <s:fill>
  115.                         <s:LinearGradient rotation="90">
  116.                                 <s:GradientEntry color="0xFFFFFF"
  117.                                                                  color.over="0xBBBDBD"
  118.                                                                  color.down="0xAAAAAA"
  119.                                                                  alpha="0.85" />
  120.                                 <s:GradientEntry color="0xD8D8D8"
  121.                                                                  color.over="0x9FA0A1"
  122.                                                                  color.down="0x929496"
  123.                                                                  alpha="0.85" />
  124.                         </s:LinearGradient>
  125.                 </s:fill>
  126.         </s:Rect>
  127.        
  128.         <!-- layer 3: fill lowlight -->
  129.         <!--- @private -->
  130.         <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
  131.                 <s:fill>
  132.                         <s:LinearGradient rotation="270">
  133.                                 <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
  134.                                 <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
  135.                                 <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
  136.                         </s:LinearGradient>
  137.                 </s:fill>
  138.         </s:Rect>
  139.        
  140.         <!-- layer 4: fill highlight -->
  141.         <!--- @private -->
  142.         <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
  143.                 <s:fill>
  144.                         <s:LinearGradient rotation="90">
  145.                                 <s:GradientEntry color="0xFFFFFF"
  146.                                                                  ratio="0.0"
  147.                                                                  alpha="0.33"
  148.                                                                  alpha.over="0.22"
  149.                                                                  alpha.down="0.12"/>
  150.                                 <s:GradientEntry color="0xFFFFFF"
  151.                                                                  ratio="0.48"
  152.                                                                  alpha="0.33"
  153.                                                                  alpha.over="0.22"
  154.                                                                  alpha.down="0.12" />
  155.                                 <s:GradientEntry color="0xFFFFFF"
  156.                                                                  ratio="0.48001"
  157.                                                                  alpha="0" />
  158.                         </s:LinearGradient>
  159.                 </s:fill>
  160.         </s:Rect>
  161.        
  162.         <!-- layer 5: highlight stroke (all states except down) -->
  163.         <!--- @private -->
  164.         <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
  165.                 <s:stroke>
  166.                         <s:LinearGradientStroke rotation="90" weight="1">
  167.                                 <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
  168.                                 <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
  169.                         </s:LinearGradientStroke>
  170.                 </s:stroke>
  171.         </s:Rect>
  172.        
  173.         <!-- layer 6: highlight stroke (down state only) -->
  174.         <!--- @private -->
  175.         <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
  176.                 <s:stroke>
  177.                         <s:LinearGradientStroke rotation="90" weight="1">
  178.                                 <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
  179.                                 <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
  180.                                 <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
  181.                                 <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
  182.                                 <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
  183.                         </s:LinearGradientStroke>
  184.                 </s:stroke>
  185.         </s:Rect>
  186.         <!--- @private -->
  187.         <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
  188.                 <s:stroke>
  189.                         <s:LinearGradientStroke rotation="90" weight="1">
  190.                                 <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
  191.                                 <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
  192.                         </s:LinearGradientStroke>
  193.                 </s:stroke>
  194.         </s:Rect>
  195.        
  196.         <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
  197.         <!--- @private -->
  198.         <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
  199.                 <s:stroke>
  200.                         <s:LinearGradientStroke rotation="90" weight="1">
  201.                                 <s:GradientEntry color="0x000000"
  202.                                                                  alpha="0.5625"
  203.                                                                  alpha.down="0.6375" />
  204.                                 <s:GradientEntry color="0x000000"
  205.                                                                  alpha="0.75"
  206.                                                                  alpha.down="0.85" />
  207.                         </s:LinearGradientStroke>
  208.                 </s:stroke>
  209.         </s:Rect>
  210.        
  211.        
  212.         <s:Group
  213.                 horizontalCenter="0"
  214.                 verticalCenter="0"
  215.                 >
  216.                 <s:layout>
  217.                         <s:VerticalLayout
  218.                                 paddingBottom="{ hostComponent.getStyle('paddingBottom')}"
  219.                                 paddingTop="{ hostComponent.getStyle('paddingTop')}"
  220.                                 paddingLeft="{ hostComponent.getStyle('paddingLeft')}"
  221.                                 paddingRight="{ hostComponent.getStyle('paddingRight')}" />
  222.                 </s:layout>
  223.                 <s:BitmapImage
  224.                         id="icon"
  225.                         width="{hostComponent.getStyle('iconWidth')}"
  226.                         height="{hostComponent.getStyle('iconHeight')}"
  227.                         source="{hostComponent.getStyle('iconUp')}"
  228.                         verticalCenter="0"
  229.                         alpha="{(this.currentState == 'up')?.5:1}"
  230.                         />
  231.                 <s:Label
  232.                         text="{hostComponent.label}"
  233.                         verticalCenter="0"
  234.                         includeInLayout="{( hostComponent.label != '' )}"
  235.                         visible="{( hostComponent.label != '' )}"/>
  236.         </s:Group>
  237.        
  238. </s:SparkSkin>
create a new version of this paste RAW Paste Data