Go to flex Event Description

Article from: http://www.riachina.com/showtopic-8747.html
Introduction to flex events

I. Introduction

Many newcomers are not familiar with the flex event mechanism, and may encounter various problems during use. This is a very common problem. In order to help you more quickly and better, this section describes the various mechanisms and usage of events in flex.

One of the essence of Flex is the event and binding mechanism. After learning about it, it can help you design programs more flexibly and help new users.

The explanation may not be systematic or comprehensive, and many of them are not in-depth. If you have any questions, please correct them. Of course, you can also give your own views or share your experiences. Thank you.

II. Introduction to the event mechanism

1. What is the event mechanism?

An event can be seen as a trigger mechanism. when certain conditions are met, this event will be triggered. For example, mouseevent refers to a series of events triggered after a mouse operation. A click event exists in many controls. This event is an instance of mouseevent. When you click the mouse, the system will automatically throw a mouseevent event named click (this method will be described later ). If you register a method on click, the method is executed when the event is triggered.

Rough

Mxml code of the corresponding flex Main Application

<Mx: SCRIPT>
<! [CDATA [
Import MX. Controls. Alert;
Private function clickhandler (E: mouseevent ){
Alert. Show (E. currenttarget. tostring ());
}
]>
</MX: SCRIPT>
<Mx: button id = "testbtn" Click = "clickhandler (event)" label = "test">
</MX: button>

When we write code, there are many different icons in the editor's Code Completion prompt list,

Those with lightning are events, three small pieces are styles, hollow circles are properties, solid dots are public methods, and one is effect.

The event we can see in this list is called an event registration channel. (Officially, it is still called an event, but it has different meanings from common events. The event registration channel will be described below)

2. event registration Channel

As mentioned above, these channels can only be seen in mxml code prompts. Their role is to provide mxml components with a registration channel for the methods executed during event triggering, it can also be seen in the code prompt, which provides a lot of abstract benefits for the component. We can clearly tell the Component User what events are included in the component for you to call.
Why treat him differently? In addition to code prompts, there are also some implementation differences.

The click event of the button inherits from the core class interactiveobject. Unfortunately, we cannot see its source code, but it indicates that the "event registration channel" can be inherited.

We will describe how to declare "event registration channel" in custom events ".

3. Event trigger Method

If a function is entered in the registration channel, this method is executed when the event is triggered.

Click = "clickhandler (event )"

We can see that this method has an event object passed in as a parameter. New users may ask, where does this event object come from? I didn't declare this variable either. It is actually sent to him through the registration channel. The default variable name is event. If you want to pass other parameters when an event is triggered, you can use a Custom Event object.

This object is the event object distributed by this component, that is, an instance of the mouseevent whose type is "click.

This event object contains various information for triggering this event, such as the event object, the Monitored object, and the mouse point during triggering, different event classes have different attributes. For example, keyboardevent contains the key clicked on the keyboard.

We can also customize an event class to pass all the information we want. (This will be introduced later)

4. Event distribution (important)

All objects inherited from eventdispatcher will contain the dispatchevent method, which has a parameter and an event object.

The event registration channel mentioned above is only a channel. In fact, events are distributed by this method, and the channel is only a channel.

His role is to distribute an event object, and his distribution has no purpose, a broadcast form, the flex event listening thread will receive a variety of events (we call it capture events, which will be described later), so which one is the event you want, the identifier is distinguished by the Type attribute of the event.

1) event object
When an event is distributed, an event object is distributed. No matter which event class is inherited from the flash. Events. event object, it contains some important attributes, such as type and bubbles.
Type is the type of an event. event listening uses this parameter to identify whether it is the event that you are listening.
Bubbles is a Boolean value that determines whether the object will be passed up. The default value is false. What does it mean? Draw a picture to understand.
For example, when the button component distributes the click event object and sets the bubbles to false, the distribution of the button component is like this.

Sample Code
Dispatchevent (New mouseevent ("click", false ));

The event object cannot span the component itself. Of course, except for the registration channel mentioned earlier (this is a good image)

Therefore, if the channel is not registered, the events generated by the button component cannot be captured in the flex main application.

If we set bubbles to true, it looks like this.
Dispatchevent (New mouseevent ("click", true ));

We can see that this event can cross the component itself and reach the flex main application. More than that, it is clearly stated in the help manual that if this event is not captured during the transfer process, it will be uploaded layer by layer until the final stage, if it has not been captured yet, this event will be destroyed.

In this way, even if we do not have the Click Event channel, as long as we add the event listener (addeventlistener) to the flex main application, we can get the click event generated by the split.

So, isn't the registration channel useless? No, as mentioned before, the registration channel is in the current format and visible. Therefore, if your component is to be used by others, it is very clear, you don't have to know what events are distributed in your source code. However, do not listen to and register the same event, which will be executed repeatedly. (As mentioned later)

5. event listening

During the delivery, we mentioned that if the event is not called through the registration channel, we need a listener to capture the event. How to capture the issued event is the type value of the event.

For example:
<Mx: Application xmlns: MX = http://www.adobe.com/2006/mxml layout = "absolute" xmlns: comp
Creationcomplete = 'init ()'
>
<Mx: SCRIPT>
<! [CDATA [
Private function Init (){
Testbtn. addeventlistener ("click", clickhandler );
}

Some static constants are provided in flex events, so that we can call them to avoid making mistakes. Therefore, this sentence can be written in this way.

Testbtn. addeventlistener (mouseevent. Click, clickhandler );

We can see that no parameters are passed in the callback method of the listener. Yes, this is somewhat different from the channel method. The callback method (clickhandler) Here is just a reference, it does not mean the execution of the method. It means to tell eventlinstener that if the click event is captured, find clickhandler and execute it, event object parameters are dynamically transmitted during execution. (If you are familiar with Ajax, you can easily understand it here)

It works like this.

If you register the Click Event Channel again, both of them will take effect, which is obviously redundant.

6. About asynchronous and execution sequence

The previous statements are incorrect. As does not have a thread concept. During remote requests, result events and error events are asynchronous. If you need to process the results, you need to use the listener and obtain your remote data in the callback.
When processing local events, they are still synchronized. (Thank you for your correction)
Asynchronous

We can see that the execution sequence of the callback method is not as good as that of the method after dispatchevent. If the following method depends on Event Callback, write the following method to the callback method.

Iii. Binding Mechanism

After learning about the event mechanism, it is not difficult to understand binding. Binding is actually the use of the event mechanism.

1. What is binding
The binding principle is events. A listener for changing events is added to the bound object. Once a bound object changes, a "propertychange" event is distributed (default, can also be changed to custom events). In other components, there will be a propertychange event listener. When this event is captured, the properties of the component will be updated and displayed.

The binding function is to bind variables, classes, methods, and other values in flex with the component values. For example, if a variable is bound, the related attributes of the component that references the variable will also change. We use an instance to represent

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = http://www.adobe.com/2006/mxml layout = "absolute" xmlns: comp
>
<Mx: SCRIPT>
<! [CDATA [
Import MX. Controls. Alert;
[Bindable]
Private var isselected: Boolean;
Private function clickhandler (E: mouseevent ){
// Alert. Show (E. currenttarget. tostring ());
Isselected = isselected? False: true; // This statement indicates that if isselected is set to true, it is changed to false. If isselected is set to false, it is changed to true;
Alert. Show (isselected. tostring ());
}
]>
</MX: SCRIPT>
<Mx: button id = "testbtn" Click = "clickhandler (event)" label = "test"/>
<Mx: checkbox x = "60" selected = "{isselected}"/>
</MX: Application>

The effect of the above program is that when you click the button, the button does not directly change the checkbox selection status, but changes the isselected variable because isselected is bound, the selected status of the checkbox is changed.

In this way, the selected Attribute of the checkbox can be directly changed. I just want to demonstrate the effect. If your checkbox contains hundreds of dynamic structures, You won't change it one by one.

Therefore, most of us will bind a data source with a declaration, so that we reference the control of this data source, such as the DataGrid. When the data source changes, even if you do not reset dataprovider, the data in the list is also refreshed. Of course, there are many applications waiting for you to try.

What if the [Bindable] statement is canceled in this code? Will isselected be changed?

Isselected will change. The results returned by alert will also show that the results have changed, but the checkbox selection status will not change, because there are many methods to create a component and display it in the end, such as addchild, commitproperties, and updatedisplaylist. updatadisplaylist is similar to refreshing the display.

The component does not change the attribute because it only changes the attribute instead of updating the display effect.

The binding principle is also used for event distribution. The more complex binding needs to be discovered by yourself

4. Distribution of custom events

This part is not a long story, because you should have mastered the principles of the event, so I will post the demo source code and make some simple explanations.

1. Custom Event components/myeventtest.
Package Components
{
Import MX. Events. flexevent;
Public class myeventtest extends flexevent
{
Public static const onchange: String = "onchange ";
Public var eventinfo: string; // custom event information
Public Function myeventtest (S: string ){
Super (s); // if no bubbles is set during construction, the default value is false, that is, it cannot be passed.
Eventinfo = "this event is:" + S;
}
}
}

2. custom components/componentforevent.
Package Components
{
Import flash. Events. eventdispatcher;
// This is the method for declaring the event registration channel. Name is the name of the event, that is, the type mentioned earlier. Type is the class of the event.
[Event (name = "onchange", type = "components. myeventtest")]
Public class componentforevent extends eventdispatcher
{
Private var name: string;
Public Function changename (newname: string ){
This. Name = newname;
Dispatchevent (New myeventtest (myeventtest. onchange ));
}
}
}

3. App. mxml
<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute" xmlns: comp
>
<Mx: SCRIPT>
<! [CDATA [
Import MX. Controls. Alert;
Private function changename (){
CFE. changename ("new name ");
}
]>
</MX: SCRIPT>
<Mx: button id = "testbtn" Click = "changename ()" label = "test"/>
<Components: componentforevent
Id = "CFE"/>
</MX: Application>