addscreenshotpanel.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<components:FlexDotOrgWindow
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:components="com.flexShowcase.components.*"
	
	width="420"
	height="260"
	
	label="Add A Screenshot"
	creationComplete="creationCompleteHandler(event)">
	
	<mx:Script>
		<![CDATA[
			
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.TextRestrictions;
			import com.flexShowcase.data.*;
			import com.flexShowcase.net.remote.FlexShowcaseServiceConfig;
			import com.flexShowcase.events.ProjectEvent;
			
			import mx.controls.Alert;
			import mx.events.TweenEvent;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var flexShowcaseServiceConfig:FlexShowcaseServiceConfig;
			[Bindable] public var project:Project;
			[Bindable] public var user:User;
			
			//////////////////////////////////////////////////
			//private variables
			
			[Bindable] private var screenshotLoaded:Boolean;
			[Bindable] private var selectedFile:FileReference;
			
			private var urlRequest:URLRequest;
			private var fileFilter:FileFilter;
			private var fileReferenceList:FileReferenceList;
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				fileFilter = new FileFilter("Image Files (*.jpeg, *.jpg)", "jpeg; *.jpg");
				
				fileReferenceList = new FileReferenceList();
				fileReferenceList.addEventListener(Event.SELECT, selectHandler);
				
				screenshotLoaded = false;
			}
			
			
			//////////////////////////////////////////////////
			//override functions
			
			override public function show():void {
				super.show()
				
				urlRequest = new URLRequest(flexShowcaseServiceConfig.screenshotService);
				urlRequest.method = URLRequestMethod.POST;
				
				screenshotLoaded = false;
				fileName.text = "";
				fileName.errorString = "";
				status.text = "Status: Idle";
			}
			
			
			//////////////////////////////////////////////////
			//private functions
			
			private function addFile(event:Event):void {
				fileReferenceList.browse(new Array(fileFilter));
			}
			private function uploadFile(event:Event):void {
				urlRequest.url = flexShowcaseServiceConfig.screenshotService;

				var fileReference:FileReference;
				fileReference = FileReference(selectedFile);
				fileReference.addEventListener(Event.COMPLETE, uploadCompleteHandler);
				fileReference.addEventListener("uploadCompleteData", uploadDataCompleteHandler);
				fileReference.upload(urlRequest);
				
				status.text = "Status: Uploading...";
			}
			
			//////////////////////////////////////////////////
			//dispatch functions
			
			private function dispatchProjectReloadEvent():void {
				var projectEvent:ProjectEvent = new ProjectEvent(ProjectEvent.RELOAD, true);
				dispatchEvent(projectEvent);
			}
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function cancelClickHandler(mouseEvent:MouseEvent):void {
				hide();
			}
			private function hideCompleteHandler(tweenEvent:TweenEvent):void {
				visible = false;
			}
			private function closeButtonClickHandler(mouseEvent:MouseEvent):void {
				hide();
			}
			private function selectHandler(event:Event):void {
				selectedFile = fileReferenceList.fileList[0];
				
				var variables:URLVariables 	= new URLVariables();
				variables.nid = project.id;
				variables.uid = user.id;
				
				urlRequest.data = variables;
				
				fileName.text = selectedFile.name;
				
				screenshotLoaded = true;
			}
			private function uploadCompleteHandler(event:Event):void {
				Alert.buttonHeight=31;
				Alert.show("Screenshot successfully uploaded", "Add a Screenshot");
			}
			private function uploadDataCompleteHandler(event:Event):void {
				status.text = "Status: Upload Complete!";
				hide();
				dispatchProjectReloadEvent();
			}
			
			
		]]>
	</mx:Script>
	
	<mx:StringValidator id="fileNameValidator" source="{fileName}" property="text" minLength="2" />
	
	<mx:VBox top="70" width="100%" height="100%">
		<mx:HBox width="100%">
			<mx:Text text="To ensure your screenshots look their best, make sure their width/height ratio is 4:3. Maximum dimensions are 1280x1280 and maximum file size is 3MB." 
				styleName="flexDarkLabel" width="100%"/>
		</mx:HBox>
		
		<mx:HBox width="100%">
			<mx:Label text="File Name" styleName="flexDarkLabel"/>
			<mx:VBox width="100%">
				<mx:TextInput id="fileName" styleName="flexDarkTextBox" 
					maxChars="{TextRestrictions.SMALL}" width="100%"/>
				<mx:HBox width="100%">
					<mx:HBox horizontalAlign="left" width="100%">
						<mx:Button styleName="blackButton" label="Browse" buttonMode="true" 
						click="addFile(event);" width="90"/>
					</mx:HBox>
					<mx:HBox horizontalAlign="right" width="100%">
						<mx:Text id="status" text="Status: Idle" styleName="flexDarkLabel"/>
					</mx:HBox>
				</mx:HBox>
			</mx:VBox>
		</mx:HBox>
		
		<mx:HBox bottom="40" horizontalAlign="center" width="100%" paddingTop="17">
			<mx:Button styleName="blackButton" label="Save" width="90"
				enabled="{screenshotLoaded}" buttonMode="{screenshotLoaded}" click="uploadFile(event);" />
			<mx:Button styleName="blackButton" label="Cancel" width="90"
				click="cancelClickHandler(event);" buttonMode="true" />
		</mx:HBox>
	</mx:VBox>
	
</components:FlexDotOrgWindow>