Dynamic FXG path data

<?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>

Spark ButtonBar dynamic icon and toolTip

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;
}
}

Flex 4 Spark Button Skinning with scaleGrid

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″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:fb=”http://ns.adobe.com/flashbuilder/2009″

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>

Adobe Flash Platform Summit 2010

Horizontal percentage wise positioning in Canvas

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 );

}

halo namespace is now mx in flex4

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″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx” >

</s:Application>

ref:  http://forums.adobe.com/message/2445911

An Introduction to Rich Internet Applications

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

First Steps in Flex Screencasts By JAMES WARD

http://www.jamesward.com/2010/01/24/first-steps-in-flex-screencasts/

Flex 4 Font embedding for MX componentes

@font-face {

font-family: “scFont”;

src: url(“assets/fonts/mriam.ttf”);

embedAsCff: true;

}

mx|Alert, mx|Button, mx|Form,mx|FormItem, mx|FormItemLabel{

font-family: scFont;

textFieldClass: ClassReference(“mx.core.UIFTETextField”);

}

mx|DateField {

font-family: Tahoma;

textInputClass: ClassReference(“mx.controls.MXFTETextInput”);

textFieldClass: ClassReference(“mx.core.UIFTETextField”);

}

mx|Label {

textFieldClass: ClassReference(“mx.core.UIFTETextField”);

}

Unitconversion

a powerful software utility that helps you make easy conversion between more than 2,100 various units of measure in more than 70 categories

http://www.unitconversion.org/webmasters.html