FLEX{er}

How to skin a container with padding in Flex 4 SDK – Spark
How to skin a button with icon in Flex 4 SDK – spark

It’s recommended to use same SDK version components in same file, so I skin a button in Flex SDK 4 using only Spark components.

In Halo we use to add an icon to a button using icon property:

    <mx:Button width="120"
        icon="@Embed(source='ico/add-blue.gif')" 		
        label="New comment" />

In Spark we have to skin our button in order to put an icon on the button. I made a skin for a button with round corners and an icon that will be changed as well as background color on different states.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"  
    alpha.disabled="0.5"> 
 
     <fx:Metadata> 
        [HostComponent("spark.components.Button")] 
    </fx:Metadata> 
 
    <fx:Script> 
        <![CDATA[         
            static private const exclusions:Array = ["labelElement"]; 
            override public function get colorizeExclusions():Array
            {
            	return exclusions;
            } 
        ]]>        
    </fx:Script> 
 
    <s:states> 
        <s:State name="up" /> 
        <s:State name="over" /> 
        <s:State name="down" /> 
        <s:State name="disabled" /> 
    </s:states>  
 
    <!-- UP SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="up" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    </s:stroke> 
         <s:fill> 
              <s:LinearGradient rotation="90"> 
                   <s:entries>  
                        <s:GradientEntry ratio="0" alpha="1" color="#EE9819"/>
                   		<s:GradientEntry ratio="1" alpha="1" color="#FAE38F"/>
                  		<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                  		<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> 
                   </s:entries> 
              </s:LinearGradient> 
         </s:fill> 
    </s:Rect>
 
    <!-- Over SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="over" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    </s:stroke> 
        <s:fill> 
              <s:LinearGradient rotation="90"> 
                   <s:entries> 
                        <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                    	<s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                   	 	<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                    	<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> 
                   </s:entries> 
              </s:LinearGradient> 
         </s:fill> 
    </s:Rect>
 
    <!-- DOWN SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="down" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    </s:stroke> 
        <s:fill> 
              <s:LinearGradient rotation="-90"> 
                   <s:entries> 
                        <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                    	<s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                   	 	<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                    	<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>  
                   </s:entries> 
              </s:LinearGradient> 
         </s:fill> 
    </s:Rect>
 
    <!-- UP ICON -->
    <s:BitmapImage source="@Embed('ico/add-blue.gif')" 
    	verticalCenter="0" left="5" includeIn="up" />
 
    <!-- OVER ICON -->
    <s:BitmapImage source="@Embed('ico/add-green.gif')" 
    	verticalCenter="0" left="5" includeIn="over" />
 
    <!-- DOWN ICON -->
    <s:BitmapImage source="@Embed('ico/add-red.gif')" 
    	verticalCenter="0" left="5" includeIn="down" />
 
    <!-- Text SKIN-->
    <s:SimpleText id="labelElement" 
             textAlign="center" 
             verticalAlign="middle" 
             lineBreak="toFit" 
             truncation="1" 
             color="0x000099"
             horizontalCenter="0" verticalCenter="1" 
             left="25" right="10" top="2" bottom="2"> 
    </s:SimpleText> 
 
</s:SparkSkin >

I’m not a good designer but I will make a round button, just as an example, in order to see how to skin a button, and to let you understand the Flex SDK 4 graphic possibilities:

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	minWidth="60" minHeight="60" 
	alpha.disabled="0.5"> 
 
	<fx:Metadata> 
		[HostComponent("spark.components.Button")] 
	</fx:Metadata> 
 
	<fx:Script> 
	<![CDATA[         
		static private const exclusions:Array = ["labelElement"]; 
		override public function get colorizeExclusions():Array 
		{
			return exclusions;
		} 
	]]>        
	</fx:Script> 
 
	<s:states> 
		<s:State name="up" /> 
		<s:State name="over" /> 
		<s:State name="down" /> 
		<s:State name="disabled" /> 
	</s:states> 
 
	<s:Ellipse width="100%" height="100%">
 
		<s:stroke>
			<s:Stroke color="#cccccc" alpha="1" weight="1" /> 
		</s:stroke> 
 
		<s:fill.up> 
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0x0000AA" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.8" alpha=".5"/> 
				</s:entries> 
			</s:RadialGradient> 
		</s:fill.up>  
 
		<s:fill.over>  
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0xAA0000" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.8" alpha=".5"/> 
				</s:entries> 
			</s:RadialGradient> 
		</s:fill.over>  
 
		<s:fill.down>  
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0x00AA00" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.9" alpha=".5"/> 
				</s:entries> 
			</s:RadialGradient> 
		</s:fill.down> 
 
	</s:Ellipse>
 
	<s:SimpleText id="labelElement"  
				  textAlign="center" 
				  verticalAlign="middle" 
				  lineBreak="toFit" 
				  truncation="1" 
				  color="0xFFFFFF"
				  fontWeight="bold"
				  rotation.up="180" rotation.over="0" 
				  rotation.down="0" rotation.disabled="180"    
				  horizontalCenter="0" verticalCenter="1" 
				  left="10" right="10" top="2" bottom="2"> 
	</s:SimpleText> 
 
</s:SparkSkin>