technologytab.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:components="com.flexShowcase.components.*"
	
	width="100%"
	height="100%"
	
	label="Technologies"
	
	horizontalScrollPolicy="off"
	resize="handleResize(event)"
	creationComplete="creationCompleteHandler(event)">
	
	
	<mx:Script>
		<![CDATA[
		
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.data.*;
			import com.flexShowcase.events.AccountEvent;
			
			import mx.collections.ArrayCollection;
			import mx.controls.CheckBox;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var project:Project;
			[Bindable] public var technologies:ArrayCollection;
			
			//////////////////////////////////////////////////
			//private variables
			
			private var selectedCheckBoxes:Array;
			
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				selectedCheckBoxes = new Array();
				
				technologyCloud.addEventListener(MouseEvent.CLICK, checkBoxClickHandler);
			}
			
			
			//////////////////////////////////////////////////
			//public functions
			
			public function show():void {
				technologyCloud.resetAllCheckBoxes();
			}
			
			public function selectTags():void {
				if (project != null) {
					var projectIndustries:ArrayCollection = project.technologies;
					technologyCloud.resetAllCheckBoxes();
					for (var i:uint = 0; i < projectIndustries.length; ++i) {
						var projectTechnology:Tag = projectIndustries.getItemAt(i) as Tag;
						technologyCloud.checkBoxMatchingID(projectTechnology.id);
					}
				}
			}
			public function getTags():ArrayCollection {
				var tempTags:ArrayCollection = new ArrayCollection();
				var allCheckedBoxIndexes:Array = technologyCloud.getAllCheckedBoxIndexes();
				for (var i:uint = 0; i < allCheckedBoxIndexes.length; ++i) {
					var index:uint = allCheckedBoxIndexes[i];
					for (var j:uint = 0; j < technologies.length; ++j) {
						var tag:Tag = technologies.getItemAt(j) as Tag;
						if (tag.id == index) {
							tempTags.addItem(tag);
							break;
						}
					}
				}
				return tempTags;
			}
			
			
			//////////////////////////////////////////////////
			//private functions
			
			private function checkBoxClickHandler(mouseEvent:MouseEvent):void {
				var checkBox:CheckBox = mouseEvent.target as CheckBox;
				if (checkBox != null) {
					if (checkBox.selected == true) {
						selectedCheckBoxes.push(checkBox);
					} else {
						for (var i:uint = 0; i < selectedCheckBoxes.length; ++i) {
							var selectedCheckBox:CheckBox = selectedCheckBoxes[i];
							if (selectedCheckBox == checkBox) {
								selectedCheckBoxes.splice(i, 1);
							}
						}
					}
					
					if (selectedCheckBoxes.length > 0) {
						checkBox = selectedCheckBoxes[0];
						var search:String = new String(checkBox.label);
						for (var j:uint = 1; j < selectedCheckBoxes.length; ++j) {
							checkBox = selectedCheckBoxes[j];
							search += " or " + checkBox.label;
						}
					} else {
					}
					var accountEvent:AccountEvent = new AccountEvent(AccountEvent.CHANGED);
					accountEvent.valid = true;
					
					dispatchEvent(accountEvent);
				}
			}
			
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function handleResize(event:Event):void{
				var goHeight:uint
				if(technologyCloud.height+30<this.height){
					goHeight=this.height
				}else{
					goHeight=technologyCloud.height+30
				}
				this.borderLeft_mc.height=goHeight
				this.borderRight_mc.height=goHeight
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:Canvas id="borderLeft_mc" width="1" height="{technologyCloud.height+30}" backgroundColor="0xbbbbbb"/>
	<mx:Canvas id="borderRight_mc" width="1" height="{technologyCloud.height+30}" right="0" backgroundColor="0xbbbbbb"/>
	
	<mx:Label text="What technologies are your application built with?" styleName="checkboxListHeaderText" x="10" y="10"/>
	
	<components:BackendColumnList verticalScrollPolicy="off" left="10" right="20" top="30" height="182"	columnLength="10" id="technologyCloud" listData="{technologies}" />
	
	
</mx:Canvas>