advanced code snippet search

Posted By

chrisaiv on 02/27/09


Tagged

addeventlistener Flex mxml


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

mce


Flex: Binding Event Listeners to MXML ID's

 / Published in: MXML
 

URL: http://www.theflexshow.com/blog/index.cfm/2008/10/1/The-Flex-Show--Fifteen-Minutes-With-Flex--Episode-7--Understanding-Events

Simple example of how to bind addEventListener with MXML ID's

Expand | Embed | Plain Text 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400" creationComplete="initApp()">
  3. 	<!--
  4. 		Events
  5. 		A. Event: is a way for one piece of an application to tell other pieces
  6. 				  that something has happened
  7. 		B. Broadcast: Fancy term for announcing an event.  Also known as dispatch
  8. 		C. Listener: Watches for the Broadcast
  9. 		D. Handler: Performs action based on the event
  10. 		
  11. 		Component LifeCycle Events
  12. 		A. Preinitialize
  13. 		B. Initialize
  14. 		C. creationComplete
  15. 			1. Trigger a server request (Ex: Load an RSS Feed)
  16. 			2. Load Flash Variables
  17. 			3. Set up event listeners or other config data
  18. 		D. updateComplete
  19. 		
  20. 	-->
  21. 	<mx:Script>
  22. 		<![CDATA[			
  23. 			private function initApp():void
  24. 			{
  25. 				btn1.addEventListener(MouseEvent.CLICK, onBtnClickHandler, false, 0, true ); 
  26. 				btn2.addEventListener(MouseEvent.CLICK, onBtnClickHandler, false, 0, true ); 
  27. 				btn3.addEventListener(MouseEvent.CLICK, onBtnClickHandler, false, 0, true ); 
  28. 			}
  29.  
  30. 			private function onBtnClickHandler( e:MouseEvent ):void
  31. 			{
  32. 				trace( "onBtnClickHandler: " + e.currentTarget.id );
  33. 				switch( e.currentTarget.id ){
  34. 					case "btn1":
  35. 						bg.setStyle('backgroundColor', 0xFFFFFF);					
  36. 					break;
  37. 					case "btn2":
  38. 						bg.setStyle( 'backgroundColor', 0x000000 );
  39. 					break;
  40. 					case "btn3":
  41. 						bg.setStyle( 'backgroundColor', 0xFFFF00 );
  42. 					break;
  43. 				}	
  44. 			}
  45. 		]]>
  46. 	</mx:Script>
  47. 		<mx:Panel id="panel"  x="10" y="10" width="380" height="150" horizontalAlign="center" verticalAlign="middle">
  48. 			<mx:HBox id="hbox" width="90%" height="90%">
  49. 				<mx:Button id="btn1" label="Change White" height="100%" />
  50. 				<mx:Button id="btn3" label="Change Green" height="100%" />
  51. 				<mx:Button id="btn2" label="Change Black" height="100%" />
  52. 			</mx:HBox>
  53. 		</mx:Panel>
  54. 		<mx:Canvas id="bg" width="90%" height="200" y="180" horizontalCenter="0" />
  55. </mx:Application>

Report this snippet  

You need to login to post a comment.