projectlistsortingbarbutton.mxml

flex 实现的一个showcase 喜欢flex的朋友可以

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="72" height="23"
	horizontalScrollPolicy="off" verticalScrollPolicy="off"
	creationComplete="creationCompleteHandler(event);">
	
	<mx:Script>
		<![CDATA[
			///////////////////////////////////////////////////////////////////////////////////////
			//import
			
			import mx.core.UIComponent;
			import flash.display.Sprite;
			import org.flex.engine.FlexEngine;
			import org.flex.events.*;
			
			////////////////////////////////////////////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var type:String;//latest,popular,alphabetical
			[Bindable] public var selected:Boolean
			
			////////////////////////////////////////////////////////////////////////////////////////
			//private variables
			
			private var state1:String;
			private var state2:String;
			
			////////////////////////////////////////////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				this.hitstate_mc.addEventListener(MouseEvent.ROLL_OVER,handleButtonEvent);
				this.hitstate_mc.addEventListener(MouseEvent.ROLL_OUT,handleButtonEvent);
				this.hitstate_mc.addEventListener(MouseEvent.CLICK,handleButtonEvent);
				
				if(type=="latest"){
					this.state1=FlexDotOrgPanelListSortingEvent.LATEST
					this.state2=FlexDotOrgPanelListSortingEvent.OLDEST
				}else if(type=="popular"){
					this.state1=FlexDotOrgPanelListSortingEvent.POPULAR
					this.state2=FlexDotOrgPanelListSortingEvent.UNPOPULAR
				}else if(type=="alphabetical"){
					this.state1=FlexDotOrgPanelListSortingEvent.AZ
					this.state2=FlexDotOrgPanelListSortingEvent.ZA
				}
				this.label_mc.text=this.state1
			}
			
			private function handleButtonEvent(event:MouseEvent):void{
				this.button_mc.dispatchEvent(event);
			
				if(event.type==MouseEvent.CLICK){
					var ev:FlexDotOrgPanelListSortingEvent=new FlexDotOrgPanelListSortingEvent(FlexDotOrgPanelListSortingEvent.CHANGE_SORT_TYPE)
					if(this.button_mc.selected){
						var buttonText:String=this.label_mc.text
						
						if(buttonText==this.state1){
							this.label_mc.text=this.state2
							ev.sortType=this.state2
						}else{
							this.label_mc.text=this.state1
							ev.sortType=this.state1
						}
						this.dispatchEvent(ev)
						
					}else{
						ev.sortType=this.label_mc.text
						this.dispatchEvent(ev)
						this.button_mc.selected=true
					}
				}
			}
			
		]]>
	</mx:Script>


	<mx:Button id="button_mc" styleName="projectListSortingBarButtonLatest" mouseEnabled="false" selected="{this.selected}"/>
	<mx:Label id="label_mc" text="Latest"  y="2" width="72" textAlign="center"
		styleName="myriadRegular" color="0x666666" mouseEnabled="false" />
	<mx:Button id="hitstate_mc" width="72" height="23" alpha="0" x="0" buttonMode="true"/>	
</mx:Canvas>