projectpaneldetails.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:details="com.flexShowcase.components.projectPanel.details.*"
	mouseEnabled="false"
	
	height="330"
	width="794"
	
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	backgroundColor="0x009900"
	backgroundAlpha="0"
	currentState="{MINIMIZED}"
	buttonMode="false"
	creationComplete="creationCompleteHandler(event);" xmlns:remote="com.flexShowcase.net.remote.*">
	
	
	<mx:Script>
		<![CDATA[
			//////////////////////////////////////////////////
			//import
			
			import flash.text.TextFieldAutoSize;
			import mx.effects.Fade;
			import mx.effects.easing.Quadratic;
			import mx.events.EffectEvent;
			import com.flexShowcase.data.*;
			import com.flexShowcase.events.*;
			
			
			//////////////////////////////////////////////////
			//static constant variables
			public static const TAG_CLICK_EVENT:String = "tagClickEvent";
			private static const MAXIMIZED:String = "maximized";
			private static const MINIMIZED:String = "minimized";
			
			//////////////////////////////////////////////////
			//getter/setter variables
			private var _detailsData:Project;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var user:User;
			
			//////////////////////////////////////////////////
			//getter/setter functions
			[Bindable]
			public function set detailsData(value:Project):void {
				_detailsData = value;
				
				handleDetailsData();
			}
			
			public function get detailsData():Project {
				return _detailsData;
			}
			
			private function handleDetailsData():void {
				//
			
			}
			
			////////////////////////////////////////////////////////////////////////////////////////
			//initialization
			private function creationCompleteHandler(event:Event):void {
				
				var aHover:Object = new Object;
				aHover.color = "#00CCFF";
				
				var ss:StyleSheet = new StyleSheet();
				ss.setStyle("a:hover", aHover);
				
				industryInfo_mc.cloudStyleSheet = ss;
				techInfo_mc.cloudStyleSheet = ss;
				tagInfo_mc.cloudStyleSheet = ss;
			}
			
			//opening/closing of panel-------------------------------------------------------------
			
			public function openPanel(event:MouseEvent=null):void {
				closePanelInternal(event)
			}
			
			public function handlePanelClose():void {
				mouseEnabled = false;
				maskCanvas_mc.mouseEnabled = false;
				detailsPanelCanvas_mc.mouseEnabled = false;
			}
			
			public function closePanel():void {
				if (currentState != MINIMIZED) {
					currentState = MINIMIZED;
				} else {
					dispatchEvent(new Event(Event.CLOSE));
				}
			}
			
			private function onCloseComplete():void{
				dispatchEvent(new Event(Event.CLOSE));
			}
			
			private function closePanelInternal(mouseEvent:MouseEvent=null):void {
				switch (currentState) {
					case MINIMIZED :
						currentState = MAXIMIZED;
						break;
					case MAXIMIZED :
						currentState = MINIMIZED;
						handlePanelClose()
						break;
				}
			}
			
			//report project---------------------------------------------------------------------
			
			private function reportProject():void {
				var ev:ProjectEvent = new ProjectEvent(ProjectEvent.REPORT_PROJECT);
				ev.project = detailsData;
				
				dispatchEvent(ev);
			}
			
			//tag clouds - industries, technologies, tags----------------------------------------------
			
		]]>
	</mx:Script>
	
	
	<mx:states>
		<mx:State name="{MAXIMIZED}">
			<mx:SetProperty target="{detailsPanelCanvas_mc}" name="y" value="0" />
			<mx:SetProperty target="{bottomShadow_mc}" name="width" value="400" />
			<mx:SetProperty target="{bottomShadow_mc}" name="x" value="380" />
			<mx:SetProperty target="{bottomShadow_mc}" name="y" value="290" />
		</mx:State>
		<mx:State name="{MINIMIZED}">
			<mx:SetProperty target="{detailsPanelCanvas_mc}" name="y" value="270" />
			<mx:SetProperty target="{bottomShadow_mc}" name="width" value="1" />
			<mx:SetProperty target="{bottomShadow_mc}" name="x" value="590" />
			<mx:SetProperty target="{bottomShadow_mc}" name="y" value="293" />
		</mx:State>
	</mx:states>
	
	
	<mx:transitions>
		<mx:Transition id="maximizePanelTransition" fromState="{MINIMIZED}" toState="{MAXIMIZED}">
			<mx:Parallel id="maximizeParallel" targets="{[detailsPanelCanvas_mc,bottomShadow_mc]}">
				<mx:Move duration="200" targets="{[detailsPanelCanvas_mc]}" startDelay="200" easingFunction="Quadratic.easeOut" />
				<mx:Resize duration="200" targets="{[bottomShadow_mc]}" easingFunction="Quadratic.easeOut" />
				<mx:Move duration="200" targets="{[bottomShadow_mc]}" easingFunction="Quadratic.easeOut" />
			</mx:Parallel>
		</mx:Transition>
		<mx:Transition id="minimizePanelTransition" fromState="{MAXIMIZED}" toState="{MINIMIZED}">
			<mx:Parallel id="minimizeParallel" targets="{[detailsPanelCanvas_mc,bottomShadow_mc]}">
				<mx:Move id="closingMove" duration="200" targets="{[detailsPanelCanvas_mc]}" easingFunction="Quadratic.easeIn" />
				<mx:Resize duration="200" targets="{[bottomShadow_mc]}" startDelay="200" easingFunction="Quadratic.easeIn" 
					effectEnd="onCloseComplete()"/>
				<mx:Move duration="200" targets="{[bottomShadow_mc]}" startDelay="200" easingFunction="Quadratic.easeIn"/>
			</mx:Parallel>
		</mx:Transition>
	</mx:transitions>
	
	
	<mx:Canvas  id="maskCanvas_mc"  mouseEnabled="false" height="300" backgroundColor="0x000099"  
		backgroundAlpha="0" horizontalScrollPolicy="off" verticalScrollPolicy="off"  
		width="365" right="30" top="-5">
		<mx:Canvas id="detailsPanelCanvas_mc" mouseEnabled="false" buttonMode="false"
			height="371" backgroundColor="0x990000" backgroundAlpha="0" width="100%"
			horizontalScrollPolicy="off" verticalScrollPolicy="off">
			<mx:Image id="bg_mc" maintainAspectRatio="false" width="100%" 
				source="@Embed('/assets/images/frontend/projectpanel/details/detailsPanel_bg_small.png')" />
			
			<mx:Label text="Details" x="10" y="38" styleName="myriadBold" fontSize="16" 
				color="0xffffff"/>
			<mx:Button id="reportProjectBut_mc" styleName="blackButton" right="32" top="34" 
				label="Report Application" click="reportProject()" buttonMode="true"/>
				
			<mx:VBox x="10" y="70" verticalScrollPolicy="auto" width="348" height="223"
				backgroundAlpha="0" backgroundColor="0x990000">
				
				<details:DetailsNameLink id="clientInfo_mc" companyName="{this.detailsData.clientName}" companyEmail="{this.detailsData.clientEmail}"
					 companyUrl="{this.detailsData.clientURL}" labelName="Client"/>
				<details:DetailsNameLink id="devInfo_mc" 
					companyName="{this.detailsData.developerName}" companyEmail="{this.detailsData.developerEmail}"
					companyUrl="{this.detailsData.developerURL}" labelName="Developer"/>
				<mx:HRule strokeColor="0x555555" shadowColor="0x333333" strokeWidth="2" width="100%"/>
				<details:DetailsTagCloud id="industryInfo_mc" cloudTitle="Industries" 
					cloudTextArray="{detailsData.industries}" width="100%"/>
				<mx:HRule strokeColor="0x555555" shadowColor="0x333333" strokeWidth="2" width="100%"/>
				<details:DetailsTagCloud id="techInfo_mc" cloudTitle="Technologies" 
					cloudTextArray="{detailsData.technologies}" width="100%"/>
				<mx:HRule strokeColor="0x555555" shadowColor="0x333333" strokeWidth="2" width="100%"/>
				<details:DetailsTagCloud id="tagInfo_mc" cloudTitle="Tags" 
					cloudTextArray="{detailsData.tags}" width="100%"/>
			</mx:VBox>
			
			<mx:Button id="detailsVisibleCloseButton_mc" top="42" right="11" click="closePanelInternal(event)"
				buttonMode="true" styleName="mainNavSearchBarCloseButton"/>
		</mx:Canvas>
	</mx:Canvas>
	<mx:Image id="bottomShadow_mc" source="@Embed('/assets/images/frontend/projectpanel/details/detailsPanel_bottomShadow.png',scaleGridTop='9', scaleGridBottom='10', scaleGridLeft='16', scaleGridRight='780')" 
		y="290"/>
</mx:Canvas>