sendcardform.mxml

flex书效果代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:degrafa="http://www.degrafa.com/2007"
	xmlns:components="com.san.components.*" 
	width="365" height="495" 
	>
	
	
	
	<mx:Script>
		<![CDATA[
			import mx.core.Application;
			import mx.graphics.codec.JPEGEncoder;
			import com.san.webservice.WebserviceProxy;
			import com.san.utils.Base64;
			import mx.events.ValidationResultEvent;
			import mx.validators.Validator;
			import mx.graphics.ImageSnapshot;
			import mx.managers.PopUpManager;
			import mx.core.UIComponent;
			
			
			/**
			 * The control to take a snapshot of
			 */
			public var target:UIComponent;
			
			
			[Bindable]
            public var formIsValid:Boolean = false;

            private var focussedFormControl:DisplayObject;
            
            
			
			[Bindable]
			public var status:String = "";
			
			[Bindable]
			public var message:String = "";
			
			
			
			/**
			 * 
			 */
			private function send():void
			{
				vs_content.selectedIndex = 1;
				
				var imageSnapshot:ImageSnapshot;
				try
				{
					imageSnapshot = ImageSnapshot.captureImage( target, 0, new JPEGEncoder() );
				}
				catch( e:Error )
				{
					status = "Error Saving Postcard";
					message = "Sorry! We were unable to save your postcard image due to a security violation.  Please contact your service provider for more information.";
					
					vs_content.selectedIndex = 2;
					return;
				}
				

				var imageData:String = Base64.Encode( imageSnapshot.data );
				
				var wsp:WebserviceProxy = new WebserviceProxy();
				wsp.sendPostCard( t_name.text, t_email.text, t_message.htmlText, imageData, sendCallback );
			}
			
			
			
			private function sendCallback( success:Boolean, message:String, data:Object = null ):void
			{
				if( success )
				{
					status = "Postcard Sent!";
					this.message = "Your postcard is now flying accross the internet to get to your friend.\n\nWhy don't you make another for someone else while you're here?";
				}	
				else
				{
					status = "Error Sending Postcard";
					this.message = "Sorry! The server returned an error while transmitting your postcard.  The error message was:\n\n"+message+"\n\nPlease contact your service provider for more information.";
				}				
				vs_content.selectedIndex = 2;
			}
			
			
			
			
			private function validateForm(event:Event):void 
            {                    
                focussedFormControl = event.target as DisplayObject;                    
                formIsValid = true;        
				
				validate( nameValidator );
				validate( emailValidator );
				validate( messageValidator );
            }
     

			private function validate(validator:Validator):Boolean
			{                
			     var validatorSource:DisplayObject = validator.source as DisplayObject;                
			     var suppressEvents:Boolean = (validatorSource != focussedFormControl);
			    
			     var event:ValidationResultEvent = validator.validate(null, suppressEvents);                                 
			     var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);
			     
			     formIsValid = formIsValid && currentControlIsValid;
			     
			     return currentControlIsValid;
			 }
			
			
			
			
			public static function show( target:UIComponent, parent:DisplayObject = null ):SendCardForm
			{
				if( !parent )
					parent = Application.application as DisplayObject;
					
				var form:SendCardForm = PopUpManager.createPopUp( parent, SendCardForm, true ) as SendCardForm;
					form.target = target;
				
				PopUpManager.centerPopUp( form );
				return form;
			}
			
			public function close():void
			{
				PopUpManager.removePopUp( this );
			}
			
		]]>
	</mx:Script>
	
	
	
	
	<mx:StringValidator id="nameValidator" required="true" source="{t_name}" property="text" />
	<mx:EmailValidator id="emailValidator" required="true" source="{t_email}" property="text" />
	<mx:StringValidator id="messageValidator" required="true" maxLength="400" source="{t_message}" property="text" />
	
	
	
	<!--
	 * Background
	 -->
	<degrafa:Surface>
		<degrafa:GeometryGroup>
			<degrafa:fills>
				<degrafa:LinearGradientFill id="bgFill" angle="90" >
					<degrafa:GradientStop color="#E5E5E5" ratio="0" />
					<degrafa:GradientStop color="#D0D0D0" ratio="0.3" />
					<degrafa:GradientStop color="#D0D0D0" ratio="1" />
				</degrafa:LinearGradientFill>
			</degrafa:fills>
			
			<degrafa:RoundedRectangle width="{width}" height="{height}" cornerRadius="20" fill="{bgFill}" />
			
			<degrafa:filters>
				<mx:BevelFilter distance="2" />
			</degrafa:filters>
		</degrafa:GeometryGroup>
	</degrafa:Surface>
	
	
	<!--
	 * Title
	 -->
	<mx:Label x="10" y="10" text="Send Poscard" fontWeight="bold" fontSize="12"/>
	
	
	<mx:ViewStack id="vs_content" left="10" top="38" width="345" bottom="38" >
		
		<mx:Canvas id="inputForm" width="100%" height="100%" styleName="formContent" >
			<mx:Label x="10" y="10" text="Friend's Name"/>
			<mx:TextInput id="t_name" width="229"  x="102" y="8" change="{validateForm(event)}" />

			<mx:Label x="10" y="40" text="Friend's Email"/>
			<mx:TextInput id="t_email" width="229"  x="102" y="38" change="{validateForm(event)}" />
					
			<mx:Label x="10" y="70" text="Message"/>
			<components:RTE id="t_message" x="10" y="90" width="323" height="325" alpha="1.0" change="{validateForm(event)}"  />
		</mx:Canvas>
	
		
		<mx:Canvas id="waiting" width="100%" height="100%" styleName="formContent" >
			<mx:SWFLoader source="@Embed('assets/clock.swf')" width="100" height="100" horizontalCenter="0" verticalCenter="-20" trustContent="true"/>
			<mx:Label y="60" text="That's a great looking postcard!" fontWeight="bold" horizontalCenter="0" textAlign="center" fontSize="12"/>
			<mx:Text y="310" text="Please wait while we deliver it to your friend" horizontalCenter="0" textAlign="center" fontWeight="bold"/>
		</mx:Canvas>
		
		
		<mx:Canvas id="result" width="100%" height="100%" styleName="formContent" >
			<mx:Label y="60" text="{status}" fontWeight="bold" horizontalCenter="0" textAlign="center" fontSize="12"/>
			<mx:Text y="120" text="{message}" horizontalCenter="0" width="200" textAlign="center" fontWeight="bold"/>			
		</mx:Canvas>
	
	</mx:ViewStack>
	
	
	<mx:HBox id="buttons" width="100%" bottom="10" horizontalAlign="center" >
		<mx:Button x="118" y="484" label="Send" width="100" click="send()" visible="{vs_content.selectedIndex==0}" includeInLayout="{vs_content.selectedIndex==0}" enabled="{formIsValid}" icon="@Embed(source='../../../icons/tick.png')"/>
		<mx:Button label="Close" width="100" click="close()" enabled="{vs_content.selectedIndex!=1}" icon="@Embed(source='../../../icons/cancel.png')"/>
	</mx:HBox>
	
	
</mx:Canvas>