<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blue Flex &#187; custom events</title>
	<atom:link href="http://kennethsutherland.com/tag/custom-events/feed/" rel="self" type="application/rss+xml" />
	<link>http://kennethsutherland.com</link>
	<description>Flex with a hint of cool</description>
	<lastBuildDate>Wed, 28 Sep 2011 14:12:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>Simple tip #1 &#8211; custom events</title>
		<link>http://kennethsutherland.com/2009/05/22/simple-tip-1-custom-events/</link>
		<comments>http://kennethsutherland.com/2009/05/22/simple-tip-1-custom-events/#comments</comments>
		<pubDate>Fri, 22 May 2009 13:13:41 +0000</pubDate>
		<dc:creator>Kenneth</dc:creator>
				<category><![CDATA[actionscript]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[actionscript 3]]></category>
		<category><![CDATA[custom events]]></category>
		<category><![CDATA[events]]></category>

		<guid isPermaLink="false">http://kennethsutherland.com/?p=332</guid>
		<description><![CDATA[Today while coding I was creating some classes that required them to dispatch custom events. I know that this is a fairly common thing to do but sometimes it is these little things that can trip you up or take a while to find out how to do them. So I thought that each time [...]]]></description>
			<content:encoded><![CDATA[<p>Today while coding I was creating some classes that required them to dispatch custom events. I know that this is a fairly common thing to do but sometimes it is these little things that can trip you up or take a while to find out how to do them.</p>
<p>So I thought that each time I come across something that is &#8216;simple&#8217; (only simple after you know it!) that I&#8217;ll try to create a quick blog entry and take note of it.  Each time I create a new &#8216;tip&#8217; post I&#8217;ll link it to the previous/next tip so that it will be quick and easy to browse through a load of tips.<br />
 </p>
<h4>Tip #1</h4>
<p>So for my first tip, this is how to implement your own custom events.</p>
<p>First if you are firing the events from a custom MXML file then you need to create a metadata tag. I make this the first node inside the MXML file.  For example:</p>
<p> </p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Canvas</span> xmlns:mx=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span></span>
<span style="color: #000000;">		width=<span style="color: #ff0000;">&quot;500&quot;</span></span>
<span style="color: #000000;">		height=<span style="color: #ff0000;">&quot;300&quot;</span></span>
<span style="color: #000000;">		<span style="color: #7400FF;">&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Metadata</span><span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- </span>
<span style="color: #000000;">First two event are plain string events, they do not pass any specific data with them --&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- </span>
<span style="color: #000000;">The last event is a custom class that extends Event and as such you need to give</span>
<span style="color: #000000;">it its package name + the class name as the type --&gt;</span></span>
	[Event('next')]
	[Event('previous')]
	[Event(name='jump', type='com.kennethsutherland.events.JumpEvent')]
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Metadata</span><span style="color: #7400FF;">&gt;</span></span>
...</pre></div></div>

<p>If your custom class is an AS3 file then you would put something like the following are the imports</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #000000;">&#91;</span><span style="color: #004993;">Event</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">name</span>=<span style="color: #990000;">&quot;previous&quot;</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">type</span>=<span style="color: #990000;">&quot;flash.events.Event&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span>
<span style="color: #000000;">&#91;</span><span style="color: #004993;">Event</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">name</span>=<span style="color: #990000;">'jump'</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">type</span>=<span style="color: #990000;">'com.kennethsutherland.events.JumpEvent'</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span></pre></div></div>

<p>Then inside the MXML file (script block) or anywhere in the AS3 file to fire the event I&#8217;d do the following:<br />
 </p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">//custom event, the extra value is handled by the JumpEvent class</span>
<span style="color: #004993;">dispatchEvent</span><span style="color: #000000;">&#40;</span><span style="color: #0033ff; font-weight: bold;">new</span> JumpEvent<span style="color: #000000;">&#40;</span><span style="color: #990000;">&quot;jump&quot;</span><span style="color: #000066; font-weight: bold;">,</span> specificValueForTheJumpEventClass<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #009900; font-style: italic;">//standard event</span>
<span style="color: #004993;">dispatchEvent</span><span style="color: #000000;">&#40;</span><span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Event</span><span style="color: #000000;">&#40;</span><span style="color: #990000;">&quot;next&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></pre></div></div>

<p>If you do the above and lets just say your MXML/AS file is called &#8216;GreatComponent&#8217; then in order to use the new custom event, its as simple as the below bit of code. </p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;"><span style="color: #7400FF;">&lt;local:GreatComponent</span></span>
<span style="color: #000000;">    next=<span style="color: #ff0000;">&quot;doSomething()&quot;</span></span>
<span style="color: #000000;">    jump=<span style="color: #ff0000;">&quot;doSomethingElse(event)&quot;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">/&gt;</span></span></pre></div></div>

<p>That&#8217;s it, now you can fire of any custom event that you wish and make sure that it gets listened to. </p>
<table width="100%">
<tr>
<td>
<p style="text-align: left;">
</td>
<td>
<p style="text-align: right;">
<a title="Simple tip #2" href="http://kennethsutherland.com/2009/06/12/simple-tip-2-random-colours/" target="_self">Next Tip<br />
</a>
</p>
</td>
</tr>
</table>
<p>  </p>
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "pub-7396620608505330";
google_ad_slot = "1277482570";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
]]></content:encoded>
			<wfw:commentRss>http://kennethsutherland.com/2009/05/22/simple-tip-1-custom-events/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

