| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <!DOCTYPE html |
| PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html lang="en-us" xml:lang="en-us"> |
| <head> |
| <meta name="DC.Type" content="topic"/> |
| <meta name="DC.Title" content="Custom events"/> |
| <meta name="DC.Format" content="XHTML"/> |
| <meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf69084-7a22_verapache"/> |
| <title>Custom events</title> |
| </head> |
| <body id="WS2db454920e96a9e51e63e3d11c0bf69084-7a22_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7a22_verapache"><!-- --></a> |
| |
| <div> |
| <p>You can create custom events as part of defining MXML and |
| ActionScript components. Custom events let you add functionality |
| to your custom components to respond to user interactions, to trigger |
| actions by your custom component, and to take advantage of data |
| binding.</p> |
| |
| <p>For more information on creating custom events for MXML components, |
| see <a href="flx_mxmlcomponents_advanced_mxa.html#WS2db454920e96a9e51e63e3d11c0bf69084-7a35_verapache">Advanced |
| MXML components</a>. For information on creating custom events |
| for ActionScript components, see <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fea_verapache">Create |
| simple visual components in ActionScript</a>.</p> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf67fe7-7ffe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf67fe7-7ffe_verapache"><!-- --></a> |
| <h2 class="topictitle2">About events</h2> |
| |
| |
| <div> |
| <p>Flex applications |
| are event-driven. Events let an application know when the user interacts |
| with the interface, and also when important changes happen in the appearance |
| or life cycle of a component, such as the creation of a component |
| or its resizing. Events can be generated by user input devices, |
| such as the mouse and keyboard, or by the asynchronous operations, |
| such as the return of a web service call or the firing of a timer.</p> |
| |
| <p>The core class of the Flex component architecture, <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html" target="_blank">mx.core.UIComponent</a>, defines |
| core events, such as <samp class="codeph">updateComplete</samp>, <samp class="codeph">resize</samp>, <samp class="codeph">move</samp>, <samp class="codeph">creationComplete</samp>, |
| and others that are fundamental to all components. Subclasses of |
| UIComponent inherit these events.</p> |
| |
| <p>Custom components that extend existing Flex classes inherit all |
| the events of the base class. Therefore, if you extend the <a href="https://flex.apache.org/asdoc/spark/components/Button.html" target="_blank">Button</a> class |
| to create the MyButton class, you can use the <samp class="codeph">click</samp> event |
| and the events that all controls inherit, such as <samp class="codeph">mouseOver</samp> or <samp class="codeph">initialize</samp>, |
| as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- createcomps_events/EventsMyApplication.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:MyComp="myComponents.*"> |
| <fx:Script> |
| <![CDATA[ |
| import flash.events.Event; |
| |
| // Event listener for the click event. |
| private function handleClick(eventObj:Event):void { |
| // Define event listener. |
| } |
| |
| // Event listener for the initialize event. |
| private function handleInit(eventObj:Event):void { |
| // Define event listener. |
| } |
| ]]> |
| </fx:Script> |
| |
| <MyComp:MyButton |
| click="handleClick(event);" |
| initialize="handleInit(event);"/> |
| |
| </s:Application></pre> |
| |
| <p>In addition to using the events inherited from its superclasses, |
| your custom components can define custom events. You use custom |
| events to support data binding, to respond to user interactions, |
| or to trigger actions by your component. </p> |
| |
| <p>For more information on the Flex event mechanism, see <a href="flx_events_ev.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ee9_verapache">Events</a>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf67fe7-7ffc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf67fe7-7ffc_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using an event object</h3> |
| |
| |
| <div> |
| <p>When a Flex component dispatches an event, it creates an |
| event object, where the properties of the event object contain information |
| describing the event. An event listener takes this event object |
| as an argument and accesses the properties of the object to determine |
| information about the event. </p> |
| |
| <p>The base class for all event objects is the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html" target="_blank">flash.events.Event</a> class. |
| All event objects are instances of the Event class, or instances |
| of a subclass of the Event class. </p> |
| |
| <p>The following table describes the public properties of the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html" target="_blank">Event</a> class. |
| The Event class implements these properties using getter methods. </p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d164204e141"> |
| <p>Property</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d164204e147"> |
| <p>Type</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d164204e153"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e141 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">type</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e147 "> |
| <p>String</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e153 "> |
| <p>The name of the event; for example, <samp class="codeph">"click"</samp>. |
| The event constructor sets this property. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e141 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">target</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e147 "> |
| <p>EventDispatcher</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e153 "> |
| <p>A reference to the component instance that |
| dispatches the event. This property is set by the <samp class="codeph">dispatchEvent()</samp> method; |
| you cannot change this to a different object. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e141 "> |
| <div class="p"> |
| <pre class="codeblock">currentTarget</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e147 "> |
| <p>EventDispatcher</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e153 "> |
| <p>A reference to the component instance that |
| is actively processing the Event object. The value of this property |
| is different from the value of the <samp class="codeph">target</samp> property |
| during the event capture and bubbling phase. For more information, |
| see <a href="flx_events_ev.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ee9_verapache">Events</a>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e141 "> |
| <div class="p"> |
| <pre class="codeblock">eventPhase</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e147 "> |
| <p>uint</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e153 "> |
| <p>The current phase in the event flow. The |
| property might contain the following values:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">EventPhase.CAPTURING_PHASE</samp>: |
| The capture phase</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">EventPhase.AT_TARGET</samp>: The target phase</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">EventPhase.BUBBLING_PHASE</samp>: The bubbling |
| phase</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e141 "> |
| <div class="p"> |
| <pre class="codeblock">bubbles</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e147 "> |
| <p>Boolean</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e153 "> |
| <p>Whether an event is a bubbling event. If |
| the event can bubble, the value for this property is <samp class="codeph">true;</samp> otherwise, |
| it is <samp class="codeph">false</samp>. You can optionally pass this property |
| as a constructor argument to the Event class. By default, most event |
| classes set this property to <samp class="codeph">false</samp>. For more information, |
| see <a href="flx_events_ev.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ee9_verapache">Events</a>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e141 "> |
| <div class="p"> |
| <pre class="codeblock">cancelable</pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e147 "> |
| <p>Boolean</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d164204e153 "> |
| <p>Whether the event can be canceled. If the |
| event can be canceled, the value for this value is <samp class="codeph">true;</samp> otherwise, |
| it is <samp class="codeph">false</samp>. You can optionally pass this property |
| as a constructor argument to the Event class. By default, most event |
| classes set this property to <samp class="codeph">false</samp>. For more information, |
| see <a href="flx_events_ev.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ee9_verapache">Events</a>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf67fe7-7ffd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf67fe7-7ffd_verapache"><!-- --></a> |
| <h2 class="topictitle2">Dispatching custom events</h2> |
| |
| |
| <div> |
| <p>Flex defines many of the most common |
| events, such as the <samp class="codeph">click</samp> event for the <a href="https://flex.apache.org/asdoc/spark/components/Button.html" target="_blank">Button</a> control; |
| however, your application may require that you create events. In your |
| custom Flex components, you can dispatch any of the predefined events inherited |
| by the component from its superclass, and dispatch new events that you |
| define within the component. </p> |
| |
| <p>To dispatch a new event from your custom component, you must |
| do the following:</p> |
| |
| <ol> |
| <li> |
| <p>(Optional) Create a subclass from the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html" target="_blank">flash.events.Event</a> class |
| to create an event class that describes the event object. For more |
| information, see <a href="flx_createevents_cre.html#WS2db454920e96a9e51e63e3d11c0bf69084-7a36_verapache">Creating a |
| subclass from the Event class</a>.</p> |
| |
| </li> |
| |
| <li> |
| <p>(Optional) Use the <samp class="codeph">[Event]</samp> metadata tag |
| to make the event public so that the MXML compiler recognizes it. |
| For more information, see <a href="flx_createevents_cre.html#WS2db454920e96a9e51e63e3d11c0bf69084-7a34_verapache">Using |
| the Event metadata tag</a>.</p> |
| |
| </li> |
| |
| <li> |
| <p>Dispatch the event using the <samp class="codeph">dispatchEvent()</samp> method. |
| For more information, see <a href="flx_createevents_cre.html#WS2db454920e96a9e51e63e3d11c0bf69084-7a33_verapache">Dispatching |
| an event</a>. </p> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7a36_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7a36_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a subclass from the Event |
| class</h3> |
| |
| |
| <div> |
| <p>All |
| events use an event object to transmit information about the event |
| to the event listener, where the base class for all event objects |
| is the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html" target="_blank">flash.events.Event</a> class. |
| When you define a custom event, you can dispatch an event object |
| of the Event type, or you can create a subclass of the Event class |
| to dispatch an event object of a different type. You typically create |
| a subclass of the Event class when your event requires you to add |
| information to the event object, such as a new property to hold |
| information that the event listener requires.</p> |
| |
| <p>For example, the event objects associated with the Flex <a href="https://flex.apache.org/asdoc/mx/controls/Tree.html" target="_blank">Tree</a> control |
| include a property named <samp class="codeph">node</samp>, which identifies |
| the node of the Tree control associated with the event. To support |
| the <samp class="codeph">node</samp> property, the Tree control dispatches |
| event objects of type TreeEvent, a subclass of the Event class. </p> |
| |
| <p>Within your subclass of the Event class, you can add properties, |
| add methods, set the value of an inherited property, or override |
| methods inherited from the Event class. For example, you might want |
| to set the <samp class="codeph">bubbles</samp> property to <samp class="codeph">true</samp> to override |
| the default setting of <samp class="codeph">false</samp>, which is inherited |
| from the Event class. </p> |
| |
| <p>You are required to override the <samp class="codeph">Event.clone()</samp> method |
| in your subclass. The <samp class="codeph">clone()</samp> method returns a |
| cloned copy of the event object by setting the <samp class="codeph">type</samp> property |
| and any new properties in the clone. Typically, you define the <samp class="codeph">clone()</samp> method |
| to return an event instance created with the <samp class="codeph">new</samp> operator.</p> |
| |
| <p>Suppose that you want to pass information about the state of |
| your component to the event listener as part of the event object. |
| To do so, you create a subclass of the Event class to create an |
| event, EnableChangeEvent, as the following example shows:</p> |
| |
| <pre class="codeblock">package myEvents |
| { |
| //createcomps_events/myEvents/EnableChangeEvent.as |
| import flash.events.Event; |
| |
| public class EnableChangeEvent extends Event |
| { |
| |
| // Public constructor. |
| public function EnableChangeEvent(type:String, |
| isEnabled:Boolean=false) { |
| // Call the constructor of the superclass. |
| super(type); |
| |
| // Set the new property. |
| this.isEnabled = isEnabled; |
| } |
| |
| // Define static constant. |
| public static const ENABLE_CHANGE:String = "enableChange"; |
| |
| // Define a public variable to hold the state of the enable property. |
| public var isEnabled:Boolean; |
| |
| // Override the inherited clone() method. |
| override public function clone():Event { |
| return new EnableChangeEvent(type, isEnabled); |
| } |
| } |
| }</pre> |
| |
| <p>In this example, your custom class defines a public constructor |
| that takes two arguments:</p> |
| |
| <ul> |
| <li> |
| <p>A String value that contains the value of the <samp class="codeph">type</samp> property |
| of the Event object.</p> |
| |
| </li> |
| |
| <li> |
| <p>An optional Boolean value that contains the state of the |
| component's <samp class="codeph">isEnabled</samp> property. By convention, |
| all constructor arguments for class properties, except for the <samp class="codeph">type</samp> argument, |
| are optional.</p> |
| |
| <p>From within the body of your constructor, you |
| call the <samp class="codeph">super()</samp> method to initialize the base |
| class properties. </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7a34_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7a34_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using the Event metadata tag</h3> |
| |
| |
| <div> |
| <p>You use the <samp class="codeph">[Event]</samp> metadata |
| tag to define events dispatched by a component so that the Flex |
| compiler can recognize them as MXML tag attributes in an MXML file. |
| You add the <samp class="codeph">[Event]</samp> metadata tag in one of the |
| following locations:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p>ActionScript components</p> |
| |
| <p>Above the class definition, |
| but within the package definition, so that the events are bound |
| to the class and not a particular member of the class.</p> |
| |
| </li> |
| |
| <li> |
| <p>MXML components</p> |
| |
| <p>In the <samp class="codeph"><fx:Metadata></samp> tag |
| of an MXML file.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The <samp class="codeph">Event</samp> metadata keyword has the following |
| syntax:</p> |
| |
| <pre class="codeblock"> [Event(name="eventName", type="package.eventType")]</pre> |
| |
| <p>The <em>eventName</em> argument specifies the name of the event. |
| The <em>eventType</em> argument specifies the class name, including |
| the package, that defines the event object.</p> |
| |
| <p>The following example identifies the <samp class="codeph">enableChange</samp> event |
| as an event that an ActionScript component can dispatch:</p> |
| |
| <pre class="codeblock">[Event(name="enableChange", type="myEvents.EnableChangeEvent")] |
| public class MyComponent extends TextArea |
| { |
| ... |
| }</pre> |
| |
| <p>The following example shows the <samp class="codeph">[Event]</samp> metadata |
| tag within the <samp class="codeph"><fx:Metadata></samp> tag of an MXML |
| file:</p> |
| |
| <pre class="noswf"><?xml version="1.0"?> |
| <!-- createcomps_events\myComponents\MyButton.mxml --> |
| <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| click="dispatchEvent(new EnableChangeEvent('enableChange'));"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import myEvents.EnableChangeEvent; |
| ]]> |
| </fx:Script> |
| |
| <fx:Metadata> |
| [Event(name="enableChange", type="myEvents.EnableChangeEvent")] |
| </fx:Metadata> |
| </s:Button></pre> |
| |
| <p>Once you define the event using the <samp class="codeph">[Event]</samp> metadata |
| tag, you can refer to the event in an MXML file, as the following |
| example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- createcomps_events/MainEventApp.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:MyComp="myComponents.*" > |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import myEvents.EnableChangeEvent; |
| |
| public function |
| enableChangeListener(eventObj:EnableChangeEvent):void { |
| // Handle event. |
| myTA2.text='got event'; |
| } |
| ]]> |
| </fx:Script> |
| |
| <MyComp:MyButton enableChange="myTA.text='got event';" /> |
| <mx:TextArea id="myTA" /> |
| |
| <MyComp:MyButton enableChange="enableChangeListener(event);" /> |
| <mx:TextArea id="myTA2" /> |
| </s:Application></pre> |
| |
| <p>If you do not identify an event with the <samp class="codeph">[Event]</samp> metadata |
| tag, the compiler generates an error if you try to use the event |
| name in MXML. The metadata for events is inherited from the superclass, |
| however, so you do not need to tag events that are already defined |
| with the <samp class="codeph">[Event]</samp> metadata tag in the superclass.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7a33_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7a33_verapache"><!-- --></a> |
| <h3 class="topictitle3">Dispatching an event</h3> |
| |
| |
| <div> |
| <p>You use the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/EventDispatcher.html#disaptchEvent()" target="_blank">dispatchEvent()</a> method |
| to dispatch an event. The <samp class="codeph">dispatchEvent()</samp> method |
| has the following signature:</p> |
| |
| <pre class="codeblock"> public dispatchEvent(event:Event):Boolean</pre> |
| |
| <p>This method requires an argument of the Event type, which is |
| the event object. The <samp class="codeph">dispatchEvent()</samp> method initializes |
| the <samp class="codeph">target</samp> property of the event object with a |
| reference to the component dispatching the event. </p> |
| |
| <p>You can create an event object and dispatch the event in a single |
| statement, as the following example shows:</p> |
| |
| <pre class="codeblock"> dispatchEvent(new Event("click")); </pre> |
| |
| <p>You can also create an event object, initialize it, and then |
| dispatch it, as the following example shows: </p> |
| |
| <pre class="codeblock"> var eventObj:EnableChangeEvent = new EnableChangeEvent("enableChange"); |
| eventObj.isEnabled=true; |
| dispatchEvent(eventObj);</pre> |
| |
| <p>For complete examples that create and dispatch custom events, |
| see <a href="flx_mxmlcomponents_advanced_mxa.html#WS2db454920e96a9e51e63e3d11c0bf69084-7a35_verapache">Advanced MXML |
| components</a> and <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fea_verapache">Create |
| simple visual components in ActionScript</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf67fe7-7ff9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf67fe7-7ff9_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating static constants for the |
| Event.type property</h3> |
| |
| |
| <div> |
| <p>The constructor |
| of an event class typically takes a single required argument that specifies |
| the value of the event object's <samp class="codeph">type</samp> property. |
| In the previous section, you passed the string <samp class="codeph">enableChange</samp> to |
| the constructor, as the following example shows:</p> |
| |
| <pre class="codeblock"> // Define event object, initialize it, then dispatch it. |
| <strong>var eventObj:EnableChangeEvent = new EnableChangeEvent("enableChange");</strong> |
| <strong>dispatchEvent(eventObj);</strong></pre> |
| |
| <p>The Flex compiler does not examine the string passed to the constructor |
| to determine if it is valid. Therefore, the following code compiles, |
| even though <samp class="codeph">enableChangeAgain</samp> might not be a valid |
| value for the <samp class="codeph">type</samp> property:</p> |
| |
| <pre class="codeblock"> var eventObj:EnableChangeEvent = |
| new EnableChangeEvent("enableChangeAgain");</pre> |
| |
| <p>Because the compiler does not check the value of the <samp class="codeph">type</samp> property, |
| the only time that your application can determine if <samp class="codeph">enableChangeAgain</samp> is |
| valid is at run time. </p> |
| |
| <p>However, to ensure that the value of the <samp class="codeph">type</samp> property |
| is valid at compile time, Flex event classes define static constants |
| for the possible values for the <samp class="codeph">type</samp> property. |
| For example, the Flex <a href="https://flex.apache.org/asdoc/mx/events/EffectEvent.html" target="_blank">EffectEvent</a> class |
| defines the following static constant:</p> |
| |
| <pre class="codeblock"> // Define static constant for event type. |
| public static const EFFECT_END:String = "effectEnd";</pre> |
| |
| <p>To create an instance of an EffectEvent class, you use the following |
| constructor:</p> |
| |
| <pre class="codeblock"> var eventObj:EffectEvent = new EffectEvent(EffectEvent.EFFECT_END);</pre> |
| |
| <p>If you incorrectly reference the constant in the constructor, |
| the compiler generates a syntax error because it cannot locate the |
| associated constant. For example, the following constructor generates |
| a syntax error at compile time because <samp class="codeph">MY_EFFECT_END</samp> is |
| not a predefined constant of the EffectEvent class:</p> |
| |
| <pre class="codeblock"> var eventObj:EffectEvent = new EffectEvent(EffectEvent.MY_EFFECT_END);</pre> |
| |
| <p>You can use this technique when you define your event classes. |
| The following example modifies the definition of the EnableChangeEventConst |
| class to include a static constant for the <samp class="codeph">type</samp> property: </p> |
| |
| <pre class="codeblock">package myEvents |
| { |
| //createcomps_events/myEvents/EnableChangeEventConst.as |
| import flash.events.Event; |
| |
| public class EnableChangeEventConst extends Event |
| { |
| // Public constructor. |
| public function EnableChangeEventConst(type:String, |
| isEnabled:Boolean=false) { |
| // Call the constructor of the superclass. |
| super(type); |
| |
| // Set the new property. |
| this.isEnabled = isEnabled; |
| } |
| |
| // Define static constant. |
| public static const ENABLE_CHANGE:String = "myEnable"; |
| |
| // Define a public variable to hold the state of the enable property. |
| public var isEnabled:Boolean; |
| |
| // Override the inherited clone() method. |
| override public function clone():Event { |
| return new EnableChangeEvent(type, isEnabled); |
| } |
| } |
| }</pre> |
| |
| <p>Now you create an instance of the class by using the static constant, |
| as the following example shows for the MyButtonConst custom component:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- createcomps_events\myComponents\MyButtonConst.mxml --> |
| <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| click="dispatchEvent(new EnableChangeEventConst(EnableChangeEventConst.ENABLE_CHANGE));"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import myEvents.EnableChangeEventConst; |
| ]]> |
| </fx:Script> |
| |
| <fx:Metadata> |
| [Event(name="myEnable", type="myEvents.EnableChangeEventConst")] |
| </fx:Metadata> |
| </s:Button></pre> |
| |
| <p>This technique does not preclude you from passing a string to |
| the constructor. </p> |
| |
| <p/> |
| |
| </div> |
| |
| </div> |
| |
| <div> |
| <p><strong>Navigation</strong></p> |
| <p><a href="index.html">Using Flex</a> » <a href="flx_p8a_custom_components.html">Custom components</a></p> |
| </div> |
| |
| <p>Adobe and Adobe Flash Platform are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p> |
| |
| </div> |
| |
| |
| </body> |
| </html> |
