Feeds:
Posts
Comments
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomHaloButtonSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
	 
 <fx:Script>
	 <![CDATA[
		 [Bindable]
		 private var displayColor:uint
		 [Bindable]private var dynCurve:String;
		 private var l1:uint;
		 private var l2:uint;
		 private var l3:uint;
		 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void{
			 var template:String  = "M 0 0 L #l1 0.0 L #l2 13 L #l3 30 L 0 30 L 0 0"
			 l1 = unscaledWidth ;
			 l2 = unscaledWidth ;
			 l3 = unscaledWidth - 17;
			 template = template.replace( /(#l1)/, l1 );
			 template = template.replace( /(#l2)/, l2 );
			 template = template.replace( /(#l3)/, l3 );
			 dynCurve = template;
			 displayColor  = Object(parent).displayColor;		
			 super.updateDisplayList(unscaledWidth, unscaledHeight);
		 }
		 
	 ]]>
 </fx:Script>
	<s:Path data="{dynCurve}">
		<s:fill>
			<s:SolidColor color="{displayColor}" />
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="{displayColor}" weight="1"/>
		</s:stroke>
	</s:Path>
</s:SparkSkin>

On middle ButtonBarButton Skin  creationComplete

protected function onCreationComplete(evt:FlexEvent):void {
var dataObj:Object = hostComponent.data;
if(dataObj.hasOwnProperty(‘icon’)){
img.source = dataObj.icon;
hostComponent.toolTip = dataObj.label;
}
}

CSS Class selector
.DeleteSkin{
upSkin: Embed(source=’assets/swf/Assets.swf#delete’, scaleGridLeft=10, scaleGridRight=25, scaleGridTop=5, scaleGridBottom=8);
overSkin:Embed(source=’assets/swf/Assets.swf#delete’, scaleGridLeft=10, scaleGridRight=25, scaleGridTop=5, scaleGridBottom=8);
downSkin:Embed(source=’assets/swf/Assets.swf#delete’, scaleGridLeft=10, scaleGridRight=25, scaleGridTop=5, scaleGridBottom=8);
skinClass: ClassReference(“assets.skins.ButtonSkin”);
}
ButtonSkin.mxml
<?xml version=”1.0″ encoding=”utf-8″?>
<s:SparkSkin xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
minWidth=”14″ minHeight=”14″
alpha.disabled=”0.5″>
<!– states –>
<s:states>
<s:State name=”up” />
<s:State name=”over” />
<s:State name=”down” />
<s:State name=”disabled” />
</s:states>
<!– host component –>
<fx:Metadata> <![CDATA[ [HostComponent(“spark.components.Button”)]]]></fx:Metadata>
<s:HGroup horizontalCenter=”0″ verticalCenter=”0″ verticalAlign=”middle” horizontalAlign=”center” left=”0″ right=”0″ top=”0″ bottom=”0″>
<s:BitmapImage
source.up=”{hostComponent.getStyle(‘upSkin’)}”
source.over=”{hostComponent.getStyle(‘overSkin’)}”
source.down=”{hostComponent.getStyle(‘downSkin’)}” width=”100%” height=”100%”/>
</s:HGroup>
</s:SparkSkin>
AFPS_banners_for_others5

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

var hGap:int = ( width – ( numChildren * getChildAt( i ).width + 10 ) ) / ( numChildren – 1 );

for( var i:int = 1; i < numChildren; i++ ){

getChildAt( i ).x = getChildAt( i – 1 ).x + getChildAt( i – 1 ).width + hGap;

}

super.updateDisplayList( unscaledWidth, unscaledHeight );

}

xmlns:mx=”library://ns.adobe.com/flex/halo” is now  xmlns:mx=”library://ns.adobe.com/flex/mx”
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” >
</s:Application>

http://weblog.mrinalwadhwa.com/2010/01/24/an-introduction-to-rich-internet-applications/