myprofilepanel.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.*"
	xmlns:remote="com.flexShowcase.net.remote.*"
	
	width="410"
	height="270"
	
	label="My Profile"
	creationComplete="creationCompleteHandler(event)">
	
	
	<mx:Script>
		<![CDATA[
		
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.TextRestrictions;
			import com.flexShowcase.data.User;
			import com.flexShowcase.net.remote.FlexShowcaseServiceConfig;
			
			import mx.controls.Alert;
			import mx.effects.Fade;
			import mx.events.*;
			import mx.rpc.events.*;
			import mx.validators.Validator;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var flexShowcaseServiceConfig:FlexShowcaseServiceConfig;
			[Bindable] public var user:User;
			
			//////////////////////////////////////////////////
			//private variables
			
			[Bindable] private var profileFormIsEmpty:Boolean;
			[Bindable] private var profileFormIsValid:Boolean;
			[Bindable] private var passwordFormIsEmpty:Boolean;
			[Bindable] private var passwordFormIsValid:Boolean;
			
			private var focussedFormControl:DisplayObject;
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				profileFormIsEmpty = true;
				passwordFormIsEmpty = true;
				profileFormIsValid = false;
				passwordFormIsValid = false;
			}
			
			
			//////////////////////////////////////////////////
			//overridden public functions
			
			override public function show():void {
				super.show()
				
				profileTabBar.selectedIndex = 0;
				
				firstName.text = user.firstName;
				lastName.text = user.lastName;
				firstName.errorString = "";
				lastName.errorString = "";
				
				changePasswordOldPassword.text = "";
				changePasswordNewPassword.text = "";
				changePasswordRetypePassword.text = "";
				changePasswordOldPassword.errorString = "";
				changePasswordNewPassword.errorString = "";
				changePasswordRetypePassword.errorString = "";
				
				profileFormIsEmpty = true;
				passwordFormIsEmpty = true;
				profileFormIsValid = false;
				passwordFormIsValid = false;
				
				focusManager.setFocus(firstName);
			}
			
			
			//////////////////////////////////////////////////
			//private functions
			
			private function validateProfileForm(event:Event):void {
				focussedFormControl = event.target as DisplayObject;
				profileFormIsEmpty = (firstName.text == "" && lastName.text == "");
				profileFormIsValid = true;
				
				validateProfile(firstNameValidator);
				validateProfile(lastNameValidator);
			}
			private function validateProfile(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);
				
				profileFormIsValid = profileFormIsValid && currentControlIsValid;
				
				return currentControlIsValid;
			}
			private function validatePasswordForm(event:Event):void {
				focussedFormControl = event.target as DisplayObject;
				
				passwordFormIsEmpty = (changePasswordOldPassword.text == "" && changePasswordNewPassword.text == "" && changePasswordRetypePassword.text == "");
				
				passwordFormIsValid = true;
				
				validatePassword(changePasswordOldPasswordValidator);
				validatePassword(changePasswordNewPasswordValidator);
				validatePassword(changePasswordRetypePasswordValidator);
				
				if (changePasswordNewPassword.text != changePasswordRetypePassword.text) {
					passwordFormIsValid = false;
				}
			}
			private function validatePassword(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);
				
				passwordFormIsValid = passwordFormIsValid && currentControlIsValid;
				
				return currentControlIsValid;
			}
			
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function cancelClickHandler(mouseEvent:MouseEvent):void {
				hide();
			}
			private function hideCompleteHandler(tweenEvent:TweenEvent):void {
				visible = false;
			}
			private function profileSaveButtonHandler(mouseEvent:MouseEvent):void {
				var userDetails:Array = new Array;
				userDetails['profile_first_name'] = firstName.text;
				userDetails['profile_last_name'] = lastName.text;
		    
				generalOperationsService.flexdotorg.editUserDetails.addEventListener(ResultEvent.RESULT, userRegisterResultHandler);
				generalOperationsService.flexdotorg.editUserDetails.addEventListener(FaultEvent.FAULT, userRegisterSaveFaultHandler);
				generalOperationsService.flexdotorg.editUserDetails(userDetails);
			}
			
			
			//userRegister------------------------------------
			
			private function userRegisterResultHandler(resultEvent:ResultEvent):void {
				generalOperationsService.flexdotorg.editUserDetails.removeEventListener(ResultEvent.RESULT, userRegisterResultHandler);
				generalOperationsService.flexdotorg.editUserDetails.removeEventListener(FaultEvent.FAULT, userRegisterSaveFaultHandler);
				
				user.firstName = firstName.text;
				user.lastName = lastName.text;
				
				Alert.show("Your profile has been saved.", "Save");
			}
			private function userRegisterSaveFaultHandler(faultEvent:FaultEvent):void {
				generalOperationsService.flexdotorg.editUserDetails.removeEventListener(ResultEvent.RESULT, userRegisterResultHandler);
				generalOperationsService.flexdotorg.editUserDetails.removeEventListener(FaultEvent.FAULT, userRegisterSaveFaultHandler);
			}
			
			
			//passwordSave------------------------------------
			
			private function passwordSaveButtonHandler(mouseEvent:MouseEvent):void {
				userService.user.changePassword.addEventListener(ResultEvent.RESULT, userPasswordSaveResultHandler);
				userService.user.changePassword.addEventListener(FaultEvent.FAULT, userPasswordSaveFaultHandler);
				userService.user.changePassword(user.email, changePasswordOldPassword.text, changePasswordNewPassword.text);
			}
			private function userPasswordSaveResultHandler(resultEvent:ResultEvent):void {
				userService.user.changePassword.removeEventListener(ResultEvent.RESULT, userPasswordSaveResultHandler);
				userService.user.changePassword.removeEventListener(FaultEvent.FAULT, userPasswordSaveFaultHandler);
				Alert.buttonHeight=31;
				Alert.show("Your password has been changed.");
			}
			private function userPasswordSaveFaultHandler(faultEvent:FaultEvent):void {
				userService.user.changePassword.removeEventListener(ResultEvent.RESULT, userPasswordSaveResultHandler);
				userService.user.changePassword.removeEventListener(FaultEvent.FAULT, userPasswordSaveFaultHandler);
				Alert.buttonHeight=31;
				Alert.show("Your Old Password did not match. Please try again.");
			}
			
			
		]]>
	</mx:Script>
	
	
	<remote:GeneralOperationsService
		id="generalOperationsService"
		flexShowcaseServiceConfig="{flexShowcaseServiceConfig}"/>
		
	<remote:UserService
		id="userService"
		flexShowcaseServiceConfig="{flexShowcaseServiceConfig}"/>
		
	<mx:StringValidator id="firstNameValidator" source="{firstName}" property="text" minLength="1" />
	<mx:StringValidator id="lastNameValidator" source="{lastName}" property="text" minLength="1" />
	<mx:StringValidator id="changePasswordOldPasswordValidator" source="{changePasswordOldPassword}" property="text" minLength="5" />
	<mx:StringValidator id="changePasswordNewPasswordValidator" source="{changePasswordNewPassword}" property="text" minLength="5" />
	<mx:StringValidator id="changePasswordRetypePasswordValidator" source="{changePasswordRetypePassword}" property="text" minLength="5" />
	
	<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%"
		verticalGap="5">
		<mx:TabBar id="profileTabBar" dataProvider="viewStack" tabStyleName="profileTabBarLabel" 
			selectedTabTextStyleName="profileTabBarSelectedText" width="100%"/>
		<mx:ViewStack id="viewStack" creationPolicy="all" width="100%" height="100%" paddingTop="0">
			<mx:VBox label="Update Your Profile" horizontalScrollPolicy="off" verticalScrollPolicy="off"
				 width="100%">
				<mx:HBox width="100%">
					<mx:HBox width="58" horizontalAlign="right">
						<mx:Label text="First Name" styleName="flexDarkLabel"/>
					</mx:HBox>
					<mx:HBox width="100%">
						<mx:TextInput id="firstName" styleName="flexDarkTextBox" width="100%"
							maxChars="{TextRestrictions.SMALL}" change="validateProfileForm(event)"/>
					</mx:HBox>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:HBox width="58" horizontalAlign="right">
						<mx:Label text="Last Name" styleName="flexDarkLabel"/>
					</mx:HBox>
					<mx:HBox width="100%">
						<mx:TextInput id="lastName" styleName="flexDarkTextBox" width="100%"
							maxChars="{TextRestrictions.SMALL}" change="validateProfileForm(event)"/>
					</mx:HBox>
				</mx:HBox>
				<mx:HBox horizontalAlign="center" width="100%" paddingTop="34">
					<mx:Button styleName="blackButton" width="90" label="Save" enabled="{profileFormIsValid}" 
						buttonMode="{profileFormIsValid}" click="profileSaveButtonHandler(event);" />
					<mx:Button styleName="blackButton" width="90" label="Cancel" click="cancelClickHandler(event);" 
						buttonMode="true" />
				</mx:HBox>
				
			</mx:VBox>
			<mx:VBox label="Change Your Password" horizontalScrollPolicy="off" verticalScrollPolicy="off"
				 width="100%">
				<mx:HBox width="100%">
					<mx:HBox width="85" horizontalAlign="right">
						<mx:Label text="Old Password" styleName="flexDarkLabel"/>
					</mx:HBox>
					<mx:HBox width="100%">
						<mx:TextInput id="changePasswordOldPassword" styleName="flexDarkTextBox" 
							maxChars="{TextRestrictions.SMALL}" displayAsPassword="true" width="100%"
							change="validatePasswordForm(event)"/>
					</mx:HBox>
					
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:HBox width="85" horizontalAlign="right">
						<mx:Label text="New Password" styleName="flexDarkLabel"/>
					</mx:HBox>
					<mx:HBox width="100%">
						<mx:TextInput id="changePasswordNewPassword" styleName="flexDarkTextBox" 
							maxChars="{TextRestrictions.SMALL}" displayAsPassword="true" width="100%"
							change="validatePasswordForm(event)"/>
					</mx:HBox>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:HBox width="85" horizontalAlign="right">
						<mx:Label text="Retype Password" styleName="flexDarkLabel"/>
					</mx:HBox>
					<mx:HBox width="100%">
						<mx:TextInput id="changePasswordRetypePassword" styleName="flexDarkTextBox" 
							maxChars="{TextRestrictions.SMALL}" displayAsPassword="true" width="100%"
							change="validatePasswordForm(event)"/>
					</mx:HBox>
				</mx:HBox>
				<mx:HBox horizontalAlign="center" width="100%" paddingTop="0">
					<mx:Button styleName="blackButton" label="Save" width="90" enabled="{passwordFormIsValid}" 
						buttonMode="{passwordFormIsValid}" click="passwordSaveButtonHandler(event);" />
					<mx:Button styleName="blackButton" label="Cancel" width="90" click="cancelClickHandler(event);" 
						buttonMode="true" />
				</mx:HBox>
			</mx:VBox>
		</mx:ViewStack>
	</mx:VBox>
	
</components:FlexDotOrgWindow>