mainnavsearchbar.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="791" height="88"
	horizontalScrollPolicy="off" verticalScrollPolicy="off"
	addedToStage="initMyComponent()">
	
	<mx:Script>
		<![CDATA[
			////////////////////////////////////////////////////////////////////////////////
			//import
			
			import org.flex.events.*;
			
			////////////////////////////////////////////////////////////////////////////////
			//initialization
			private function initMyComponent():void{
				this.addEventListener(KeyboardEvent.KEY_UP,handleKeyboardButtonRelease)
			}
			
			//general------------------------------------------------------------------------
			private function onClose():void{
				this.dispatchEvent(new Event(FlexDotOrgEvent.CLOSE))
			}
			
			//search------------------------------------------------------------------------
			private function handleKeyboardButtonRelease(event:KeyboardEvent):void{
				if(event.keyCode==Keyboard.ENTER){
					this.doSearch();
				}
			}
			
			private function doSearch():void{
				var ev:FlexDotOrgSearchEvent=new FlexDotOrgSearchEvent(FlexDotOrgSearchEvent.SEARCH)
				this.dispatchEvent(ev)
			}
			
			//search criteria--------------------------------------------------------------------
			private function toggleSelectAll(event:Event):void{
				var isSelected:Boolean=event.target.selected
				
				this.industryCheck_mc.selected=isSelected;
				this.developerCheck_mc.selected=isSelected;
				this.technologyCheck_mc.selected=isSelected;
				this.tagsCheck_mc.selected=isSelected;
			}
			
			private function onCheckbox(event:Event):void{
				var ev:FlexDotOrgSearchEvent=new FlexDotOrgSearchEvent(FlexDotOrgSearchEvent.CHECKBOX_CLICK)
				ev.indusrtyIsChecked=this.industryCheck_mc.selected
				ev.developerIsChecked=this.developerCheck_mc.selected
				ev.technologyIsChecked=this.technologyCheck_mc.selected
				ev.tagsIsChecked=this.tagsCheck_mc.selected
				
				this.dispatchEvent(ev)
			}
		
		]]>
	</mx:Script>
	
	<mx:Image id="up_mc" source="@Embed('/assets/images/frontend/searchbar/searchBar_bg.png')"/>
	<mx:Canvas x="31" y="33" width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:Label text="Advanced Search" styleName="standardText" color="0xffffff" y="2"/>
		
		<mx:CheckBox id="industryCheck_mc" label="Industry" styleName="mainNavSearchBarCheckbox" x="109" change="this.onCheckbox(event)" selected="true"/>
		<mx:CheckBox id="developerCheck_mc" label="Developer" styleName="mainNavSearchBarCheckbox" x="189" change="this.onCheckbox(event)" selected="true"/>
		<mx:CheckBox id="technologyCheck_mc" label="Technology" styleName="mainNavSearchBarCheckbox" x="277" change="this.onCheckbox(event)" selected="true"/>
		<mx:CheckBox id="tagsCheck_mc" label="Tags" styleName="mainNavSearchBarCheckbox" x="373" change="this.onCheckbox(event)" selected="true"/>
		<mx:CheckBox id="allCheck_mc" label="All" styleName="mainNavSearchBarCheckbox" x="440" change="this.toggleSelectAll(event)" selected="true"/>	
		
		<mx:Button styleName="mainNavSearchBarSearchButton" x="569" y="-3" buttonMode="true" click="this.doSearch()"/>
		<mx:Button styleName="mainNavSearchBarCloseButton" x="673" y="3" buttonMode="true" click="this.onClose()"/>
	</mx:Canvas>
</mx:Canvas>