frontend.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:screens="com.flexShowcase.screens.*"
	left="0"
	right="0"
	top="0"
	bottom="0"
	
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	
	resize="resizeHandler(event)"
	currentState="{ScreenStates.PROJECT_LIST_MAXIMIZED}"
	creationComplete="creationCompleteHandler(event)">
	
	
	<mx:Script>
		<![CDATA[
			
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.*;
			import com.flexShowcase.data.*;
			import com.flexShowcase.events.*;
			import com.flexShowcase.net.remote.FlexShowcaseServiceConfig;
			
			import mx.collections.ArrayCollection;
			import mx.events.ResizeEvent;
			
			//////////////////////////////////////////////////
			//getter/setter variables
			
			public var _selectedProject:Project;
			public var _projects:ArrayCollection;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var flexShowcaseServiceConfig:FlexShowcaseServiceConfig;
			[Bindable] public var user:User;
			
			[Bindable] public var tags:ArrayCollection;
			[Bindable] public var technologies:ArrayCollection;
			[Bindable] public var industries:ArrayCollection;
			
			[Bindable] public var currentPage:uint;
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				projectPanel.addEventListener(ProjectPanelEvent.REQUEST_DEPTH_TO_TOP,handleProjectPanelRequestDepthToTop)
				projectList.addEventListener(ProjectListEvent.REQUEST_DEPTH_TO_TOP,handleProjectListRequestDepthToTop)
				projectList.addEventListener(ProjectListEvent.SELECT_PROJECT, projectListSelectProjectHandler);
				projectList.addEventListener(ProjectListEvent.MAXIMIZE_TOGGLE, projectListMaximizeToggleHandler);
				projectList.addEventListener(ProjectListEvent.SORT_UPDATE,handleProjectListSortUpdate);
			//	projectPanel.addEventListener(ProjectPanelEvent.REQUEST_LARGE_IMAGE_MAXIMIZE,handleProjectPanelLargeImageMaximize);
				//projectPanel.addEventListener(ProjectPanelEvent.REQUEST_LARGE_IMAGE_MINIMIZE,handleProjectPanelLargeImageMinimize)
				projectList.isOpen=true;
			}
			
			
			//////////////////////////////////////////////////
			//getter/setter functions
			
			[Bindable]
			public function set projects(value:ArrayCollection):void {
				_projects = value;
				
				//projectsHandler();
			}
			
			public function get projects():ArrayCollection {
				return _projects;
			}
			
			/*
			private function projectsHandler():void{
				if (selectedProject == null) {
					selectedProject=projects.getItemAt(0) as Project;
				}
			}
			*/
			
			//---------------------------------------------------------------
			
			[Bindable]
			public function set selectedProject(value:Project):void {
				_selectedProject = value;
			}
			
			public function get selectedProject():Project {
				return _selectedProject;
			}
			
			//////////////////////////////////////////////////
			//private functions
			
			private function handleProjectPanelRequestDepthToTop(event:ProjectPanelEvent):void{
				trace("FRONTEND: handleProjectPanelRequestDepthToTop")
				this.setChildIndex(this.projectPanel,1)
				this.setChildIndex(this.projectList,0)
			}
			
			private function handleProjectListRequestDepthToTop(event:ProjectListEvent):void{
				trace("FRONTEND: handleProjectListRequestDepthToTop")
				this.setChildIndex(this.projectList,1)
				this.setChildIndex(this.projectPanel,0)
			}
			
			private function handleProjectListSortUpdate(event:ProjectListEvent):void{
				if(projects.length>0){
					if (selectedProject == null) {
						//trace("FRONTEND: handleProjectListSortUpdate")
						//selectedProject=projects.getItemAt(0) as Project;
						this.projectPanel.project=projects.getItemAt(0) as Project
					}
				}
				
			}
			
			private function toggleMaximizeState():void {
				switch (currentState) {
					case ScreenStates.PROJECT_LIST_MAXIMIZED :
						currentState = ScreenStates.PROJECT_LIST_MINIMIZED;
						projectList.isOpen=false;
						break;
					case ScreenStates.PROJECT_LIST_MINIMIZED :
						currentState = ScreenStates.PROJECT_LIST_MAXIMIZED;
						projectList.isOpen=true;
						break;
				} 
			}
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function resizeHandler(resizeEvent:ResizeEvent):void {
				var tempHeight:Number = height - projectList.y;
				if (tempHeight < projectList.minHeight) {
					tempHeight = projectList.minHeight;
				}
				projectList.height = tempHeight;
			}
			
			private function projectListSelectProjectHandler(projectListEvent:ProjectListEvent):void {
				selectedProject = projectListEvent.project;
			}
			
			private function projectListMaximizeToggleHandler(projectListEvent:ProjectListEvent):void {
				toggleMaximizeState(); 
			}
			
		]]>
	</mx:Script>
	
	
	<mx:states>
		<mx:State name="{ScreenStates.PROJECT_LIST_MAXIMIZED}">
			<mx:SetProperty target="{projectPanel}" name="y" value="0" />
			<mx:SetProperty target="{projectList}" name="visible" value="true" />
			<mx:SetProperty target="{projectList}" name="height" value="{height - 371}" />
			<mx:SetProperty target="{projectList}" name="y" value="371" />
		</mx:State>
		<mx:State name="{ScreenStates.PROJECT_LIST_MINIMIZED}">
			<mx:SetProperty target="{projectPanel}" name="y" value="-325" />
			<mx:SetProperty target="{projectList}" name="visible" value="true" />
			<mx:SetProperty target="{projectList}" name="height" value="{height - 56}" />
			<mx:SetProperty target="{projectList}" name="y" value="56" />
		</mx:State>
	</mx:states>
	
	<mx:transitions>
		<mx:Transition id="minimizeTransition" fromState="{ScreenStates.PROJECT_LIST_MAXIMIZED}" toState="{ScreenStates.PROJECT_LIST_MINIMIZED}">
			<mx:Parallel id="minimizeParallel" targets="{[projectPanel, projectList]}">
				<mx:Move duration="{AnimationFunctions.EXPONENTIAL_EASING_DURATION}" easingFunction="{AnimationFunctions.EXPONENTIAL_EASING_FUNCTION}" />
				<mx:Resize duration="{AnimationFunctions.EXPONENTIAL_EASING_DURATION}" easingFunction="{AnimationFunctions.EXPONENTIAL_EASING_FUNCTION}" />
			</mx:Parallel>
		</mx:Transition>
		<mx:Transition id="maximizeTransition" fromState="{ScreenStates.PROJECT_LIST_MINIMIZED}" toState="{ScreenStates.PROJECT_LIST_MAXIMIZED}">
			<mx:Parallel id="maximizeParallel" targets="{[projectPanel, projectList]}">
				<mx:Move duration="{AnimationFunctions.EXPONENTIAL_EASING_DURATION}" easingFunction="{AnimationFunctions.EXPONENTIAL_EASING_FUNCTION}" />
				<mx:Resize duration="{AnimationFunctions.EXPONENTIAL_EASING_DURATION}" easingFunction="{AnimationFunctions.EXPONENTIAL_EASING_FUNCTION}" />
			</mx:Parallel>
		</mx:Transition>
	</mx:transitions>
	
	<components:ProjectList
		id="projectList"
		currentPage="{currentPage}"
		selectedProject="{selectedProject}"
		projects="{projects}"
		tags="{tags}"
		technologies="{technologies}"
		industries="{industries}"/>
		
	<components:ProjectPanel
		id="projectPanel"
		project="{selectedProject}"
		flexShowcaseServiceConfig="{flexShowcaseServiceConfig}"
		user="{user}"/>
	
	<!-- this clip is to mask the project panel at the top of the screen above the nav when it slide up 
	and down from the projetc list opening and closing-->
	<mx:Canvas id="projectPanelMask" width="100%" height="20" backgroundAlpha="1" backgroundColor="0xF3F3F3"/>
		
</mx:Canvas>