<?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:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
>

<channel>
	<title>Building Blocks &#187; design patterns</title>
	<atom:link href="http://joelhooks.com/category/design-patterns/feed/" rel="self" type="application/rss+xml" />
	<link>http://joelhooks.com</link>
	<description>[without unit tests] you're not refactoring; you're just changing shit. -Hamlet D'Arcy</description>
	<lastBuildDate>Tue, 29 Jun 2010 18:45:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
		<item>
		<title>Do we really need THAT much metadata in AS3? Not with Robotlegs&#8230;</title>
		<link>http://joelhooks.com/2010/06/16/do-you-need-metadata-as3-robotlegs/</link>
		<comments>http://joelhooks.com/2010/06/16/do-you-need-metadata-as3-robotlegs/#comments</comments>
		<pubDate>Wed, 16 Jun 2010 14:13:23 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[design patterns]]></category>
		<category><![CDATA[dev tools]]></category>
		<category><![CDATA[robotlegs]]></category>
		<category><![CDATA[software architecture]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=527</guid>
		<description><![CDATA[There was a time in the push for a Robotlegs 1.0 that a nometa implementation existed. Robert Penner still uses it, if I'm not mistaken. It doesn't have as much convenience as the regular meta-loving MVCS implementation, meaning it doesn't inject a bunch of classes into the MVCS base classes. Is that bad? Not really. [...]]]></description>
			<content:encoded><![CDATA[<p>There was a time in the push for a Robotlegs 1.0 that a nometa implementation existed. <a href="http://github.com/robertpenner">Robert Penner</a> still uses it, if I'm not mistaken. It doesn't have as much convenience as the regular meta-loving MVCS implementation, meaning it doesn't inject a bunch of classes into the MVCS base classes. Is that bad? Not really. I find myself rarely using the injected classes anyway. At the time I pushed back on the nometa implementation and its inclusion in the core. I still think that is proper, because it would just tend to cloud the implementation and make it more difficult to document and support, both of these being key pillars in making Robotlegs a successful project that people will actually use. The concept of using as little metadata as possible in my applications is very appealing.</p>
<div align="center"><a href="http://xkcd.com/754/"><img src="http://imgs.xkcd.com/comics/dependencies.png" alt="" /></a></div>
<p><span id="more-527"></span><br />
<a href="http://github.com/tschneidereit/SwiftSuspenders#readme">SwiftSuspenders</a> beautifully supports constructor injection. This means that you don't need to annotate any methods or the class with metadata for it to honor injection into the constructor. With the [Inject] tag, you are marking required dependencies. They aren't optional. If there is no rule to supply the injection you will get a runtime error saying as such. So, given these non-optional dependencies, injecting them into the constructor makes a lot of sense. One drawback to this approach is that if you are injecting a lot of dependencies your constructor might get really big. In fact, the limit is 10 parameters. Guess what? If your class requires that many dependencies, it already smells bad. Clean it up and think <a href="http://butunclebob.com/ArticleS.UncleBob.PrinciplesOfOod">single responsibility</a>. For the love of Uncle Bob, keep it clean.</p>
<p>To illustrate this point I have refactored the Image Gallery example. It was my first example for Robotlegs almost a year ago. The original version resides in the Robotlegs Demo Bundle. In this refactoring I removed all occurrences of the [Inject] metadata tag. In addition, I removed all of the extensions of Robotlegs mvcs implementation sub-classes with the exception of Mediator. There are no Actor or Command subclasses. So what you end up with is a Command, Model, and Service tier that is completely meta and framework free. That rocks. It is just AS3 code doing its job. I love that.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_RobotlegsFlickrGallery_901662294"
			class="flashmovie"
			width="700"
			height="700">
	<param name="movie" value="http://joelhooks.com/examples/galleryNoMeta/RobotlegsFlickrGallery.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://joelhooks.com/examples/galleryNoMeta/RobotlegsFlickrGallery.swf"
			name="fm_RobotlegsFlickrGallery_901662294"
			width="700"
			height="700">
	<!--<![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><a href="http://github.com/joelhooks/robotlegs-examples-FlickrGalleryNoMeta">Here's a link to the source for this project on Github</a>.</p>
<p>Tooling is very lacking for metadata in all of the IDEs currently available. The <a href="http://www.elementriver.com/sourcemate/">SourceMate</a> plugin from ElementRiver is a nice addition to Flash Builder if you make use of metadata. It actually gives you code completion, which in and of itself is a huge improvement over... nothing. I hope to see more IDE support for metadata soon. It would really make it a lot easier to manage.</p>
<p>In my professional life, I use all of the Actionscript DI frameworks (<a href="http://www.robotlegs.org/">Robotlegs</a>, <a href="http://swizframework.org/">Swiz</a>, and <a href="http://www.spicefactory.org/parsley/">Parsley</a>). They are all great, when used appropriately within a defined set of patterns and practices. I worry about the trend for increased use of metadata. I think the complexity overhead is large. Sure, <strong>you</strong> get it, but there is a responsibility to build systems that can be understood by a wide range of developers without weeks of remedial training on a complex metadata based <a href="http://en.wikipedia.org/wiki/Domain-specific_language">DSL</a>. The less complex we make our complex systems the better. They are easier to train for, document, and build.</p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2010/06/16/do-you-need-metadata-as3-robotlegs/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Robotlegs, AS3-Signals and the SignalCommandMap Example</title>
		<link>http://joelhooks.com/2010/02/14/robotlegs-as3-signals-and-the-signalcommandmap-example/</link>
		<comments>http://joelhooks.com/2010/02/14/robotlegs-as3-signals-and-the-signalcommandmap-example/#comments</comments>
		<pubDate>Sun, 14 Feb 2010 21:39:53 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[actionscript]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[object oriented concepts]]></category>
		<category><![CDATA[robotlegs]]></category>
		<category><![CDATA[software architecture]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=432</guid>
		<description><![CDATA[Robotlegs and AS3-Signals play really well together. Both apply solid object-oriented principles to accomplish their respective goals. Signals is extremely well suited for automated Dependency Injection. By combining Signals and Robotlegs you are able to eliminate the use of Flash Events in the framework layer of your application. Eliminating Events means eliminating the ambiguity that [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://robotlegs.org">Robotlegs</a> and <a href="http://github.com/robertpenner/as3-signals">AS3-Signals</a> play really well together. Both apply solid object-oriented principles to accomplish their respective goals. Signals is extremely well suited for automated Dependency Injection. By combining Signals and Robotlegs you are able to eliminate the use of Flash Events in the framework layer of your application. Eliminating Events means eliminating the ambiguity that can accompany Events and their String registry based approach to the <a href="http://en.wikipedia.org/wiki/Observer_pattern">Observer pattern</a>. Signals provides a strongly-typed object-oriented approach to this same pattern.</p>
<p>With the standard <a href="http://wiki.github.com/robotlegs/robotlegs-framework/best-practices">Robotlegs MVCS implementation</a> you leverage the events provided by Actionscript 3 to communicate amongst the various actors of an application. From models and services dispatching notifications of their actions to triggering commands, events are a core piece of the implementation. To facilitate the use of Signals within MVCS it was necessary to create an extension to allow for Signals to be registered as Command triggers. This need spawned the <a href="http://github.com/joelhooks/signals-extensions-CommandSignal">SignalCommandMap utility</a>.</p>
<p>The SignalCommandMap extends the normal MVCS context and creates a SignalContext. The SignalContext instantiates and provides access to the SignalCommandMap alongside the other maps that are standard to Robotlegs. The SignalCommandMap allows you to map Signal classes and instances to commands that will be executed when the Signal dispatch() method is called. The value objects that are passed in the dispatch are then injected into the command alongside any other mapped injections you have created.</p>
<p>Let's take a look at a simple example that makes use of the SignalCommandMap and discuss some of the underlying code to see how it works:</p>
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_index_1774893124"
			class="flashmovie"
			width="320"
			height="550">
	<param name="movie" value="http://joelhooks.com/examples/robotlegsSignalsCafe/index.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://joelhooks.com/examples/robotlegsSignalsCafe/index.swf"
			name="fm_index_1774893124"
			width="320"
			height="550">
	<!--<![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>
<p><a href="http://github.com/joelhooks/robotlegs-examples-RobotlegsSignalsCafe">Source available on Github</a> (<a href="http://github.com/joelhooks/robotlegs-examples-RobotlegsSignalsCafe/zipball/v0.2.4212342">zip</a>)<br />
<span id="more-432"></span><br />
The example is a menu that allows you to add food which is displayed in a list. The total cost of your selected items is displayed and you can remove items from your order. First let's get started by taking a look at the context of the Application, which extends SignalContext:</p>
<h6>SignalCafeContext.as Bootstraps the Application</h6>

<div class="wp_codebox"><table><tr id="p4325"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="code" id="p432code5"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> SignalCafeContext <span style="color: #0066CC;">extends</span> SignalContext
<span style="color: #66cc66;">&#123;</span>
    override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> startup<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
    <span style="color: #66cc66;">&#123;</span>
      injector.<span style="color: #006600;">mapSingleton</span><span style="color: #66cc66;">&#40;</span>FoodOrderModel<span style="color: #66cc66;">&#41;</span>;
      injector.<span style="color: #006600;">mapSingleton</span><span style="color: #66cc66;">&#40;</span>FoodOrderUpdated<span style="color: #66cc66;">&#41;</span>;
      injector.<span style="color: #006600;">mapSingleton</span><span style="color: #66cc66;">&#40;</span>FoodItemAddedToOrder<span style="color: #66cc66;">&#41;</span>;
&nbsp;
      signalCommandMap.<span style="color: #006600;">mapSignalClass</span><span style="color: #66cc66;">&#40;</span>AddFoodItemToOrder, AddFoodItemToOrderCommand<span style="color: #66cc66;">&#41;</span>;
      signalCommandMap.<span style="color: #006600;">mapSignalClass</span><span style="color: #66cc66;">&#40;</span>FoodItemSelected, FoodItemSelectedCommand<span style="color: #66cc66;">&#41;</span>;
      signalCommandMap.<span style="color: #006600;">mapSignalClass</span><span style="color: #66cc66;">&#40;</span>RemoveAllOfSelectedItem, RemoveAllSelectedItemCommand<span style="color: #66cc66;">&#41;</span>;
      signalCommandMap.<span style="color: #006600;">mapSignalClass</span><span style="color: #66cc66;">&#40;</span>NoFoodItemSelected, NoFoodItemSelectedCommand<span style="color: #66cc66;">&#41;</span>;
&nbsp;
      mediatorMap.<span style="color: #006600;">mapView</span><span style="color: #66cc66;">&#40;</span>FoodSelectionView, FoodSelectionViewMediator<span style="color: #66cc66;">&#41;</span>;
      mediatorMap.<span style="color: #006600;">mapView</span><span style="color: #66cc66;">&#40;</span>CurrentOrderView, CurrentOrderViewMediator<span style="color: #66cc66;">&#41;</span>;
      mediatorMap.<span style="color: #006600;">mapView</span><span style="color: #66cc66;">&#40;</span>FoodOrderSummaryView, FoodOrderSummaryViewMediator<span style="color: #66cc66;">&#41;</span>;
      mediatorMap.<span style="color: #006600;">mapView</span><span style="color: #66cc66;">&#40;</span>FoodItemRemovalView, FoodItemRemovalViewMediator<span style="color: #66cc66;">&#41;</span>;
    <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>A SignalContext is structured exactly the same as a standard Robotlegs MVCS Context class. You override the startup() method and bootstrap your application. The major difference here is that you are mapping signals to commands instead of mapping events to commands. With the SignalCommandMap you are not restricted to just using Signals for triggering commands. You could mix events and Signals liberally as your needs or requirements dictated. As a warning, this could quickly became confusing and choosing one or the other might be a saner choice.</p>
<p>SignalCafeContext is mapping 4 Signals to 4 commands. The Signals are typed extensions of the base Signal class. This is necessary to provide Robotlegs (and more specifically in this case SwiftSuspenders) object types to differentiate for the purposes of injection. You could use named injections, but this would rapidly riddle your application with strings that would need to be laboriously checked for accuracy. Avoiding strings in favor of compiler-checked object types is always a good choice.</p>
<p>The strongly typed Signals are relatively simple. They contain a constructor and no additional methods or properties are added to the Signal. You can of course add properties and methods to the extended Signals,, but it wasn't necessary for this example. The SignalCommandMap will accept any class that implements the ISignal interface. Let's take a look at one of the commands triggered by a Signal mapped in the SignalCafeContext:</p>
<h6>AddFoodItemToOrder.as triggers the AddFoodItemToOrderCommand</h6>

<div class="wp_codebox"><table><tr id="p4326"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p432code6"><pre class="actionscirpt" style="font-family:monospace;">public class AddFoodItemToOrder extends Signal
{
	public function AddFoodItemToOrder()
	{
		super(FoodType);
	}
}</pre></td></tr></table></div>

<p>That is the whole of the extended Signal. As mentioned, it is not very complex at all. You will notice that super(FoodType) is being called. Signals take constructor arguments consisting of classes or interfaces that will be used as the value objects transmitted via the dispatch() method. In this case we are using FoodType as this value to ensure that our Signal will carry the payload that the mapped command is expecting.</p>
<p>Command signals are named a bit differently than standard reaction Signals. A Signal that is triggering a command is "requesting action" or specifying an action that needs to occur. Standard signals are typically past tense, or informative, describing an action that has occurred. By using this standard it is much easier to differentiate quickly what each Signal's purpose is. This can help with overall clarity within your application.</p>
<p>The AddFoodItemToOrder signal is dispatched by the FoodSelectionViewMediator which is mediating the DropDownList of FoodTypes and the "Add Some Food" button:</p>
<h6>FoodSelectionViewMediator.as mediates a view and dispatches a Signal when the user has clicked the "Add Some Food" button</h6>

<div class="wp_codebox"><table><tr id="p4327"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="code" id="p432code7"><pre class="actionscript" style="font-family:monospace;">	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> FoodSelectionViewMediator <span style="color: #0066CC;">extends</span> Mediator
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #66cc66;">&#91;</span>Inject<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> view:FoodSelectionView;
&nbsp;
		<span style="color: #66cc66;">&#91;</span>Inject<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> addItem:AddFoodItemToOrder;
&nbsp;
		override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> onRegister<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			view.<span style="color: #006600;">itemTypeAdded</span>.<span style="color: #0066CC;">add</span><span style="color: #66cc66;">&#40;</span>handleItemTypeAdded<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">function</span> handleItemTypeAdded<span style="color: #66cc66;">&#40;</span>itemType:FoodType<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			addItem.<span style="color: #006600;">dispatch</span><span style="color: #66cc66;">&#40;</span>itemType<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>When the AddFoodItemToOrder Signal's dispatch(aFoodTypeInstance) is called the AddFoodItemToOrderCommand is triggered:</p>
<h6>AddFoodItemToOrderCommand.as is executed in response to AddFoodItemToOrder Signal dispatch</h6>

<div class="wp_codebox"><table><tr id="p4328"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code" id="p432code8"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> AddFoodItemToOrderCommand <span style="color: #0066CC;">extends</span> SignalCommand
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #66cc66;">&#91;</span>Inject<span style="color: #66cc66;">&#93;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> itemType:FoodType;
&nbsp;
	<span style="color: #66cc66;">&#91;</span>Inject<span style="color: #66cc66;">&#93;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> model:FoodOrderModel;
&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>
		model.<span style="color: #006600;">addItemToOrder</span><span style="color: #66cc66;">&#40;</span>itemType<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>AddFoodItemToOrderCommand has two public properties that are marked for injection. The itemType property is a FoodType object. As you will recall, FoodType is the parameter that was passed to the AddFoodItemToOrder Signal super constructor. The AddFoodItemToOrder Signal dispatch() included an instance of a FoodType object which will be injected into the AddFoodItemToOrderCommand alongside any other injections that have been mapped and specified. In this case we are also injecting the FoodOrderModel instance that was mapped as a singleton in the SignalCafeContext.</p>
<div class="note-block">It is important to note that the parameters passed via the Signals dispatch() method will be instantly mapped and unmapped when the command is executed. If you've previously mapped a class that is being delivered via a Signal command mapping, that mapping will be overwritten and removed. To avoid this, favor using typed value objects as Signal parameters.</div>
<p>The AddFoodItemToOrderCommand has a simple job. It accesses the FoodOrderModel instance and calls its addItemToOrder method adding the FoodType parameter that was dispatched with the Signal to trigger the command.</p>
<p>That covers the basics of using the SignalCommandMap within a Robotlegs application. There are options that this example doesn't cover. I would recommend looking through the SignalCommandMap unit test suite for a thorough review of its capabilities. There are several more commands and Signals in the example for you to look over as well. Additionally the example uses Signals within views and the model to dispatch notifications. Outside of binding and UI events, no events are being passed within the application.</p>
<p>Hopefully this will give you the basic understanding of using the SignalCommandMap in a Robotlegs application. Let me know if you have any criticisms, comments, suggestions, or ideas regarding the utility's implementation at <a href="http://knowledge.robotlegs.org">http://knowledge.robotlegs.org</a></p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2010/02/14/robotlegs-as3-signals-and-the-signalcommandmap-example/feed/</wfw:commentRss>
		<slash:comments>30</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Robotlegs IoC/DI Flex Framework Examples Updated</title>
		<link>http://joelhooks.com/2009/08/14/robotlegs-iocdi-flex-framework-examples-updated/</link>
		<comments>http://joelhooks.com/2009/08/14/robotlegs-iocdi-flex-framework-examples-updated/#comments</comments>
		<pubDate>Fri, 14 Aug 2009 19:32:51 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[actionscript]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[object oriented concepts]]></category>
		<category><![CDATA[robotlegs]]></category>
		<category><![CDATA[software architecture]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=314</guid>
		<description><![CDATA[Live demos are available on robotlegs.org here Acme Widget Factory: The Acme Widget Factory is modular example and deals with loading multiple modules into a shell and communicating between those modules. The shell and each module has its own context. Lazy Stack: Lazy Stack is an example of deferred instantiation of Flex components, and how [...]]]></description>
			<content:encoded><![CDATA[<p>Live demos are available on <a href="http://www.robotlegs.org/examples/">robotlegs.org here</a></p>
<p>Acme Widget Factory:<br />
The Acme Widget Factory is modular example and deals with loading multiple modules into a shell and communicating between those modules. The shell and each module has its own context.</p>
<p>Lazy Stack:<br />
Lazy Stack is an example of deferred instantiation of Flex components, and how this is handled by the Robotlegs framework.</p>
<p>Wheres Window:<br />
Where's Window is a simple example to show how to mediate and communicate between a set of instances of the same view component that have individual mediators. In this case, the view components are windows in an AIR application. This uses a proxy to register and manage the currently open unique windows. I am going to write a more detailed breakdown of this particular example soon.</p>
<h2>The Elevator Pitch</h2>
<p><a href="http://github.com/darscan/robotlegs/tree/master">Robotlegs</a> is an IoC/DI container that is modeled on the PureMVC application structure. It is designed to be MVCS, model-view-controller-service, providing metadata dependency injection across these layers. While following the well organized approach of PureMVC, it eliminates the use of framework singletons and takes full advantage of the Flash Platform to keep the dreaded boiler plate code to a minimum. Eliminating these singletons makes unit testing and TDD much easier, which can be a real struggle when trying to isolate classes for testing where these singleton dependencies exist. Robotlegs is fast, clean, and perhaps more importantly fun to work with. There is a smorgasbord of architectural frameworks available for Flex/AS3, but Robotlegs is worth a look even if you are sick of looking at architectural frameworks.<br />
<a href="http://github.com/darscan/robotlegs/tree/master"><img class="aligncenter size-full wp-image-262" title="robotlegssketchsmall" src="http://69.164.207.135/wp-content/uploads/2009/07/robotlegssketchsmall.gif" alt="robotlegssketchsmall" width="221" height="260" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2009/08/14/robotlegs-iocdi-flex-framework-examples-updated/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Unit Testing: IoC/DI, Robotlegs and FlexUnit 4</title>
		<link>http://joelhooks.com/2009/07/21/unit-testing-with-inversion-of-control-ioc-and-dependency-injection-di-with-the-robotlegs-framework-and-flexunit-4/</link>
		<comments>http://joelhooks.com/2009/07/21/unit-testing-with-inversion-of-control-ioc-and-dependency-injection-di-with-the-robotlegs-framework-and-flexunit-4/#comments</comments>
		<pubDate>Tue, 21 Jul 2009 06:08:24 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[FlexUnit]]></category>
		<category><![CDATA[Unit Testing]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[object oriented concepts]]></category>
		<category><![CDATA[robotlegs]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=283</guid>
		<description><![CDATA[I've been reviewing the various IoC containers available for Flex/Actionscript. One of the benefits of IoC and DI is that it greatly facilitates unit testing. By injecting our dependencies into our applications actors, we are effectively isolating them from the other classes that make the application function. "So what?" In computer programming, unit testing is [...]]]></description>
			<content:encoded><![CDATA[<p>I've been reviewing the various IoC containers available for Flex/Actionscript. One of the benefits of IoC and DI is that it greatly facilitates unit testing. By injecting our dependencies into our applications actors, we are effectively isolating them from the other classes that make the application function. "So what?"</p>
<blockquote><p>In computer programming, unit testing is a software verification and validation method in which a programmer tests that individual units of source code are fit for use. A unit is the smallest testable part of an application. In procedural programming a unit may be an individual program, function, procedure, etc., while in object-oriented programming, the smallest unit is a class, which may belong to a base/super class, abstract class or derived/child class.</p>
<p>Ideally, each test case is independent from the others: substitutes like method stubs, mock objects, fakes and test harnesses can be used to assist testing a module in isolation. Unit tests are typically written and run by software developers to ensure that code meets its design and behaves as intended. Its implementation can vary from being very manual (pencil and paper) to being formalized as part of build automation. -<a href="http://en.wikipedia.org/wiki/Unit_testing">wikipedia unit testing entry</a></p></blockquote>
<p>To effectively unit test classes, we want them to be as isolated as possible. The class needs to stand on its own and have its functionality vetted to ensure that it behaves as expected. When we start to test how our classes behave together, we have entered the land of <a href="http://en.wikipedia.org/wiki/Integration_testing">integration testing</a>. Integration testing is a worthwhile pursuit also, but before we get to that point, we really want to ensure that our classes are solid by themselves.</p>
<p>Using the example in this <a href="http://joelhooks.com/2009/07/17/robotlegs-as3-a-dependency-injection-driven-mvcs-framework-for-flashflex-–-inspired-by-puremvc/">Robotlegs Image Gallery demonstration</a>, we are going to test a couple of the classes that make up the application. The demo isn't complex. It has a very simple model, a single service, and just a few views. In fact, it might even seem like a waste of time to unit test a simple example such as this, but the concepts are applicable to larger applications where the benefits of this type of testing really start to pay off.</p>
<p><a href="http://opensource.adobe.com/wiki/display/flexunit/FlexUnit+4+feature+overview">FlexUnit 4 is the framework</a> that is used here. It provides very handy asynchronous testing, meta data support, and a whole bucket of stellar features that I won't even begin to scratch the surface of. FlexUnit 4 also comes with a graphical testrunner interface:</p>
<p><img class="aligncenter size-full wp-image-284" title="success" src="http://joelhooks.com/wp-content/uploads/2009/07/success.jpg" alt="success" width="450" height="277" /><br />
<span id="more-283"></span></p>
<h2>On to the code...</h2>
<p><a href="http://github.com/joelhooks/robotlegsdemos/tree/master">full source is here...</a></p>
<p>This test runner interface is added to the RobotlegsImageGalleryTestRunner.mxml application:</p>

<div class="wp_codebox"><table><tr id="p28313"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
</pre></td><td class="code" id="p283code13"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:Application</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:fx</span>=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:s</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/halo&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:flexUnitUIRunner</span>=<span style="color: #ff0000;">&quot;http://www.adobe.com/2009/flexUnitUIRunner&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">creationComplete</span>=<span style="color: #ff0000;">&quot;onCreationComplete()&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:BasicLayout</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #339933;">&lt;![CDATA[</span>
<span style="color: #339933;">			import org.robotlegs.demos.imagegallery.test.suites.RobotlegsImageGalleryTestSuite;</span>
<span style="color: #339933;">			import org.flexunit.listeners.UIListener;</span>
<span style="color: #339933;">			import org.flexunit.runner.FlexUnitCore;</span>
&nbsp;
<span style="color: #339933;">			private var core:FlexUnitCore;</span>
<span style="color: #339933;">			private function onCreationComplete():void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				this.core = new FlexUnitCore();</span>
<span style="color: #339933;">				core.addListener( new UIListener( uiListener ));</span>
<span style="color: #339933;">				core.run( RobotlegsImageGalleryTestSuite )</span>
<span style="color: #339933;">			}</span>
<span style="color: #339933;">		]]&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;flexUnitUIRunner:TestRunnerBase</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;uiListener&quot;</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;100%&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:Application<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>The core runs our test suites, in this case we are only running a single suite: the RobotlegsImageGalleryTestSuite. The test suite carries metadata that identifies it as a FlexUnit suite. There is no need to extend TestSuite as in previous version of FlexUnit:</p>

<div class="wp_codebox"><table><tr id="p28314"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code" id="p283code14"><pre class="actionscript" style="font-family:monospace;">package org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">test</span>.<span style="color: #006600;">suites</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">test</span>.<span style="color: #006600;">cases</span>.<span style="color: #006600;">TestFlickrService</span>;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">test</span>.<span style="color: #006600;">cases</span>.<span style="color: #006600;">TestGalleryProxy</span>;
&nbsp;
	<span style="color: #66cc66;">&#91;</span>Suite<span style="color: #66cc66;">&#93;</span>
	<span style="color: #66cc66;">&#91;</span>RunWith<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;org.flexunit.runners.Suite&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> RobotlegsImageGalleryTestSuite
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> testFlickrService:TestFlickrService;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> testGalleryProxy:TestGalleryProxy;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>The suite further defines the test cases that we are going to run, TestFlickrService and TestGalleryProxy. Any other test cases would also be included in this suite. TestFlickrService extends the Robotlegs Service class. It makes an asyncronous call to the Flickr API and retrieves images via the 'interestingness' category, as well as through a text search. The Service class has a dependency that is injected by the framework on its eventBroadcaster property. EventBroadcaster simply wraps an event dispatcher to provide a simplified interface for the framework to access. Service also provides a dispatch(event) convenience method for sending event notifications to the framework context. Our tests are not run within this context, however, so we have run into a problem. Since the framework injects the EventDispatcher into the EventBroadcaster automatically, we apparently have no way to access it and we can't receive framework notifications.</p>
<p>As it happens, we can simply inject our dependencies manually. The TestFlickrService case has a serviceDispatcher property that extends EventDispatcher. In our setUp() method that is called prior to every test, we create a new EventBroadcaster (which takes our serviceDispatcher as an argument) and add it to our fresh FlickrImageService instance. Now the test case has access to the injected dispatcher, and we can listen for our normal flash events that Robotlegs uses for notifications.</p>

<div class="wp_codebox"><table><tr id="p28315"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
</pre></td><td class="code" id="p283code15"><pre class="actionscript" style="font-family:monospace;">package org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">test</span>.<span style="color: #006600;">cases</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">EventDispatcher</span>;
&nbsp;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">flexunit</span>.<span style="color: #006600;">Assert</span>;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">flexunit</span>.<span style="color: #006600;">async</span>.<span style="color: #006600;">Async</span>;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">GalleryEvent</span>;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">remote</span>.<span style="color: #006600;">services</span>.<span style="color: #006600;">FlickrImageService</span>;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">mvcs</span>.<span style="color: #006600;">EventBroadcaster</span>;
&nbsp;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> TestFlickrService
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> service:FlickrImageService;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> serviceDispatcher:EventDispatcher = <span style="color: #000000; font-weight: bold;">new</span> EventDispatcher<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #66cc66;">&#91;</span>Before<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> setUp<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			serviceDispatcher = <span style="color: #000000; font-weight: bold;">new</span> EventDispatcher<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			service = <span style="color: #000000; font-weight: bold;">new</span> FlickrImageService<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			service.<span style="color: #006600;">eventBroadcaster</span> = <span style="color: #000000; font-weight: bold;">new</span> EventBroadcaster<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span>.<span style="color: #006600;">serviceDispatcher</span><span style="color: #66cc66;">&#41;</span>;;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #66cc66;">&#91;</span>After<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> tearDown<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;">this</span>.<span style="color: #006600;">serviceDispatcher</span> = <span style="color: #000000; font-weight: bold;">null</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">service</span>.<span style="color: #006600;">eventBroadcaster</span> = <span style="color: #000000; font-weight: bold;">null</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">service</span> = <span style="color: #000000; font-weight: bold;">null</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #66cc66;">&#91;</span>Test<span style="color: #66cc66;">&#40;</span>async<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> testRetreiveImages<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;">this</span>.<span style="color: #006600;">serviceDispatcher</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> GalleryEvent.<span style="color: #006600;">GALLERY_LOADED</span>, Async.<span style="color: #006600;">asyncHandler</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span>, handleImagesReceived, <span style="color: #cc66cc;">3000</span>, <span style="color: #000000; font-weight: bold;">null</span>, handleServiceTimeout<span style="color: #66cc66;">&#41;</span>, <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>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">service</span>.<span style="color: #006600;">loadGallery</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #66cc66;">&#91;</span>Test<span style="color: #66cc66;">&#40;</span>async<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> testSearchImages<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;">this</span>.<span style="color: #006600;">serviceDispatcher</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> GalleryEvent.<span style="color: #006600;">GALLERY_LOADED</span>, Async.<span style="color: #006600;">asyncHandler</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span>, handleImagesReceived, <span style="color: #cc66cc;">3000</span>, <span style="color: #000000; font-weight: bold;">null</span>, handleServiceTimeout<span style="color: #66cc66;">&#41;</span>, <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>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">service</span>.<span style="color: #006600;">search</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;robotlegs&quot;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">function</span> handleServiceTimeout<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">object</span>:<span style="color: #0066CC;">Object</span> <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
	    	        Assert.<span style="color: #006600;">fail</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'Pending Event Never Occurred'</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">function</span> handleImagesReceived<span style="color: #66cc66;">&#40;</span>event:GalleryEvent, <span style="color: #0066CC;">object</span>:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			Assert.<span style="color: #006600;">assertEquals</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;The gallery should have some photos: &quot;</span>, event.<span style="color: #006600;">gallery</span>.<span style="color: #006600;">photos</span>.<span style="color: #0066CC;">length</span> <span style="color: #66cc66;">&gt;</span> <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
&nbsp;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>After each test is run, our tearDown method is called by FlexUnit which sets our service and its eventBroadcaster to null in preparation for the next test in this case to be run. While this example isn't very complex, it is easy to see how this could be extended to a much more complicated service.</p>
<p>The GalleryProxy class is tested in much the same way, though it doesn't have any async methods:</p>

<div class="wp_codebox"><table><tr id="p28316"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
</pre></td><td class="code" id="p283code16"><pre class="actionscript" style="font-family:monospace;">package org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">test</span>.<span style="color: #006600;">cases</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">flexunit</span>.<span style="color: #006600;">Assert</span>;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">models</span>.<span style="color: #006600;">proxies</span>.<span style="color: #006600;">GalleryProxy</span>;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">models</span>.<span style="color: #006600;">vo</span>.<span style="color: #006600;">Gallery</span>;
	<span style="color: #0066CC;">import</span> org.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">models</span>.<span style="color: #006600;">vo</span>.<span style="color: #006600;">GalleryImage</span>;
&nbsp;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> TestGalleryProxy
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> galleryProxy:GalleryProxy;
&nbsp;
		<span style="color: #66cc66;">&#91;</span>Before<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> setUp<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;">this</span>.<span style="color: #006600;">galleryProxy</span> = <span style="color: #000000; font-weight: bold;">new</span> GalleryProxy<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #66cc66;">&#91;</span>After<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> tearDown<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;">this</span>.<span style="color: #006600;">galleryProxy</span> = <span style="color: #000000; font-weight: bold;">null</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #66cc66;">&#91;</span>Test<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> testSetGallery<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> gallery:Gallery = <span style="color: #000000; font-weight: bold;">new</span> Gallery<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">galleryProxy</span>.<span style="color: #006600;">gallery</span> = gallery;
			Assert.<span style="color: #006600;">assertEquals</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;GalleryProxy should have a gallery&quot;</span>, <span style="color: #0066CC;">this</span>.<span style="color: #006600;">galleryProxy</span>.<span style="color: #006600;">gallery</span> <span style="color: #66cc66;">!</span>= <span style="color: #000000; font-weight: bold;">null</span>, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #66cc66;">&#91;</span>Test<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> testSetSelectedImage<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> image1:GalleryImage = <span style="color: #000000; font-weight: bold;">new</span> GalleryImage<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #000000; font-weight: bold;">var</span> image2:GalleryImage = <span style="color: #000000; font-weight: bold;">new</span> GalleryImage<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #000000; font-weight: bold;">var</span> gallery:Gallery = <span style="color: #000000; font-weight: bold;">new</span> Gallery<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">galleryProxy</span>.<span style="color: #006600;">gallery</span> = gallery;
			gallery.<span style="color: #006600;">photos</span>.<span style="color: #006600;">addItem</span><span style="color: #66cc66;">&#40;</span>image1<span style="color: #66cc66;">&#41;</span>;
			gallery.<span style="color: #006600;">photos</span>.<span style="color: #006600;">addItem</span><span style="color: #66cc66;">&#40;</span>image2<span style="color: #66cc66;">&#41;</span>;
			image1.<span style="color: #006600;">selected</span> = <span style="color: #000000; font-weight: bold;">false</span>;
			image2.<span style="color: #006600;">selected</span> = <span style="color: #000000; font-weight: bold;">true</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">galleryProxy</span>.<span style="color: #006600;">setSelectedImage</span><span style="color: #66cc66;">&#40;</span>image1<span style="color: #66cc66;">&#41;</span>;
			Assert.<span style="color: #006600;">assertEquals</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Image1 should be selected&quot;</span>, image1.<span style="color: #006600;">selected</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
			Assert.<span style="color: #006600;">assertEquals</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Image 2 should NOT be selected&quot;</span>, image2.<span style="color: #006600;">selected</span>, <span style="color: #000000; font-weight: bold;">false</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></td></tr></table></div>

<p>With these simple tests we are 100% certain that our classes function as expected on their own, completely isolated from the rest of the application.</p>
<h2>You really should call your mom...</h2>
<p>We are all unit testing our code and following strong Agile/TDD processes, right.... right? I don't know how much unit testing is going on in the Flash/Flex world, but my guess that the overall test coverage percentage is very small. RIAs are here. They are becoming full fledged applications that <strong><em>people rely on to do business</em></strong>. There will come a time in your RIAs life that you will need to get in there and do some refactoring. It might be for performance, fixing bugs, or adding some new kickass feature to push your app to the next level. Fact, without unit testing:</p>
<blockquote><p><strong>you're not refactoring; you're just changing shit. -<a href="http://hamletdarcy.blogspot.com/2009/06/forgotten-refactorings.html">Hamlet D'Arcy</a></strong></p></blockquote>
<p>There are many, many arguments for unit testing your code, but for me this is the most compelling. At some point in the future, you are going to want to get in there and make some changes. If your application is important to your users, you want to make sure those changes don't break everything. It is guaranteed that they will break something, the question is will you know immediately what happened, or at least where to look?</p>
<p>We are getting the proper tools for the job. FlexUnit 4 is an incredible project. There is a robust selection of frameworks that all have merits and can facilitate structured, well designed applications. I'm personally out of excuses. I want to develop applications that my users can trust and rely on to do business, and unit testing is a part of that recipe.</p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2009/07/21/unit-testing-with-inversion-of-control-ioc-and-dependency-injection-di-with-the-robotlegs-framework-and-flexunit-4/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Robotlegs AS3: A Dependency Injection Driven MVCS Framework for Flash/Flex – Inspired by PureMVC</title>
		<link>http://joelhooks.com/2009/07/17/robotlegs-as3-a-dependency-injection-driven-mvcs-framework-for-flashflex-%e2%80%93-inspired-by-puremvc/</link>
		<comments>http://joelhooks.com/2009/07/17/robotlegs-as3-a-dependency-injection-driven-mvcs-framework-for-flashflex-%e2%80%93-inspired-by-puremvc/#comments</comments>
		<pubDate>Fri, 17 Jul 2009 20:39:46 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[actionscript]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[robotlegs]]></category>
		<category><![CDATA[software architecture]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=259</guid>
		<description><![CDATA[robotlegs.org robotlegs best practices The quest for a Dependency Injection container continues. The most recent stop on this exploration of the available options has been Robotlegs. Robotlegs AS3 is a DI driven MVCS framework for Flash/Flex inspired by PureMVC. Being a huge fan of PureMVC, this caught my attention immediately. Robotlegs professes to be a [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.robotlegs.org">robotlegs.org</a></p>
<p><a href="http://wiki.github.com/robotlegs/robotlegs-framework/best-practices">robotlegs best practices </a></p>
<p>The quest for a Dependency Injection container continues. The most recent stop on this exploration of the available options has been Robotlegs. Robotlegs AS3 is a DI driven MVCS framework for Flash/Flex inspired by PureMVC. Being a huge fan of PureMVC, this caught my attention immediately. Robotlegs professes to be a framework like PureMVC, but without all the Singeltons, Service Locators, casting and boiler plate we have all come to love. Better yet, it delivers on these claims.</p>
<p><a href="http://github.com/joelhooks/robotlegsdemos/tree/master">Source for this demo available on github... </a></p>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_RobotlegsFlickrGallery_944869450"
			class="flashmovie"
			width="520"
			height="675">
	<param name="movie" value="http://joelhooks.com/examples/robotlegsGallery/RobotlegsFlickrGallery.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://joelhooks.com/examples/robotlegsGallery/RobotlegsFlickrGallery.swf"
			name="fm_RobotlegsFlickrGallery_944869450"
			width="520"
			height="675">
	<!--<![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>
<p><span id="more-259"></span></p>
<h2>Brief Code Walkthrough</h2>
<p>I'm using the same gallery example I used for Parsley, with some enhancements. The basic structure is like a typical PureMVC application. We've divided our packages up into model, view, controller, and events. Instead of extending Facade to bootstrap our application we need to instantiate a Context in our Applications main mxml/as file:</p>

<div class="wp_codebox"><table><tr id="p25922"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code" id="p259code22"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">robotlegs</span>.<span style="color: #006600;">demos</span>.<span style="color: #006600;">imagegallery</span>.<span style="color: #006600;">ImageGalleryContext</span>;
<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">events</span>.<span style="color: #006600;">FlexEvent</span>;
&nbsp;
<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> galleryContext:ImageGalleryContext;
&nbsp;
protected <span style="color: #000000; font-weight: bold;">function</span> creationCompleteHandler<span style="color: #66cc66;">&#40;</span>event:FlexEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">this</span>.<span style="color: #006600;">galleryContext</span> = <span style="color: #000000; font-weight: bold;">new</span> ImageGalleryContext<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">this</span> <span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>The Context defines which IoC adapter to use (currently SmartyPants-IoC is the only available adapter, but a SpringAS adapter is in the works). It also fires its startup method which registers a series of commands and dispatches a Startup event.</p>
<p>The Context for the application defines a series of Commands to fire in sequence to get the application</p>

<div class="wp_codebox"><table><tr id="p25923"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code" id="p259code23"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ImageGalleryContext <span style="color: #0066CC;">extends</span> Context
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> ImageGalleryContext<span style="color: #66cc66;">&#40;</span>contextView:DisplayObjectContainer<span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">super</span><span style="color: #66cc66;">&#40;</span> contextView, <span style="color: #000000; font-weight: bold;">new</span> SmartyPantsInjector<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>, <span style="color: #000000; font-weight: bold;">new</span> SmartyPantsReflector<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #808080; font-style: italic;">// Keep SmartyPants quiet</span>
		NoSmartyPantsLogging;
	<span style="color: #66cc66;">&#125;</span>
&nbsp;
	override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> startup<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: #808080; font-style: italic;">// Map our startup commands</span>
		commandFactory.<span style="color: #006600;">mapCommand</span><span style="color: #66cc66;">&#40;</span> ContextEvent.<span style="color: #006600;">STARTUP</span>, PrepModelCommand, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
		commandFactory.<span style="color: #006600;">mapCommand</span><span style="color: #66cc66;">&#40;</span> ContextEvent.<span style="color: #006600;">STARTUP</span>, PrepServicesCommand, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
		commandFactory.<span style="color: #006600;">mapCommand</span><span style="color: #66cc66;">&#40;</span> ContextEvent.<span style="color: #006600;">STARTUP</span>, PrepViewCommand, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
		commandFactory.<span style="color: #006600;">mapCommand</span><span style="color: #66cc66;">&#40;</span> ContextEvent.<span style="color: #006600;">STARTUP</span>, StartupCommand, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #808080; font-style: italic;">// And away we go!</span>
		eventBroadcaster.<span style="color: #006600;">dispatchEvent</span><span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">new</span> ContextEvent<span style="color: #66cc66;">&#40;</span> ContextEvent.<span style="color: #006600;">STARTUP</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></td></tr></table></div>

<p>These Commands are very similar to PureMVC commands. The Startup commands are used to define the initial injected classes and relationships between view components and their mediators.</p>
<p>Mediation is particularly sweet with Robotlegs. Once a view component has been associated with a mediator, it will be registered automatically:</p>

<div class="wp_codebox"><table><tr id="p25924"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p259code24"><pre class="actionscript" style="font-family:monospace;">mediatorFactory.<span style="color: #006600;">mapMediator</span><span style="color: #66cc66;">&#40;</span> GalleryView, GalleryViewMediator <span style="color: #66cc66;">&#41;</span>;</pre></td></tr></table></div>

<p>avoiding the need for facade.registerMediator... as well as skipping around the deferred instantiation/lifecycle issues that plague Flex applications. because we are injecting into our mediators, there is no need to have the mediator ask for its dependencies. We tell it what it needs and it does its work with what it is provided:</p>

<div class="wp_codebox"><table><tr id="p25925"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code" id="p259code25"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> GalleryViewMediator <span style="color: #0066CC;">extends</span> Mediator
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #66cc66;">&#91;</span>Inject<span style="color: #66cc66;">&#93;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> galleryView:GalleryView;
&nbsp;
	<span style="color: #66cc66;">&#91;</span>Inject<span style="color: #66cc66;">&#93;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> galleryProxy:GalleryProxy;
&nbsp;
	<span style="color: #66cc66;">&#91;</span>Inject<span style="color: #66cc66;">&#93;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> imageService:IGalleryImageServiceDelegate;</pre></td></tr></table></div>

<p>Mediating view components is hands down my favorite aspect of PureMVC, and Robotlegs enhances that pattern by removing the egregious boiler plate. It allows my view components to be completely isolated and ignorant of the surrounding framework. I don't want to inject data directly into the components or bind them to the Model. They need to display information to and collect input from the user.</p>
<p>Robotlegs has eliminated the Notifications of PureMVC, using AS3 events instead. Most of the current crop of IoC containers for Actionscript do this also, but Robotlegs has avoided using the Display List as the Event Bus or requiring a central Event Map. This is huge. There are no confusing issues with bubbling, or the need to pass around a reference to THE view component.</p>
<p>from the GalleryViewMediator.as:</p>

<div class="wp_codebox"><table><tr id="p25926"><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code" id="p259code26"><pre class="actionscript" style="font-family:monospace;">override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> onRegisterComplete<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
	addEventListenerTo<span style="color: #66cc66;">&#40;</span> galleryView, GalleryImageEvent.<span style="color: #006600;">SELECT_GALLERY_IMAGE</span>, onImageSelected <span style="color: #66cc66;">&#41;</span>
	addEventListenerTo<span style="color: #66cc66;">&#40;</span> eventDispatcher, GalleryEvent.<span style="color: #006600;">GALLERY_LOADED</span>, onGalleryLoaded <span style="color: #66cc66;">&#41;</span>
	<span style="color: #0066CC;">this</span>.<span style="color: #006600;">imageService</span>.<span style="color: #006600;">loadGallery</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>The core Robotlegs classes have an eventDispatcher that is the central event management aperatus. You then dispatch events using the dispatch() method on Proxy, Mediator, and Command classes and any interested party will respond.</p>
<h2>ANOTHER micro-architecture framework?!</h2>
<p>Well, yes. Shaun makes <a href="http://shaun.boyblack.co.za/blog/2009/04/29/another-architectural-framework-but-why/">several compelling arguments</a> for pursuing another framework. I personally like options. A full toolbox. The landscape of AS3/Flex frameworks is looking mighty fine, with players to suit almost any style and approach. Instead of griping about the deficits in the available architectural frameworks, he's made an attempt to bring the good parts of the available frameworks together while eliminating the various anti-patterns that caused him grief.</p>
<p>I haven't made much of an effort to conceal the fact that <a href="http://joelhooks.com/2008/03/15/5-reasons-puremvc-kicks-ass/">I am very much a PureMVC fan boy</a>. I like the structure, I like mediating my views as a mechanism for separation of responsibilities, and cliff Hall is one helluva guy. This isn't to say that PureMVC doesn't have its faults. The 4 Singletons that comprise the heart of the System, namely Facade, Model, View and Controller make for some difficult testing. The boiler plate is tedious, though at this point I just blindly type it, use a generator,  or use <a href="http://www.smileonmymac.com/TextExpander/">TextExpander</a>. None of these have been deal breakers for me, and I have worked on half a dozen large scale production projects with PureMVC. All of them have been succesful, scaled well, and were easy to manage from a development perspective.</p>
<p>That said, given the opportunity to eliminate the drawbacks of PureMVC, while still retaining the scalability and general workflow, I am all over it.</p>
<h2>Sounds great, what's the catch?</h2>
<p>Robotlegs actively defines a PureMVC style MVC structure to your application.  You are extending framework classes with your actors instead of using plain-old-actionscript objects. Other frameworks avoid this, but at the cost of convenience in a lot of cases. If you like the PureMVC structure, this isn't going to be a big deal. If you hate it, you might hate Robotlegs (but should give it a try anyway). Robotlegs has done a great job of reducing the pain involved by addressing the major complaints that I've seen publicly in various critiques of PureMVC.</p>
<div class="note-block">Be sure to check out <a href="#comment-12885020">Shaun's response</a> to these items in the comments below.</div>
<p>Robotlegs is still very young and hasn't been thoroughly peer reviewed. My guess is that you will start to hear more about this framework soon. It is already kickass, even at this early stage. Certainly one to keep your eye on.</p>
<div class="note-block">As of now Robotlegs has been receiving a lot of peer review and input. At the .9 release it is approaching razor sharpness</div>
<p><img class="aligncenter size-full wp-image-262" title="robotlegssketchsmall" src="http://69.164.207.135/wp-content/uploads/2009/07/robotlegssketchsmall.gif" alt="robotlegssketchsmall" width="221" height="260" /></p>
<p>Resources:<br />
<a href="http://groups.google.com/group/robotlegs">Robolegs Google Group</a><br />
<a href="http://shaun.boyblack.co.za/blog/2009/06/17/robotlegs-as3-introductory-screencast/">Robolegs Screencasts</a><br />
<a href="http://github.com/darscan/robotlegs/tree/master">Robolegs Source</a></p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2009/07/17/robotlegs-as3-a-dependency-injection-driven-mvcs-framework-for-flashflex-%e2%80%93-inspired-by-puremvc/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Inversion of Control and Dependency Injection with Flex using the Parsley Application Framework &#8211; Part 2</title>
		<link>http://joelhooks.com/2009/07/14/inversion-of-control-and-dependency-injection-with-flex-using-the-parsley-application-framework-part-2/</link>
		<comments>http://joelhooks.com/2009/07/14/inversion-of-control-and-dependency-injection-with-flex-using-the-parsley-application-framework-part-2/#comments</comments>
		<pubDate>Tue, 14 Jul 2009 14:31:56 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[design patterns]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[object oriented concepts]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=226</guid>
		<description><![CDATA[This is the second part in a series exploring Inversion of Control and Dependency Injection containers available for Flex. In the first part of the series we discussed what IoC and DI are and how they can benefit our applications. In this part, we will explore the Parsley IoC Container through a simple image gallery [...]]]></description>
			<content:encoded><![CDATA[<p>This is the second part in a series exploring Inversion of Control and Dependency Injection containers available for Flex. In <a href="http://joelhooks.com/2009/07/12/inversion-of-control-and-dependency-injection-in-flex-using-the-parsley-application-framework-part-1/">the first part of the series we discussed what IoC and DI</a> are and how they can benefit our applications. In this part, we will explore the Parsley IoC Container through a simple image gallery application.</p>
<p><a href="http://github.com/joelhooks/IoC-DI-Flex-Example/tree/master">Here's the source on github...</a></p>
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_ParsleyGallery_1580381838"
			class="flashmovie"
			width="500"
			height="600">
	<param name="movie" value="http://joelhooks.com/examples/parsleyGallery/ParsleyGallery.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://joelhooks.com/examples/parsleyGallery/ParsleyGallery.swf"
			name="fm_ParsleyGallery_1580381838"
			width="500"
			height="600">
	<!--<![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>
<div class="note-block">The above is a simple image gallery that is grabbing the top 100 'interestingness' images from Flickr. It is built with Flex 4 and uses a mix of halo components (the images) and spark components for layout. Parsley in its current state does NOT support the Flex 4.0.0 SDK. It IS however opensource, and only required a single change to function in Flex 4. Namely, there is a call to Application.application which has been 'deprecated' (and by that they mean completely broken) and replaced by FlexGlobals.topLevelApplication. The modified SWC files are included in the source repository for the project. <strong>The modified swc files WILL NOT function with Flex 3.*.*</strong></div>
<p><span id="more-226"></span></p>
<h2>Less talk. More Code.</h2>
<p>One aspect of an IoC/DI container that is consistent across frameworks is the need to bootstrap the configuration. Parsley provides several ways to accomplish this.</p>
<p><a href="http://www.spicefactory.org/parsley/docs/2.0/manual/config.php#intro">from the docs</a>:</p>
<blockquote><p>Configuring and initializing the Parsley Framework usually consists of the following steps:</p>
<p><strong>Step 1</strong>: Telling the IOC Container which classes it should manage. This can be done with MXML, XML files or in ActionScript. All three mechanisms will be described in the following sections.</p>
<p><strong>Step 2:</strong> Configure the container services like Dependency Injection or Messaging for each individual class. This can be done with the mechanism you had chosen for step 1 (e.g. with MXML or XML configuration tags) or - in most cases - conveniently with AS3 Metadata Tags right within the classes themselves.</p>
<p><strong>Step 3:</strong> Initialize the IOC Container (usually on application startup). In Parsley 2 this is a one-liner in most cases. See the sections below for examples.</p></blockquote>
<p>In the image gallery sample step one is accomplished in Beans.mxml. Beans is, I assume, a throwback to Java that I don't fully understand, but it seems to be a popular convention and I'm not here to rock the boat.</p>
<h3>Beans.mxml</h3>

<div class="wp_codebox"><table><tr id="p22632"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</pre></td><td class="code" id="p226code32"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">	Inversion of Control/Dependency Injection Using Parsley</span>
<span style="color: #808080; font-style: italic;">	Image Gallery</span>
&nbsp;
<span style="color: #808080; font-style: italic;">	Any portion of this demonstration may be reused for any purpose where not</span>
<span style="color: #808080; font-style: italic;">	licensed by another party restricting such use. Please leave the credits intact.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">	Joel Hooks</span>
<span style="color: #808080; font-style: italic;">	http://joelhooks.com</span>
<span style="color: #808080; font-style: italic;">	joelhooks@gmail.com</span>
<span style="color: #808080; font-style: italic;">--&gt;</span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Object</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://www.spicefactory.org/parsley&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:models</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.models.*&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:controllers</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.controllers.*&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:presentation</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.models.presentation.*&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    	<span style="color: #339933;">&lt;![CDATA[</span>
<span style="color: #339933;">    		import com.joelhooks.parsley.example.delegates.FlickrImageServiceDelegate;</span>
<span style="color: #339933;">    	]]&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!-- Service Delegate --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;object</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;photoServiceDelegate&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;{FlickrImageServiceDelegate}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;apiKey&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;YOUR_KEY_HERE&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;secret&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;YOUR_SECRET_HERE&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/object<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!-- Model --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;presentation:FlickrGalleryPresentationModel</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;galleryPresentationModel&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!-- Actions --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;controllers:RetrieveGalleryAction</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;controllers:DisplayGalleryAction</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;controllers:SelectImageAction</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Object<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>The application has several actors that Parsley needs to be aware of, and this is where you let the container know what they are. In most cases we can simple use MXML notation to include our classes in the configuration. The photo service, in this case Flickr, needs additional configuration so it is added a bit differently utilizing the Parsley Object and Property tags. When using this method the class needs to be imported as above to provide a reference. In addition to the service the presentation model is also added to the configuration, as well as several actions that will react to various events. The Model and Controller of the MVC triad are what we are configuring here. The View is handled a bit differently.</p>
<p>The configuration is loaded in the preinitialize handle of the main application MXML.</p>
<h3>ParsleyGallery.mxml:</h3>

<div class="wp_codebox"><table><tr id="p22633"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
</pre></td><td class="code" id="p226code33"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">	Inversion of Control/Dependency Injection Using Parsley</span>
<span style="color: #808080; font-style: italic;">	Image Gallery</span>
&nbsp;
<span style="color: #808080; font-style: italic;">	Any portion of this demonstration may be reused for any purpose where not</span>
<span style="color: #808080; font-style: italic;">	licensed by another party restricting such use. Please leave the credits intact.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">	Joel Hooks</span>
<span style="color: #808080; font-style: italic;">	http://joelhooks.com</span>
<span style="color: #808080; font-style: italic;">	joelhooks@gmail.com</span>
<span style="color: #808080; font-style: italic;">--&gt;</span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:Application</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:fx</span>=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">preinitialize</span>=<span style="color: #ff0000;">&quot;onPreInitialize()&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:s</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/halo&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">minWidth</span>=<span style="color: #ff0000;">&quot;1024&quot;</span> <span style="color: #000066;">minHeight</span>=<span style="color: #ff0000;">&quot;768&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:tag</span>=<span style="color: #ff0000;">&quot;org.spicefactory.parsley.flex.tag.*&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:spicefactory</span>=<span style="color: #ff0000;">&quot;http://www.spicefactory.org/parsley/flex&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">addedToStage</span>=<span style="color: #ff0000;">&quot;this.addedToStageHandler(event)&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">applicationComplete</span>=<span style="color: #ff0000;">&quot;trace('application complete');&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:views</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.views.*&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:delegates</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.delegates.*&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:VerticalLayout</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #339933;">&lt;![CDATA[</span>
<span style="color: #339933;">			import com.joelhooks.parsley.example.delegates.FlickrImageServiceDelegate;</span>
<span style="color: #339933;">			import mx.controls.Button;</span>
<span style="color: #339933;">			import org.spicefactory.lib.reflect.types.Void;</span>
<span style="color: #339933;">			import org.spicefactory.lib.logging.Logger;</span>
<span style="color: #339933;">			import mx.logging.LogEventLevel;</span>
<span style="color: #339933;">			import com.joelhooks.parsley.example.events.GalleryImageServiceEvent;</span>
<span style="color: #339933;">			import org.spicefactory.parsley.flex.FlexContextBuilder;</span>
&nbsp;
<span style="color: #339933;">			protected function onPreInitialize():void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				this.logTarget.level = LogEventLevel.ALL;</span>
<span style="color: #339933;">				FlexContextBuilder.build(Beans);</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			protected function addedToStageHandler(event:Event):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				//Let the container know that this component is ready to be added</span>
<span style="color: #339933;">				//to the view context</span>
<span style="color: #339933;">				dispatchEvent(new Event('configureIOC', true));</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">		]]&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fx:Declarations<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:TraceTarget</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;logTarget&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fx:Declarations<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;views:GalleryView</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:Application<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>We want to make sure that the Parsley container is configured at the first opportunity, and preinitialize provides this hook. After the application has been added to the stage, we need to dispatch a message to the container so that it can be added to the ViewContext allowing the visual components to interact with the container. This is done by dispatching a bubbling 'configureIOC' event in the addedtoStage handler.</p>
<p>This needs to be done for all viewComponents that require access to the container as you will see in the child GalleryView. At this point, the application is fully configured within the IoC Container. Our actors that have been configured in Beans.mxml have had their appropriate dependencies injected, and our Actions are ready to receive messages from the other objects in the container.</p>
<h3>DisplayGalleryAction.as:</h3>

<div class="wp_codebox"><table><tr id="p22634"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
</pre></td><td class="code" id="p226code34"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/*
	Inversion of Control/Dependency Injection Using Parsley
	Image Gallery
&nbsp;
	Any portion of this demonstration may be reused for any purpose where not
	licensed by another party restricting such use. Please leave the credits intact.
&nbsp;
	Joel Hooks
	http://joelhooks.com
	joelhooks@gmail.com
*/</span>
package com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">controllers</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">GalleryEvent</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">GalleryImageEvent</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">models</span>.<span style="color: #006600;">presentation</span>.<span style="color: #006600;">IGalleryPresentationModel</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">models</span>.<span style="color: #006600;">vo</span>.<span style="color: #006600;">GalleryImage</span>;
&nbsp;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">EventDispatcher</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;selectGalleryImage&quot;</span>, <span style="color: #0066CC;">type</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.events.GalleryImageEvent&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
	<span style="color: #66cc66;">&#91;</span>ManagedEvents<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;selectGalleryImage&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> DisplayGalleryAction <span style="color: #0066CC;">extends</span> EventDispatcher
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #66cc66;">&#91;</span>Inject<span style="color: #66cc66;">&#40;</span>id=<span style="color: #ff0000;">&quot;galleryPresentationModel&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> galleryPresentationModel:IGalleryPresentationModel;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> DisplayGalleryAction<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #66cc66;">&#91;</span>MessageHandler<span style="color: #66cc66;">&#40;</span>selector=<span style="color: #ff0000;">&quot;galleryLoaded&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> handleGalleryLoaded<span style="color: #66cc66;">&#40;</span>event:GalleryEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">galleryPresentationModel</span>.<span style="color: #006600;">gallery</span> = event.<span style="color: #006600;">gallery</span>
			<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span>event.<span style="color: #006600;">gallery</span>.<span style="color: #006600;">photos</span>.<span style="color: #0066CC;">length</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">dispatchEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> GalleryImageEvent<span style="color: #66cc66;">&#40;</span>GalleryImageEvent.<span style="color: #006600;">SELECT_GALLERY_IMAGE</span>,
				event.<span style="color: #006600;">gallery</span>.<span style="color: #006600;">photos</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span> as GalleryImage<span style="color: #66cc66;">&#41;</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></td></tr></table></div>

<p>The DisplayGalleryAction class is wired to listen for the system message (event) galleryLoaded. It has no interest in where this message originates, and simply responds as instructed when the message is received. The handleGalleryLoaded method is designated as the MessageHandler for the galleryLoaded message. The message is an actionscript event that has been intercepted by the container and routed to interested parties. You will notice that the handleGalleryLoaded method is constructed exactly like any other Actionscript event handler (with the addition of the Parsley metadata). In this case it receives the custom GalleryEvent that carries some information.</p>
<p>Additionally, DisplayGalleryAction has been injected with our FlickrGalleryPresentationModel from Beans.mxml. FlickrGalleryPresentationModel implements IGalleryPresentationModel, and Parsley will inject any class that implements this interface and has the appropriate ID 'galleryPresentationModel'.</p>
<p>DisplayGalleryAction also dispatches the ManagedEvent 'selectGalleryImage'. Any container actor that dispatches events that need to be distributed to other interested parties need to let the container know. The class is annotated with AS3 metadata designating which ManagedEvent the class will be sending to the container.</p>
<div class="note-block">It is important to note that Parsley does not impose any strict patterns on your application. Any of the actors can be wired to received dependency injections and send/receive messages from the container. It is up to you to architect your application in the manner most appropriate to your environment.</div>
<p>DisplayGalleryAction receives Messages from FlickrImageServiceDelegate. it could, of course, receive its Messages from any class that is managed by the container, but in this case it is only interested in the data loaded by the delegate.</p>
<h3>FlickrImageServiceDelegate.as:</h3>

<div class="wp_codebox"><table><tr id="p22635"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
</pre></td><td class="code" id="p226code35"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/*
	Inversion of Control/Dependency Injection Using Parsley
	Image Gallery
&nbsp;
	Any portion of this demonstration may be reused for any purpose where not
	licensed by another party restricting such use. Please leave the credits intact.
&nbsp;
	Joel Hooks
	http://joelhooks.com
	joelhooks@gmail.com
*/</span>
package com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">delegates</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">webapis</span>.<span style="color: #006600;">flickr</span>.<span style="color: #006600;">FlickrService</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">webapis</span>.<span style="color: #006600;">flickr</span>.<span style="color: #006600;">Photo</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">webapis</span>.<span style="color: #006600;">flickr</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">FlickrResultEvent</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">webapis</span>.<span style="color: #006600;">flickr</span>.<span style="color: #006600;">methodgroups</span>.<span style="color: #006600;">Photos</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">webapis</span>.<span style="color: #006600;">flickr</span>.<span style="color: #006600;">methodgroups</span>.<span style="color: #006600;">helpers</span>.<span style="color: #006600;">PhotoSearchParams</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">GalleryEvent</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">GalleryImageServiceEvent</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">models</span>.<span style="color: #006600;">vo</span>.<span style="color: #006600;">Gallery</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">joelhooks</span>.<span style="color: #006600;">parsley</span>.<span style="color: #006600;">example</span>.<span style="color: #006600;">models</span>.<span style="color: #006600;">vo</span>.<span style="color: #006600;">GalleryImage</span>;
&nbsp;
	<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>;
&nbsp;
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">ArrayCollection</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;serviceReady&quot;</span>, <span style="color: #0066CC;">type</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.events.GalleryImageServiceEvent&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
	<span style="color: #66cc66;">&#91;</span>Event<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">name</span>=<span style="color: #ff0000;">&quot;galleryLoaded&quot;</span>,<span style="color: #0066CC;">type</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.events.GalleryEvent&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
	<span style="color: #66cc66;">&#91;</span>ManagedEvents<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;galleryLoaded,serviceReady&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> FlickrImageServiceDelegate <span style="color: #0066CC;">extends</span> EventDispatcher <span style="color: #0066CC;">implements</span> IGalleryImageServiceDelegate
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> service:FlickrService;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> photos:Photos;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> apiKey:<span style="color: #0066CC;">String</span>;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> secret:<span style="color: #0066CC;">String</span>;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> NSID:<span style="color: #0066CC;">String</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> FlickrImageServiceDelegate<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #66cc66;">&#91;</span>PostConstruct<span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> init<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;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Configuring Service&quot;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">service</span> = <span style="color: #000000; font-weight: bold;">new</span> FlickrService<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span>.<span style="color: #006600;">apiKey</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">photos</span> = <span style="color: #000000; font-weight: bold;">new</span> Photos<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span>.<span style="color: #006600;">service</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">dispatchEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> GalleryImageServiceEvent<span style="color: #66cc66;">&#40;</span>GalleryImageServiceEvent.<span style="color: #006600;">SERVICE_READY</span><span style="color: #66cc66;">&#41;</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> loadGallery<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			service.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>FlickrResultEvent.<span style="color: #006600;">INTERESTINGNESS_GET_LIST</span>, handleSearchResult<span style="color: #66cc66;">&#41;</span>;
			service.<span style="color: #006600;">interestingness</span>.<span style="color: #006600;">getList</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> handleSearchResult<span style="color: #66cc66;">&#40;</span>event:FlickrResultEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">processFlickrPhotoResults</span><span style="color: #66cc66;">&#40;</span>event.<span style="color: #0066CC;">data</span>.<span style="color: #006600;">photos</span>.<span style="color: #006600;">photos</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		protected <span style="color: #000000; font-weight: bold;">function</span> processFlickrPhotoResults<span style="color: #66cc66;">&#40;</span>results:<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: #000000; font-weight: bold;">var</span> gallery:Gallery = <span style="color: #000000; font-weight: bold;">new</span> Gallery<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			gallery.<span style="color: #006600;">photos</span> = <span style="color: #000000; font-weight: bold;">new</span> ArrayCollection<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</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> flickrPhoto:Photo <span style="color: #b1b100;">in</span> results<span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #000000; font-weight: bold;">var</span> photo:GalleryImage = <span style="color: #000000; font-weight: bold;">new</span> GalleryImage<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
				<span style="color: #000000; font-weight: bold;">var</span> baseURL:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">'http://farm'</span> + flickrPhoto.<span style="color: #006600;">farmId</span> + <span style="color: #ff0000;">'.static.flickr.com/'</span> + flickrPhoto.<span style="color: #006600;">server</span> + <span style="color: #ff0000;">'/'</span> + flickrPhoto.<span style="color: #006600;">id</span> + <span style="color: #ff0000;">'_'</span> + flickrPhoto.<span style="color: #006600;">secret</span>;
				photo.<span style="color: #006600;">thumbURL</span> = baseURL + <span style="color: #ff0000;">'_s.jpg'</span>;
				photo.<span style="color: #0066CC;">URL</span> = baseURL + <span style="color: #ff0000;">'.jpg'</span>;
				gallery.<span style="color: #006600;">photos</span>.<span style="color: #006600;">addItem</span><span style="color: #66cc66;">&#40;</span> photo <span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">dispatchEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> GalleryEvent<span style="color: #66cc66;">&#40;</span>GalleryEvent.<span style="color: #006600;">GALLERY_LOADED</span>, gallery<span style="color: #66cc66;">&#41;</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></td></tr></table></div>

<p>As we've seen, the FlickrImageServiceDelegate is an implementation of the IGalleryImageServiceDelegate interface. This allows us to program to an interface instead of an implementation for that loose coupling goodness we all crave. This will come in very handy when we want to modify the application to handle multiple services or build mock objects for the purpose of unit testing (the subject of part 3).</p>
<p>As with the DisplayGalleryAction class, FlickrImageServiceDelegate is configured to send ManagedEvent messages to the container. One of these events is 'serviceReady'. FlickrImageServiceDelegate utilizes the [PostConstruct] annotation on its init method. When this class was configured, we injected properties (the apiKey and secret), and the service cannot be configured without these. Using [PostConstruct] the container is ordered to run the annotated method after the class has been configured thus ensuring our properties have been injected as expected. FlickrImageServiceDelegate then dispatches the 'serviceReady' Message so that the actors waiting to get to work can do what they need to do.</p>
<p>The GalleryView is responsible for displaying the data and accepting user interaction.</p>
<h3>GalleryView.mxml</h3>

<div class="wp_codebox"><table><tr id="p22636"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
</pre></td><td class="code" id="p226code36"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">	Inversion of Control/Dependency Injection Using Parsley</span>
<span style="color: #808080; font-style: italic;">	Image Gallery</span>
&nbsp;
<span style="color: #808080; font-style: italic;">	Any portion of this demonstration may be reused for any purpose where not</span>
<span style="color: #808080; font-style: italic;">	licensed by another party restricting such use. Please leave the credits intact.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">	Joel Hooks</span>
<span style="color: #808080; font-style: italic;">	http://joelhooks.com</span>
<span style="color: #808080; font-style: italic;">	joelhooks@gmail.com</span>
<span style="color: #808080; font-style: italic;">--&gt;</span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:Group</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:fx</span>=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:s</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/halo&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;500&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;600&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">addedToStage</span>=<span style="color: #ff0000;">&quot;dispatchEvent(new Event('configureIOC', true));&quot;</span> <span style="color: #000066;">creationComplete</span>=<span style="color: #ff0000;">&quot;creationCompleteHandler(event)&quot;</span> <span style="color: #000066;">xmlns:display</span>=<span style="color: #ff0000;">&quot;com.joelhooks.display.*&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:BasicLayout</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fx:Metadata<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		[Event(name=&quot;selectGalleryImage&quot;, type=&quot;com.joelhooks.parsley.example.events.GalleryImageEvent&quot;)]
		[ManagedEvents(&quot;selectGalleryImage&quot;)]
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fx:Metadata<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #339933;">&lt;![CDATA[</span>
<span style="color: #339933;">			import org.spicefactory.lib.reflect.types.Void;</span>
<span style="color: #339933;">			import mx.events.FlexEvent;</span>
<span style="color: #339933;">			import com.joelhooks.parsley.example.events.GalleryImageEvent;</span>
<span style="color: #339933;">			import com.joelhooks.parsley.example.models.presentation.IGalleryPresentationModel;</span>
<span style="color: #339933;">			import com.joelhooks.parsley.example.views.renderers.GalleryImageThumbnailItemRenderer;</span>
<span style="color: #339933;">			import mx.collections.ArrayCollection;</span>
&nbsp;
<span style="color: #339933;">			[Bindable]</span>
<span style="color: #339933;">			[Inject(id=&quot;galleryPresentationModel&quot;)]</span>
<span style="color: #339933;">			public var model:IGalleryPresentationModel;</span>
&nbsp;
&nbsp;
<span style="color: #339933;">			protected function creationCompleteHandler(event:FlexEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				this.dgThumbnails.addEventListener( GalleryImageEvent.SELECT_GALLERY_IMAGE, handleSelectImage);</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			protected function handleSelectImage(event:GalleryImageEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				this.dispatchEvent(event);</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">		]]&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:Group</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;100%&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:Rect</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;100%&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:fill<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
				<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:SolidColor</span> <span style="color: #000066;">color</span>=<span style="color: #ff0000;">&quot;#000000&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:fill<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:Rect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:Group<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:Group</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span>  <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;100%&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:VerticalLayout</span> <span style="color: #000066;">gap</span>=<span style="color: #ff0000;">&quot;0&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;display:ImageSwap</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;image&quot;</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;100%&quot;</span> <span style="color: #000066;">source</span>=<span style="color: #ff0000;">&quot;{this.model.selectedImage.URL}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:DataGroup</span></span>
<span style="color: #009900;">			<span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;dgThumbnails&quot;</span></span>
<span style="color: #009900;">			<span style="color: #000066;">clipAndEnableScrolling</span>=<span style="color: #ff0000;">&quot;true&quot;</span></span>
<span style="color: #009900;">			<span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;500&quot;</span></span>
<span style="color: #009900;">			<span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;85&quot;</span> <span style="color: #000066;">mouseEnabled</span>=<span style="color: #ff0000;">&quot;{!image.changingImages}&quot;</span> <span style="color: #000066;">mouseChildren</span>=<span style="color: #ff0000;">&quot;{!image.changingImages}&quot;</span></span>
<span style="color: #009900;">			<span style="color: #000066;">dataProvider</span>=<span style="color: #ff0000;">&quot;{this.model.gallery.photos}&quot;</span></span>
<span style="color: #009900;">			<span style="color: #000066;">itemRenderer</span>=<span style="color: #ff0000;">&quot;com.joelhooks.parsley.example.views.renderers.GalleryImageThumbnailItemRenderer&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
				<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:HorizontalLayout</span> <span style="color: #000066;">gap</span>=<span style="color: #ff0000;">&quot;0&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:layout<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:DataGroup<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:HScrollBar</span> <span style="color: #000066;">viewport</span>=<span style="color: #ff0000;">&quot;{this.dgThumbnails}&quot;</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;500&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:Group<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:Group<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>As with the main application MXML, the GalleryView sends a 'configureIOC' event to the container when it is added to the stage. This allows it to participate in the Messaging system and have its dependencies injected. GalleryView dispatches one message, 'selectGalleryImage', when a user clicks a thumbnail. It is also injected with a reference to the applications IGalleryPresentationModel (FlickrGalleryPresentationModel) where it accesses the array collection containing the objects presented in the thumbnail DataGroup.</p>
<p>There are two more Actions, RetreiveGalleryAction and SelectImageAction that function as their names imply. In addition the project has several custom events that are used for messaging. I'm not going to detail these as it would be repetitive, but it is worth noting that this only scratches the surface of the features that are available in Parsley. The docs are extensive, and the API is extremely robust. Typically you won't ever need to access the API directly after you make the call in the preinitialize method to bootstrap the container. After that it does its work silently in the background.</p>
<h2>So I think...</h2>
<p>Parsley could be considered a 'magical' black box framework. This is the trade off you get removing all of the boiler plate code you see in other frameworks. Looking at the extent of classes and libraries that make up Parsley is intimidating. You are placing a lot of trust in a complicated framework and have to hope that trust isn't misplaced. There is something to be said for a simple 'non-magical' framework like PureMVC. Yes, it comes at the cost of boiler plate code, but comprehension is less of a concern.</p>
<p>The biggest challenge Parsley presents to learning the framework is that code examples are scarce (at best) outside of the out of context examples in the (excellent otherwise) documentation and a <a href="http://www.sitronnier.com/blog/parsley-2-basic-flex-example">couple blog posts</a>. Researching the framework, I actually found myself referring to SWiZ examples to understand some of the applied concepts. This is interesting in that the SWiZ examples really do carry over, as the frameworks have significant overlap in scope and functionality. There is <a href="http://groups.google.com/group/swiz-framework/browse_thread/thread/dc418a286c9a3f76">a thread on the SWiZ Google Group</a> that goes into this, and I was surprised to see the complete lack of knowledge even to the existence of Parsley. I've been aware of the framework since early 2008, but didn't take time to get my head around it. It really is perplexing as to why there aren't more examples floating around, as Parsley is very mature and robust at this stage in its development. That is something that I really love about PureMVC. Cliff has done such an excellent job centralizing the examples and framework tutorials with <a href="http://trac.puremvc.org/PureMVC_AS3/">the manifold project</a>. The effort it takes to maintain are huge, so I understand that most don't have the time or inclination to do so, but it is much appreciated to be sure.</p>
<p>In Part 3 we will go into swapping out the service and get a little unit testing coverage on the application.</p>
<div class="note-block">I got a little distracted with <a href="http://joelhooks.com/2009/07/17/robotlegs-as3-a-dependency-injection-driven-mvcs-framework-for-flashflex-–-inspired-by-puremvc/">Robotlegs</a> and wrote <a href="http://joelhooks.com/2009/07/21/unit-testing-with-inversion-of-control-ioc-and-dependency-injection-di-with-the-robotlegs-framework-and-flexunit-4/">part 3</a> of this tutorial with that framework instead. Parsley is awesome, but Robotlegs suits my needs and makes me smile.</div>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2009/07/14/inversion-of-control-and-dependency-injection-with-flex-using-the-parsley-application-framework-part-2/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Inversion of Control and Dependency Injection in Flex using the Parsley Application Framework &#8211; Part 1</title>
		<link>http://joelhooks.com/2009/07/12/inversion-of-control-and-dependency-injection-in-flex-using-the-parsley-application-framework-part-1/</link>
		<comments>http://joelhooks.com/2009/07/12/inversion-of-control-and-dependency-injection-in-flex-using-the-parsley-application-framework-part-1/#comments</comments>
		<pubDate>Mon, 13 Jul 2009 00:53:34 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[design patterns]]></category>
		<category><![CDATA[object oriented concepts]]></category>
		<category><![CDATA[software architecture]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=194</guid>
		<description><![CDATA[The Inversion of Control (IoC) design principle and the related Dependency Injection (DI) design pattern have been around for several years. In the Java world, popular frameworks such as Spring make heavy use of these concepts. With the introduction of Actionscript 3 in 2006, the opportunities for framework development increased greatly. As the community matures, [...]]]></description>
			<content:encoded><![CDATA[<p>The Inversion of Control (IoC) design principle and the related Dependency Injection (DI) design pattern have been around for several years. In the Java world, popular frameworks such as Spring make heavy use of these concepts. With the introduction of Actionscript 3 in 2006, the opportunities for framework development increased greatly. As the community matures, we are starting to see robust tools appear on the development landscape. It is a good time to be a Flash geek!</p>
<p>Through this series of articles, we will delve into the <a href="http://www.spicefactory.org/parsley/">Parsley application framework</a> and look at how it implements IoC and DI in the context of a photo slideshow. Through this example we will look at bootstrapping the container, connecting to services, and populating our components with the results. In this first part, we will get an overview of IoC and DI and talk about some of the benefits and drawbacks of using these concepts in our applications.<br />
<span id="more-194"></span></p>
<h3>What is Inversion of Control?</h3>
<blockquote><p>One important characteristic of a framework is that the methods defined by the user to tailor the framework will often be called from within the framework itself, rather than from the user's application code. The framework often plays the role of the main program in coordinating and sequencing application activity. This inversion of control gives frameworks the power to serve as extensible skeletons. The methods supplied by the user tailor the generic algorithms defined in the framework for a particular application. --Ralph Johnson and Brian Foote [<a href="http://www.laputan.org/drc/drc.html">1</a>]</p></blockquote>
<p>If you are using an Actionscript framework in your development, odds are you’re making use of IoC. This includes <a href="http://www.adobe.com/products/flex/">Flex</a> itself, <a href="http://puremvc.org/">PureMVC</a>, <a href="http://mate.asfusion.com/">Mate</a>, <a href="http://code.google.com/p/swizframework/">SWiZ</a>, Parsley, and other similar frameworks. The framework is providing an abstracted skeleton to which the developer can code against. Communication between the actors in the system are coordinated by the framework within a predefined architecture. In other words, some level of control is inverted from the individual components of an application to the underlying framework.</p>
<p>This inversion can be approached from many different directions. In frameworks such as PureMVC and <a href="http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm">Cairngorm</a>, this inversion of control is handled by extension of framework classes. By extending these objects, the framework is provided with the appropriate interface to access and manipulate the application specific objects. Frameworks such as Parsley and SWiZ provide metadata annotation as the mechanism for wiring into the framework.</p>
<h3>What is Dependency Injection?</h3>
<p>DI is a design pattern canonized by Martin Fowler [<a href="http://martinfowler.com/articles/injection.html">2</a>]. Essentially, your application’s objects do not configure themselves. They rely on an external mechanism for configuration that ‘injects’ the object’s dependencies by populating its instance variables. Fowler felt that Inversion of Control was too generic of a description (as all frameworks tend to invert control), and decided on the name Dependency Injection for the pattern.</p>
<blockquote><p>Dependency Injection means giving an object its instance variables [<a href="http://jamesshore.com/Blog/Dependency-Injection-Demystified.html">3</a>]</p></blockquote>
<p>Say what? Given this simple definition of DI, this is something we are all making use of on a constant basis. Unless you are writing strictly procedural AS3 (which is certainly possible), DI is likely being used in your applications. Yes, the concept can quickly become more complex - abstracting simple concepts tends to have that effect.</p>
<p>The pattern describes three primary methods for injecting our dependencies:</p>
<div>
<p>
<strong>Constructor Injection:</strong></p>

<div class="wp_codebox"><table><tr id="p19443"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code" id="p194code43"><pre class="actionscript" style="font-family:monospace;">package
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MyObject
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> dependsOn:IDependency;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> MyObject<span style="color: #66cc66;">&#40;</span>dependsOn:IDependency<span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">dependsOn</span> = dependsOn;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>usage:</p>

<div class="wp_codebox"><table><tr id="p19444"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p194code44"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> myObject:MyObject = <span style="color: #000000; font-weight: bold;">new</span> MyObject<span style="color: #66cc66;">&#40;</span>aDependencyImplementation<span style="color: #66cc66;">&#41;</span>;</pre></td></tr></table></div>

</p>
</div>
<div>
<p>
<strong>Setter Injection:</strong></p>

<div class="wp_codebox"><table><tr id="p19445"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code" id="p194code45"><pre class="actionscript" style="font-family:monospace;">package
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MyObject
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> dependsOn:IDependency;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> MyObject<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> setDependsOn<span style="color: #66cc66;">&#40;</span>value:IDependency<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">dependsOn</span> = value;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>usage:</p>

<div class="wp_codebox"><table><tr id="p19446"><td class="line_numbers"><pre>1
2
</pre></td><td class="code" id="p194code46"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> myObject:MyObject = <span style="color: #000000; font-weight: bold;">new</span> MyObject<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
myObject.<span style="color: #006600;">setDependsOn</span><span style="color: #66cc66;">&#40;</span>aDependencyImplementation<span style="color: #66cc66;">&#41;</span>;</pre></td></tr></table></div>

</p>
</div>
<div>
<p>
<strong>Property Injection:</strong></p>

<div class="wp_codebox"><table><tr id="p19447"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code" id="p194code47"><pre class="actionscript" style="font-family:monospace;">package
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MyObject
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> dependsOn:IDependency;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> MyObject<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>usage:</p>

<div class="wp_codebox"><table><tr id="p19448"><td class="line_numbers"><pre>1
2
</pre></td><td class="code" id="p194code48"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> myObject:MyObject = <span style="color: #000000; font-weight: bold;">new</span> MyObject<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
myObject.<span style="color: #006600;">dependsOn</span> =  aDependencyImplementation;</pre></td></tr></table></div>

</p>
</div>
<p>Setter and property injection are both very similar, and are useful for optional dependencies. Constructor injection is useful for required dependencies that an object must have to function.</p>
<h3>Benefits of Dependency Injection</h3>
<p>One of the primary benefits of DI is related to unit testing your application. DI allows you to create loosely couple objects that can be easily replaced with mock or stub objects for testing. Unit testing needs to test your objects in isolation, without regard for how the object interacts with its various dependencies.</p>
<blockquote><p>A unit test is a user of the object it tests. An object must exist for a reason, so there must be other objects that also use it. Even when only one application object uses it, the fact that the unit test is also a user means it has at least two users, and therefore the object must be reusable by design. Test-driven development (TDD), in which unit tests are written before the objects they test, is gaining as a development best practice. One beneficial consequence of TDD is that objects are designed with testability in mind, and therefore, an object and its dependencies must be loosely coupled and reusable. Dependency injection is a popular pattern to design loosely coupled—and therefore robust, reusable, and testable—objects. [<a href="http://www.ddj.com/development-tools/185300375">4</a>]</p></blockquote>
<p>DI can also encourage component reuse in much the same way. Since the object’s dependencies are not hard-coded, it is open for reuse. The injectable objects are more adaptable allowing developers to see clearly where to start adding features. The loose coupling can create a more maintainable code-base allowing developers to more easily track down bugs.</p>
<h3>Drawbacks of Dependency Injection</h3>
<blockquote><p>No Silver Bullets. [<a href="http://www.virtualschool.edu/mon/SoftwareEngineering/BrooksNoSilverBullet.html">5</a>]</p></blockquote>
<p>DI can potentially obfuscate an application. To understand the application a developer has to understand both the code and the configuration defining the dependency injections. In many situations, an IDE will not be able to read and give feedback on the configuration.</p>
<h3>Inversion of Control Containers</h3>
<p>You don’t need an IoC Container (framework) to benefit from DI. As we have seen, you are probably already using DI in your code, irrespective of your preferred framework. IoC Containers provide out of the box methods for instantiating and configuring your application’s objects. The use of an IoC container is dependent on your (and your application’s) needs. For smaller projects, it might not be appropriate.</p>
<p>In <a href="http://joelhooks.com/2009/07/14/inversion-of-control-and-dependency-injection-with-flex-using-the-parsley-application-framework-part-2/">the second part of this series</a>, we will look into the Parsley application framework and its implementation of an IoC container and DI.</p>
<p>[1] <a href="http://www.laputan.org/drc/drc.html">http://www.laputan.org/drc/drc.html</a><br />
[2] <a href="http://martinfowler.com/articles/injection.html">http://martinfowler.com/articles/injection.html</a><br />
[3] <a href="http://jamesshore.com/Blog/Dependency-Injection-Demystified.html">http://jamesshore.com/Blog/Dependency-Injection-Demystified.html</a><br />
[4] <a href="http://www.ddj.com/development-tools/185300375">http://www.ddj.com/development-tools/185300375</a><br />
[5] <a href="http://www.virtualschool.edu/mon/SoftwareEngineering/BrooksNoSilverBullet.html">http://www.virtualschool.edu/mon/SoftwareEngineering/BrooksNoSilverBullet.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2009/07/12/inversion-of-control-and-dependency-injection-in-flex-using-the-parsley-application-framework-part-1/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Piping the Machine: PureMVC Multicore with Pipes and the Finite State Machine (FSM)</title>
		<link>http://joelhooks.com/2009/05/18/piping-the-machine-puremvc-multicore-with-pipes-and-the-finite-state-machine-fsm/</link>
		<comments>http://joelhooks.com/2009/05/18/piping-the-machine-puremvc-multicore-with-pipes-and-the-finite-state-machine-fsm/#comments</comments>
		<pubDate>Mon, 18 May 2009 20:19:43 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[AIR]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[puremvc]]></category>
		<category><![CDATA[pyAMF]]></category>
		<category><![CDATA[python]]></category>
		<category><![CDATA[software architecture]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=177</guid>
		<description><![CDATA[This is going to be a walkthrough of making use of PureMVC Multicore (AS3). To help in building a PureMVC Multicore application, we are going to make use of the StateMachine utility for initial setup and configuration as well as the Pipes utility for communication between cores. Here's the Source. 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_PipingTheMachine_669867437"
			class="flashmovie"
			width="400"
			height="300">
	<param name="movie" value="/examples/pipemachine/PipingTheMachine.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/examples/pipemachine/PipingTheMachine.swf"
			name="fm_PipingTheMachine_669867437"
			width="400"
			height="300">
	<!--<![endif]-->
		]]></description>
			<content:encoded><![CDATA[<p>This is going to be a walkthrough of making use of PureMVC Multicore (AS3). To help in building a PureMVC Multicore application, we are going to make use of the StateMachine utility for initial setup and configuration as well as the Pipes utility for communication between cores.</p>
<p><a href="http://joelhooks.com/examples/pipemachine/srcview/">Here's the Source.</a></p>
<p style="text-align: center;">[kml_flashembed fversion="9.0.124" movie="/examples/pipemachine/PipingTheMachine.swf" targetclass="flashmovie" useexpressinstall="true" publishmethod="static" width="450" height="500"]<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><br />
<span id="more-177"></span></p>
<h2>Overview</h2>
<p>PureMVC can seem a bit overwhelming at first, but once the core concepts are understood the simplicity of the framework is possibly its biggest strength. Developing multicore applications in PureMVC, that is applications that create multiple instances of the PureMVC core actors (Facade, Model, View, Controller), adds another level of complexity that can be daunting. Luckily, there are utilities to help us out here, and abstract some of the problems with communication between modules loaded into an application.</p>
<p>This tutorial is based on the <a href="http://www.seaofarrows.com" target="_blank">Sea of Arrows player</a> put together by Cliff Hall. My goal was to remove some of the complexity involved with a real application and deconstruct the blocks used to build the player in a form that is easier to digest. It is highly recommended that you check out the player for a further example of this particular application structure.</p>
<p>For the purposes of demonstration this application is kept as simple as possible. For a trivial project, this level of complexity in regards to multiple cores, dynamically loaded modules, a finite state machine, and a plumbed framework for components to communicate is over-engineered (at best). It seems like a lot of work, and it is, but the payoff is when you have a complex project with multiple developers and designers working across many modules. This structure is made to scale, and scale well providing many options for efficient development. It allows for finely grained control of all of the actors in your system.</p>
<h2>The Tools</h2>
<p>Here is a brief overview of the tools we are going to use, and then we will get into some code and look at a simple example of everything put together.</p>
<h3>PureMVC</h3>
<p style="text-align: center;"><img class="aligncenter" src="http://puremvc.org/images/stories/puremvc-icon.jpg" alt="" width="318" height="200" /></p>
<p><em>From the website:</em></p>
<blockquote><p><a href="http://puremvc.org/content/view/67/178/" target="_blank">PureMVC is a lightweight framework</a> for creating applications based upon the classic Model, View and Controller concept.</p>
<p>Based upon proven design patterns, this free, open source framework which was originally implemented in the ActionScript 3 language for use with Adobe Flex, Flash and AIR, is now being ported to all major development platforms.</p></blockquote>
<p>If you want a tutorial for basic PureMVC usage, <a href="http://flash.tutsplus.com/tutorials/workflow/understanding-the-puremvc-open-source-framework/">click here</a>.</p>
<h3>Pipes</h3>
<p><a href="http://trac.puremvc.org/Utility_AS3_MultiCore_Pipes">Pipes</a> is a drop in utility for <a href="http://trac.puremvc.org/PureMVC_AS3_MultiCore">multicore PureMVC</a> applications that utilizes a plumbing metaphor to facilitate communication between cores. If you've ever walked down the PVC aisle of your local mega-hardware store, you are familiar with the objects represented in the utility.</p>
<p style="text-align: center;"><img class="size-full wp-image-187  aligncenter" title="pipes-diagram" src="http://69.164.207.135/wp-content/uploads/2009/05/pipes-diagram.png" alt="pipes-diagram" width="500" height="208" /></p>
<p style="text-align: left;">The above diagram comes from the excellent <a href="http://www.joshuaostrom.com/2008/06/15/understanding-puremvc-pipes/">Pipes overview written by Joshua Ostrom</a>.</p>
<h3>StateMachine</h3>
<p>The <a href="http://trac.puremvc.org/Utility_AS3_StateMachine">StateMachine utility</a> is a <a href="http://en.wikipedia.org/wiki/Finite_state_machine">finite state machine</a> for controlling application state in PureMVC. Configured by XML it seems daunting at first, but is relatively simple with only a handful of classes in the utility to make things happen. It makes for an elegant way to step through logical progressions and control available actions inside your application. This example is utilizing the StateMachine for the initial configuration, but it is possible to create complex workflows with the utility.</p>
<p>Check out the <a href="http://code.google.com/p/puremvc-utilities/">FSMVisualizer</a> for a really cool way to look at the PureMVC StateMachine.</p>
<h2>The Code</h2>
<h3>The Shell</h3>
<p>The shell of the application is the root container that will be in charge of creating instances of the modules and displaying their visual components. In this Flex example of the shell, the main MXML file serves as the viewComponent of the first PureMVC core that will be created.</p>
<p>The application is started like a typical PureMVC application. The difference here is with the naming convention being used. Normally in an application that will make use of a single PureMVC core will will create an ApplicationFacade. In this multicore application we are going to instead name the facade <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/ShellFacade.as.html">ShellFacade</a>.</p>
<p>The <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/ShellFacade.as.html">ShellFacade</a> class contains our notification constants. In this case it also cotains constants related to the StateMachine utility that define the states, their actions, and the notifications associated with those actions.</p>
<p>The StateMachine is initialized in our <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/controller/StartupCommand.as.html">StartupCommand</a>, which is a typical MacroCommand found in most PureMVC applications. The first Command run is the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/controller/state/InjectFSMCommand.as.html">InjectFSMCommand</a> which initializes the StateMachine and provides it with the XML configuration defining the various states. The next Command issued is the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/controller/state/StartShellCommand.as.html">StartShellCommand</a>, which is our initial state as configured by the StateMachine.</p>

<div class="wp_codebox"><table><tr id="p17750"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
</pre></td><td class="code" id="p177code50"><pre class="xml" style="font-family:monospace;">var fsm:XML =
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fsm</span> <span style="color: #000066;">initial</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.STARTING<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
	<span style="color: #808080; font-style: italic;">&lt;!-- STARTUP THE SHELL --&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;state</span> <span style="color: #000066;">name</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.STARTING<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
       <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;transition</span> <span style="color: #000066;">action</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.STARTED<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #009900;">       			   <span style="color: #000066;">target</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.PLUMBING<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
       <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;transition</span> <span style="color: #000066;">action</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.STARTUP_FAILED<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #009900;">       			   <span style="color: #000066;">target</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.FAILING<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/state<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #808080; font-style: italic;">&lt;!-- PLUMB THE CORES --&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;state</span> <span style="color: #000066;">name</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.PLUMBING<span style="color: #66cc66;">&#125;</span> <span style="color: #000066;">changed</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.PLUMB<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
       <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;transition</span> <span style="color: #000066;">action</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.PLUMBED<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #009900;">       			   <span style="color: #000066;">target</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.ASSEMBLING<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
       <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;transition</span> <span style="color: #000066;">action</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.PLUMB_FAILED<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #009900;">       			   <span style="color: #000066;">target</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.FAILING<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/state<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #808080; font-style: italic;">&lt;!-- ASSEMBLE THE VIEW --&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;state</span> <span style="color: #000066;">name</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.ASSEMBLING<span style="color: #66cc66;">&#125;</span> <span style="color: #000066;">changed</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.ASSEMBLE<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
       <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;transition</span> <span style="color: #000066;">action</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.ASSEMBLED<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #009900;">       			   <span style="color: #000066;">target</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.NAVIGATING<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
       <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;transition</span> <span style="color: #000066;">action</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.ASSEMBLY_FAILED<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #009900;">       			   <span style="color: #000066;">target</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.FAILING<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/state<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #808080; font-style: italic;">&lt;!-- READY TO ACCEPT BROWSER OR USER NAVIGATION --&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;state</span> <span style="color: #000066;">name</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.NAVIGATING<span style="color: #66cc66;">&#125;</span> <span style="color: #000066;">changed</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.NAVIGATE<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
	<span style="color: #808080; font-style: italic;">&lt;!-- REPORT FAILURE FROM ANY STATE --&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;state</span> <span style="color: #000066;">name</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.FAILING<span style="color: #66cc66;">&#125;</span> <span style="color: #000066;">changed</span>=<span style="color: #66cc66;">&#123;</span>ShellFacade.FAIL<span style="color: #66cc66;">&#125;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fsm<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>;</pre></td></tr></table></div>

<p>StateMachine states are defined by their <strong>name</strong>, a<strong> changed</strong> property, and <strong>transitions</strong>. Transitions define an <strong>action</strong> that triggers the move to a new state, and a <strong>target</strong> which defines the name of the state in which to move when the action notification is received by the StateMachine. The changed property of a state corresponds directly to the Command defined in the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/ShellFacade.as.html">ShellFacade</a>. When the StateMachine receives a notification to move to a new state, the Command defined in the changed property is executed.</p>
<p><img class="aligncenter size-full wp-image-182" title="pipingthemachinestatediagram" src="http://69.164.207.135/wp-content/uploads/2009/05/pipingthemachinestatediagram.png" alt="pipingthemachinestatediagram" width="491" height="131" /></p>
<p>We start off in the <em>Starting</em> state which simply mediates the shell application. From there we move to the <em>Plumbing</em> state which creates some of the initial Pipes, instantiates the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/logger/LoggerModule.as.html">LoggerModule</a> and connects it to the shell. From there we move to the <em>Assembling</em> state which requests a <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/logger/view/components/LoggerWindow.mxml.html">LoggerWindow</a> viewComponent to add to the stage. From here we move to the <em>Navigating</em> state which has no transitions associated with it. It is our final state and means that our application is configured and ready for the user to interact with. There is also a <em>Failing</em> state, which like the <em>Navigating</em> state has no transitions. If some portion of the configuration process were to fail, this state would be called to notify the user that something horrible has happened.</p>
<p>Communications between modules happens in a module's JunctionMediator. This mediator's viewComponent is a Junction. One issue to consider when utilizing dynamic modules is memory management. The connections made between modules with the Pipes utility need to be managed so that when they are disconnect there are no artifacts left to get in the way of Garbage Collection. This application utilizes an extended JunctionMediator defined by the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/common/view/ManagedJunctionMediator.as.html">ManagedJunctionMediator</a> class which defines a connection pool for the various pipes. When a module is instantiated, the connections are stored in a HashMap. Later, when we want to remove the module, the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/common/view/ManagedJunctionMediator.as.html">ManagedJunctionMediator</a> references its pool of connections and removes any connections related to that particular module. This is an area that needs more refinement, and while it works well for this demonstration, it could be further abstracted to make a more complete solution for this issue. The <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/view/ShellJunctionMediator.as.html">ShellJunctionMediator</a> is the only class extending <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/common/view/ManagedJunctionMediator.as.html">ManagedJunctionMediator</a> in this application.</p>
<p>It is important to note that a JunctionMediator's handleNotifications method needs to have the default in the switch set to super.handleNotification( note ). There are standard notifications that a JunctionMediator listens for that need to be handled. In addition, the listNotificationInterests method is handled a bit differently to accommodate this functionality.</p>
<h2>Adding a Doodad</h2>
<p>When you click on the Add Doodad button, the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/controller/AddNewDoodadCommand.as.html">AddNewDoodadCommand</a> is called. This command instantiates a new <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/doodad/DoodadModule.as.html">DoodadModule</a> and registers a <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/view/DoodadModuleMediator.as.html">DoodadModuleMediator</a> with the shell's core. The command then connects the module's pipes to the shell's STDIN and STDOUT pipes. After the module is wired to the shell for communication a notification is sent to get the UI associated with the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/doodad/DoodadModule.as.html">DoodadModule</a></p>
<p>The <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/doodad/DoodadModule.as.html">DoodadModule</a> is not a visual component. It extends <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/common/view/components/PipeAwareModule.as.html">PipeAwareModule</a>, which is itself an extension of ModuleBase. This is as opposed to Module, which is a visual class, but in this demonstration the visual components are created by the module and then sent to the shell for display. All of the visual components are mediated by their module, but control of their placement rests with the shell.</p>
<p>A <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/common/view/components/PipeAwareModule.as.html">PipeAwareModule</a> is instantiated with a unique identifier. This provides a way to differentiate it from other instances of the module easily. The <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/doodad/DoodadModule.as.html">DoodadModule</a> itself also creates a sequential integer identifier, but this is used here for the purposes of labeling and not marking the module for unique identification.</p>
<p>When the shell asks for a new Doodad, the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/common/model/message/UIQueryMessage.as.html">UIQueryMessage</a> of type GET is sent from the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/shell/view/ShellJunctionMediator.as.html">ShellJunctionMediator</a> and is received by the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/doodad/view/DoodadJunctionMediator.as.html">DoodadJunctionMediator</a>. The <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/doodad/DoodadModule.as.html">DoodadModule</a> then creates the visual component in the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/doodad/controller/CreateDoodadCommand.as.html">CreateDoodadCommand</a> and sends it back to the shell via a <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/common/model/message/UIQueryMessage.as.html">UIQueryMessage</a> of type SET. The shell then adds the component to the stage. When the Doodad's 'kill' button is pressed, the <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/modules/doodad/view/DoodadJunctionMediator.as.html">DoodadJunctionMediator</a> is ordered to send out another <a href="http://joelhooks.com/examples/pipemachine/srcview/source/com/joelhooks/pipingthemachine/common/model/message/UIQueryMessage.as.html">UIQueryMessage</a>, this time of type DESTROY which lets the shell know that it needs to unplug the module.</p>
<h2>Conclusion</h2>
<p>There is a lot going on here, and it is complex on many levels. There are huge advantages to engineering a complex application this way. It provides flexibility in terms of development allowing for growth and expansion of the system. This particular example is kept relatively simple, and in a real world application I would strive to make the modules more generic, abstracting out the Doodad-specific bits in the shell so that any module added would share common functionality in terms of memory management and basic mechanisms related to the visual components. Hopefully it provides a helpful overview for people looking to understand multicore applications with PureMVC and make use of some of the handy utilities the community has made available.</p>
<p>Let me know if you have any questions and I will do my best to answer them. If you have anything to add, or find any errors, please don't hesitate to let me know.</p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2009/05/18/piping-the-machine-puremvc-multicore-with-pipes-and-the-finite-state-machine-fsm/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Fabrication &#8211; Simplified PureMVC multicore modules (and more)</title>
		<link>http://joelhooks.com/2008/09/16/fabrication-simplified-puremvc-multicore-modules-and-more/</link>
		<comments>http://joelhooks.com/2008/09/16/fabrication-simplified-puremvc-multicore-modules-and-more/#comments</comments>
		<pubDate>Tue, 16 Sep 2008 15:33:04 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[components]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[object oriented concepts]]></category>
		<category><![CDATA[puremvc]]></category>

		<guid isPermaLink="false">http://joelhooks.com/?p=85</guid>
		<description><![CDATA[One of the many reasons I love PureMVC is the community of highly intelligent, skilled, object-oriented (oriented) programmers that are constantly using the framework to build new and interesting utilities. This is a by-product of the very nature of PureMVC. Cliff architected the core framework in such a way that is is truly simple, providing [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://puremvc.org"><img class="aligncenter size-full wp-image-86" title="logo" src="http://69.164.207.135/wp-content/uploads/2008/09/logo.png" alt="" width="481" height="60" /></a></p>
<p>One of the many reasons I love <a href="http://www.puremvc.org/">PureMVC</a> is the community of highly intelligent, skilled, object-oriented (oriented) programmers that are constantly using the framework to build new and interesting utilities. This is a by-product of the very nature of PureMVC. <a href="http://www.linkedin.com/in/cliff">Cliff</a> architected the core framework in such a way that is is truly simple, providing a base from which to build new useful structures.</p>
<p><a href="http://forums.puremvc.org/index.php?topic=681.0">Fabrication, a new utility developed by Darshan Sawardekar</a> is a shining example of this fact. He has taken the <a href="http://puremvc.org/component/option,com_wrapper/Itemid,161/">PureMVC multi-core apperatus</a>, combined it with Cliff's <a href="http://puremvc.org/component/option,com_wrapper/Itemid,170/">Pipes utility</a>, and created a wonderfully abstracted means for creating modular PureMVC applications. Not only does this simplify the connection of modules in your application and allow them to communicate seamlessly, but he provides a router/firewall metaphor for controlling the communication as well as undo/redo functionality.</p>
<p>Thanks Darshan, your efforts are appreciated. And as always, thanks Cliff for providing the base from which our community can build and contribute. Cheers.</p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2008/09/16/fabrication-simplified-puremvc-multicore-modules-and-more/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
		<item>
		<title>Enumerating data types in Actionscript 3 (AS3)</title>
		<link>http://joelhooks.com/2008/04/28/enumerating-data-types-in-actionscript-3-as3/</link>
		<comments>http://joelhooks.com/2008/04/28/enumerating-data-types-in-actionscript-3-as3/#comments</comments>
		<pubDate>Mon, 28 Apr 2008 16:12:51 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[actionscript]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[object oriented concepts]]></category>

		<guid isPermaLink="false">http://joelhooks.com/2008/04/28/enumerating-data-types-in-actionscript-3-as3/</guid>
		<description><![CDATA[In computer programming, an enumerated type is an abstract data type used to model an attribute that has a specific number of options (or identifiers) such as the suit of a playing card (i.e. a Club, Diamond, Heart or Spade). Using this type allows the program to handle the attribute more efficiently than a string [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>In <a href="http://en.wikipedia.org/wiki/Computer_programming" title="Computer programming">computer programming</a>, an <strong>enumerated type</strong> is an <a href="http://en.wikipedia.org/wiki/Abstract_data_type" title="Abstract data type">abstract data type</a> used to model an attribute that has a specific number of options (or <a href="http://en.wikipedia.org/wiki/Identifier" title="Identifier">identifiers</a>) such as the suit of a playing card (i.e. a Club, Diamond, Heart or Spade). Using this type allows the program to handle the attribute more efficiently than a string while maintaining the readability of the source code.<br />
-from <a href="http://en.wikipedia.org/wiki/Enumerated_type">Wikipedia</a></p></blockquote>
<p>I've found this method (illustrated in code below) for enumeration of datasets to be useful, and at this point even essential, in my applications. Prior to this I was actually cutting and pasting the arrays that I was using in my various combo boxes and other selection components as dataProviders. By breaking the dataset into an enumeration class, it makes it easy to maintain the list and lets the dataset function as a first class citizen, ensuring that your data is consistent throughout the application.</p>

<div class="wp_codebox"><table><tr id="p4552"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
</pre></td><td class="code" id="p45code52"><pre class="actionscript" style="font-family:monospace;">package enum
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #808080; font-style: italic;">/**
	 * CloudTypeEnum enumerates cloud types.
	 * @author JHooks
	 *
	 */</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> CloudTypeEnum
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const NONE:CloudTypeEnum			= <span style="color: #000000; font-weight: bold;">new</span> CloudTypeEnum<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;None&quot;</span>,	   -<span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const CUMULUS:CloudTypeEnum		= <span style="color: #000000; font-weight: bold;">new</span> CloudTypeEnum<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;Cumulus&quot;</span>, 	<span style="color: #cc66cc;">0</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const STRATUS:CloudTypeEnum		= <span style="color: #000000; font-weight: bold;">new</span> CloudTypeEnum<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;Stratus&quot;</span>, 	<span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const CIRRUS:CloudTypeEnum		= <span style="color: #000000; font-weight: bold;">new</span> CloudTypeEnum<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;Cirrus&quot;</span>, 		<span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const NIMBUS:CloudTypeEnum		= <span style="color: #000000; font-weight: bold;">new</span> CloudTypeEnum<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;Nimbus&quot;</span>, 		<span style="color: #cc66cc;">3</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> value:<span style="color: #0066CC;">String</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> ordinal:<span style="color: #0066CC;">int</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * CloudTypeEnum constructor
		 * @param value
		 * @param ordinal
		 *
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> CloudTypeEnum<span style="color: #66cc66;">&#40;</span> value:<span style="color: #0066CC;">String</span>, ordinal:<span style="color: #0066CC;">int</span> <span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">value</span> = value;
			<span style="color: #0066CC;">this</span>.<span style="color: #006600;">ordinal</span> = ordinal;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * A list of cloud types
		 * @return
		 *
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</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>:<span style="color: #0066CC;">Array</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#91;</span> CUMULUS,
					 STRATUS,
					 CIRRUS,
					 NIMBUS <span style="color: #66cc66;">&#93;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * A list of cloud types appropriate for use in ComboBox and other
		 * selection components as a DataProvider
		 *
		 * myComboBox.dataProvider = CloudTypeEnum.cList;
		 * @return
		 *
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> cList<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: #0066CC;">unshift</span><span style="color: #66cc66;">&#40;</span> NONE <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #808080; font-style: italic;">/**
		 * Select a cloud type by its value property
		 * @param value
		 * @return
		 *
		 */</span>
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> selectByValue<span style="color: #66cc66;">&#40;</span> value:<span style="color: #0066CC;">String</span> <span style="color: #66cc66;">&#41;</span>:TaskTypeEnum
		<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> cloudType:TaskTypeEnum <span style="color: #b1b100;">in</span> CloudTypeEnum.<span style="color: #0066CC;">list</span> <span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> value == cloudType.<span style="color: #006600;">value</span> <span style="color: #66cc66;">&#41;</span>
					<span style="color: #b1b100;">return</span> cloudType;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			<span style="color: #b1b100;">return</span> NONE;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>Thanks to <a href="http://content.futurescale.com/">Cliff Hall</a> who showed this to me via one of his PureMVC demo applications. For the life of me I can't remember which one.</p>
]]></content:encoded>
			<wfw:commentRss>http://joelhooks.com/2008/04/28/enumerating-data-types-in-actionscript-3-as3/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by/3.0/us/</creativeCommons:license>
	</item>
	</channel>
</rss>
