mainnavsearchbutton.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="128" height="21"
	horizontalScrollPolicy="off" verticalScrollPolicy="off"
	addedToStage="initMyComponent()">
	
	<mx:Script>
		<![CDATA[
			///////////////////////////////////////////////////////////////////////////////////////
			//import
			
			import mx.effects.Fade;
			import com.flexShowcase.events.*;
			import com.flexShowcase.constants.TextRestrictions;
		 
	
			///////////////////////////////////////////////////////////////////////////////////////
			//initialization
			private function initMyComponent():void{
				this.addEventListener(KeyboardEvent.KEY_UP,handleKeyboardButtonRelease)
				this.searchTerm_txt.setStyle("color",0xffffff)
			}
			
			//textfield focus------------------------------------------------------------------
			//bg of textfield changes color based on focus
			
			private function handleFocusIn(event:FocusEvent=null):void{
				this.doClearFieldCheck()
				this.searchTerm_txt.setStyle("color",0x000000)
				
				var fade:Fade=new Fade(this.over_mc)
				fade.alphaTo=1
				fade.duration=250
				fade.play()
			}
			
			private function handleFocusOut(event:FocusEvent=null):void{
				this.searchTerm_txt.setStyle("color",0xffffff)
				this.searchTerm_txt.text="Search"
				
				var fade:Fade=new Fade(this.over_mc)
				fade.alphaTo=0
				fade.duration=250
				fade.play()
			}
			
			//general-----------------------------------------------------------------------
			private function doClearFieldCheck():void{
				if(this.searchTerm_txt.text=="Search"){
					this.searchTerm_txt.text=""
				}
			}
			
			private function handleKeyboardButtonRelease(event:KeyboardEvent):void{
				if(event.keyCode==Keyboard.ENTER){
					//send event up to main for it to handle
					var ev:SearchEvent=new SearchEvent(SearchEvent.SEARCH)
					ev.searchTerm=this.searchTerm_txt.text
					this.dispatchEvent(ev)
				}
				
			}
			
		]]>
	</mx:Script>
	
	<mx:Image id="up_mc" source="@Embed('/assets/images/buttons/mainNav_search_up.png')"/>
	<mx:Image id="over_mc" source="@Embed('/assets/images/buttons/mainNav_search_over.png')" alpha="0"/>
	<mx:TextInput id="searchTerm_txt" maxChars="{TextRestrictions.SMALL}" text="Search" x="5" y="1" borderThickness="0" width="100"
		themeColor="silver" styleName="mainNavSearchButtonText" focusIn="this.handleFocusIn(event)"
		focusAlpha="0" focusOut="this.handleFocusOut(event)"/>
</mx:Canvas>