<?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/"
	xmlns:series="http://unfoldingneurons.com/"
	>

<channel>
	<title>AaronHardy.com &#187; Flex</title>
	<atom:link href="http://aaronhardy.com/category/flex/feed/" rel="self" type="application/rss+xml" />
	<link>http://aaronhardy.com</link>
	<description>For all your Aaron Hardy needs.</description>
	<lastBuildDate>Thu, 12 Jan 2012 17:51:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Speaking on JavaScript at 360&#124;Flex 2012</title>
		<link>http://aaronhardy.com/flex/speaking-on-javascript-at-360flex-2012/</link>
		<comments>http://aaronhardy.com/flex/speaking-on-javascript-at-360flex-2012/#comments</comments>
		<pubDate>Wed, 21 Dec 2011 05:14:19 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[360|Flex]]></category>
		<category><![CDATA[conference]]></category>
		<category><![CDATA[speaker]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=1154</guid>
		<description><![CDATA[It&#8217;s almost time for another 360&#124;Flex conference! This conference will be held in Denver, Colorado, April 15-18, 2012. Get your tickets fast while discounts are available! It&#8217;s always a huge opportunity to learn new things and get in touch and have fun with the community. I&#8217;ve accepted the honor of speaking at this year&#8217;s conference [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s almost time for another <a href="http://www.360flex.com/" target="_blank">360|Flex</a> conference! This conference will be held in Denver, Colorado, April 15-18, 2012.  Get your tickets fast while discounts are available! It&#8217;s always a huge opportunity to learn new things and get in touch and have fun with the community.</p>
<p>I&#8217;ve accepted the honor of speaking at this year&#8217;s conference and will be speaking on JavaScript on Wednesday at 10:50am.  As you probably know, the Adobe community has really been shaken up over the last few months.  Adobe&#8217;s position on Flash and Flex has morphed and many engineers are taking a closer look at other technologies.  While JavaScript holds a stigma of being a red-headed step-child from the same orphanage as ActionScript 1, many see it as the inevitable future of the web.  While the language hasn&#8217;t evolved much, libraries and patterns have shaped up to help provide an environment conducive to building robust, dynamic enterprise apps.  We&#8217;ll discuss these libraries and patterns, learn how they relate to Flex, and make a comfortable home away from home.</p>
<p>Many of the concepts will be pulled from the <a href="/javascript/javascript-architecture-the-basics/" target="_blank">JavaScript architecture series</a> I recently started. Also, while I am a software engineer at Adobe, my thoughts are my own and do not represent those of Adobe.</p>
]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/speaking-on-javascript-at-360flex-2012/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Macrobot: Macro Commands For Robotlegs</title>
		<link>http://aaronhardy.com/flex/macrobot-macro-commands-for-robotlegs/</link>
		<comments>http://aaronhardy.com/flex/macrobot-macro-commands-for-robotlegs/#comments</comments>
		<pubDate>Thu, 30 Jun 2011 03:27:05 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[batch]]></category>
		<category><![CDATA[command]]></category>
		<category><![CDATA[extension]]></category>
		<category><![CDATA[macro]]></category>
		<category><![CDATA[parallel]]></category>
		<category><![CDATA[RobotLegs]]></category>
		<category><![CDATA[sequence]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=990</guid>
		<description><![CDATA[Robotlegs is a fantastic micro-architecture for ActionScript. One pattern used with Robotlegs is the command pattern. Commands are generally short-lived objects that execute a segment of code in response to an event. By encapsulating code in a command, you can maintain low coupling in your app (the view and the command don&#8217;t need to be [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://robotlegs.org" target="_blank">Robotlegs</a> is a fantastic micro-architecture for <a href="http://en.wikipedia.org/wiki/ActionScript" target="_blank">ActionScript</a>.  One pattern used with Robotlegs is the command pattern. Commands are generally short-lived objects that execute a segment of code in response to an event.  By encapsulating code in a command, you can maintain low coupling in your app (the view and the command don&#8217;t need to be aware of each other) and reduce duplicate code. See the <a href="https://github.com/robotlegs/robotlegs-framework/wiki/Best-Practices" target="_blank">Robotlegs Best Practices</a> page for more info regarding commands.</p>
<p>You may run into situations where you wish to batch commands.  Macrobot simplifies this process and provides two ways to batch commands:</p>
<p><b>Sequence:</b> The batch of commands will be executed in order.  The second command will not be executed until the first is complete, the third command will not be executed until the second is complete, and so on.  The batch will not be complete until all its commands are complete.</p>
<p><b>Parallel:</b> The batch of commands will be executed as quickly as possible without respect to completion of any of the other commands.  The commands may complete out-of-order.  The batch as a whole will not be complete until all its commands are complete.<span id="more-990"></span></p>
<p>To create a macro command, extend one of the two macro command classes Macrobot provides: <i>SequenceCommand</i> or <i>ParallelCommand</i>.  Add subcommands by calling either <i>addCommand()</i> or <i>addCommandInstance()</i>.  <i>addCommand()</i> lets you specify a command class and a payload (such as an event).  At the appropriate time, the command instance will be created, the payload injected, and the command executed.  This automated process of instantiation, injection, and execution is very similar to how commands are normally prepared and executed in Robotlegs.  <i>addCommandInstance()</i>, on the other hand, allows you to add a command you have already instantiated and prepared yourself.</p>
<p>Here&#8217;s an example of how a macro command might look (in this case, sequential):</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MyMacroCommand <span style="color: #0066CC;">extends</span> SequenceCommand
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> MyMacroCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #808080; font-style: italic;">// Commands for Macrobot to prepare before execution.</span>
		addCommand<span style="color: #66cc66;">&#40;</span>CommandA, <span style="color: #000000; font-weight: bold;">new</span> MyEvent<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
		addCommand<span style="color: #66cc66;">&#40;</span>CommandB, <span style="color: #000000; font-weight: bold;">new</span> MyEvent<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
		addCommand<span style="color: #66cc66;">&#40;</span>CommandC, <span style="color: #000000; font-weight: bold;">new</span> MyEvent<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #808080; font-style: italic;">// Custom-prepared commands.</span>
		<span style="color: #000000; font-weight: bold;">var</span> command:Command = <span style="color: #000000; font-weight: bold;">new</span> CommandD<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		command.<span style="color: #006600;">event</span> = <span style="color: #000000; font-weight: bold;">new</span> MyEvent<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		addCommandInstance<span style="color: #66cc66;">&#40;</span>command<span style="color: #66cc66;">&#41;</span>;
&nbsp;
		command = <span style="color: #000000; font-weight: bold;">new</span> CommandE<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		command.<span style="color: #006600;">event</span> = <span style="color: #000000; font-weight: bold;">new</span> MyEvent<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		addCommandInstance<span style="color: #66cc66;">&#40;</span>command<span style="color: #66cc66;">&#41;</span>;
&nbsp;
		command = <span style="color: #000000; font-weight: bold;">new</span> CommandF<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		command.<span style="color: #006600;">event</span> = <span style="color: #000000; font-weight: bold;">new</span> MyEvent<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		addCommandInstance<span style="color: #66cc66;">&#40;</span>command<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<h2>Asynchronous Commands</h2>
<p>While Macrobot can be used to execute solely synchronous commands, it may come in handy to execute commands that are asynchronous, that is, the command is not deemed complete until a later time.  The command may need to wait for a response from the server or for user interaction before being marked complete.  In this case, your subcommands can extend from Macrobot&#8217;s <i>AsyncCommand</i> and call <i>dispatchComplete()</i> once the subcommand should be deemed complete. <i>dispatchComplete()</i> receives a single parameter which reports whether the subcommand completed successfully.  The importance of this distinction will become clearer when we discuss atomic execution below. Here&#8217;s an example of a simulated asynchronous subcommand:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MyCommandWhichHappensToBeASubcommand <span style="color: #0066CC;">extends</span> AsyncCommand
<span style="color: #66cc66;">&#123;</span>
	protected <span style="color: #000000; font-weight: bold;">var</span> timer:Timer;
&nbsp;
	override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> execute<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
	<span style="color: #66cc66;">&#123;</span>
		timer = <span style="color: #000000; font-weight: bold;">new</span> Timer<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">50</span>, <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>;
		timer.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>TimerEvent.<span style="color: #006600;">TIMER_COMPLETE</span>, timerCompleteHandler<span style="color: #66cc66;">&#41;</span>;
		timer.<span style="color: #0066CC;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
&nbsp;
	protected <span style="color: #000000; font-weight: bold;">function</span> timerCompleteHandler<span style="color: #66cc66;">&#40;</span>event:TimerEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
	<span style="color: #66cc66;">&#123;</span>
		timer.<span style="color: #006600;">removeEventListener</span><span style="color: #66cc66;">&#40;</span>TimerEvent.<span style="color: #006600;">TIMER_COMPLETE</span>, timerCompleteHandler<span style="color: #66cc66;">&#41;</span>;
		timer = <span style="color: #000000; font-weight: bold;">null</span>;
		dispatchComplete<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<h2>Atomic Execution</h2>
<p>In our first example, subcommands A-F would all be executed by default.  However, the <i>atomic</i> property can be set to false (it&#8217;s true by default) to modify this behavior.  If atomic is set to false and at least one of the subcommands dispatches a failure (using <i>dispatchComplete(false)</i>), subsequent subcommands will not be executed and the macro command itself will dispatch failure.  The concept of atomic execution does not apply to parallel commands.</p>
<h2>Command Nesting</h2>
<p>If you want, you can get crazy and nest your macro commands.  Take this as an example:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MyMacroCommand <span style="color: #0066CC;">extends</span> SequenceCommand
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> MyMacroCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
			addCommand<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandA<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> parallel1:ParallelCommand = <span style="color: #000000; font-weight: bold;">new</span> ParallelCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			parallel1.<span style="color: #006600;">addCommandInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandB<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
			parallel1.<span style="color: #006600;">addCommandInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandC<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
			addCommandInstance<span style="color: #66cc66;">&#40;</span>parallel1<span style="color: #66cc66;">&#41;</span>;
&nbsp;
			addCommandInstance<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandD<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> parallel2:ParallelCommand = <span style="color: #000000; font-weight: bold;">new</span> ParallelCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			parallel2.<span style="color: #006600;">addCommandInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandE<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> sequence:SequenceCommand = <span style="color: #000000; font-weight: bold;">new</span> SequenceCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			sequence.<span style="color: #006600;">atomic</span> = <span style="color: #000000; font-weight: bold;">false</span>;
			sequence.<span style="color: #006600;">addCommandInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandF<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
			sequence.<span style="color: #006600;">addCommandInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandG<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			parallel2.<span style="color: #006600;">addCommandInstance</span><span style="color: #66cc66;">&#40;</span>sequence<span style="color: #66cc66;">&#41;</span>;
			parallel2.<span style="color: #006600;">addCommandInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandH<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
			parallel2.<span style="color: #006600;">addCommandInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandI<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
			addCommandInstance<span style="color: #66cc66;">&#40;</span>parallel2<span style="color: #66cc66;">&#41;</span>;
&nbsp;
			addCommandInstance<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CommandJ<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>The overall execution structure of this example looks like this:</p>
<ul>
<li>sequence</li>
<ul>
<li>command A</li>
<li>parallel</li>
<ul>
<li>command B</li>
<li>command C</li>
</ul>
<li>command D</li>
<li>parallel</li>
<ul>
<li>command E</li>
<li>sequence</li>
<ul>
<li>command F</li>
<li>command G</li>
</ul>
<li>command H</li>
<li>command I</li>
</ul>
<li>command J</li>
</ul>
</ul>
<p>Sequential, parallel, and atomic rules apply as you would expect.</p>
<h2>Tests</h2>
<p>Macrobot comes with a full suite of tests to make sure everything is squeaky clean.</p>
<h2>Feedback</h2>
<p>If you have any questions or comments regarding Macrobot, please post a comment below!</p>
<div class="goodies"><a href="https://github.com/Aaronius/robotlegs-utilities-Macrobot/zipball/master" target="_blank">Download Source (zip)</a><a href="https://github.com/Aaronius/robotlegs-utilities-Macrobot" target="_blank">Fork Project</a><br class="break"></div>
]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/macrobot-macro-commands-for-robotlegs/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Spark ProgressBar</title>
		<link>http://aaronhardy.com/flex/spark-progressbar/</link>
		<comments>http://aaronhardy.com/flex/spark-progressbar/#comments</comments>
		<pubDate>Fri, 25 Feb 2011 04:34:00 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[progress bar]]></category>
		<category><![CDATA[skin]]></category>
		<category><![CDATA[spark]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=921</guid>
		<description><![CDATA[Here&#8217;s a Spark-based progress bar. This component provides the ability to set an &#8220;event source&#8221; like a URLLoader. When the event source dispatches progress events, the progress bar will automatically update. On the other hand, if you don&#8217;t need automatic updating from an event source and just want to set a min, max, and current [...]]]></description>
			<content:encoded><![CDATA[<p>Here&#8217;s a Spark-based progress bar.  This component provides the ability to set an &#8220;event source&#8221; like a URLLoader.  When the event source dispatches progress events, the progress bar will automatically update.  On the other hand, if you don&#8217;t need automatic updating from an event source and just want to set a min, max, and current value, you really don&#8217;t need this component. Instead, you can use the Range component that comes with the Flex SDK and skin it just like this one is skinned.  Right click the app to view the source.  Enjoy!</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_ProgressBarApp_1331265304"
			class="flashmovie"
			width="100%"
			height="200">
	<param name="movie" value="/samples/progressbar/ProgressBarApp.swf" />
	<param name="base" value="/samples/progressbar/" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/samples/progressbar/ProgressBarApp.swf"
			name="fm_ProgressBarApp_1331265304"
			width="100%"
			height="200">
		<param name="base" value="/samples/progressbar/" />
	<!--<![endif]-->
		
<p><a href="http://adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<div class="goodies"><a href="https://github.com/Aaronius/ProgressBar" target="_blank">Fork Project</a><br class="break"></div>
]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/spark-progressbar/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>IndexableList: Indexing For Faster Lookup</title>
		<link>http://aaronhardy.com/flex/indexablelist-indexing-for-faster-lookup/</link>
		<comments>http://aaronhardy.com/flex/indexablelist-indexing-for-faster-lookup/#comments</comments>
		<pubDate>Sat, 05 Feb 2011 21:12:58 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[ArrayCollection]]></category>
		<category><![CDATA[ArrayList]]></category>
		<category><![CDATA[IList]]></category>
		<category><![CDATA[index]]></category>
		<category><![CDATA[IndexableList]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=911</guid>
		<description><![CDATA[In my last post, Collections And Chaining For Separate Presentation, I mentioned a few data structures for holding a group of objects. These are great for their purpose but sometimes they can be enhanced for a particular project. In this post, I&#8217;ll show you a great way to maintain a custom index for a group [...]]]></description>
			<content:encoded><![CDATA[<p>In my last post, <a href="http://aaronhardy.com/flex/collections-and-chaining-for-separate-presentation/">Collections And Chaining For Separate Presentation</a>, I mentioned a few data structures for holding a group of objects.  These are great for their purpose but sometimes they can be enhanced for a particular project.  In this post, I&#8217;ll show you a great way to maintain a custom index for a group of items for easy and efficient lookup.<span id="more-911"></span></p>
<p>In most every project I have a bunch of value objects that I need to access frequently by ID or some other property they might have.  There are a million different ways of doing so, but let&#8217;s look at some of the ways it could be done:</p>
<p>Whenever I need to find an object, I could loop through all the objects in the ArrayCollection, finding the one with the matching ID.  Something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> matchingWidget:Widget;
<span style="color: #b1b100;">for</span> <span style="color: #b1b100;">each</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> widget:Widget <span style="color: #b1b100;">in</span> widgets<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>widget.<span style="color: #006600;">id</span> == idToMatch<span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		matchingWidget = widget;
		<span style="color: #b1b100;">break</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
<span style="color: #808080; font-style: italic;">// Do what I need to do with the widget</span></pre></div></div>

<p>First of all, I really don&#8217;t want to be doing this in all the various classes where I need to find a widget with a particular ID.  It&#8217;s duplicate code all over the place.  Maybe I have a model that&#8217;s generally accessible throughout the application that contains my ArrayCollection.  I could put a function there instead:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">ArrayCollection</span>;
&nbsp;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> AppModel
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> widgets:ArrayCollection;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getWidgetById<span style="color: #66cc66;">&#40;</span>id:uint<span style="color: #66cc66;">&#41;</span>:Widget
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">for</span> <span style="color: #b1b100;">each</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> widget:Widget <span style="color: #b1b100;">in</span> widgets<span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>widget.<span style="color: #006600;">id</span> == id<span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#123;</span>
					<span style="color: #b1b100;">return</span> widget;
				<span style="color: #66cc66;">&#125;</span>
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Now all our various classes can use this single function.  That&#8217;s a step up, but we&#8217;re still potentially looping through a lot of widgets each time we want to find one with a particular ID.</p>
<p>What if we used a dictionary to index the widgets by ID?  Something like this&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">Dictionary</span>;
&nbsp;
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">ArrayCollection</span>;
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">events</span>.<span style="color: #006600;">CollectionEvent</span>;
&nbsp;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> AppModel
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _widgets:ArrayCollection;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> widgets<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:ArrayCollection
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> _widgets;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> widgets<span style="color: #66cc66;">&#40;</span>value:ArrayCollection<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>_widgets <span style="color: #66cc66;">!</span>= value<span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #000000; font-weight: bold;">var</span> widget:Widget;
&nbsp;
				<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>_widgets<span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#123;</span>
					_widgets.<span style="color: #006600;">removeEventListener</span><span style="color: #66cc66;">&#40;</span>CollectionEvent.<span style="color: #006600;">COLLECTION_CHANGE</span>, 
							widgets_collectionChangeHandler<span style="color: #66cc66;">&#41;</span>;
&nbsp;
					<span style="color: #b1b100;">for</span> <span style="color: #b1b100;">each</span> <span style="color: #66cc66;">&#40;</span>widget <span style="color: #b1b100;">in</span> _widgets<span style="color: #66cc66;">&#41;</span>
					<span style="color: #66cc66;">&#123;</span>
						removeWidgetFromIndex<span style="color: #66cc66;">&#40;</span>widget<span style="color: #66cc66;">&#41;</span>;
					<span style="color: #66cc66;">&#125;</span>
				<span style="color: #66cc66;">&#125;</span>
&nbsp;
				_widgets = value;
&nbsp;
				<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>_widgets<span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#123;</span>
					_widgets.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>CollectionEvent.<span style="color: #006600;">COLLECTION_CHANGE</span>, 
							widgets_collectionChangeHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
					<span style="color: #b1b100;">for</span> <span style="color: #b1b100;">each</span> <span style="color: #66cc66;">&#40;</span>widget <span style="color: #b1b100;">in</span> _widgets<span style="color: #66cc66;">&#41;</span>
					<span style="color: #66cc66;">&#123;</span>
						addWidgetFromIndex<span style="color: #66cc66;">&#40;</span>widget<span style="color: #66cc66;">&#41;</span>;
					<span style="color: #66cc66;">&#125;</span>
				<span style="color: #66cc66;">&#125;</span>
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">var</span> widgetById:Dictionary = <span style="color: #000000; font-weight: bold;">new</span> Dictionary<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">function</span> removeWidgetFromIndex<span style="color: #66cc66;">&#40;</span>widget:Widget<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">delete</span> widgetById<span style="color: #66cc66;">&#91;</span>widget.<span style="color: #006600;">id</span><span style="color: #66cc66;">&#93;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">function</span> addWidgetToIndex<span style="color: #66cc66;">&#40;</span>widget:Widget<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			widgetById<span style="color: #66cc66;">&#91;</span>widget.<span style="color: #006600;">id</span><span style="color: #66cc66;">&#93;</span> = widget;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getWidgetById<span style="color: #66cc66;">&#40;</span>id:uint<span style="color: #66cc66;">&#41;</span>:Widget
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> widgetById<span style="color: #66cc66;">&#91;</span>id<span style="color: #66cc66;">&#93;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">function</span> widgets_collectionChangeHandler<span style="color: #66cc66;">&#40;</span>event:CollectionEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #808080; font-style: italic;">// All the various logic to update the dictionary when the</span>
			<span style="color: #808080; font-style: italic;">// collection changes using the info contained in the event.</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>This is generally going to be more efficient, but that&#8217;s a lot of boilerplate and it&#8217;s a pain to keep the dictionary updated.  I didn&#8217;t even bother writing out the code for handling a collection change event because it&#8217;s a laborious chore to do it right.  It gets nigh unto impossible if you also want to track changes to the property you&#8217;re indexing on like if you wanted to make sure your dictionary was updated when a widget&#8217;s ID changes.  Doing so doesn&#8217;t really make any sense when we&#8217;re talking about IDs but it&#8217;s quite likely on another property like maybe mode, color, type, or some other property that&#8217;s likely to change.  That&#8217;s a whole different discussion though so let&#8217;s get back to the story.</p>
<p>Wouldn&#8217;t it be nice if there was an easier way?  There is&#8211;it&#8217;s called IndexableList.  IndexableList implements IList so it&#8217;s eligible to be a data provider for data provider components like List, DataGroup, etc.  It gives you all the capabilities of ArrayList but instead of extending ArrayList it wraps ArrayList and extends Proxy to give you for&#8230;each iteration power.  The best part is it&#8217;s much easier to maintain any custom indexes and accessors by extending it and overriding the addToIndex() and removeFromIndex() functions like so:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package com.<span style="color: #006600;">aaronhardy</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">Dictionary</span>;
&nbsp;
	<span style="color: #808080; font-style: italic;">/**
	 * A list with accessors to its contained objects by id.
	 */</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> IdIndexedList <span style="color: #0066CC;">extends</span> IndexableList
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> IdIndexedList<span style="color: #66cc66;">&#40;</span>source:<span style="color: #0066CC;">Array</span>=<span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">super</span><span style="color: #66cc66;">&#40;</span>source<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">var</span> objectById:Dictionary = <span style="color: #000000; font-weight: bold;">new</span> Dictionary<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Retrieves an object by id.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getById<span style="color: #66cc66;">&#40;</span>id:uint<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Object</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> objectById<span style="color: #66cc66;">&#91;</span>id<span style="color: #66cc66;">&#93;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Retrieves an object's index by id.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getIndexById<span style="color: #66cc66;">&#40;</span>id:uint<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> getItemIndex<span style="color: #66cc66;">&#40;</span>getById<span style="color: #66cc66;">&#40;</span>id<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override protected <span style="color: #000000; font-weight: bold;">function</span> addToIndex<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">super</span>.<span style="color: #006600;">addToIndex</span><span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>item.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'id'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				objectById<span style="color: #66cc66;">&#91;</span>item<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'id'</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span> = item;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override protected <span style="color: #000000; font-weight: bold;">function</span> removeFromIndex<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">super</span>.<span style="color: #006600;">removeFromIndex</span><span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>item.<span style="color: #006600;">hasOwnProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'id'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #0066CC;">delete</span> objectById<span style="color: #66cc66;">&#91;</span>item<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'id'</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Now we have a generic list of objects that is indexed by ID and we don&#8217;t have to deal with CollectionEvents to update our indexes.  To get an object by ID I call myItems.getById(id).  I could likewise implement getByColor(), getByType(), or getByWhatever().</p>
<p>Here&#8217;s the code for IndexableList:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package com.<span style="color: #006600;">aaronhardy</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">Event</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">EventDispatcher</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">IEventDispatcher</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">Proxy</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">flash_proxy</span>;
&nbsp;
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">ArrayList</span>;
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">IList</span>;
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">events</span>.<span style="color: #006600;">CollectionEvent</span>;
&nbsp;
	<span style="color: #66cc66;">&#91;</span>Event<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">name</span>=<span style="color: #ff0000;">&quot;collectionChange&quot;</span>, <span style="color: #0066CC;">type</span>=<span style="color: #ff0000;">&quot;mx.events.CollectionEvent&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
&nbsp;
	<span style="color: #808080; font-style: italic;">/**
	 * A list with easily overridable functions for adding and removing items from indexes.
	 * This is generally extended to provide effecient accessors to objects by using indexes.
	 * @see http://aaronhardy.com
	 */</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> IndexableList <span style="color: #0066CC;">extends</span> Proxy <span style="color: #0066CC;">implements</span> IEventDispatcher, IList
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> IndexableList<span style="color: #66cc66;">&#40;</span>source:<span style="color: #0066CC;">Array</span> = <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			dispatcher = <span style="color: #000000; font-weight: bold;">new</span> EventDispatcher<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">source</span> = source;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _list:IList
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> <span style="color: #0066CC;">list</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:IList
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> _list;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> <span style="color: #0066CC;">list</span><span style="color: #66cc66;">&#40;</span>value:IList<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>_list <span style="color: #66cc66;">!</span>= value<span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #000000; font-weight: bold;">var</span> item:<span style="color: #0066CC;">Object</span>;
&nbsp;
				<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>_list<span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#123;</span>
					_list.<span style="color: #006600;">removeEventListener</span><span style="color: #66cc66;">&#40;</span>CollectionEvent.<span style="color: #006600;">COLLECTION_CHANGE</span>, 
						list_collectionChangeHandler<span style="color: #66cc66;">&#41;</span>;
&nbsp;
				<span style="color: #66cc66;">&#125;</span>
&nbsp;
				<span style="color: #b1b100;">for</span> <span style="color: #b1b100;">each</span> <span style="color: #66cc66;">&#40;</span>item <span style="color: #b1b100;">in</span> <span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#123;</span>
					removeFromIndex<span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
				<span style="color: #66cc66;">&#125;</span>
&nbsp;
				_list = value;
&nbsp;
				<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>_list<span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#123;</span>
					_list.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>CollectionEvent.<span style="color: #006600;">COLLECTION_CHANGE</span>, 
						list_collectionChangeHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
				<span style="color: #66cc66;">&#125;</span>
&nbsp;
				<span style="color: #b1b100;">for</span> <span style="color: #b1b100;">each</span> <span style="color: #66cc66;">&#40;</span>item <span style="color: #b1b100;">in</span> <span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#123;</span>
					addToIndex<span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
				<span style="color: #66cc66;">&#125;</span>
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> source<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Array</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">list</span> <span style="color: #66cc66;">&amp;&amp;</span> <span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">list</span> is ArrayList<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #b1b100;">return</span> ArrayList<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">list</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">source</span>;
			<span style="color: #66cc66;">&#125;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">null</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 *  @private
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> source<span style="color: #66cc66;">&#40;</span>s:<span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">list</span> = <span style="color: #000000; font-weight: bold;">new</span> ArrayList<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> <span style="color: #0066CC;">length</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">list</span> ? <span style="color: #0066CC;">list</span>.<span style="color: #0066CC;">length</span> : <span style="color: #cc66cc;">0</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> addItem<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			addItemAt<span style="color: #66cc66;">&#40;</span>item, <span style="color: #0066CC;">length</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> addItemAt<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span>, <span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">list</span>.<span style="color: #006600;">addItemAt</span><span style="color: #66cc66;">&#40;</span>item, <span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span>;
			addToIndex<span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getItemAt<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span>, prefetch:<span style="color: #0066CC;">int</span> = <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Object</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">list</span>.<span style="color: #006600;">getItemAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>, prefetch<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getItemIndex<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">list</span>.<span style="color: #006600;">getItemIndex</span><span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> itemUpdated<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span>, property:<span style="color: #0066CC;">Object</span> = <span style="color: #000000; font-weight: bold;">null</span>, 
			oldValue:<span style="color: #0066CC;">Object</span> = <span style="color: #000000; font-weight: bold;">null</span>, newValue:<span style="color: #0066CC;">Object</span> = <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">list</span>.<span style="color: #006600;">itemUpdated</span><span style="color: #66cc66;">&#40;</span>item, property, oldValue, newValue<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> removeAll<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i:uint; i <span style="color: #66cc66;">&lt;</span> <span style="color: #0066CC;">list</span>.<span style="color: #0066CC;">length</span>; i++<span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				removeFromIndex<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">list</span>.<span style="color: #006600;">getItemAt</span><span style="color: #66cc66;">&#40;</span>i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			<span style="color: #0066CC;">list</span>.<span style="color: #006600;">removeAll</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> removeItemAt<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Object</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> item:<span style="color: #0066CC;">Object</span> = <span style="color: #0066CC;">list</span>.<span style="color: #006600;">removeItemAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span>;
			removeFromIndex<span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #b1b100;">return</span> item;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Removes an item from the list.  Throws an error if the item doesn't exist.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> removeItem<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			removeItemAt<span style="color: #66cc66;">&#40;</span>getItemIndex<span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> setItemAt<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span>, <span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Object</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> previous:<span style="color: #0066CC;">Object</span> = <span style="color: #0066CC;">list</span>.<span style="color: #006600;">setItemAt</span><span style="color: #66cc66;">&#40;</span>item, <span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span>;
			removeFromIndex<span style="color: #66cc66;">&#40;</span>previous<span style="color: #66cc66;">&#41;</span>;
			addToIndex<span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #b1b100;">return</span> previous;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> toArray<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Array</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">list</span>.<span style="color: #006600;">toArray</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @private
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> list_collectionChangeHandler<span style="color: #66cc66;">&#40;</span>event:CollectionEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			dispatchEvent<span style="color: #66cc66;">&#40;</span>event<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">////////////////////////////////////////////////</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">// Overrides of proxy to provide for...each support.</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> deleteProperty<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">name</span>:<span style="color: #66cc66;">*</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">false</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">name</span>:<span style="color: #66cc66;">*</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #66cc66;">*</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">null</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> hasProperty<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">name</span>:<span style="color: #66cc66;">*</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">true</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> nextNameIndex<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&lt;</span> <span style="color: #0066CC;">length</span> ? <span style="color: #0066CC;">index</span> + <span style="color: #cc66cc;">1</span> : <span style="color: #cc66cc;">0</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> nextName<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">String</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span> - <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">toString</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> nextValue<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #66cc66;">*</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> getItemAt<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span> - <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">////////////////////////////////////////////////</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> dispatcher:EventDispatcher;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> addEventListener<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span>:<span style="color: #0066CC;">String</span>, listener:<span style="color: #000000; font-weight: bold;">Function</span>, useCapture:<span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>, 
			priority:<span style="color: #0066CC;">int</span> = <span style="color: #cc66cc;">0</span>, useWeakReference:<span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span>
			dispatcher.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span>, listener, useCapture, priority<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> dispatchEvent<span style="color: #66cc66;">&#40;</span>evt:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> dispatcher.<span style="color: #006600;">dispatchEvent</span><span style="color: #66cc66;">&#40;</span>evt<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> hasEventListener<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span>:<span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> dispatcher.<span style="color: #006600;">hasEventListener</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> removeEventListener<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span>:<span style="color: #0066CC;">String</span>, listener:<span style="color: #000000; font-weight: bold;">Function</span>, 
			useCapture:<span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span>
			dispatcher.<span style="color: #006600;">removeEventListener</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span>, listener, useCapture<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> willTrigger<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span>:<span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> dispatcher.<span style="color: #006600;">willTrigger</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">////////////////////////////////////////////////</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Adds an item to any indexes.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> addToIndex<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #808080; font-style: italic;">// For easy overriding.</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Removes an item from any indexes.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> removeFromIndex<span style="color: #66cc66;">&#40;</span>item:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #808080; font-style: italic;">// For easy overriding.</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Note that it does not implement ICollectionView so you can&#8217;t use sorting, filtering, or cursors on it unless you feed it into a ListCollectionView object (see my <a href="http://aaronhardy.com/flex/collections-and-chaining-for-separate-presentation/">previous post</a> for more info).</p>
<p>I hope that saves someone some time and anguish.  Have fun with it and let me know if you have suggestions or questions.</p>
]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/indexablelist-indexing-for-faster-lookup/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Collections And Chaining For Separate Presentation</title>
		<link>http://aaronhardy.com/flex/collections-and-chaining-for-separate-presentation/</link>
		<comments>http://aaronhardy.com/flex/collections-and-chaining-for-separate-presentation/#comments</comments>
		<pubDate>Sat, 05 Feb 2011 19:25:07 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[ArrayCollection]]></category>
		<category><![CDATA[ArrayList]]></category>
		<category><![CDATA[collection chaining]]></category>
		<category><![CDATA[ICollectionView]]></category>
		<category><![CDATA[IList]]></category>
		<category><![CDATA[ListCollectionView]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=897</guid>
		<description><![CDATA[The purpose of this post is to describe the various collection data structures used in Flex and how they relate. Once we understand that, we&#8217;ll look at a problem I see commonly in Flex apps regarding separate collection presentations and how to fix it. Collection Structures First of all, there are a few &#8220;list-like&#8221; data [...]]]></description>
			<content:encoded><![CDATA[<p>The purpose of this post is to describe the various collection data structures used in Flex and how they relate.  Once we understand that, we&#8217;ll look at a problem I see commonly in Flex apps regarding separate collection presentations and how to fix it.<span id="more-897"></span></p>
<h3>Collection Structures</h3>
<p>First of all, there are a few &#8220;list-like&#8221; data structures that you should be aware of.  I&#8217;ll cover some of the basics of each.  I&#8217;m going to omit some classes and details for simplicity.</p>
<ul>
<li><strong><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/Array.html" target="_blank">Array</a></strong> &#8211; A list/collection of objects.</li>
<li><strong><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ArrayList.html" target="_blank">ArrayList</a></strong> &#8211; Wraps (does not extend) an Array and adds event listeners to all of its items.  When the items inside change (are added, removed, or one of their properties is modified), the ArrayList dispatches events so that a component like a List or DataGroup can know it should update its view.</li>
<li><strong><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ListCollectionView.html" target="_blank">ListCollectionView</a></strong> &#8211; Wraps (does not extend) an ArrayList and adds sorting, filtering, and cursor functionality.  When a filter is applied, all the items remain intact under the hood, it&#8217;s just that they&#8217;re not &#8220;seen&#8221; (hence why it&#8217;s called a collection view) by outside code.  In other words, if a component uses a ListCollectionView as its data provider and the ListCollectionView has a filter, only items passing the filter criteria will show up in the component.</li>
<li><strong><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ArrayCollection.html" target="_blank">ArrayCollection</a></strong> &#8211; Extends ListCollectionView and allows you to set its source using an Array instead of an ArrayList.  Technically, it just takes the Array and wraps it in an ArrayList for you.  The ListCollectionView code takes it from there.</li>
</ul>
<p>This is the basic relation of these structures.  Now let&#8217;s look at a couple flex collection interfaces and how they fit in.</p>
<ul>
<li><strong><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/IList.html" target="_blank">IList</a></strong> &#8211; Spark dataprovider components (List, DataGroup, ComboBox, etc.) take IList structures only.  IList provides basic access and manipulation methods based on index and, though the interface can&#8217;t enforce it, IList objects generally dispatch CollectionEvent.COLLECTION_CHANGE events to notify the components when internal items have changed so the components can update their views.</li>
<li><strong><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ICollectionView.html" target="_blank">ICollectionView</a></strong> &#8211; Provides methods and properties for filters, sorts, and cursors.</li>
</ul>
<p>Now let&#8217;s bring this all together.</p>
<p>An Array does not implement IList.  This means you can&#8217;t use it directly in a spark data provider component.  Even if you could, if any of its objects were added, removed, or modified, the component would not know about it because an Array doesn&#8217;t dispatch events.</p>
<p>ArrayList does implement IList.  This means it can be used directly as a data provider component.  If you want to send an Array into a spark data provider component and keep things as light as possible, you can wrap it in an ArrayList and send it in.  As I said before, ArrayList handles dispatching the events needed for the component to be aware of any changes.  One potential downer about ArrayList is it doesn&#8217;t support for&#8230;each loops.</p>
<p>ListCollectionView also implements IList and also implements ICollectionView.  I said before it wraps an ArrayList.  While that&#8217;s generally true, it really can wrap any IList.  So, it&#8217;s an IList itself (so it can be used as a data provider) and it wraps another IList.  ListCollectionView extends Proxy and adds the needed proxy functions to support for&#8230;each loops.  In the end, if you don&#8217;t need sorts, filters, or cursors, the ListCollectionView is likely extra baggage.  </p>
<p>ArrayCollection extends ListCollectionView which likewise means it implements IList and ICollectionView and inherits ListCollectionView&#8217;s functionality.</p>
<p>I&#8217;ve explained these things so you (1) will have a better understanding of what you&#8217;re using, (2) can make more efficient use of the structures, (3) and can make structures of your own that better suite your needs.</p>
<h3>Chaining Collections for Separate Presentation</h3>
<p>One other reason is because it comes into play in a common problem I&#8217;ve seen in Flex apps.  Here&#8217;s an all-too-common scenario: an app loads a list of widgets from the server as an ArrayCollection which it then places on a model that&#8217;s generally available in the app.  In the store portion of the app, users can filter widgets by name by typing in a filter text input.  When the user types a few characters, the store filters the ArrayCollection (the original one pulled from the server) down to only those widgets whose name matches the user&#8217;s input.</p>
<p>At this point or shortly thereafter, some code somewhere else in the app inevitably expects the ArrayCollection to not be filtered. Maybe it&#8217;s a different view in the app that always shows all widgets&#8211;or at least is supposed to.  Because the ArrayCollection has been filtered and is shared in both views, both views show the filtered widgets.</p>
<p>Or&#8230;maybe some code in another portion of the app attempts to access one of the widgets from the ArrayCollection.  If the widget it&#8217;s trying to access has been filtered from of the ArrayCollection&#8217;s &#8220;view&#8221; (not to be confused with a user interface) by the store, there are going to be issues.</p>
<p>So, what&#8217;s the solution?  Use a separate ICollectionView when supporting sorts or filters that shouldn&#8217;t affect other parts of the app.  The underlying data model for the view, however, can be shared.   In the example, you would instantiate a new ArrayCollection or ListCollectionView and set the list property using same the list which the original ArrayCollection wraps.  Since both ICollectionViews now wrap the same ArrayList, if you add or remove an object from the original, app-wide collection it will also do likewise on the store-only collection.  However, if you set a filter or sort on the store collection, it will not apply the filter or sort on the app-wide collection.  This is exactly what we want.</p>
<p>Code says a thousand words, so let&#8217;s see this in action.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #66cc66;">&lt;</span>?<span style="color: #0066CC;">xml</span> <span style="color: #0066CC;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #66cc66;">&gt;</span>
<span style="color: #66cc66;">&lt;</span>s:WindowedApplication xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span> 
					   xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span> 
					   xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span>
					   initialize=<span style="color: #ff0000;">&quot;createBaseCollection();&quot;</span><span style="color: #66cc66;">&gt;</span>
	<span style="color: #66cc66;">&lt;</span>fx:Script<span style="color: #66cc66;">&gt;</span>
		<span style="color: #66cc66;">&lt;!</span><span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span>
			<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">ArrayCollection</span>;
			<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">ListCollectionView</span>;
&nbsp;
			<span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span>
			protected <span style="color: #000000; font-weight: bold;">var</span> baseCollection:ArrayCollection;
&nbsp;
			<span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span>
			protected <span style="color: #000000; font-weight: bold;">var</span> filteredCollection:ListCollectionView;
&nbsp;
			protected <span style="color: #000000; font-weight: bold;">function</span> createBaseCollection<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
			<span style="color: #66cc66;">&#123;</span>
				baseCollection = <span style="color: #000000; font-weight: bold;">new</span> ArrayCollection<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
				<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i:uint; i <span style="color: #66cc66;">&lt;</span> <span style="color: #cc66cc;">100</span>; i++<span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#123;</span>
					<span style="color: #000000; font-weight: bold;">var</span> widget:Widget = <span style="color: #000000; font-weight: bold;">new</span> Widget<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
					widget.<span style="color: #0066CC;">name</span> = <span style="color: #ff0000;">&quot;Widget &quot;</span> + <span style="color: #66cc66;">&#40;</span>i + <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>;
					widget.<span style="color: #006600;">price</span> = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">random</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">*</span> <span style="color: #cc66cc;">100</span>;
					baseCollection.<span style="color: #006600;">addItem</span><span style="color: #66cc66;">&#40;</span>widget<span style="color: #66cc66;">&#41;</span>;
				<span style="color: #66cc66;">&#125;</span>
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			protected <span style="color: #000000; font-weight: bold;">function</span> createAndFilterSeparateCollection<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
			<span style="color: #66cc66;">&#123;</span>
				filteredCollection = <span style="color: #000000; font-weight: bold;">new</span> ListCollectionView<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
				filteredCollection.<span style="color: #0066CC;">list</span> = baseCollection.<span style="color: #0066CC;">list</span>;
&nbsp;
				filteredCollection.<span style="color: #006600;">filterFunction</span> = filterWidgets;
				filteredCollection.<span style="color: #006600;">refresh</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			protected <span style="color: #000000; font-weight: bold;">function</span> filterWidgets<span style="color: #66cc66;">&#40;</span>item:Widget<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #b1b100;">return</span> item.<span style="color: #006600;">price</span> <span style="color: #66cc66;">&gt;</span> <span style="color: #cc66cc;">50</span>;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			protected <span style="color: #000000; font-weight: bold;">function</span> addWidget<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #000000; font-weight: bold;">var</span> newWidget:Widget = <span style="color: #000000; font-weight: bold;">new</span> Widget<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
				newWidget.<span style="color: #0066CC;">name</span> = <span style="color: #ff0000;">'NewWidget'</span>;
				newWidget.<span style="color: #006600;">price</span> = <span style="color: #cc66cc;">90</span>;
				baseCollection.<span style="color: #006600;">addItemAt</span><span style="color: #66cc66;">&#40;</span>newWidget, <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&gt;</span>
	<span style="color: #66cc66;">&lt;/</span>fx:Script<span style="color: #66cc66;">&gt;</span>
&nbsp;
	<span style="color: #66cc66;">&lt;</span>s:layout<span style="color: #66cc66;">&gt;</span>
		<span style="color: #66cc66;">&lt;</span>s:VerticalLayout<span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;/</span>s:layout<span style="color: #66cc66;">&gt;</span>
&nbsp;
	<span style="color: #66cc66;">&lt;</span>s:<span style="color: #0066CC;">Button</span> label=<span style="color: #ff0000;">&quot;Create Filtered Collection&quot;</span> click=<span style="color: #ff0000;">&quot;createAndFilterSeparateCollection()&quot;</span><span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;</span>s:<span style="color: #0066CC;">Button</span> label=<span style="color: #ff0000;">&quot;Add Widget&quot;</span> click=<span style="color: #ff0000;">&quot;addWidget();&quot;</span><span style="color: #66cc66;">/&gt;</span>
&nbsp;
	<span style="color: #66cc66;">&lt;</span>s:HGroup<span style="color: #66cc66;">&gt;</span>
		<span style="color: #66cc66;">&lt;</span>s:<span style="color: #0066CC;">List</span> dataProvider=<span style="color: #ff0000;">&quot;{baseCollection}&quot;</span> labelField=<span style="color: #ff0000;">&quot;name&quot;</span><span style="color: #66cc66;">/&gt;</span>
		<span style="color: #66cc66;">&lt;</span>s:<span style="color: #0066CC;">List</span> dataProvider=<span style="color: #ff0000;">&quot;{filteredCollection}&quot;</span> labelField=<span style="color: #ff0000;">&quot;name&quot;</span><span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;/</span>s:HGroup<span style="color: #66cc66;">&gt;</span>
<span style="color: #66cc66;">&lt;/</span>s:WindowedApplication<span style="color: #66cc66;">&gt;</span></pre></div></div>

<p>In the code sample, we see our baseCollection being created within createBaseCollection().  This represents the ArrayCollection that&#8217;s being shared throughout the app.  This doesn&#8217;t need to be an ArrayCollection; it could just be a ListCollectionView or ArrayList.  The baseCollection then shows up in the left list component.  When you click on the Create Filtered Collection button, it calls createAndFilterSeparateCollection() which creates a <i>separate</i> ListCollectionView <i>using the underlying ArrayList that baseCollection is using</i>.</p>
<p>This is important.  This is a new, separate collection view for the same underlying data model.  When this new collection view is filtered, it doesn&#8217;t affect baseCollection.  This means the left list component will show all widgets while the right list component will show a only a subset of the widgets.  But, because they use the same underlying data model (ArrayList), if we add a widget to baseCollection, baseCollection will add it to the underlying data model, which will notify filteredCollection.  If filteredCollection finds that the widget passes the currently applied filter criteria, the widget will show up in its collection view.  This is why, if you click the Add Widget button, you will see the new widget show up in both list components even though addWidget() is only directly adding the widget to baseCollection.</p>
<p>I hope this helps someone out there avoid collection view woes in their app.  Be sure to add a comment if I messed something up or you have a question.  Good luck!</p>
]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/collections-and-chaining-for-separate-presentation/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Cursor/Iterator for Vector and Array</title>
		<link>http://aaronhardy.com/flex/cursor-iterator-for-vector-and-array/</link>
		<comments>http://aaronhardy.com/flex/cursor-iterator-for-vector-and-array/#comments</comments>
		<pubDate>Mon, 25 Oct 2010 04:10:01 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[collection]]></category>
		<category><![CDATA[cursor]]></category>
		<category><![CDATA[iterator]]></category>
		<category><![CDATA[vector]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=872</guid>
		<description><![CDATA[Along with Flex came IViewCursor which provides a way to itererate through ICollectionView classes like ArrayCollection and XMLListCollection. Sometimes though we&#8217;re dealing with Vector or Array or are developing an ActionScript-only project. Here&#8217;s a cursor/iterator that will allow you to navigate a Vector or Array: package com.aaronhardy &#123; import flash.utils.Proxy; import flash.utils.flash_proxy; &#160; use namespace [...]]]></description>
			<content:encoded><![CDATA[<p>Along with Flex came <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/IViewCursor.html" target="_blank">IViewCursor</a> which provides a way to itererate through <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ICollectionView.html" target="_blank">ICollectionView</a> classes like <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ArrayCollection.html" target="_blank">ArrayCollection</a> and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/XMLListCollection.html" target="_blank">XMLListCollection</a>.  Sometimes though we&#8217;re dealing with <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/Vector.html" target="_blank">Vector</a> or <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/Array.html" target="_blank">Array</a> or are developing an ActionScript-only project.  Here&#8217;s a cursor/iterator that will allow you to navigate a Vector or Array:<span id="more-872"></span></p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package com.<span style="color: #006600;">aaronhardy</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">Proxy</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">flash_proxy</span>;
&nbsp;
	use namespace flash_proxy;
&nbsp;
	<span style="color: #808080; font-style: italic;">/**
	 * Allows for maintaining an index and iterating through a vector or array of objects.
	 */</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> VectorCursor <span style="color: #0066CC;">extends</span> Proxy
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #808080; font-style: italic;">/**
		 * The collection the cursor is navigating.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">var</span> collection:<span style="color: #66cc66;">*</span>;
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * The current cursor index.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> VectorCursor<span style="color: #66cc66;">&#40;</span>collection:<span style="color: #66cc66;">*</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">collection</span> = collection;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * The item at the current cursor index.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> current<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Object</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&gt;</span> -<span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&amp;&amp;</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&lt;</span> collection.<span style="color: #0066CC;">length</span> ? collection<span style="color: #66cc66;">&#91;</span><span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#93;</span> : <span style="color: #000000; font-weight: bold;">null</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * The current cursor index.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> currentIndex<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Moves the cursor index to the first item.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> seekFirst<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">index</span> = <span style="color: #cc66cc;">0</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Moves the cursor index to before the first item.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> seekBeforeFirst<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">index</span> = -<span style="color: #cc66cc;">1</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Returns whether the cursor index is before the first item.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> beforeFirst<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&lt;</span> <span style="color: #cc66cc;">0</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Moves the cursor index to the last item.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> seekLast<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">index</span> = collection.<span style="color: #0066CC;">length</span> - <span style="color: #cc66cc;">1</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Moves the cursor index to after the last item.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> seekAfterLast<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">index</span> = collection.<span style="color: #0066CC;">length</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Returns whether the cursor index is after the last item.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> afterLast<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&gt;</span>= collection.<span style="color: #0066CC;">length</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Returns whether an item exists before the current cursor index.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> hasPrevious<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&gt;</span> <span style="color: #cc66cc;">0</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Moves the cursor index to and returns the previous item.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> movePrevious<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Object</span>
		<span style="color: #66cc66;">&#123;</span>
			index--;
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&gt;</span> -<span style="color: #cc66cc;">1</span> ? collection<span style="color: #66cc66;">&#91;</span><span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#93;</span> : <span style="color: #000000; font-weight: bold;">null</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Returns whether an item exists after the current cursor index.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> hasNext<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&lt;</span> collection.<span style="color: #0066CC;">length</span> - <span style="color: #cc66cc;">1</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Moves the cursor index to and returns the next item.
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> moveNext<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Object</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">index</span>++;
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&lt;</span> collection.<span style="color: #0066CC;">length</span> ? collection<span style="color: #66cc66;">&#91;</span><span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#93;</span> : <span style="color: #000000; font-weight: bold;">null</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">// Overrides of proxy to provide for...each support.</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> deleteProperty<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">name</span>:<span style="color: #66cc66;">*</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">false</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">name</span>:<span style="color: #66cc66;">*</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #66cc66;">*</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">null</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> hasProperty<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">name</span>:<span style="color: #66cc66;">*</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">true</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> nextNameIndex<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&gt;</span> collection.<span style="color: #0066CC;">length</span> - <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>
				<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">0</span>;
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">index</span> + <span style="color: #cc66cc;">1</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> nextName<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">String</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span> - <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		override flash_proxy <span style="color: #000000; font-weight: bold;">function</span> nextValue<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #66cc66;">*</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> collection<span style="color: #66cc66;">&#91;</span><span style="color: #0066CC;">index</span> - <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#93;</span>;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>And here are a few usage examples.  Notice it supports for&#8230;each loops as well.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> vector:Vector.<span style="color: #66cc66;">&lt;</span>User<span style="color: #66cc66;">&gt;</span> = <span style="color: #000000; font-weight: bold;">new</span> Vector.<span style="color: #66cc66;">&lt;</span>User<span style="color: #66cc66;">&gt;</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
vector.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> User<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'Bob'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
vector.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> User<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'Jan'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
vector.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> User<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'Sam'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> cursor:VectorCursor = <span style="color: #000000; font-weight: bold;">new</span> VectorCursor<span style="color: #66cc66;">&#40;</span>vector<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Iterate from first to last.</span>
<span style="color: #b1b100;">while</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>cursor.<span style="color: #006600;">afterLast</span><span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span>cursor.<span style="color: #006600;">current</span><span style="color: #66cc66;">&#41;</span>;
	cursor.<span style="color: #006600;">moveNext</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'----------'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Iterate from last to first.</span>
cursor.<span style="color: #006600;">seekLast</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #b1b100;">while</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>cursor.<span style="color: #006600;">beforeFirst</span><span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span>cursor.<span style="color: #006600;">current</span><span style="color: #66cc66;">&#41;</span>;
	cursor.<span style="color: #006600;">movePrevious</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'----------'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// For...each example from first to last.</span>
<span style="color: #b1b100;">for</span> <span style="color: #b1b100;">each</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> item:<span style="color: #0066CC;">Object</span> <span style="color: #b1b100;">in</span> cursor<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span>item<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/cursor-iterator-for-vector-and-array/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Studio J Online Scrapbooking</title>
		<link>http://aaronhardy.com/flex/studio-j-online-scrapbooking/</link>
		<comments>http://aaronhardy.com/flex/studio-j-online-scrapbooking/#comments</comments>
		<pubDate>Sat, 23 Oct 2010 19:42:21 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[General Programming]]></category>
		<category><![CDATA[AWS]]></category>
		<category><![CDATA[crafts]]></category>
		<category><![CDATA[digital]]></category>
		<category><![CDATA[S3]]></category>
		<category><![CDATA[scrapbooking]]></category>
		<category><![CDATA[Studio J]]></category>
		<category><![CDATA[svg]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=851</guid>
		<description><![CDATA[Scrapbooking just went from crafty women huddled around piles of paper shreds to online digital awesomeness. Not that crafty women or piles of paper shreds aren&#8217;t awesome. Nay. But for many, this translates into finding babysitters or a willing spouse; finding large blocks of time; purchasing a gajillion expensive scissors, stamps, buttons, papers, and ribbons; [...]]]></description>
			<content:encoded><![CDATA[<p>Scrapbooking just went from crafty women huddled around piles of paper shreds to online digital awesomeness.  Not that crafty women or piles of paper shreds aren&#8217;t awesome.  Nay.  But for many, this translates into finding babysitters or a willing spouse; finding large blocks of time; purchasing a gajillion expensive scissors, stamps, buttons, papers, and ribbons; finding storage for such paraphernalia; and discovering craftiness from within.  I mean, seriously, does <a href="http://3.bp.blogspot.com/_Q1ewFxNaFHQ/SoDb83g9mnI/AAAAAAAAAbk/hjn-6J4BGaM/s1600-h/IMG_7885.JPG" target="_blank">this</a> or <a href="http://www.craftster.org/pictures/data/500/medium/126488_Messy_Room2.jpg" target="_blank">this</a> look fun to clean up?  I&#8217;ll pass.</p>
<p>For the last year and a half at <a href="http://mediarain.com" target="_blank">Rain</a> I&#8217;ve been working on <a href="http://studioj.com/" target="_blank">Studio J</a>, <a href="http://closetomyheart.com/" target="_blank">Close To My Heart</a>&#8216;s flagship online scrapbooking application.  It&#8217;s been quite a ride but the result is really quite revolutionary.<span id="more-851"></span></p>
<p>Here&#8217;s how it works.  Hop onto <a href="http://studioj.com/" target="_blank">Studio J</a>.  You don&#8217;t even need an account.  You can log in anonymously on the left side of the <a href="https://create.studioj.com/login" target="_blank">login page</a>.  Once the application opens, create a project.  Upload some photos.  Choose the kit (set of papers) you would like to use.  Choose the pattern (orientation of papers).  Choose from a few pre-designed mixes that will get you started out with a great-looking scrapbook spread.  Now drop in photos, brads, clasps, ribbons, and stickers.  Distress or swap papers at will.  Add some text.  The amount of customization possible for each of these elements really is amazing and Close To My Heart did their best to make it a powerful experience.  Once your spread is complete, you can order a copy that will be printed using CTMH&#8217;s super-high-quality printing process and materials and it will be shipped to your door.</p>
<p>I know it may sound like a sales pitch, but I really do think is a fantastic application of technology and CTMH put a lot of focus on giving customers what they want.  It was really fun to work on an app that gives users so much control.  To read a very fair review of Studio J, check out <a href="http://www.craftcritique.com/2010/09/scrapbooking-with-studio-j-by-close-to.html" target="_blank">this article by Craft Critique</a>.</p>
<h3>The Juicy Details</h3>
<p>You know how much I just loooove to talk about scrapbooking.  But oh how I love to talk tech so much more.  Here are some interesting tech aspects of Studio J particularly related to the frontend since that&#8217;s the portion with which I&#8217;m most acquainted:</p>
<p>For the most part, StudioJ is developed in Flex for the frontend and PHP on the backend.  The backend and assets are hosted on Amazon&#8217;s cloud infrastructure.  This provided some unique challenges but resulted in big scalability benefits.  For speed, some assets like user photos are uploaded directly to the cloud which requires an <a href="http://developer.amazonwebservices.com/connect/entry!default.jspa?categoryID=114&#038;externalID=1092">ActionScript Amazon API adapter</a> and a little trickery for integration with the rest of the backend.</p>
<p>To store a user&#8217;s spread data to be later edited and printed, we utilize SVG.  Every element on the spread in ActionScript has a counterpart element in an SVG document.  This translation and all the rotating, scaling, panning, colorizing, and other editing tools are provided by our in-house <a href="http://aaronhardy.com/flex/rain-svg/" target="_blank">Rain SVG</a> library.  This to me is the most powerful and distinctive part of the app.</p>
<p>To improve the user experience, we developed a queuing and caching system.  It allows us to cache assets (re-use the same bitmap data in multiple parts of the app and avoid Flex image item renderer flickering issues), prioritize HTTP requests (make sure whatever the user is viewing gets top priority), and even trigger timeouts and/or retry requests.  <a href="http://aaronhardy.com/flex/queue-n-cache/" target="_blank">I talked in-depth about this system at the 360|Flex conference</a> and Adobe is adding a similar system to the new <a href="http://opensource.adobe.com/wiki/display/flexsdk/Spark+Image" target="_blank">Spark image component</a> in Flex 4.5.</p>
<p>The new <a href="http://labs.adobe.com/technologies/textlayout/" target="_blank">Text Layout Framework</a> was used in providing text editing functionality on user spreads.  This <a href="http://forums.adobe.com/message/2793180" target="_blank">got a little tricky</a> when loading fonts at runtime.  It got even trickier when consolidating the undo history for multiple text flows into the spread&#8217;s overall undo/redo system.  Then we integrated custom support for <a href="http://aaronhardy.com/flex/size-text-to-container/" target="_blank">sizing text to a container</a>.</p>
<p>We used modules to reduce some of the initial app size and provide some domain logic distinction. We added image editing tools so you don&#8217;t have to drop into Photoshop to make some simple tweaks to your photos.  And the list goes on.</p>
<p>In the end, it&#8217;s an ambitious application and I&#8217;m glad I could contribute.  We have a lot of ideas for additional features and improvements and wish the best for its success.  Now <a href="http://create.studioj.com/" target="_blank">go try it out</a> and let me know what you think!</p>
]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/studio-j-online-scrapbooking/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Shuffled Row Solver</title>
		<link>http://aaronhardy.com/flex/shuffled-row-solver/</link>
		<comments>http://aaronhardy.com/flex/shuffled-row-solver/#comments</comments>
		<pubDate>Sun, 03 Oct 2010 03:29:42 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[kindle]]></category>
		<category><![CDATA[shuffled row]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=826</guid>
		<description><![CDATA[I got my my wife a Kindle for her birthday. She loves it. But she loves beating my high score on the Shuffled Row game even more. So, I made the Shuffled Row Solver. Cheating, you say? Is it cheating to use a dish washer to wash dishes? I submit it&#8217;s not. I&#8217;m kidding, I&#8217;m [...]]]></description>
			<content:encoded><![CDATA[<p>I got my my wife a Kindle for her birthday.  She loves it.  But she loves beating my high score on the <a href="http://www.amazon.com/Shuffled-Row/dp/B003P38AAG" target="_blank">Shuffled Row</a> game even more.  So, I made the Shuffled Row Solver.  Cheating, you say?  Is it cheating to use a dish washer to wash dishes?  I submit it&#8217;s not.  I&#8217;m kidding, I&#8217;m kidding&#8230;of course it&#8217;s cheating but it was still fun to make and fun to see her face when she saw my &#8220;high score&#8221;.  Yes, I told her about the app afterward and gave her full credit for continually beating my score.<span id="more-826"></span></p>
<p>The game is pretty simple.  Letters are added to your row one at a time so you&#8217;ll constantly be working with a new set of letters. Create a word using the letters.  After you submit a word, the letters you used will be removed and new ones will be added. Increase your score by using less common letters. Create longer words and increase your score even more.</p>
<p>While testing the app, I made some interesting discoveries.  I found the best word possible is &#8220;quizzical&#8221; and will fetch 266 points.  Considering it uses nine letters and one round consists of 60 letters, theoretically you could fetch over 1600 points in one round.  Nigh unto impossible, but still an interesting tidbit.</p>
<p>Here&#8217;s the app.  Right-click for the source.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_ShuffledRowSolver_1270817943"
			class="flashmovie"
			width="100%"
			height="300">
	<param name="movie" value="/apps/shuffledrowsolver/ShuffledRowSolver.swf" />
	<param name="base" value="/apps/shuffledrowsolver/" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/apps/shuffledrowsolver/ShuffledRowSolver.swf"
			name="fm_ShuffledRowSolver_1270817943"
			width="100%"
			height="300">
		<param name="base" value="/apps/shuffledrowsolver/" />
	<!--<![endif]-->
		
<p><a href="http://adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<div class="goodies"><a href="http://github.com/Aaronius/ShuffledRowSolver" target="_blank">Fork Project</a><br class="break"></div>
]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/shuffled-row-solver/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>SpeedDial AIR App: Dial from the Desktop</title>
		<link>http://aaronhardy.com/flex/speeddial-air-app-dial-from-the-desktop/</link>
		<comments>http://aaronhardy.com/flex/speeddial-air-app-dial-from-the-desktop/#comments</comments>
		<pubDate>Thu, 16 Sep 2010 04:33:45 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[asterisk]]></category>
		<category><![CDATA[call]]></category>
		<category><![CDATA[ClientLogin]]></category>
		<category><![CDATA[pbx]]></category>
		<category><![CDATA[phone]]></category>
		<category><![CDATA[SpeedDial]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=791</guid>
		<description><![CDATA[Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed. Go ahead. Dump your wallet out on your desk and filter through your receipts and frequent-diner cards trying to find that one business card with that one phone number. Then [...]]]></description>
			<content:encoded><![CDATA[<p><div id="flashcontent5899" style="width:215px; height:180px;"><strong>Please upgrade your Flash Player</strong> This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.</div><script type="text/javascript">
<!-- // <![CDATA[
var so = new SWFObject("http://aaronhardy.com/wp-content/plugins/air-badge/AIRInstallBadge.swf", "Badge", "215", "180", "9.0.115", "#343434");
so.useExpressInstall("http://aaronhardy.com/wp-content/plugins/air-badge/expressinstall.swf");
so.addVariable("airversion", "1.0");
so.addVariable("appname", "SpeedDial");
so.addVariable("appurl", "http://aaronhardy.com/apps/speeddial/SpeedDial.air");
so.addVariable("appid", "SpeedDial");
so.addVariable("pubid", "");
so.addVariable("appversion", "1.0");
so.addVariable("imageurl", "/apps/speeddial/badge.jpg");
so.addVariable("appinstallarg", "installed from web");
so.addVariable("applauncharg", "launched from web");
so.addVariable("helpurl", "help.html");
so.addVariable("hidehelp", "true");
so.addVariable("skiptransition", "false");
so.addVariable("titlecolor", "#00AAFF");
so.addVariable("buttonlabelcolor", "#00AAFF");
so.addVariable("appnamecolor", "#00AAFF");
so.addVariable("str_err_airswf", "<u>Running locally?</u><br/><br/>The AIR proxy swf won't load properly when this is run from the local file system.");
so.write("flashcontent5899");
// ]]&gt; -->
</script>
</p>
<p>Go ahead.  Dump your wallet out on your desk and filter through your receipts and frequent-diner cards trying to find that one business card with that one phone number.  Then proceed to pick up that phone and take on the monumental task of manually dialing each and every grueling digit.  Pshhhh.  That&#8217;s so last year.</p>
<p>Introducing SpeedDial.  Run the app and click on a Google contact with a phone number.  Your phone will ring.  You pick up.  The contact&#8217;s phone will ring.  They pick up.  Done.  Want to call them again?  Click their name.  Done.  Again?  Click their name.  Done.<span id="more-791"></span></p>
<p>Found a phone number on the web for ordering a late-night pizza?  Ugh, the agony of lifting the phone and punching in each and every digit!  Copy text, open SpeedDial, hit the call button.  Done.</p>
<p>Sit back and enjoy the demo:</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_Demo_842178584"
			class="flashmovie"
			width="560"
			height="420">
	<param name="movie" value="/apps/speeddial/Demo.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/apps/speeddial/Demo.swf"
			name="fm_Demo_842178584"
			width="560"
			height="420">
	<!--<![endif]-->
		
<p><a href="http://adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>You will need to be on a phone system with a PBX (like a workplace) for the application to function.  See the juicy details below for more info.</p>
<h3>The juicy details</h3>
<p>Calls are made using a simple <a href="http://en.wikipedia.org/wiki/Representational_State_Transfer#RESTful_web_services" target="_blank">RESTful</a> API made available by a <a href="http://en.wikipedia.org/wiki/Private_branch_exchange#Private_branch_exchange" target="_blank">PBX</a> (generally <a href="http://en.wikipedia.org/wiki/Asterisk_(PBX)" target="_blank">Asterisk</a>-based).  Once the PBX is in place and you&#8217;ve discovered the REST API used to make calls, you can pass the URL into SpeedDial as an argument.  For example, let&#8217;s say I pass in this URL as an argument to SpeedDial:</p>
<p>https://phones.mydomain.com/api?cmd=call&#038;dial_first={extension}&#038;dial_second={destination}&#038;password={pin}</p>
<p>When placing the call, SpeedDial will use the URL but replace {extension} with the user&#8217;s extension, {destination} with the phone number the user is calling, and {pin} with the user&#8217;s phone PIN.  An HTTP request will then be made to the URL and the PBX takes it from there.  By passing in the URL to the app in this manner, you can configure SpeedDial to your specific workplace without modifying the code and creating a new build.</p>
<p>As for other juicy details, SpeedDial stores credentials using an AIR encrypted local store and contacts are loaded using the <a href="http://code.google.com/apis/accounts/docs/AuthForInstalledApps.html" target="_blank">Google ClientLogin API</a>.  The app uses <a href="http://www.adobe.com/products/flex" target="_blank">Flex 4</a> and <a href="http://www.robotlegs.org/" target="_blank">Robotlegs</a>.  The full source can be found <a href="http://github.com/Aaronius/SpeedDial" target="_blank">here</a>.</p>
<div class="goodies"><a href="http://github.com/Aaronius/SpeedDial" target="_blank">Fork Project</a><br class="break"></div>
]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/speeddial-air-app-dial-from-the-desktop/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>CabMaskableSprite: CacheAsBitmap and Mask Workaround</title>
		<link>http://aaronhardy.com/flex/cabmaskablesprite-cacheasbitmap-and-mask-workaround/</link>
		<comments>http://aaronhardy.com/flex/cabmaskablesprite-cacheasbitmap-and-mask-workaround/#comments</comments>
		<pubDate>Fri, 10 Sep 2010 04:29:57 +0000</pubDate>
		<dc:creator>Aaron Hardy</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[cacheAsBitmap]]></category>
		<category><![CDATA[DisplayObject]]></category>
		<category><![CDATA[filter]]></category>
		<category><![CDATA[mask]]></category>
		<category><![CDATA[mouse events]]></category>
		<category><![CDATA[sprite]]></category>

		<guid isPermaLink="false">http://aaronhardy.com/?p=777</guid>
		<description><![CDATA[In DisplayObject Quirks and Tips, I described a quirk where a sprite with both a mask and a filter would cease dispatching mouse events. As a refresher, here&#8217;s the example code: public class FilterAndMask extends Sprite &#123; public function FilterAndMask&#40;&#41; &#123; var mask:Shape = new Shape&#40;&#41;; mask.graphics.beginFill&#40;0xff0000&#41;; mask.graphics.drawRect&#40;25, 25, 50, 50&#41;; mask.graphics.endFill&#40;&#41;; &#160; var maskee:Sprite [...]]]></description>
			<content:encoded><![CDATA[<p>In <a href="http://aaronhardy.com/flex/displayobject-quirks-and-tips/">DisplayObject Quirks and Tips</a>, I described a quirk where a sprite with both a mask and a filter would cease dispatching mouse events.  As a refresher, here&#8217;s the example code:<span id="more-777"></span></p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> FilterAndMask <span style="color: #0066CC;">extends</span> Sprite
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> FilterAndMask<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">var</span> mask:Shape = <span style="color: #000000; font-weight: bold;">new</span> Shape<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		mask.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">beginFill</span><span style="color: #66cc66;">&#40;</span>0xff0000<span style="color: #66cc66;">&#41;</span>;
		mask.<span style="color: #006600;">graphics</span>.<span style="color: #006600;">drawRect</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">25</span>, <span style="color: #cc66cc;">25</span>, <span style="color: #cc66cc;">50</span>, <span style="color: #cc66cc;">50</span><span style="color: #66cc66;">&#41;</span>;
		mask.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">endFill</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #000000; font-weight: bold;">var</span> maskee:Sprite = <span style="color: #000000; font-weight: bold;">new</span> Sprite<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">beginFill</span><span style="color: #66cc66;">&#40;</span>0x000000<span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">graphics</span>.<span style="color: #006600;">drawRect</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">100</span>, <span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">endFill</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> DropShadowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>;
&nbsp;
		maskee.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span>mask<span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">mask</span> = mask;
		addChild<span style="color: #66cc66;">&#40;</span>maskee<span style="color: #66cc66;">&#41;</span>;
&nbsp;
		maskee.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>MouseEvent.<span style="color: #006600;">CLICK</span>, clickHandler<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
&nbsp;
	protected <span style="color: #000000; font-weight: bold;">function</span> clickHandler<span style="color: #66cc66;">&#40;</span>event:MouseEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'click'</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>In the example, the click handler would never get called if you clicked the sprite.  Technically, it&#8217;s not the filter that&#8217;s directly contributing to the problem, it&#8217;s that the filter automatically sets cacheAsBitmap to true for the sprite.  CacheAsBitmap and masks don&#8217;t play well together when it comes to mouse interaction. The workaround is to wrap the maskee within another sprite.  The outer sprite gets the filter while the inner sprite gets all the children and the mask.  You can see an example of this workaround in the <a href="http://aaronhardy.com/flex/displayobject-quirks-and-tips/">DisplayObject Quirks and Tips</a> post.  If you&#8217;re dealing with many sprites though, this can get really tedious.  Wouldn&#8217;t it be nice to have a sprite that just did the dirty work for you?  I don&#8217;t want to deal with manually creating additional sprites, nesting them, tracking which sprites are nested&#8230;ugh&#8230;makes me cringe.</p>
<p>Here&#8217;s CabMaskableSprite.  Use it like a regular sprite.  It does the dirty work for you.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// Copyright (c) 2010 Aaron Hardy</span>
<span style="color: #808080; font-style: italic;">//</span>
<span style="color: #808080; font-style: italic;">// Permission is hereby granted, free of charge, to any person</span>
<span style="color: #808080; font-style: italic;">// obtaining a copy of this software and associated documentation</span>
<span style="color: #808080; font-style: italic;">// files (the &quot;Software&quot;), to deal in the Software without</span>
<span style="color: #808080; font-style: italic;">// restriction, including without limitation the rights to use,</span>
<span style="color: #808080; font-style: italic;">// copy, modify, merge, publish, distribute, sublicense, and/or sell</span>
<span style="color: #808080; font-style: italic;">// copies of the Software, and to permit persons to whom the</span>
<span style="color: #808080; font-style: italic;">// Software is furnished to do so, subject to the following</span>
<span style="color: #808080; font-style: italic;">// conditions:</span>
<span style="color: #808080; font-style: italic;">//</span>
<span style="color: #808080; font-style: italic;">// The above copyright notice and this permission notice shall be</span>
<span style="color: #808080; font-style: italic;">// included in all copies or substantial portions of the Software.</span>
<span style="color: #808080; font-style: italic;">//</span>
<span style="color: #808080; font-style: italic;">// THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND,</span>
<span style="color: #808080; font-style: italic;">// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES</span>
<span style="color: #808080; font-style: italic;">// OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND</span>
<span style="color: #808080; font-style: italic;">// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT</span>
<span style="color: #808080; font-style: italic;">// HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,</span>
<span style="color: #808080; font-style: italic;">// WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING</span>
<span style="color: #808080; font-style: italic;">// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR</span>
<span style="color: #808080; font-style: italic;">// OTHER DEALINGS IN THE SOFTWARE.</span>
&nbsp;
package com.<span style="color: #006600;">aaronhardy</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">DisplayObject</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Graphics</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">Event</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">getQualifiedClassName</span>;
&nbsp;
	<span style="color: #808080; font-style: italic;">/**
	 * When a display object has cacheAsBitmap set to true and a mask applied to it, a bug appears 
	 * in the Flash Player which prevents the display object from dispatching any mouse events.  The
	 * workaround is to have an outer display object which has cacheAsBitmap set to true and a 
	 * nested display object which has the mask. When we run into this scenario of having both
	 * cacheAsBitmap set to true and a mask, this sprite will create a nested sprite that will 
	 * contain the mask and all children.
	 */</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> CabMaskableSprite <span style="color: #0066CC;">extends</span> Sprite
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #808080; font-style: italic;">/**
		 * The nested sprite that will contain the children and the mask when nesting is needed.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">var</span> nestedDisplay:Sprite;
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _nest:<span style="color: #0066CC;">Boolean</span>;
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Whether to nest a sprite to support a filter and a mask.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> nest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Boolean</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> _nest;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @private
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> nest<span style="color: #66cc66;">&#40;</span>value:<span style="color: #0066CC;">Boolean</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>_nest <span style="color: #66cc66;">!</span>= value<span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				value ? doNest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : doUnnest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
				_nest = value;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Moves children and any mask to a nested sprite.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> doNest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>nestedDisplay<span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #0066CC;">throw</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Error</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'nestedDisplay should not exist.'</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			addEventSwallowers<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			nestedDisplay = <span style="color: #000000; font-weight: bold;">new</span> Sprite<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			nestedDisplay.<span style="color: #006600;">mouseEnabled</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> i:<span style="color: #0066CC;">int</span> = numChildren - <span style="color: #cc66cc;">1</span>;
&nbsp;
			<span style="color: #b1b100;">while</span> <span style="color: #66cc66;">&#40;</span>i <span style="color: #66cc66;">&gt;</span> -<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				nestedDisplay.<span style="color: #006600;">addChildAt</span><span style="color: #66cc66;">&#40;</span>removeChildAt<span style="color: #66cc66;">&#40;</span>i<span style="color: #66cc66;">&#41;</span>, <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
				i--;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			addChild<span style="color: #66cc66;">&#40;</span>nestedDisplay<span style="color: #66cc66;">&#41;</span>;
&nbsp;
			nestedDisplay.<span style="color: #006600;">mask</span> = mask;
			<span style="color: #0066CC;">super</span>.<span style="color: #006600;">mask</span> = <span style="color: #000000; font-weight: bold;">null</span>;
&nbsp;
			removeEventSwallowers<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Moves children and mask from the nested sprite to the parent (this sprite).
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> doUnnest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>nestedDisplay<span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #0066CC;">throw</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Error</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'nestedDisplay should exist.'</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			addEventSwallowers<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #0066CC;">super</span>.<span style="color: #006600;">mask</span> = nestedDisplay.<span style="color: #006600;">mask</span>;
			nestedDisplay.<span style="color: #006600;">mask</span> = <span style="color: #000000; font-weight: bold;">null</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> i:<span style="color: #0066CC;">int</span> = nestedDisplay.<span style="color: #006600;">numChildren</span> - <span style="color: #cc66cc;">1</span>;
&nbsp;
			<span style="color: #b1b100;">while</span> <span style="color: #66cc66;">&#40;</span>i <span style="color: #66cc66;">&gt;</span> -<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				addChildAt<span style="color: #66cc66;">&#40;</span>nestedDisplay.<span style="color: #006600;">getChildAt</span><span style="color: #66cc66;">&#40;</span>i<span style="color: #66cc66;">&#41;</span>, <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
				i--;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			removeChild<span style="color: #66cc66;">&#40;</span>nestedDisplay<span style="color: #66cc66;">&#41;</span>;
			nestedDisplay = <span style="color: #000000; font-weight: bold;">null</span>;
&nbsp;
			removeEventSwallowers<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Adds listeners for events that will be dispatched while nesting or unnesting.  We don't
		 * want these events to be dispatched because the process should be as transparent as
		 * possible.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> addEventSwallowers<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			addEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ADDED</span>, swallowEvent<span style="color: #66cc66;">&#41;</span>;
			addEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">REMOVED</span>, swallowEvent<span style="color: #66cc66;">&#41;</span>;
			addEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">REMOVED_FROM_STAGE</span>, swallowEvent<span style="color: #66cc66;">&#41;</span>;
			addEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ADDED_TO_STAGE</span>, swallowEvent<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @see #addEventSwallowers()
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> removeEventSwallowers<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			removeEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ADDED</span>, swallowEvent<span style="color: #66cc66;">&#41;</span>;
			removeEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">REMOVED</span>, swallowEvent<span style="color: #66cc66;">&#41;</span>;
			removeEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">REMOVED_FROM_STAGE</span>, swallowEvent<span style="color: #66cc66;">&#41;</span>;
			removeEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ADDED_TO_STAGE</span>, swallowEvent<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> filters<span style="color: #66cc66;">&#40;</span>value:<span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">super</span>.<span style="color: #006600;">filters</span> = value; <span style="color: #808080; font-style: italic;">// Filters always go on the outer.</span>
			evaluateForNesting<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> cacheAsBitmap<span style="color: #66cc66;">&#40;</span>value:<span style="color: #0066CC;">Boolean</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">super</span>.<span style="color: #006600;">cacheAsBitmap</span> = value;
			evaluateForNesting<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> mask<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:DisplayObject
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> nest ? nestedDisplay.<span style="color: #006600;">mask</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">mask</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @private
		 */</span>		
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> mask<span style="color: #66cc66;">&#40;</span>value:DisplayObject<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			nest ? nestedDisplay.<span style="color: #006600;">mask</span> = value : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">mask</span> = value;
			evaluateForNesting<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Determine whether nesting is needed.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> evaluateForNesting<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			nest = graphicsRequested <span style="color: #66cc66;">||</span> <span style="color: #66cc66;">&#40;</span>cacheAsBitmap <span style="color: #66cc66;">&amp;&amp;</span> mask<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Whether graphics have been requested at least once. Because graphical drawings can't
		 * be moved to/from the nested sprite, we must always have a nested sprite and use its
		 * graphics once graphics is requested for the first time.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">var</span> graphicsRequested:<span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> graphics<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:Graphics
		<span style="color: #66cc66;">&#123;</span>
			graphicsRequested = <span style="color: #000000; font-weight: bold;">true</span>;
			nest = <span style="color: #000000; font-weight: bold;">true</span>;
			<span style="color: #b1b100;">return</span> nestedDisplay.<span style="color: #006600;">graphics</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> addChild<span style="color: #66cc66;">&#40;</span>child:DisplayObject<span style="color: #66cc66;">&#41;</span>:DisplayObject
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> nest ? nestedDisplay.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span>child<span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span>child<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> addChildAt<span style="color: #66cc66;">&#40;</span>child:DisplayObject, <span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:DisplayObject
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> nest ? nestedDisplay.<span style="color: #006600;">addChildAt</span><span style="color: #66cc66;">&#40;</span>child, <span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">addChildAt</span><span style="color: #66cc66;">&#40;</span>child, <span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> removeChild<span style="color: #66cc66;">&#40;</span>child:DisplayObject<span style="color: #66cc66;">&#41;</span>:DisplayObject
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> nest ? nestedDisplay.<span style="color: #006600;">removeChild</span><span style="color: #66cc66;">&#40;</span>child<span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">removeChild</span><span style="color: #66cc66;">&#40;</span>child<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> removeChildAt<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:DisplayObject
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> nest ? nestedDisplay.<span style="color: #006600;">removeChildAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">removeChildAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getChildAt<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:DisplayObject
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> nest ? nestedDisplay.<span style="color: #006600;">getChildAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">getChildAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getChildIndex<span style="color: #66cc66;">&#40;</span>child:DisplayObject<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> nest ? nestedDisplay.<span style="color: #006600;">getChildIndex</span><span style="color: #66cc66;">&#40;</span>child<span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">getChildIndex</span><span style="color: #66cc66;">&#40;</span>child<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> setChildIndex<span style="color: #66cc66;">&#40;</span>child:DisplayObject, <span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			nest ? nestedDisplay.<span style="color: #006600;">setChildIndex</span><span style="color: #66cc66;">&#40;</span>child, <span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">setChildIndex</span><span style="color: #66cc66;">&#40;</span>child, <span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * @inheritDoc
		 */</span>
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> numChildren<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> nest ? nestedDisplay.<span style="color: #006600;">numChildren</span> : <span style="color: #0066CC;">super</span>.<span style="color: #006600;">numChildren</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Stops propagation of the event.
		 */</span>
		protected <span style="color: #000000; font-weight: bold;">function</span> swallowEvent<span style="color: #66cc66;">&#40;</span>event:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			event.<span style="color: #006600;">stopImmediatePropagation</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>And here&#8217;s our example that previously didn&#8217;t work.  Using CabMaskableSprite, it now correctly dispatches mouse events.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> FilterAndMask <span style="color: #0066CC;">extends</span> Sprite
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> FilterAndMask<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">var</span> mask:Shape = <span style="color: #000000; font-weight: bold;">new</span> Shape<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		mask.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">beginFill</span><span style="color: #66cc66;">&#40;</span>0xff0000<span style="color: #66cc66;">&#41;</span>;
		mask.<span style="color: #006600;">graphics</span>.<span style="color: #006600;">drawRect</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">25</span>, <span style="color: #cc66cc;">25</span>, <span style="color: #cc66cc;">50</span>, <span style="color: #cc66cc;">50</span><span style="color: #66cc66;">&#41;</span>;
		mask.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">endFill</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #000000; font-weight: bold;">var</span> maskee:Sprite = <span style="color: #000000; font-weight: bold;">new</span> CabMaskableSprite<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">beginFill</span><span style="color: #66cc66;">&#40;</span>0x000000<span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">graphics</span>.<span style="color: #006600;">drawRect</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">100</span>, <span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">endFill</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> DropShadowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>;
&nbsp;
		maskee.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span>mask<span style="color: #66cc66;">&#41;</span>;
		maskee.<span style="color: #006600;">mask</span> = mask;
		addChild<span style="color: #66cc66;">&#40;</span>maskee<span style="color: #66cc66;">&#41;</span>;
&nbsp;
		maskee.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>MouseEvent.<span style="color: #006600;">CLICK</span>, clickHandler<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
&nbsp;
	protected <span style="color: #000000; font-weight: bold;">function</span> clickHandler<span style="color: #66cc66;">&#40;</span>event:MouseEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'click'</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://aaronhardy.com/flex/cabmaskablesprite-cacheasbitmap-and-mask-workaround/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

