tagspanel.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	currentState="{ScreenStates.ALL_TAGS}"
	creationComplete="creationCompleteHandler(event)">
	
	<mx:Script>
		<![CDATA[
		
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.ScreenStates;
			import com.flexShowcase.events.TagEvent;
			import com.flexShowcase.utils.TagUtils;
			
			import flash.events.TextEvent;
			import mx.collections.ArrayCollection;
			
			//////////////////////////////////////////////////
			//getter/setter variables
			
			private var _tags:ArrayCollection;
			private var _technologies:ArrayCollection;
			private var _industries:ArrayCollection;
			
			//////////////////////////////////////////////////
			//private variables
			
			[Bindable] private var tagsHTMLCloud:String;
			[Bindable] private var technologiesHTMLCloud:String;
			[Bindable] private var industriesHTMLCloud: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, true); 
			}
			
			//--------------------------------------------------------------------
			
			public function set technologies(value:ArrayCollection):void {
				_technologies = value;
				
				technologiesHandler();
			}
			public function get technologies():ArrayCollection {
				return _technologies;
			}
			
			private function technologiesHandler():void {
				technologiesHTMLCloud = TagUtils.getTagCloud(technologies, true);
			}
			//--------------------------------------------------------------------
			
			public function set industries(value:ArrayCollection):void {
				_industries = value;
				
				industriesHandler();
			}
			public function get industries():ArrayCollection {
				return _industries;
			}
			
			private function industriesHandler():void {
				industriesHTMLCloud = TagUtils.getTagCloud(industries, true);
			}
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				var aHover:Object = new Object();
				aHover.color = "#00CCFF";
				
				var textAlign:Object = new Object();
				textAlign.textAlign = "justify";
				
				var styleSheet:StyleSheet = new StyleSheet();
				styleSheet.setStyle("a:hover", aHover);
				styleSheet.setStyle("a", textAlign);
				
				allTagsCloud.styleSheet = styleSheet;
				developerTagsCloud.styleSheet = styleSheet;
				
				tagsPanelButtons.selection = allButton;
				
				addEventListener(TextEvent.LINK, tagCloudClickHandler);
			}
			
			//////////////////////////////////////////////////
			//private functions
			
			private function dispatchCloseEvent():void {
				var event:Event = new Event(Event.CLOSE);
				dispatchEvent(event);
			}
			private function dispatchTagClickEvent(tagID:String, tagName:String):void {
				var tagEvent:TagEvent = new TagEvent(TagEvent.CLICKED);
				tagEvent.tagID = tagID;
				tagEvent.tagName = tagName;
				
				var tagIDs:Array = new Array(tagID);
				tagEvent.tagIDs = tagIDs;
				
				dispatchEvent(tagEvent);
			}
			
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function allButtonClickHandler(mouseEvent:MouseEvent):void {
				currentState = ScreenStates.ALL_TAGS;
			}
			private function developerButtonClickHandler(mouseEvent:MouseEvent):void {
				currentState = ScreenStates.DEVELOPER_TAGS;
			}
			private function closeButtonClickHandler():void {
				dispatchCloseEvent();
			}
			
			private function tagCloudClickHandler(textEvent:TextEvent):void {
				var variables:Object = TagUtils.getVariablesFromHTMLTag(textEvent.text);
				
				var tagID:String = variables.id;
				var tagName:String = variables.name;
				
				dispatchTagClickEvent(tagID, tagName);
				
				dispatchCloseEvent();
			}
			
		]]>
	</mx:Script>
	
	
	<mx:states>
		<mx:State name="{ScreenStates.ALL_TAGS}">
			<mx:SetProperty target="{allTagsCloud}" name="visible" value="true" />
			<mx:SetProperty target="{developerTagsCloud}" name="visible" value="false" />
		</mx:State>
		<mx:State name="{ScreenStates.DEVELOPER_TAGS}">
			<mx:SetProperty target="{allTagsCloud}" name="visible" value="false" />
			<mx:SetProperty target="{developerTagsCloud}" name="visible" value="true" />
		</mx:State>
	</mx:states>
	
	
	<mx:Image source="@Embed('/assets/images/frontend/mainnavigation/tagspanel/tagsBackground.png')" />
	
	<mx:Canvas id="tagsPanelCanvas" width="760" height="235">
		<mx:RadioButtonGroup id="tagsPanelButtons" />
		<mx:RadioButton id="allButton" styleName="tagsPanelRBAll" left="10" top="27" groupName="tagsPanelButtons" buttonMode="true" click="allButtonClickHandler(event)" />
		<!-- <mx:RadioButton id="developerButton" styleName="tagsPanelRBDeveloper" left="10" top="87" groupName="tagsPanelButtons" buttonMode="true" click="developerButtonClickHandler(event)" /> -->
		
		<mx:TextArea id="allTagsCloud" styleName="tagCloud" left="200" right="20" top="20" bottom="20" htmlText="{tagsHTMLCloud + technologiesHTMLCloud + industriesHTMLCloud}" selectable="false" />
		<mx:TextArea id="developerTagsCloud" styleName="tagCloud" left="200" right="20" top="20" bottom="20" htmlText="{}" selectable="false" />
		
		<mx:Button id="closeButton" x="740" y="5" styleName="mainNavSearchBarCloseButton" buttonMode="true" click="closeButtonClickHandler()" />
	</mx:Canvas>
	
	
</mx:Canvas>