projectpanel.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:screens="com.flexShowcase.screens.*"
	xmlns:projectPanel="com.flexShowcase.components.projectPanel.*"
	xmlns:components="com.flexShowcase.components.*"
	xmlns:panels="com.flexShowcase.panels.*"
	xmlns:details="com.flexShowcase.components.projectPanel.details.*"
	
	left="0"
	right="0"
	
	height="100%"
	
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	
	creationComplete="creationCompleteHandler(event)" >
	
	
	<mx:Script>
		<![CDATA[
		
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.data.*;
			import com.flexShowcase.events.*;
			import com.flexShowcase.net.remote.FlexShowcaseServiceConfig;
			
			import mx.effects.*;
			import mx.effects.easing.*;
			import mx.events.ResizeEvent;
			import mx.controls.Alert;
			
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var flexShowcaseServiceConfig:FlexShowcaseServiceConfig;
			private var __project:Project;
			[Bindable] public var user:User;
			[Bindable] public var useimagescale:Boolean=true;
			
			//////////////////////////////////////////////////
			//private variables
			
			private var detailsPanelOpen:Boolean;
			private var __imageresizeup:Resize;
			
			///////////////////////////////////////////////////////////////////////
			//GETTER/SETTERS
			
			[Bindable]
			public function set project(val:Project):void{
				this.__project=val
				this.handleProject()
			}
			
			public function get project():Project{
				return this.__project
			}
			
			private function handleProject():void{
				/*
				if(project.clientName==""||project.clientName=="N/A"){
					this.clientInfo_mc.visible=false
				}else{
					this.clientInfo_mc.visible=true
				}
				*/
			}
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				//setPanelToClosedState()
				largeImage_mc.addEventListener(ProjectPanelEvent.REQUEST_LARGE_IMAGE_MAXIMIZE,handleMaximizeRequest)
				largeImage_mc.addEventListener(ProjectPanelEvent.REQUEST_LARGE_IMAGE_MINIMIZE,handleMinimizeRequest)
				slider_mc.addEventListener(ScreenshotHorizontalListEvent.SELECT_SCREENSHOT,handleListItemSelect)
				//details_mc.addEventListener(ProjectEvent.REPORT_PROJECT,handleReportProject)
				//details_mc.addEventListener(Event.CLOSE,handleCloseDetailsPanel)
			}
			
			
			//////////////////////////////////////////////////
			//private functions
			
			private function launchProjectURL():void{
				var urlRequest:URLRequest = new URLRequest(project.url);
				navigateToURL(urlRequest, "_blank");
			}
			private function submitView():void {
				if (project.viewed == false) {
					project.viewed = true;
				}
			}
			private function submitVote():void {
				if (project.voted == false) {
					project.voted = true;
					var ev:ProjectEvent=new ProjectEvent(ProjectEvent.VOTE)
					ev.project=this.project
					this.dispatchEvent(ev)
				}
			}
			/*
			private function toggleDetailsPanel():void {
				switch (detailsPanelOpen) {
					case false :
						openDetailsPanel();
						break;
					case true :
						closeDetailsPanel();
						break;
				}
			}
			*/
			/*
			private function openDetailsPanel():void {
				detailsPanelOpen = true;
				this.panelContents.setChildIndex(this.details_mc,7)
				this.details_mc.openPanel()
				
				submitView();
			}
			private function closeDetailsPanel():void {
					if(detailsPanelOpen){
						details_mc.closePanel()
					}
			}
			
			private function handleCloseDetailsPanel(event:Event=null):void{
				setPanelToClosedState()
			}
			
			private function setPanelToClosedState():void{
				detailsPanelOpen=false
				this.panelContents.setChildIndex(this.details_mc,1);
			}
			*/
			//large image sizing----------------------------------------------------------------
			public function ensureLargeImageSize():void{
				if(this.largeImage_mc.maximized){
					maximizeLargeImage(false);
				}else{
					minimizeLargeImage(false);
				}
			}
			
			public function maximizeLargeImage(animate:Boolean=false):void{
				var widthto:Number=695;
				var heightto:Number=1000;
				
				if(!useimagescale){
					var p:Point=this.largeImage_mc.getLoadedImageSize();
					
					if(p!=null){
						if(p.x<widthto){
							widthto=p.x;
						}
						if(p.y<heightto){
							heightto=p.y;
						}	
					}
				}
				
				requestDepthToTop();
				this.panelContents.setChildIndex(this.largeImage_mc,5)
				this.largeImage_mc.maximized=true;
				sizeLargeImage(widthto,heightto,animate);
				//trace("PROJECTPANEL: maximizeLargeImage")
				//this.dispatchEvent(new ProjectPanelEvent(ProjectPanelEvent.REQUEST_LARGE_IMAGE_MAXIMIZE))
			}
			
			public function minimizeLargeImage(animate:Boolean=false):void{
				var widthto:Number=347;
			
				if(!useimagescale){
					var p:Point=this.largeImage_mc.getLoadedImageSize();
					
					if(p!=null){
						if(p.x<widthto){
							widthto=p.x;
						}
					}
				}
				
				var heightto:Number=219;
				this.largeImage_mc.maximized=false;
				sizeLargeImage(widthto,heightto,animate);
				//trace("PROJECTPANEL: minimizeLargeImage")
				//this.dispatchEvent(new ProjectPanelEvent(ProjectPanelEvent.REQUEST_LARGE_IMAGE_MINIMIZE))
			}
			
			private function sizeLargeImage(i_width:Number,i_height:Number,animate:Boolean=false):void{
				haltLargeImageResizeAnimation();
				if(animate){		
					__imageresizeup=new Resize();
					__imageresizeup.easingFunction=Exponential.easeInOut;
					__imageresizeup.target=this.largeImage_mc;
					__imageresizeup.widthTo=i_width;
					__imageresizeup.heightTo=i_height;
					__imageresizeup.duration=1000;
					__imageresizeup.play();
				}else{
					this.largeImage_mc.width=i_width;
					this.largeImage_mc.height=i_height;
				}
			}
			
			private function handleMaximizeRequest(event:Event=null):void{
				maximizeLargeImage(true);
			}
			
			private function handleMinimizeRequest(event:Event=null):void{
				minimizeLargeImage(true);
			}
			
			private function haltLargeImageResizeAnimation():void{
				if(__imageresizeup!=null){
					if(__imageresizeup.isPlaying){
						__imageresizeup.end();
					}
				}
			}
			
			private function handleListItemSelect(event:ScreenshotHorizontalListEvent):void{
				this.largeImage_mc.imageURL=event.url;
			}
			
			///////////////////////////////////////////////////////////////////
			
			public function requestDepthToTop():void{
				var event:ProjectPanelEvent=new ProjectPanelEvent(ProjectPanelEvent.REQUEST_DEPTH_TO_TOP);
				this.dispatchEvent(event);
			}
			
			
			//////////////////////////////////////////////////
			//handler functions
			
			/*
			private function detailsButtonClickHandler(mouseEvent:MouseEvent):void {
				toggleDetailsPanel();
			}
			*/
			private function viewButtonClickHandler(mouseEvent:MouseEvent):void {
				launchProjectURL();
			}
			/*
			private function iLikeButtonClickHandler(mouseEvent:MouseEvent):void {
				submitVote();
			}
			*/
			//report project--------------------------------------------------------------------
			private function handleReportProject(event:ProjectEvent):void{
				this.reportProjectPanel.project=event.project;
				this.reportProjectPanel.show()
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:Image id="projectPanelBackground" source="@Embed('/assets/images/frontend/projectpanel/projectPanelBackground.png')" />
	
	<mx:Canvas horizontalCenter="0" top="56" bottom="0" width="790" id="panelContents"
		horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:Label text="{project.name}" styleName="myriadBold" color="0x000000" left="52" 
			selectable="false" mouseEnabled="false"/>
		<mx:HBox right="46" top="5" horizontalGap="8">
			
		</mx:HBox>
		
		<mx:HBox right="43" top="30" width="318" verticalAlign="bottom" 
			backgroundAlpha="0" backgroundColor="0x990000">
			<mx:HBox width="50%" horizontalAlign="left" verticalAlign="bottom" 
				backgroundAlpha="0" backgroundColor="0x009900">
				<!--<details:DetailsNameLink id="clientInfo_mc" companyName="{project.clientName}" 
					companyEmail="{project.clientEmail}" companyUrl="{project.clientURL}" labelName="Client"/>-->
				<mx:Label id="dateAdded_txt" paddingLeft="-3" styleName="iconText" text="{project.getFormattedCreatedDate()}" selectable="false" mouseEnabled="false" />
				
				<mx:Canvas>
					<mx:Image source="@Embed('/assets/images/icons/viewsIcon.png')" y="2" toolTip="Number of views" />
					<mx:Label x="19" styleName="iconText" text="{project.views}" />
				</mx:Canvas>
				<!--<mx:Canvas>
					<mx:Image source="@Embed('/assets/images/icons/likeIcon.png')" toolTip="People that like it" />
					<mx:Label x="16" styleName="iconText" text="{project.rating}" />
				</mx:Canvas>-->
	
			</mx:HBox>
			
			<!--<mx:Button id="detailsButton" styleName="blackButton" minWidth="90" label="Details" 
				buttonMode="true" toolTip="Look at this project in more detail or leave a comment" 
				click="detailsButtonClickHandler(event)" />-->
			<mx:HBox width="50%" horizontalAlign="right" backgroundAlpha="0" backgroundColor="0x000099">
				<mx:Button id="viewButton" styleName="blackButton" label="Launch App" buttonMode="true" 
					toolTip="Visit and try this application" click="viewButtonClickHandler(event)" />
			</mx:HBox>
			<!--<mx:Button id="iLikeButton" styleName="blackButton" label="I Like It" 
				icon="@Embed('/assets/images/icons/likeIcon.png')" enabled="{!project.voted}" 
				buttonMode="{!project.voted}" toolTip="If you like this application, let us know"
				 click="iLikeButtonClickHandler(event)" />-->
		</mx:HBox>
		
		<mx:TextArea left="430" top="70" width="317" height="135" styleName="standardText" borderStyle="none" focusThickness="0" backgroundAlpha="0" color="0x333333" horizontalScrollPolicy="off" verticalScrollPolicy="auto" wordWrap="true" selectable="true" editable="false" htmlText="{project.description}" />
		
		<projectPanel:ProjectPanelScreenshotSlider id="slider_mc" x="418" y="204" images="{project.images}"/>
		<!--<projectPanel:ProjectPanelDetails id="details_mc" detailsData="{project}" user="{user}"/>-->
		<projectPanel:ProjectPanelLargeImage id="largeImage_mc" imageURL="{project.displayImage}" x="55" y="30" 
			width="337" height="219" useimagescale="{useimagescale}"/>
		
		<mx:Image id="tabOver_mc" source="@Embed('/assets/images/frontend/projectpanel/details/detailsPanel_tab_over.png')" x="177" y="271" alpha="0" />
	</mx:Canvas>
	<panels:ReportProjectPanel id="reportProjectPanel" user="{user}" visible="false" alpha="0" flexShowcaseServiceConfig="{flexShowcaseServiceConfig}" />
	
</mx:Canvas>