projectlistsortingbar.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:sortingBar="com.flexShowcase.components.projectList.navigation.sortingBar.*"
	
	width="226"
	height="31"
	
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	
	creationComplete="creationCompleteHandler(event)">
	
	
	<mx:Script>
		<![CDATA[
		
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.ProjectListSortTypes;
			import com.flexShowcase.events.ProjectListEvent;
			
			//////////////////////////////////////////////////
			//private variables
			
			private var selectedSort:String = ProjectListSortTypes.DEFAULT_SORT;
			private var selectedOrder:String = ProjectListSortTypes.DEFAULT_ORDER;
			
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				render();
			}
			
			//////////////////////////////////////////////////
			//private functions
			
			private function dispatchProjectListChangeViewEvent():void {
				var projectListEvent:ProjectListEvent = new ProjectListEvent(ProjectListEvent.CHANGE_VIEW);
				projectListEvent.selectedSort = selectedSort;
				projectListEvent.selectedOrder = selectedOrder;
				
				dispatchEvent(projectListEvent);
			}
			
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function sortButtonClickHandler(event:MouseEvent):void {
				event.stopPropagation();
				
				var sortButton:Object = event.target;
				
				var sort:String;
				
				switch (sortButton) {
					case latestSortButton :
						sort = ProjectListSortTypes.LATEST_SORT;
						break;
					case popularSortButton :
						sort = ProjectListSortTypes.POPULAR_SORT;
						break;
					case alphabeticalSortButton :
						sort = ProjectListSortTypes.ALPHABETICAL_SORT;
						break;
				}
				
				if (sort != selectedSort) {
					selectedSort = sort;
				} else {
					switch (selectedOrder) {
						case ProjectListSortTypes.ASCENDING_ORDER :
							selectedOrder = ProjectListSortTypes.DESCENDING_ORDER;
							break;
						case ProjectListSortTypes.DESCENDING_ORDER :
							selectedOrder = ProjectListSortTypes.ASCENDING_ORDER;
							break;
					}
				}
				
				render();
				
				dispatchProjectListChangeViewEvent();
			}
			
			private function render():void {
				switch (selectedSort) {
					case ProjectListSortTypes.LATEST_SORT :
						latestSortButton.selected = true;
						popularSortButton.selected = false;
						alphabeticalSortButton.selected = false;
						
						latestSortButton.sortOrder = selectedOrder;
						break;
					case ProjectListSortTypes.POPULAR_SORT :
						latestSortButton.selected = false;
						popularSortButton.selected = true;
						alphabeticalSortButton.selected = false;
						
						popularSortButton.sortOrder = selectedOrder;
						break;
					case ProjectListSortTypes.ALPHABETICAL_SORT :
						latestSortButton.selected = false;
						popularSortButton.selected = false;
						alphabeticalSortButton.selected = true;
						
						alphabeticalSortButton.sortOrder = selectedOrder;
						break;
				}
			}
			
		]]>
	</mx:Script>
	
	
	<mx:Image source="@Embed('/assets/images/frontend/projectlist/projectList_sortingButtons_bg.png')" />
	
	<sortingBar:ProjectListSortingBarButtonLatest id="latestSortButton" x="4" y="4" toolTip="Sort by date added" click="sortButtonClickHandler(event)" />
	<sortingBar:ProjectListSortingBarButtonPopular id="popularSortButton" x="77" y="4" toolTip="Sort by popularity" click="sortButtonClickHandler(event)" />
	<sortingBar:ProjectListSortingBarButtonAlphabetical id="alphabeticalSortButton" x="150" y="4" toolTip="Sort alphabetically" click="sortButtonClickHandler(event)" />
	
	
</mx:Canvas>