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

  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. Component LifeCycle Events
  11. A. Preinitialize
  12. B. Initialize
  13. C. creationComplete
  14. 1. Trigger a server request (Ex: Load an RSS Feed)
  15. 2. Load Flash Variables
  16. 3. Set up event listeners or other config data
  17. D. updateComplete
  18. -->
  19. <mx:Script>
  20. <![CDATA[
  21. private function initApp():void
  22. {
  23. btn1.addEventListener(MouseEvent.CLICK, onBtnClickHandler, false, 0, true );
  24. btn2.addEventListener(MouseEvent.CLICK, onBtnClickHandler, false, 0, true );
  25. btn3.addEventListener(MouseEvent.CLICK, onBtnClickHandler, false, 0, true );
  26. }
  27.  
  28. private function onBtnClickHandler( e:MouseEvent ):void
  29. {
  30. trace( "onBtnClickHandler: " + e.currentTarget.id );
  31. switch( e.currentTarget.id ){
  32. case "btn1":
  33. bg.setStyle('backgroundColor', 0xFFFFFF);
  34. break;
  35. case "btn2":
  36. bg.setStyle( 'backgroundColor', 0x000000 );
  37. break;
  38. case "btn3":
  39. bg.setStyle( 'backgroundColor', 0xFFFF00 );
  40. break;
  41. }
  42. }
  43. ]]>
  44. </mx:Script>
  45. <mx:Panel id="panel" x="10" y="10" width="380" height="150" horizontalAlign="center" verticalAlign="middle">
  46. <mx:HBox id="hbox" width="90%" height="90%">
  47. <mx:Button id="btn1" label="Change White" height="100%" />
  48. <mx:Button id="btn3" label="Change Green" height="100%" />
  49. <mx:Button id="btn2" label="Change Black" height="100%" />
  50. </mx:HBox>
  51. </mx:Panel>
  52. <mx:Canvas id="bg" width="90%" height="200" y="180" horizontalCenter="0" />
  53. </mx:Application>

Report this snippet  

You need to login to post a comment.