categoriespanel.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.*"
	
	left="0"
	right="0"
	top="0"
	bottom="0"
	
	clipContent="false"
	currentState="{DEFAULT_STATE}"
	horizontalScrollPolicy="off" verticalScrollPolicy="off"
	creationComplete="creationCompleteHandler(event);">
	
	
	<mx:Script>
		<![CDATA[
			//////////////////////////////////////////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.events.*;
			import com.flexShowcase.data.Project;
			import mx.collections.ArrayCollection;
			import mx.controls.CheckBox;
			
			////////////////////////////////////////////////////////////////////////////////////////
			//static constant variables
			
			public static const DEFAULT_STATE:String = "dbefaultState";
			public static const UPPER_STATE:String = "upperState";
			public static const LOWER_STATE:String = "lowerState";
			public static const INDUSTRY_TAGS_STATE:String = "industryTags";
			public static const TECHNOLOGY_TAGS_STATE:String = "technologyTags";
			
			/////////////////////////////////////////////////////////////////////////////////////////
			//private variables
		
			private var tagState:String;
			
			/////////////////////////////////////////////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var tags:ArrayCollection;
			[Bindable] public var technologies:ArrayCollection;
			[Bindable] public var industries:ArrayCollection;
			
			////////////////////////////////////////////////////////////////////////////
			//initializtion
			
			private function creationCompleteHandler(event:Event):void {
				categoriesPanelButtons.selection = industryButton;		
				tagState = INDUSTRY_TAGS_STATE;
				toggleTagState();
				addFilterListeners();
			}
			
			private function addFilterListeners():void{
				this.industryCloud.addEventListener(Event.CHANGE,handleColumnListChange);
				this.technologyCloud.addEventListener(Event.CHANGE,handleColumnListChange);
			}
			
			private function removeFilterListeners():void{
				this.industryCloud.removeEventListener(Event.CHANGE,handleColumnListChange);
				this.technologyCloud.removeEventListener(Event.CHANGE,handleColumnListChange);
			}
			
			//general---------------------------------------------------------------------
			public function show():void {
				if (parent.height < 280) {
					currentState = UPPER_STATE;
				} else {
					currentState = LOWER_STATE;
				}
				
				this.dispatchEvent(new CategoriesPanelEvent(CategoriesPanelEvent.REQUEST_PROJECT_LIST_TO_HIGHEST_DEPTH))
			}
			
			public function hide():void {
				currentState = DEFAULT_STATE;
				var ev:CategoriesPanelEvent=new CategoriesPanelEvent(CategoriesPanelEvent.PANEL_CLOSE)
				this.dispatchEvent(ev)
			}
			
			private function close():void {
				this.hide();
			}
			
			//states-----------------------------------------------------------------
			private function setDefaultState():void{
				if(upperBackground.visible){
					upperBackground.visible=false;
				}
				
				if(lowerBackground.visible){
					lowerBackground.visible=false;
				}
				
				if(categoriesPanelCanvas.visible){
					categoriesPanelCanvas.visible=false;
				}
			}
			
			private function industryButtonClickHandler(mouseEvent:MouseEvent):void {
				tagState = INDUSTRY_TAGS_STATE;
				toggleTagState();
			}
			
			private function technologyButtonClickHandler(mouseEvent:MouseEvent):void {
				tagState = TECHNOLOGY_TAGS_STATE;
				toggleTagState();
			}
			
			private function toggleTagState():void {
				switch (tagState) {
					case INDUSTRY_TAGS_STATE :
						industryCloud.visible = true;
						technologyCloud.visible = false;
						break;
					case TECHNOLOGY_TAGS_STATE :
						industryCloud.visible = false;
						technologyCloud.visible = true;
						break;
				}
			}
			
			private function handleColumnListChange(event:Event=null):void{
				runFilter();
			}
			
			//------------------------------------------------------------
			//filtering
			
			public function getFilterString():String{
				var str:String="";
				
				var items:Array=industryCloud.checkeditems;
				items=items.concat(technologyCloud.checkeditems);
				
				for(var i:uint=0;i<items.length;i++){
					str+=items[i]
					if(i<items.length-1){
						str+=" or ";
					}
				}
				return str;
			}
			
			
			public function clearAllSelections():void{
				removeFilterListeners();
				industryCloud.deselectAll();
				technologyCloud.deselectAll();
				addFilterListeners();
			}
			
			private function runFilter():void{
				var industryCheckedTags:Array = industryCloud.checkedTags;
				var technologyCheckedTags:Array = technologyCloud.checkedTags;
				
				var allCheckedTags:Array = industryCheckedTags.concat(technologyCheckedTags);
				
				var tagEvent:TagEvent = new TagEvent(TagEvent.CLICKED);
				tagEvent.tagIDs = allCheckedTags;
				
				dispatchEvent(tagEvent);
			}
			
		]]>
	</mx:Script>
	
	
	<mx:states>
		<mx:State name="{DEFAULT_STATE}" enterState="setDefaultState()"/>
		<mx:State name="{UPPER_STATE}" >
			<mx:SetProperty target="{upperBackground}" name="visible" value="true" />
			<mx:SetProperty target="{lowerBackground}" name="visible" value="false" />
			<mx:SetProperty target="{categoriesPanelCanvas}" name="visible" value="true" />
			<mx:SetProperty target="{categoriesPanelCanvas}" name="y" value="{upperBackground.y}" />
			<mx:SetProperty target="{closeBut_mc}" name="x" value="{upperBackground.width-closeBut_mc.width-8}" />
			<mx:SetProperty target="{closeBut_mc}" name="y" value="7" />
		</mx:State>
		<mx:State name="{LOWER_STATE}">
			<mx:SetProperty target="{upperBackground}" name="visible" value="false" />
			<mx:SetProperty target="{lowerBackground}" name="visible" value="true" />
			<mx:SetProperty target="{categoriesPanelCanvas}" name="visible" value="true" />
			<mx:SetProperty target="{categoriesPanelCanvas}" name="y" value="{43 + lowerBackground.y}" />
			<mx:SetProperty target="{closeBut_mc}" name="x" value="{lowerBackground.width-closeBut_mc.width-8}" />
			<mx:SetProperty target="{closeBut_mc}" name="y" value="5" />
		</mx:State>
		
		<mx:State name="{INDUSTRY_TAGS_STATE}">
			<mx:SetProperty target="{technologyCloud}" name="visible" value="false" />
			<mx:SetProperty target="{industryCloud}" name="visible" value="true" />
		</mx:State>
		<mx:State name="{TECHNOLOGY_TAGS_STATE}">
			<mx:SetProperty target="{technologyCloud}" name="visible" value="true" />
			<mx:SetProperty target="{industryCloud}" name="visible" value="false" />
		</mx:State>

	</mx:states>
	
	<mx:Fade id="fadeup" duration="200" alphaFrom="0" alphaTo="1" />
	<mx:Fade id="fadedown" duration="200" alphaFrom="1" alphaTo="0" />
	
	<mx:Image id="upperBackground" source="@Embed('/assets/images/frontend/projectlist/categoriesUpperBackground.png')" y="{43 - upperBackground.height}" visible="false" hideEffect="{fadedown}" showEffect="{fadeup}"/>
	<mx:Image id="lowerBackground" source="@Embed('/assets/images/frontend/projectlist/categoriesLowerBackground.png')" y="2" visible="false" hideEffect="{fadedown}" showEffect="{fadeup}" />
	
	<mx:Canvas id="categoriesPanelCanvas" width="760" height="222" horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:RadioButtonGroup id="categoriesPanelButtons"/>
		<mx:RadioButton id="industryButton" groupName="categoriesPanelButtons" value="industries" buttonMode="true"
			verticalCenter="-67" left="10" styleName="projectListCategoriesRBIndustry" click="industryButtonClickHandler(event);" />
		<mx:RadioButton id="technologyButton" groupName="categoriesPanelButtons" value="technologies" buttonMode="true"
			verticalCenter="-17" left="10" styleName="projectListCategoriesRBTechnology" click="technologyButtonClickHandler(event);" />
		<components:ColumnList x="200" y="20" width="555" height="200" id="industryCloud"
			 listData="{industries}"/>
		<components:ColumnList x="200" y="20" width="555" height="200" id="technologyCloud"
			listData="{technologies}"/>
		<mx:Button id="closeBut_mc" styleName="mainNavSearchBarCloseButton" x="734" y="3" 
			click="this.close()" buttonMode="true"/>
	</mx:Canvas>
	
</mx:Canvas>