projectlist.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:components="com.flexShowcase.components.*"
	xmlns:navigation="com.flexShowcase.components.projectList.navigation.*"
	xmlns:categoriesButton="com.flexShowcase.components.projectList.navigation.categoriesButton.*"
	xmlns:sortingBar="com.flexShowcase.components.projectList.navigation.sortingBar.*"
	xmlns:viewsBar="com.flexShowcase.components.projectList.navigation.viewsBar.*"
	xmlns:pagingBar="com.flexShowcase.components.projectList.navigation.pagingBar.*"
	xmlns:panels="com.flexShowcase.panels.*"
	xmlns:controls="com.flexdotorg.controls.*"
	
	horizontalCenter="0"
	
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	
	creationComplete="creationCompleteHandler(event)">
	
	<mx:Script>
		<![CDATA[
		
		
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.components.projectList.views.hybridView.ProjectListHybridView;
			import com.flexShowcase.components.projectList.views.textView.ProjectListTextView;
			import com.flexShowcase.components.projectList.views.thumbView.ProjectListThumbView;
			import com.flexShowcase.components.projectList.views.AbstractListView;
			import com.flexShowcase.constants.*;
			import com.flexShowcase.data.Project;
			import com.flexShowcase.events.*;
			
			import mx.collections.*;
			
			//////////////////////////////////////////////////
			//getter/setter variables
			
			private var _projects:ArrayCollection;
			private var _selectedProject:Project;
			private var _isOpen:Boolean;
			
			//////////////////////////////////////////////////
			//private variables
			
			private var view:AbstractListView;
			private var currentView:String;
			private var currentSort:String;
			private var currentOrder:String;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var tags:ArrayCollection;
			[Bindable] public var technologies:ArrayCollection;
			[Bindable] public var industries:ArrayCollection;
			[Bindable] public var currentPage:uint;
			
			//////////////////////////////////////////////////
			//getter/setter functions
			
			[Bindable]
			public function set projects(value:ArrayCollection):void {
				_projects = value;
				
				projectsHandler();
			}
			public function get projects():ArrayCollection {
				return _projects;
			}
			
			//-----------------------------------------------------------------------
			
			[Bindable]
			public function set selectedProject(value:Project):void {
				_selectedProject = value;
				
				selectedProjectHandler();
			}
			public function get selectedProject():Project {
				
				return _selectedProject;
			}
			
			//---------------------------------------------------------------------
			
			public function set isOpen(value:Boolean):void {
				_isOpen = value;
				
				handleIsOpen();
			}
			
			public function get isOpen():Boolean {
				return _isOpen;
			}
			
			private function handleIsOpen():void{
				if(isOpen){
					showHideToggle.openState();
				}else{
					showHideToggle.closeState();
				}
			}
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				sortingBar.addEventListener(ProjectListEvent.CHANGE_VIEW, sortingBarChangeViewHandler);
				viewsBar.addEventListener(ProjectListEvent.CHANGE_VIEW, viewsBarChangeViewHandler);
				categoriesPanel.addEventListener(CategoriesPanelEvent.PANEL_CLOSE,handleCategoriesPanelClose)
				
				renderSelectedView();
				renderSelectedSort();
			}
			
			//////////////////////////////////////////////////
			//private functions
			
			private function renderSelectedSort(selectedSort:String = ProjectListSortTypes.DEFAULT_SORT, selectedOrder:String = ProjectListSortTypes.DEFAULT_ORDER):void {
				if (projects != null) {
					var name:String = findSort(selectedSort);
					var caseInsensitive:Boolean = false;
					var descending:Boolean = findDescending(selectedOrder);
					var numeric:Object = findNumeric(selectedSort);
					
					var sortField:SortField = new SortField(name, caseInsensitive, descending, numeric);
					
					var sort:Sort = new Sort();
					sort.fields = new Array(sortField);
					
					projects.sort = sort;
					trace("YO!!!")
					projects.refresh();
					this.dispatchEvent(new ProjectListEvent(ProjectListEvent.SORT_UPDATE))
				}
			}
			private function findSort(selectedSort:String):String {
				var sort:String;
				
				switch (selectedSort) {
					case ProjectListSortTypes.ALPHABETICAL_SORT :
						sort = "name";
						break;
					case ProjectListSortTypes.LATEST_SORT :
						sort = "createdDate";
						
						break;
					case ProjectListSortTypes.POPULAR_SORT :
						//sort = "rating";
						sort = "views";
						break;
				}
				
				return sort;
			}
			private function findDescending(selectedOrder:String):Boolean {
				var order:Boolean;
				
				switch (selectedOrder) {
					case ProjectListSortTypes.ASCENDING_ORDER :
						order = false;
						break;
					case ProjectListSortTypes.DESCENDING_ORDER :
						order = true;
						break;
				}
				
				return order;
			}
			private function findNumeric(selectedSort:String):Boolean {
				var numeric:Boolean;
				
				switch (selectedSort) {
					case ProjectListSortTypes.ALPHABETICAL_SORT :
						numeric = false;
						break;
					case ProjectListSortTypes.LATEST_SORT :
						numeric = true;
						break;
					case ProjectListSortTypes.POPULAR_SORT :
						numeric = true;
						break;
				}
				
				return numeric;
			}
			
			private function renderSelectedView(selectedView:String = ProjectListViews.DEFAULT):void {
				if(selectedView!=viewsBar.selectedView){
					if (view != null) {
						view.removeEventListener(ProjectListEvent.SELECT_PROJECT, handleViewItemSelect);
						view.removeEventListener(Event.ADDED_TO_STAGE,handleViewAddedToStage)
						view.cleanUp();
						viewContainer.removeChild(view);
						view = null;
					}
					
					switch (selectedView) {
						case ProjectListViews.THUMBNAIL :
							view = new ProjectListThumbView();
							break;
						case ProjectListViews.HYBRID :
							view = new ProjectListHybridView();
							break;
						case ProjectListViews.TEXT :
							view = new ProjectListTextView();
							break;
					}
					
					view.addEventListener(ProjectListEvent.SELECT_PROJECT, handleViewItemSelect);
					view.addEventListener(Event.ADDED_TO_STAGE,handleViewAddedToStage)
					viewContainer.addChild(view);
					viewsBar.selectedView = selectedView;
				}
				
			}
			
			private function handleViewItemSelect(projectListEvent:ProjectListEvent):void{
				selectedProject=view.selectedProject
			}
			
			private function handleViewAddedToStage(event:Event):void{
				updateViewProjects();
				updateViewSelectedProject();
				
				if (currentSort != null && currentOrder != null) {
					renderSelectedSort(currentSort, currentOrder);
				} else {
					renderSelectedSort();
				}
			}
			
			private function updateViewProjects():void {
				if (view != null) {
					if (projects != null) {
						view.projects = projects;
					}
				}
			}
			private function updateViewSelectedProject():void {
				view.selectedProject = selectedProject;
			}
			
			private function dispatchMaximizeToggle():void {
				var projectListEvent:ProjectListEvent = new ProjectListEvent(ProjectListEvent.MAXIMIZE_TOGGLE);
				dispatchEvent(projectListEvent);
			}
			
			
			//////////////////////////////////////////////////
			//getter/setter handler functions
			
			private function projectsHandler():void {
				updateViewProjects();
				
				if (currentSort != null && currentOrder != null) {
					renderSelectedSort(currentSort, currentOrder);
				} else {
					renderSelectedSort();
				}
			}
			private function selectedProjectHandler():void {
				updateViewSelectedProject();
				
				if (isOpen == false) {
					dispatchMaximizeToggle();
				}
			}
			
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function sortingBarChangeViewHandler(projectListEvent:ProjectListEvent):void {
				currentSort = projectListEvent.selectedSort;
				currentOrder = projectListEvent.selectedOrder;
				trace("PROJECT LIST: sortingBarChangeViewHandler: currentOrder: "+currentOrder+" currentSort: "+currentSort)
				renderSelectedSort(projectListEvent.selectedSort, projectListEvent.selectedOrder);
			}
			private function viewsBarChangeViewHandler(projectListEvent:ProjectListEvent):void {
				currentView = projectListEvent.selectedView;
				renderSelectedView(projectListEvent.selectedView);
			}
			
			private function handleCategoriesButtonClick(mouseEvent:MouseEvent):void {
				requestDepthToTop()
				
				switch (categoriesPanel.currentState) {
					case CategoriesPanel.DEFAULT_STATE :
						categoriesPanel.show();
						break;
					case CategoriesPanel.UPPER_STATE :
						categoriesPanel.hide();
						break;
					case CategoriesPanel.LOWER_STATE :
						categoriesPanel.hide();
						break;
				}
			}
			
			public function requestDepthToTop():void{
				var event:ProjectListEvent=new ProjectListEvent(ProjectListEvent.REQUEST_DEPTH_TO_TOP);
				this.dispatchEvent(event);
			}
			
			private function resultsTextUpdateCompleteHandler(event:Event):void {
			}
			
			private function showAllButtonClickHandler(mouseEvent:MouseEvent):void {
				var projectListEvent:ProjectListEvent = new ProjectListEvent(ProjectListEvent.SHOW_ALL);
				
				dispatchEvent(projectListEvent);
			}
			
			private function showHideToggleClickHandler(mouseEvent:MouseEvent):void {
				 dispatchMaximizeToggle();
			}
			
			private function handleCategoriesPanelClose(event:CategoriesPanelEvent):void{
				this.categoriesButton.selected = false;
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:Canvas top="0" bottom="25" width="760" backgroundColor="#E5E5E5" borderColor="#FFFFFF" borderStyle="solid" borderThickness="2" horizontalCenter="0" clipContent="false">
		<mx:Image source="@Embed('/assets/images/frontend/projectlist/projectList_verticalDivider.png')" left="246" top="12" />
		<mx:Image source="@Embed('/assets/images/frontend/projectlist/projectList_verticalDivider.png')" right="55" top="12" />
		
		<mx:Label styleName="standardText" top="16" horizontalCenter="-80" text="Sort By:" />
		
		<sortingBar:ProjectListSortingBar id="sortingBar" top="10" horizontalCenter="60" />
		<viewsBar:ProjectListViewsBar id="viewsBar" right="72" top="10" />
		<navigation:ProjectListOpenCloseToggleButton id="showHideToggle" right="10" top="10" isOpen="true" buttonMode="true" click="showHideToggleClickHandler(event)" />
		
		<mx:HRule x="2" y="50" width="756" strokeColor="#adadad" />
		
		<mx:Canvas id="resultsTextCanvas" x="2" top="50" width="756" height="30" 
			backgroundColor="#BFBFBF" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			<controls:LoadingIcon id="loadingIcon" x="10" y="8" />
			<mx:TextArea id="resultsText" styleName="projectListResultsText" y="2" left="10" right="0" 
				width="{resultsTextCanvas.width}" height="100%" backgroundAlpha="0" wordWrap="true" 
				selectable="false" htmlText="{}" updateComplete="resultsTextUpdateCompleteHandler(event)" />
		</mx:Canvas>
		
		<mx:Canvas id="viewContainer" left="0" right="0" top="{resultsTextCanvas.height - 24}" bottom="27" />
		
		<panels:CategoriesPanel id="categoriesPanel"  bottom="0"
			tags="{tags}" industries="{industries}" technologies="{technologies}"/>
		
		<mx:CheckBox id="categoriesButton" left="10" top="8" styleName="projectListCategoriesButtonChBx"
			 buttonMode="true"
			toolTip="Apply filters to the items in the list" click="handleCategoriesButtonClick(event)"/>
		<mx:Button id="showAllButton" styleName="flexSquareButton" x="160" y="10" label="Show All" toolTip="Clear all filters" buttonMode="true" click="showAllButtonClickHandler(event)" />
	</mx:Canvas>
	
	<pagingBar:PagingBar id="pagingBar" x="2" bottom="27" width="756" currentPageNum="{currentPage}"/>
	<components:FlexDotOrgFooter bottom="3" horizontalCenter="0" />
	
	
</mx:Canvas>