projectinfotab.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:flexextras="com.adobe.flex.extras.controls.*"
	
	top="10"
	bottom="0"
	height="400"
	width="760"
	
	label="Application Info"
	horizontalScrollPolicy="off"
	creationComplete="creationCompleteHandler(event);">
	
	
	<mx:Script>
		<![CDATA[
		
		
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.TextRestrictions;
			import com.flexShowcase.data.Project;
			import com.flexShowcase.events.AccountEvent;
			
			import mx.events.ValidationResultEvent;
			import mx.validators.Validator;
			
			//////////////////////////////////////////////////
			//getter/setter variables
			
			private var _project:Project;
			
			//////////////////////////////////////////////////
			//private variables
			
			private var focussedFormControl:DisplayObject;
			[Bindable] private var urlRegularExpression:String;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var projectFormIsValid:Boolean;
			
			//////////////////////////////////////////////////
			//getter/setter functions
			
			[Bindable]
			public function get project():Project {
				return _project;
			}
			public function set project(value:Project):void {
				_project = value;
				
				projectHandler();
			}
			
			private function projectHandler():void {
				if (project != null) {
					validateProjectForm();
				} 
			}
			
			/////////////////////////////////////////////////////////////////////////////////////////
			//initialization
			private function creationCompleteHandler(event:Event):void {
				projectFormIsValid = false;
				urlRegularExpression = 'http://|https://';	
			}
			
			//general-------------------------------------------------------------------------------
			
			public function reset():void {
				projectName.text = "";
				projectURL.text = "";
				description.text = "";
				clientName.text = "";
				clientEmail.text = "";
				clientURL.text = "";
				developerName.text = "";
				developerEmail.text = "";
				developerURL.text = "";
				projectName.errorString = "";
				projectURL.errorString = "";
				description.errorString = "";
				clientName.errorString = "";
				clientEmail.errorString = "";
				clientURL.errorString = "";
				developerName.errorString = "";
				developerEmail.errorString = "";
				developerURL.errorString = "";
				
				focusManager.setFocus(projectName);
				
				projectFormIsValid = false;
			}
			
			//project info---------------------------------------------------------------------
			public function get getProjectValid():Boolean {
				return false;
			}
			
			public function getProjectData():Project {
				var project:Project = new Project();
				project.name = projectName.text;
				project.url	 = projectURL.text;
				project.description = description.text;
				project.clientName = clientName.text;
				project.clientURL = clientURL.text;
				project.clientEmail = clientEmail.text;
				project.developerName = developerName.text;
				project.developerURL = developerURL.text;
				project.developerEmail = developerEmail.text;
				
				return project;
			}
			
			
			private function changeHandler(event:Event):void {
				focussedFormControl = event.target as DisplayObject;
				validateProjectForm();
				
				var changeEvent:AccountEvent = new AccountEvent(AccountEvent.CHANGED);
				changeEvent.valid = projectFormIsValid;
				dispatchEvent(changeEvent);
			}
			
			//validation-------------------------------------------------------------------------------
			public function validateProjectForm():void {
				projectFormIsValid = true;
				
				validateProject(projectNameValidator);
				validateProject(projectURLValidator);
				validateProject(descriptionValidator);
				validateProject(clientNameValidator);
				validateProject(clientEmailValidator);
				validateProject(clientURLValidator);
				validateProject(developerEmailValidator);
				validateProject(developerURLValidator);
			}
			
			private function validateProject(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);
				
				if (validator.required == true) {
					projectFormIsValid = projectFormIsValid && currentControlIsValid;
				} else {
					if (validatorSource is TextInput) {
						var textInput:TextInput = validatorSource as TextInput;
						if (textInput.text.length > 0) {
							projectFormIsValid = projectFormIsValid && currentControlIsValid;
						}
					} else {
						projectFormIsValid = projectFormIsValid && currentControlIsValid;
					}
				}
				return currentControlIsValid;
			}
			
			//focus handlers----------------------------------------------------------------------
			private function projectURLFocusInHandler(event:Event):void {
				projectURL.setSelection(projectURL.text.length, projectURL.text.length);
			}
			
			private function clientURLFocusInHandler(event:Event):void {
				clientURL.setSelection(projectURL.text.length, clientURL.text.length);
			}
			
			private function developerURLFocusInHandler(event:Event):void {
				developerURL.setSelection(projectURL.text.length, developerURL.text.length);
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:StringValidator id="projectNameValidator" source="{projectName}" property="text" minLength="2" />
	<mx:RegExpValidator id="projectURLValidator" source="{projectURL}" property="text" expression="{urlRegularExpression}" noMatchError="Please enter a valid URL" />
	<mx:StringValidator id="descriptionValidator" source="{description}" property="text" minLength="2" />
	<mx:StringValidator id="clientNameValidator" source="{clientName}" property="text" minLength="2" />
	<mx:EmailValidator id="clientEmailValidator" source="{clientEmail}" property="text" required="false" />
	<mx:RegExpValidator id="clientURLValidator" source="{clientURL}" property="text" expression="{urlRegularExpression}" noMatchError="Please enter a valid URL" required="false" />
	<mx:EmailValidator id="developerEmailValidator" source="{developerEmail}" property="text" required="false" />
	<mx:RegExpValidator id="developerURLValidator" source="{developerURL}" property="text" expression="{urlRegularExpression}" noMatchError="Please enter a valid URL" required="false" />
	
	<mx:Canvas width="1" height="100%" backgroundColor="0xbbbbbb"/>
	<mx:Canvas width="1" height="100%" right="0" backgroundColor="0xbbbbbb"/>
	
	<mx:HBox left="10" right="20" top="15" horizontalGap="20">
		<mx:VBox width="100%">
			
			<mx:HBox width="100%">
				<mx:HBox width="58" horizontalAlign="right">
					<mx:Label text="Name" styleName="flexLightLabel"/>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:TextInput id="projectName" styleName="flexLightTextBox" 
						maxChars="{TextRestrictions.SMALL}" width="100%" text="{project.name}" 
						change="changeHandler(event);"/>
					<mx:Image source="@Embed('/assets/images/form_requiredStar.png')"/>
				</mx:HBox>
			</mx:HBox>
			
			<mx:HBox width="100%">
				<mx:HBox width="58" horizontalAlign="right">
					<mx:Label text="URL" styleName="flexLightLabel"/>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:TextInput id="projectURL" focusIn="projectURLFocusInHandler(event)" 
						styleName="flexLightTextBox" maxChars="{TextRestrictions.SMALL}" width="100%" 
						text="{project.url}" change="changeHandler(event);"/>
					<mx:Image source="@Embed('/assets/images/form_requiredStar.png')"/>
				</mx:HBox>
			</mx:HBox>
			<mx:HBox width="100%">
				<mx:HBox width="58" horizontalAlign="right">
					<mx:Label text="Description" styleName="flexLightLabel"/>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:TextArea id="description" styleName="flexLightTextBox" 
						maxChars="{TextRestrictions.LARGE}" width="100%" height="107" text="{project.description}" 
						change="changeHandler(event);" />
					<mx:Image source="@Embed('/assets/images/form_requiredStar.png')"/>
				</mx:HBox>
			</mx:HBox>
			<mx:HBox width="100%">
				<mx:HBox width="58" horizontalAlign="right">
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:Text text="512 character limit" styleName="flexLightLabel" />
				</mx:HBox>
			</mx:HBox>
		</mx:VBox>
		<mx:VBox width="100%">
			<mx:HBox width="100%">
				<mx:HBox width="75" horizontalAlign="right">
					<mx:Label text="Company Name" styleName="flexLightLabel"/>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:TextInput id="clientName" styleName="flexLightTextBox" 
						maxChars="{TextRestrictions.SMALL}" width="240" text="{project.clientName}" 
						change="changeHandler(event);"/>
						<mx:Image source="@Embed('/assets/images/form_requiredStar.png')"/>
				</mx:HBox>
			</mx:HBox>
			<mx:HBox width="100%">
				<mx:HBox width="75" horizontalAlign="right">
					<mx:Label text="Company Email" styleName="flexLightLabel"/>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:TextInput id="clientEmail" styleName="flexLightTextBox" 
						maxChars="{TextRestrictions.SMALL}" width="240" text="{project.clientEmail}" 
						change="changeHandler(event);"/>
					<mx:Image source="@Embed('/assets/images/form_requiredStar.png')" alpha="0"/>
				</mx:HBox>
			</mx:HBox>
			<mx:HBox width="100%">
				<mx:HBox width="75" horizontalAlign="right">
					<mx:Label text="Company URL" styleName="flexLightLabel"/>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:TextInput id="clientURL" focusIn="clientURLFocusInHandler(event)" 
						styleName="flexLightTextBox" maxChars="{TextRestrictions.SMALL}" width="240" 
						text="{project.clientURL}" change="changeHandler(event);"/>
					<mx:Image source="@Embed('/assets/images/form_requiredStar.png')" alpha="0"/>
				</mx:HBox>
			</mx:HBox>
			<mx:VBox width="100%">
				<mx:HBox width="100%">
					<mx:Label text="Developer Name:" styleName="flexLightLabel"/>
					<mx:Label text="{project.developerName}" styleName="flexLightLabel"/>
				</mx:HBox>
				<mx:HBox width="100%" horizontalAlign="right">
					<mx:Label text="(type to edit)" styleName="flexLightLabel"/>
					<flexextras:AutoComplete id="developerName" lookAhead="true" labelField="name" styleName="flexLightTextBox" 
						width="240" change="changeHandler(event);"/>
					<mx:Image alpha="0" source="@Embed('/assets/images/form_requiredStar.png')"/>
				</mx:HBox>
			</mx:VBox>
			<mx:HBox width="100%">
				<mx:HBox width="75" horizontalAlign="right">
					<mx:Label text="Developer Email" styleName="flexLightLabel"/>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:TextInput id="developerEmail" styleName="flexLightTextBox" 
						maxChars="{TextRestrictions.SMALL}" width="240" text="{project.developerEmail}" 
						change="changeHandler(event);" />
					<mx:Image source="@Embed('/assets/images/form_requiredStar.png')" alpha="0"/>
				</mx:HBox>
			</mx:HBox>
			<mx:HBox width="100%">
				<mx:HBox width="75" horizontalAlign="right">
					<mx:Label text="Developer URL" styleName="flexLightLabel"/>
				</mx:HBox>
					<mx:HBox width="100%">
						<mx:VBox width="100%">
							<mx:TextInput id="developerURL" focusIn="developerURLFocusInHandler(event)" 
								styleName="flexLightTextBox" maxChars="{TextRestrictions.SMALL}" width="240" 
								text="{project.developerURL}" change="changeHandler(event);"/>
							<mx:HBox width="100%" horizontalAlign="right">
								<mx:Image source="@Embed('/assets/images/form_requiredText.png')"/>
							</mx:HBox>
						</mx:VBox>
						<mx:Image source="@Embed('/assets/images/form_requiredStar.png')" alpha="0"/>
					</mx:HBox>
			</mx:HBox>
		</mx:VBox>
	</mx:HBox>
		
</mx:Canvas>