{"id":103,"date":"2010-07-18T10:37:42","date_gmt":"2010-07-18T15:37:42","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=103"},"modified":"2014-03-16T12:52:59","modified_gmt":"2014-03-16T17:52:59","slug":"air-flex-custom-events-in-a-component","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2010\/07\/18\/air-flex-custom-events-in-a-component\/","title":{"rendered":"AIR Flex Custom Events in a Component"},"content":{"rendered":"<p>A common error in creating custom events inside of a component is the dispatching of the event using the event type you have created in the the custom event. <\/p>\n<p>In an application you  may be dealing with events that are solely called from Actionscript and have no UI and event that are part of a UI. <\/p>\n<p>In the case of events that have a UI you may create a component the UI and want to show the event in the code help and as part of the MXML tag. This is where your thinking can get crossed where you think in terms of event types in Actionscript only events.<\/p>\n<p>Consider this custom event.<\/p>\n<pre class=\"brush: as3; highlight: [7]; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage com.who.events\r\n{\r\n\timport flash.events.Event;\r\n\t\r\n\tpublic class MyCustomEvent extends Event\r\n\t{\r\n\t\tpublic static const STOP:String = &quot;com.who.events.MyCustomEvent.stop&quot;;\r\n\t\tpublic function MyCustomEvent(type:String = STOP, bubbles:Boolean=false, cancelable:Boolean=false) \r\n\t\t{\r\n\t\t\tsuper(type, bubbles, cancelable);\r\n\t\t\t\r\n\t\t\t\r\n\t\t}\r\n\t\toverride public function clone():Event \r\n\t\t{\r\n\t\t\treturn new MyCustomEvent(type, bubbles, cancelable);\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>The event type is a package path name giving it a unique name. <\/p>\n<p>To dispatch the event you might use this:<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\"> \r\n...\r\nvar myCustomEvent:MyCustomEvent= new MyCustomEvent(MyCustomEvent.STOP);\r\ndispatchEvent(mainViewCallEvent);\r\n...\r\n<\/pre>\n<p>This is the same as <\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\t\r\n...\t\r\nvar myCustomEvent:MyCustomEvent= new MyCustomEvent(&quot;com.who.events.MyCustomEvent.stop&quot;);\r\ndispatchEvent(mainViewCallEvent);\r\n...\r\n<\/pre>\n<p>The code for listening to the event would be<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\t\r\n...\t\t\t\r\ncomponentId.addEventListener(MyCustomEvent.STOP, eventHandlerMethodName,true,0,true);\r\n...\r\n<\/pre>\n<p>Now you want include the event so it is part of the MXML of a component:<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n...\r\n\t&lt;fx:Metadata&gt;\r\n\t\t&#x5B;Event(name=&quot;stop&quot;, type=&quot;com.who.events.MyCustomEvent&quot;)] \r\n\t\t\r\n\t&lt;\/fx:Metadata&gt;\r\n...\r\n<\/pre>\n<p>The name can be anything you want but the inclination is to use the name appended to the end of the type in the custom event class. In this case stop.  However the event will not longer be seen. The fix is to change the creation of the event instance for dispatching.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n...\t\t\r\nvar myCustomEvent:MyCustomEvent= new MyCustomEvent(&quot;stop&quot;);\r\ndispatchEvent(mainViewCallEvent);\r\n...\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A common error in creating custom events inside of a component is the dispatching of the event using the event type you have created in the the custom event. In an application you may be dealing with events that are solely called from Actionscript and have no UI and event that are part of a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[12,9],"class_list":["post-103","post","type-post","status-publish","format-standard","hentry","category-general","tag-air-adobe-integrated-runtime","tag-flex"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":24,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":3316,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/103\/revisions\/3316"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}