Video Transcript
Let's also go ahead and open up events_wt3.mxml. Double click on that, and in this events_wt3.mxml again you will see I have my private function, my clickHandler, I have myL.text=Button Clicked. But now in addition, I have two other label controls and they are both located in HBoxes to facilitate the layout. You will see that I have a label inside of an HBox called this is the target. Then I have another label called targetLabel and then another label called This is the type, and another label called typeLabel.
Now every time an event occurs, the Flex framework actually generates an event object, and this event object is great. It's incredibly useful, it contains an incredible array of information that we can access. For example, we can easily find out what component generated this event, what type of event occurred, all kinds of other information. We can even find out where the component was, whether the component was visible or not. So all this information is actually generated in an event object, which is very powerful.
Now in order to be able to access and use this event object, we need to first import the classes that are used. In this case, we are just using a mouse event. So I am just going to say Flash>Import, and this is located in the Flash package and I am going to say .events.MouseEvent. And this will import all of the classes that are needed for this event object. So I have import flash.events.MouseEvent, and then to capture the in information, again whenever the events occurs - in this case is just a simple clickHandler, I am going to pass it, the event object to the clickHandler function.
And again, that's just automatic. Whenever an event occurs, this event is always generated. So now lets go back up to our function and capture that information and save events, and type actually as MouseEvent. And let's take a look at this useful object that is generated and how we might be able to benefit from it, and then we will actually look at re-architecting that demo, to make use to that. So let's click File, Save - compile that, should see that that compiles fine, and then instead of running this application, let's debug it and actually examine what's going to happen.
But let's add in a breakpoint, so that Flex knows to stop here once this clickHandler event has been fired. So let's go line 10, just right click on line 10 and choose Toggle Breakpoint. This will just stop the compiler whenever it hits this area of the function. So when we click the button, it will stop the compiler and then we will be able to actually examine this object and see exactly all the wealth of information that if offers us. So let's click on Debug, and this will debug our application, and it should stop when it gets to that line in the function.
However, it's not going to get to that line in the function until we actually go ahead and click on that button. Right, that's going to cause it to get to that line in the function. So there is my two label controls, This is the target, This is the type, nothing yet there, so now lets click on Click Me, and you should see it automatically switches to the debugging perspective because I debugged the application instead of running it, and now you will see it stopped there on line 10 and it says that its configured to Debugging perspective.
So let's go ahead and open that up, alright, and make sure that in you Debugging perspective, look at your Variables view, and notice we can see this event object, and we can see all the information from this event object. So notice it says Inherited, and notice we can see all the information here. So we can see that the bubbles property is set to true, and we will learn more about event bubbling as we go along and how useful that could be. But you can also see the currentTarget property. Well that makes sense, that's the button right -- that's the object that emitted the event, we just clicked on the button, and we can see all the information about that. We can see whether or not its visible, the width and pixels, the X and Y coordinates. We can see if there is any
Let's also go ahead and open up events_wt3.mxml. Double click on that, and in this events_wt3.mxml again you will see I have my private function, my clickHandler, I have myL.text=Button Clicked. But now in addition, I have two other label controls and they are both located in HBoxes to facilitate...
click to read more