tagstab.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	
	width="100%"
	height="100%"
	
	label="Tags"
	
	creationComplete="creationCompleteHandler(event)">
	
	
	<mx:Script>
		<![CDATA[
			
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.TextRestrictions;
			import com.flexShowcase.events.AccountEvent;
			import com.flexShowcase.utils.TagUtils;
			import com.flexShowcase.data.Project;
			
			import mx.collections.ArrayCollection;
			
			//////////////////////////////////////////////////
			//getter/setter variables
			
			private var _tags:ArrayCollection;
			private var _project:Project;
			
			//////////////////////////////////////////////////
			//private variables
			
			[Bindable] private var tagsHTMLCloud:String;
			[Bindable] private var projectTagsHTMLCloud:String;
			
			//////////////////////////////////////////////////
			//getter/setter functions
			
			public function set tags(value:ArrayCollection):void {
				_tags = value;
				
				tagsHandler();
			}
			public function get tags():ArrayCollection {
				return _tags;
			}
			
			private function tagsHandler():void {
				tagsHTMLCloud = TagUtils.getTagCloud(tags, false);
			}
			//----------------------------------------------------------
			
			public function set project(value:Project):void {
				_project = value;
				
				projectHandler();
			}
			public function get project():Project {
				return _project;
			}
			
			private function projectHandler():void {
				var tags:ArrayCollection = project.tags;
				
				projectTagsHTMLCloud = TagUtils.getTagCloud(tags, false);
			}
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				var aHover:Object = new Object();
				aHover.color = "#00CCFF";
				
				var textAlign:Object = new Object();
				textAlign.textAlign = "justify";
				
				var ss:StyleSheet = new StyleSheet();
				ss.setStyle("a:hover", aHover);
				ss.setStyle("a", textAlign);
				
				tagCloud.styleSheet = ss;
				
				tagInput.text = "";
				
				addEventListener(TextEvent.LINK, tagCloudClickHandler);
			}
			
			//////////////////////////////////////////////////
			//public functions
			
			public function show():void {
				tagInput.text = "";
			}
			public function getTags():String {
				return tagInput.text;
			}
			
			//////////////////////////////////////////////////
			//dispatch functions
			
			private function dispatchChanged():void {
				var accountEvent:AccountEvent = new AccountEvent(AccountEvent.CHANGED);
				accountEvent.valid = true;
				
				dispatchEvent(accountEvent);
			}
			
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function tagCloudClickHandler(textEvent:TextEvent):void {
				var variables:Object = TagUtils.getVariablesFromHTMLTag(textEvent.text);
				
				var tagID:String = variables.id;
				var tagName:String = variables.name;
				
				if (tagInput.text == "") {
					tagInput.text = tagName;
					
					dispatchChanged();
				} else {
					//strip whitespace
					var regExp:RegExp = new RegExp(" ", "g");
					var currentTagsString:String = tagInput.text.replace(regExp, "");
					var currentTags:Array = currentTagsString.split(",");
					
					//search all tags for a match to avoid having duplicate tags
					var foundMatch:Boolean = false;
					var currentTagsLength:uint = currentTags.length;
					for each (var currentTag:String in currentTags) {
						if (currentTag == tagName) {
							foundMatch = true;
							break;
						}
					}
					
					if (foundMatch == false) {
						tagInput.text += ", " + tagName;
						
						dispatchChanged();
					}
				}
			}
			
			private function tagInputChangeHandler(event:Event):void {
				dispatchChanged();
			}
			
			
		]]>
	</mx:Script>
	
	<mx:Canvas width="1" height="100%" backgroundColor="0xbbbbbb"/>
	<mx:Canvas width="1" height="100%" right="0" backgroundColor="0xbbbbbb"/>
	
	<mx:Label text="Please type in tags that fit your application鈥檚 description or select from existing tags below (List is comma delimited)" styleName="checkboxListHeaderText" x="10" y="10"/>
	<mx:TextArea id="tagInput" 
		left="10" right="10" top="35" height="50" 
		styleName="inputFieldText" color="0x333333"
		htmlText="{projectTagsHTMLCloud}" 
		change="tagInputChangeHandler(event);" 
		maxChars="{TextRestrictions.LARGE}"/>
	<mx:TextArea id="tagCloud" styleName="backendTagCloud" left="10" right="10" top="86" bottom="0" 
		htmlText="{tagsHTMLCloud}" />
	
</mx:Canvas>