horizontalalignpicker.mxml

Flex2StyleExplorer form Adobe

<?xml version="1.0" encoding="utf-8"?>
<mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml" label="Horizontal Align" width="100%" creationComplete="setDefault()" >
	
	<mx:ToggleButtonBar id="togglebar" styleName="fseToggleButtons" itemClick="clickHandler(event);"
		selectedIndex="{styleValue == 'right'?(2):styleValue == 'center'?(1):0}" >
		<mx:dataProvider>
			<mx:Array>
				<mx:Object icon="{alignLeft}"  toolTip="Shadow Left"/>                   
				<mx:Object icon="{alignCenter}" toolTip="Shadow Center"/>
				<mx:Object icon="{alignRight}" toolTip="Shadow Right" />
        	</mx:Array>
		</mx:dataProvider>
	</mx:ToggleButtonBar>
	
	<mx:Script>
		<![CDATA[
		
			import mx.events.ItemClickEvent; 
			import mx.events.FlexEvent;
			include "../as/assets.as";
			
			[Bindable]
			public var styleValue:String = 'left';
		
			private function dispatchMyEvent():void {
                this.dispatchEvent( new Event("dataChange") );
            }
            
             private function clickHandler(event:ItemClickEvent):void {
             	if (event.index == 0) {
               		styleValue = 'left';
               	} else if (event.index == 1) {
               		styleValue = 'center';
               	} else if (event.index == 2) {
               		styleValue = 'right';
               	}
               dispatchMyEvent();
            }
           
             [Bindable]
			public var defaultValue:String;
           
           public function setDefault():void {
           		defaultValue = styleValue;
           }
           
           public function restoreDefault():void {
           		styleValue = defaultValue;
           }
           
		]]>
	</mx:Script>
	
	<mx:Metadata>
        [Event("dataChange")]
    </mx:Metadata>
   
</mx:FormItem>