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

<channel>
	<title>DavidTucker.net &#187; Cairngorm</title>
	<atom:link href="http://www.davidtucker.net/category/cairngorm/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.davidtucker.net</link>
	<description>web development goodness</description>
	<lastBuildDate>Tue, 08 Dec 2009 17:45:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>The Current State of Flex Frameworks</title>
		<link>http://www.davidtucker.net/2009/10/13/the-current-state-of-flex-frameworks/</link>
		<comments>http://www.davidtucker.net/2009/10/13/the-current-state-of-flex-frameworks/#comments</comments>
		<pubDate>Tue, 13 Oct 2009 16:24:33 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Mate]]></category>
		<category><![CDATA[Swiz]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/?p=547</guid>
		<description><![CDATA[At most of the conferences I attend &#8211; people come up to me to discuss Cairngorm.  Many of them have learned from my tutorials.  I am glad that the videos have been helpful to so many (and the daily views still astound me).  However, these videos were created by me over two [...]]]></description>
			<content:encoded><![CDATA[<p>At most of the conferences I attend &#8211; people come up to me to discuss <a href="http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm" target="_blank">Cairngorm</a>.  Many of them have learned from <a href="http://www.davidtucker.net/category/cairngorm/" target="_blank">my tutorials</a>.  I am glad that the videos have been helpful to so many (and the daily views still astound me).  However, these videos were created by me over two years ago (almost to the day).  <strong>In reality, a lot has happened in the last two years &#8211; and I want to give more insight into my current frameworks choices.</strong></p>
<p><span id="more-547"></span></p>
<h4>First Generation Flex Frameworks</h4>
<p>First, I want to state that the Flex landscape has evolved a great deal in the last two years.  In reality, Cairngorm was an attempt to take design patterns from other languages and make them fit well into Flex.  For the most part it succeeded, but it didn&#8217;t solve all of the problems (and in reality &#8211; it created a few more).  With that stated, we generally refer to Cairngorm as a <em>first-generation Flex framework</em>.</p>
<p>I could go into further detail here &#8211; but, at this point I&#8217;ll move ahead.</p>
<h4>Second Generation Flex Frameworks</h4>
<p>Since then, several frameworks have been created that were written specifically for Flex &#8211; and specifically to solve the problems that occur in Flex development.  These frameworks were crafted by Flex developers (as opposed to Java developers who started to work in Flex).  Because of this, these frameworks solve problems in a way that makes sense for Flex.  <strong>My two favorite examples of second generation frameworks (and the two I use on projects currently) are <a href="http://code.google.com/p/swizframework/" target="_blank">Swiz</a> and <a href="http://mate.asfusion.com/" target="_blank">Mate</a></strong>.  </p>
<p>These two frameworks solve problems in different ways, but they both work well.  One of my Universal Mind colleagues, <a href="http://www.darronschall.com/weblog/" target="_blank">Darron Schall</a>, recently posted <a href="http://www.darronschall.com/weblog/2009/10/mate-vs-swiz.cfm" target="_blank">some slides that give a comparison of the two frameworks</a>.  These slides can hopefully assist those of you evaluating these two frameworks so that you can understand the strengths and weaknesses of each option.  <em>Darron is also the first person I heard use the first/second generation framework terminology.</em></p>
<h4>How Do I Learn?</h4>
<p>Learning a new framework can be daunting (especially if you haven&#8217;t worked with a framework before).  I think this is reason my Cairngorm videos were so popular.  Because of this, <strong>I am starting the process of producing a similar video series for Swiz.</strong>  I am extremely busy &#8211; so, I cannot predict when these will be completed.  However, I am going to start working on the code examples this week (that is the easy part &#8211; the videos and the articles take a good deal of time).  That being said &#8211; if you have specific items you want me to address &#8211; let me know.</p>
<p>I don&#8217;t have any plans to develop a video series for Mate yet &#8211; but, we&#8217;ll see how things go with the Swiz series.  One of the reasons I am covering Swiz first &#8211; is that the Mate project has <a href="http://mate.asfusion.com/" target="_blank">great documentation</a> (which makes it easier for new developers to jump into it).  The Swiz team is currently working on their documentation &#8211; and hopefully this series can be a part of that.</p>
<h4>But What About Cairngorm 3?</h4>
<p>Undoubtedly, many developers feel that they are expected to migrate to Cairngorm 3 as it is the &#8216;official&#8217; framework.  I would advise against this, mainly because of the architecture it implements.  In reality, it is a collection of techniques taken from other frameworks &#8211; and yet again, it doesn&#8217;t solve all of the problems that Flex developers will encounter.</p>
<p>Development rate and development communities are also extremely important when it comes to a framework.  The other established frameworks (such as Mate and Swiz) are further along in development, and have some great plans for the future.  Both Mate and Swiz also have vibrant development communities which are eager to assist developers.  I think the Adobe Consulting team has shown that Cairngorm development will be slow and official support will be non-existent.</p>
<h4>Summary</h4>
<p>I want to be clear on one thing &#8211; if you (and your team) know Cairngorm, there is no immediate need to stop using Cairngorm.  It still serves as a great framework for teams.  <strong>I would advise teams to NOT work with the new Cairngorm 3 framework</strong> (which in reality is just a collection of techniques taken from other frameworks).  I would recommend that as your teams investigate new techniques &#8211; that you move toward Swiz and Mate (second-generation Flex frameworks).</p>
<h4>Additional Frameworks</h4>
<p>In reality, these aren&#8217;t the only second generation Flex frameworks.  I have chosen Mate and Swiz for a specific reason &#8211; but, if you want to investigate the other options, you can check out the following frameworks:</p>
<ul>
<li><a href="http://puremvc.org/" target="_blank">PureMVC</a></li>
<li><a href="http://wiki.github.com/darscan/robotlegs" target="_blank">RobotLegs</a></li>
<li><a href="http://www.spicefactory.org/parsley/" target="_blank">Parsley</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2009/10/13/the-current-state-of-flex-frameworks/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>Great Cairngorm Slides from 360Flex Europe</title>
		<link>http://www.davidtucker.net/2008/06/05/great-cairngorm-slides-from-360flex-europe/</link>
		<comments>http://www.davidtucker.net/2008/06/05/great-cairngorm-slides-from-360flex-europe/#comments</comments>
		<pubDate>Thu, 05 Jun 2008 14:05:58 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/?p=199</guid>
		<description><![CDATA[Børre Wessel has posted his slides on his talk &#8216;Cairngorm Deep Dive&#8217; from 360Flex Europe.  Børre is a Senior Consultant at Adobe Consulting and I found these slides to be pretty useful.
Presentation Slides (PDF)
]]></description>
			<content:encoded><![CDATA[<p><a href="http://blogs.adobe.com/borre/" target="_blank">Børre Wessel</a> has posted his slides on his talk &#8216;Cairngorm Deep Dive&#8217; from 360Flex Europe.  Børre is a Senior Consultant at <a href="http://www.adobe.com/consulting/" target="_blank">Adobe Consulting</a> and I found these slides to be pretty useful.</p>
<p><a href="http://blogs.adobe.com/borre/Cairngorm%20deepdive.pdf" target="_blank">Presentation Slides</a> (PDF)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2008/06/05/great-cairngorm-slides-from-360flex-europe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cairngorm Videos Available as FLV Downloads</title>
		<link>http://www.davidtucker.net/2008/04/01/cairngorm-videos-available-as-flv-downloads/</link>
		<comments>http://www.davidtucker.net/2008/04/01/cairngorm-videos-available-as-flv-downloads/#comments</comments>
		<pubDate>Wed, 02 Apr 2008 00:18:06 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/?p=170</guid>
		<description><![CDATA[Many people have asked that I make the Cairngorm Series downloadable (the video portions).  Since I have gotten a handful of requests this week &#8211; I determined to go ahead and post the links:
UPDATE: Many people didn&#8217;t realize that there are written tutorials and exercise files that go along with each tutorial.  You [...]]]></description>
			<content:encoded><![CDATA[<p>Many people have asked that I make the Cairngorm Series downloadable (the video portions).  Since I have gotten a handful of requests this week &#8211; I determined to go ahead and post the links:</p>
<p><strong>UPDATE:</strong> Many people didn&#8217;t realize that there are written tutorials and exercise files that go along with each tutorial.  You can find those <a href="http://www.davidtucker.net/category/cairngorm/">here</a>.</p>
<ol>
<li><a href="http://www.davidtucker.net/swf/flv/cairngorm1.flv" target="_blank">Cairngorm Part 1</a></li>
<li><a href="http://www.davidtucker.net/swf/flv/cairngorm2.flv" target="_blank">Cairngorm Part 2</a></li>
<li><a href="http://www.davidtucker.net/swf/flv/cairngorm3.flv" target="_blank">Cairngorm Part 3</a></li>
<li><a href="http://www.davidtucker.net/swf/flv/cairngorm4.flv" target="_blank">Cairngorm Part 4</a></li>
<li><a href="http://www.davidtucker.net/swf/flv/cairngorm5.flv" target="_blank">Cairngorm Part 5</a></li>
</ol>
<p>These videos are in FLV format.  You will need an FLV player to view them.  Adobe Media Player is the best FLV player, but they have not yet released a version for AIR 1.0.  Until they do &#8211; you can use the following:</p>
<p><a href="http://www.wimpyplayer.com/products/wimpy_standalone_flv_player.html" target="_blank">Wimpy Standalone FLV Player</a></p>
<p><strong>Note:</strong> There IS a Part 6 coming soon to the Cairngorm series.  I was waiting on another developer to get finished on a specific project, but it doesn&#8217;t appear that will happen in the near future &#8211; so I won&#8217;t hold it up any longer.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2008/04/01/cairngorm-videos-available-as-flv-downloads/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
<enclosure url="http://www.davidtucker.net/swf/flv/cairngorm1.flv" length="37525511" type="video/x-flv" />
<enclosure url="http://www.davidtucker.net/swf/flv/cairngorm2.flv" length="20570378" type="video/x-flv" />
<enclosure url="http://www.davidtucker.net/swf/flv/cairngorm3.flv" length="37375537" type="video/x-flv" />
<enclosure url="http://www.davidtucker.net/swf/flv/cairngorm4.flv" length="45998820" type="video/x-flv" />
<enclosure url="http://www.davidtucker.net/swf/flv/cairngorm5.flv" length="73473258" type="video/x-flv" />
		</item>
		<item>
		<title>Getting Started with Cairngorm – Part 5</title>
		<link>http://www.davidtucker.net/2007/11/30/getting-started-with-cairngorm-%e2%80%93-part-5/</link>
		<comments>http://www.davidtucker.net/2007/11/30/getting-started-with-cairngorm-%e2%80%93-part-5/#comments</comments>
		<pubDate>Fri, 30 Nov 2007 17:55:34 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/2007/11/30/getting-started-with-cairngorm-%e2%80%93-part-5/</guid>
		<description><![CDATA[In Part 4 you saw the full Service to Worker pattern demonstrated.  However, the method discussed in the last tutorial doesn't fit every situation.  In this tutorial you will learn a few "best-practices" for Cairngorm projects as well as an extension to the Service to Worker pattern for more complex cases.

Delegates, Commands, and [...]]]></description>
			<content:encoded><![CDATA[<p>In <a href="http://www.davidtucker.net/2007/11/07/cairngorm-part-4/">Part 4</a> you saw the full Service to Worker pattern demonstrated.  However, the method discussed in the last tutorial doesn't fit every situation.  In this tutorial you will learn a few "best-practices" for Cairngorm projects as well as an extension to the Service to Worker pattern for more complex cases.</p>
<p><span id="more-89"></span></p>
<p><strong>Delegates, Commands, and Responders</strong></p>
<p>These classes (Delegates, Commands, and Responders) have specific responsibilities.  Many developers run into problems when they do not adhere to these responsibilities.  The following tips are guidelines for your code.</p>
<ul>
<li><strong>Responders</strong> - Responders should deal only in strongly-typed application objects.  Responders may set values on the model.</li>
<li><strong>Commands</strong> - Commands never deal directly with server interaction.  Commands may set values on the model.</p>
<li><strong>Delegates</strong> - Delegates should pass strongly typed strongly-typed application objects to the Responder.  If the Delegate doesn't receive strongly-typed application objects, it must parse and  convert the data into that format.</li>
</ul>
<p><img src='http://www.davidtucker.net/wp-content/uploads/cairngorm5-1.jpg' alt='Cairngorm Delegate Data Diagram' /></p>
<p class="figure"><strong>Figure 1</strong> - Data Transmission in the Service to Worker Pattern</p>
<p>The goal of this separation of responsibility is that services should be able to be switched out with only a change in the delegate.  This may sound a bit unimportant, but if you are working for a large company, the server-side implementation can change drastically from development to production.  For this to work properly, the service call will need to have two responders: the Delegate, and the actual Responder.  Figure 1 illustrates this separation.  The data passed from the service to the delegate can be in virtually any format, but the transfer from the Delegate to the Responder needs to only be application data (VO's, model classes).</p>
<p>In this case, the Delegate now has an added responsibility, parsing the raw data.  To accomplish this, you can create a factory class to parse the data.  In the sample below the class DeliciousFactory (because it parses data from a <a href="http://del.icio.us/" target="_blank">Del.icio.us</a> feed) has a method <em>buildPostArrayFromJSON</em> which handles this responsibility.  </p>
<div class="igBar"><span id="lactionscript-3"><a href="#" onclick="javascript:showPlainTxt('actionscript-3'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-3">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">deliciousbrowser</span>.<span style="color: #006600;">business</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #006600;">business</span>.<span style="color: #006600;">ServiceLocator</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">rpc</span>.<span style="color: #006600;">AsyncToken</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">rpc</span>.<span style="color: #006600;">IResponder</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">rpc</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">FaultEvent</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">rpc</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">ResultEvent</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">deliciousbrowser</span>.<span style="color: #006600;">factories</span>.<span style="color: #006600;">DeliciousFactory</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> PostsDelegate <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> responder:IResponder;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> service:<span style="color: #0066CC;">Object</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> PostsDelegate<span style="color: #66cc66;">&#40;</span> responder:IResponder <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">responder</span> = responder;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">service</span> = ServiceLocator.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getHTTPService</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">"sampleService"</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getRecentPosts<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Call the Service and Attach that call to an AsyncToken</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">var</span> token:AsyncToken = service.<span style="color: #0066CC;">send</span><span style="color: #66cc66;">&#40;</span>params<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #808080; font-style: italic;">// Create a Responder for the call</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000000; font-weight: bold;">var</span> responder:mx.<span style="color: #006600;">rpc</span>.<span style="color: #006600;">Responder</span> = <span style="color: #000000; font-weight: bold;">new</span> mx.<span style="color: #006600;">rpc</span>.<span style="color: #006600;">Responder</span><span style="color: #66cc66;">&#40;</span>onResult, onFault<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #808080; font-style: italic;">// Add the Responder to the AsyncToken</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;token.<span style="color: #006600;">addResponder</span><span style="color: #66cc66;">&#40;</span>responder<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onResult<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:ResultEvent <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Parse JSON into Array of VO's</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">var</span> posts:<span style="color: #0066CC;">Array</span> = DeliciousFactory.<span style="color: #006600;">buildPostArrayFromJSON</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>.<span style="color: #006600;">result</span> as <span style="color: #0066CC;">String</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Pass VO Array to Responder</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; responder.<span style="color: #006600;">result</span><span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">new</span> ResultEvent<span style="color: #66cc66;">&#40;</span> ResultEvent.<span style="color: #006600;">RESULT</span>, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #000000; font-weight: bold;">true</span>, posts <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onFault<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:FaultEvent <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 1</strong> - A Delegate Parsing Raw Server Data</p>
<p>Parsing the server data is only a part of this extended design pattern.  For this to work properly with the traditional Cairngorm flow, the delegate must "intercept" the result of the service call.  To accomplish this, you will attach an <strong>AsyncToken</strong> [<a href="http://livedocs.adobe.com/flex/2/langref/mx/rpc/AsyncToken.html" target="_blank">Reference</a>] to the service call, create a responder for the call, and then attach the responder to the AsyncToken.  This is illustrated in lines 23-30 of Code Example 1.</p>
<p>Now that the delegate has "intercepted" the result of the service call, it need to have methods to parse the data.  When you created the responder inside of the delegate (line 27 of Code Example 1), you passed in a result and fault method.  In this case it was <em>onResult</em> and <em>onFault</em>.  You now need to add these methods to the delegate.</p>
<p>To pass the parsed data to the original responder, you will need to create a new instance of the <strong>ResultEvent</strong> [<a href="http://livedocs.adobe.com/flex/2/langref/mx/rpc/events/ResultEvent.html" target="_blank">Reference</a>] with the parsed data in the <em>result</em> property (line 40 of Code Example 1).  This event will be passed as an argument to the original responder's <em>result</em> method.</p>
<p><strong>Setting ModelLocator Values</strong></p>
<p>Within a Cairngorm application, it can be extremely tempting to set values of ModelLocator variables in your events, delegates, or views, but this should be avoided.  These values should be set only in the <em>Command Level</em> (see Figure 1) of the application.  This means that you can set these values in a Command or Responder.  This keeps every class in tune with its true function.</p>
<p><strong>Sequence Commands</strong></p>
<p>Cairngorm also contains a class, <strong>SequenceCommand</strong> [<a href="http://www.davidtucker.net/docs/cairngorm/com/adobe/cairngorm/commands/SequenceCommand.html" target="_blank">Reference</a>] that allows the developer to chain command/events together for sequential execution.  Initially this may seems like it breaks the framework's rule oft having every command triggered by an event, but it doesn't.  Inside of a SequenceCommand you  define the <em>nextEvent</em> property (which is an instance of a CairngormEvent).  This event is executed when the <em>executeNextCommand</em> method is called.  This is the most effective way to attach multiple commands to a single user gesture.</p>
<p></p>
<div class="igBar"><span id="lactionscript-4"><a href="#" onclick="javascript:showPlainTxt('actionscript-4'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-4">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> SampleSequenceCommand <span style="color: #0066CC;">extends</span> SequenceCommand <span style="color: #0066CC;">implements</span> ICommand, IResponder <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> SampleSequenceCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">nextEvent</span> = <span style="color: #000000; font-weight: bold;">new</span> GetPostsEvent<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &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: #0066CC;">e</span>:CairngormEvent <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp;&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> result<span style="color: #66cc66;">&#40;</span> event:<span style="color: #0066CC;">Object</span> <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">executeNextCommand</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> fault<span style="color: #66cc66;">&#40;</span> event:<span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p><strong>NOTE:</strong> The SequenceCommand class assumes that you are not separating your Command and Responder.  You could easily extend the architecture and create a SequenceResponder class to achieve the same effect.</p>
<p><strong>ViewHelper and ViewLocator Classes</strong></p>
<p>Many people have inquired about the <strong>ViewHelper</strong> [<a href="http://www.davidtucker.net/docs/cairngorm/com/adobe/cairngorm/view/ViewHelper.html" target="_blank">Reference</a>] and <strong>ViewLocator</strong> [<a href="http://www.davidtucker.net/docs/cairngorm/com/adobe/cairngorm/view/ViewLocator.html" target="_blank">Reference</a>] classes.  Both of these classes are now deprecated as of Cairngorm 2.1, and it is considered bad practice to use either of these classes in a new Cairngorm project.  Should you be working with an existing project that still uses these classes, I would recommend refactoring your code to meet Cairngorm 2.2 standards.</p>
<p><strong>Summary of Tips</strong></p>
<ol>
<li>Don't use ViewHelpers and ViewLocators</li>
<li>Only set ModelLocator variables in the Command Level (Command or Responder).</li>
<li>SequenceCommand can be used to chain multiple commands to a single user gesture.</li>
<li>Delegates deal in raw service data (which could be application data), but Responders only deal in strongly-typed application data.</li>
<li>Commands do not directly communicate with services.</li>
</ol>
<div class="vidPreview">
<a href="#" onclick="window.open('/videoPlayer.php?vid=cairngorm5.flv','videoPopup','toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=0,resizable=1,width=640,height=480');"><br />
<img src='http://www.davidtucker.net/wp-content/uploads/cairngorm-p4.jpg' alt='Cairngorm Video 4 Screenshot'  style="border: 1px solid #666666;padding: 0; margin: 5px 0;"/></a>
</div>
<p><strong>Application Code</strong><br />
<a href="/airtips/Cairngorm5-1.zip">Beginning Code Download</a> (9 Kb)<br />
<a href="/airtips/Cairngorm5-2.zip">Finished Code Download</a> (12 Kb)
</p>
<p><strong>References</strong><br />
<a href="http://code.google.com/p/as3corelib/downloads/list" target="_blank">AS3CoreLib</a></p>
<p><strong>Looking Ahead</strong></p>
<p>In the next (and final) tutorial on Cairngorm, you will learn tips to make your Cairngorm development go faster as well as learning more "best practices" for Cairngorm development.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2007/11/30/getting-started-with-cairngorm-%e2%80%93-part-5/feed/</wfw:commentRss>
		<slash:comments>54</slash:comments>
		</item>
		<item>
		<title>Getting Started with Cairngorm – Part 4</title>
		<link>http://www.davidtucker.net/2007/11/07/cairngorm-part-4/</link>
		<comments>http://www.davidtucker.net/2007/11/07/cairngorm-part-4/#comments</comments>
		<pubDate>Wed, 07 Nov 2007 18:33:13 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/2007/11/07/cairngorm-part-4/</guid>
		<description><![CDATA[The basic Cairngorm Event Flow that is handled in Part 3 is essential to any Cairngorm application, but most applications interact with a server.  The Service to Worker pattern that was discussed in the previous tutorial is essential to this process.  To learn the expanded Cairngorm Flow, you will need to learn a [...]]]></description>
			<content:encoded><![CDATA[<p>The basic Cairngorm Event Flow that is handled in <a href="http://www.davidtucker.net/2007/10/29/cairngorm-part-3/">Part 3</a> is essential to any Cairngorm application, but most applications interact with a server.  The Service to Worker pattern that was discussed in the previous tutorial is essential to this process.  To learn the expanded Cairngorm Flow, you will need to learn a few new Cairngorm elements.</p>
<p><span id="more-74"></span></p>
<p><strong>The Server Interaction Elements</strong></p>
<p>There are three new types of classes that you will need to be familiar with to understand the full Service to Worker Pattern.</p>
<ul>
<li><strong>ServiceLocator</strong> [<a href="http://www.davidtucker.net/docs/cairngorm/com/adobe/cairngorm/business/ServiceLocator.html" target="_blank">Reference</a>] - The ServiceLocator is a singleton that contains references to all of the services that your application will use.  It usually includes HTTPService, WebService, or RemoteObject calls.</li>
<li><strong>Business Delegate</strong> - A Business Delegate has three functions: to locate the service that is needed, to call a method on the service, and to route the result to the specified responder.  There is usually one Business Delegate for each service.</li>
<li><strong>Value Object</strong> - Value Objects are classes that by definition do not require any methods, only properties.  They allow for the application to transfer strongly-typed complex data objects to and from the server.</li>
</ul>
<p><strong>Organizing Your Cairngorm Project</strong> (With Server Interaction)</p>
<p>In the last tutorial you saw the standard Cairngorm structure for a project.  To complete this structure, you will need to add an additional two folders:</p>
<ul>
<li><strong>/business</strong> - This folder typically contains two types of files: the ServiceLocator (named Services.mxml) and Business Delegates.</li>
<li><strong>/vo</strong> - This folder contains the value objects that are passed to and from the server.</li>
</ul>
<p><strong>Understanding the Process</strong></p>
<p>Before you begin crafting the server interaction for your project, you need to understand the full Service to Worker pattern.  Figure 1 illustrates the entire process.</p>
<p><img src='http://www.davidtucker.net/wp-content/uploads/cairngormdiagram.jpg' alt='Full Cairngorm Diagram Final' /></p>
<p class="figure"><strong>Figure 1 </strong> - Cairngorm Event Flow with Server Interaction</p>
<p><strong>Phase I</strong> - Execution Phase</p>
<ol>
<li>The user is viewing a component that has a login button.  When the button is clicked, that component would dispatch an event named LoginEvent that extends CairngormEvent.</li>
<li>The FrontController would receive the LoginEvent and execute the command that is mapped to that event.  For this example, it will be named LoginCommand and will implement ICommand.</li>
<li>The Command is executed and received the LoginEvent as an argument.  The LoginCommand creates an instance of the Delegate while passing a reference to the Responder.  The Command then calls the specified method on the Delegate.</li>
<li>The Delegate gets the service from the ServiceLocator and calls the method on the specific service.</li>
<li>The service defined in the ServiceLocator receives the information that is passed to it from the call in the Delegate.</li>
</ol>
<p><strong>Phase II</strong> - Application Tier Processing</p>
<p><strong>Phase III</strong> - Response Phase</p>
<ol>
<li>The service that is defined in the ServiceLocator returns the result of the server-side processing.</li>
<li>The Delegate receives the result and passes it to the specified responder.</li>
<li>The Responder receives the result indicating a successful login.</li>
<li>The ModelLocator will have a predefined constant for the "Logged in View".  The Responder will change workflowState to this value.</li>
<li>Since the view is bound to workflowState, it will automatically update itself to the new view.</li>
</ol>
<p><strong>Note:</strong>  Traditionally the Command and Responder were the same class in a Cairngorm application.  If you are working with other developers, the applications will probably be coded in this manner.  However, most developers (including Adobe Consulting) are now separating these classes into two different classes.  For a less complex project, it might not make sense to separate these items, but in a large application it could prove advantageous in organization and practice to have two different classes.</p>
<p><strong>The ServiceLocator</strong></p>
<p>The ServiceLocator is a singleton that contains references to all of the services that the application will be using.  These services can be RemoteObjects, HTTPServices, WebServices, or custom services.  Like the FrontController, this class is usually instantiated in your main application file.  Unlike many of the other Cairngorm project assets that you have created, this class can be defined in MXML (as well as ActionScript).  To properly define this in MXML, there must be a namespace that points to the <em>business</em> folder of the Cairngorm package.  In this case the namespace <em>cairngorm</em> is typically used.  The ServiceLocator in Code Example 1 has one service defined, loginService.</p>
<div class="igBar"><span id="lactionscript-12"><a href="#" onclick="javascript:showPlainTxt('actionscript-12'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-12">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;?<span style="color: #0066CC;">xml</span> <span style="color: #0066CC;">version</span>=<span style="color: #ff0000;">"1.0"</span> encoding=<span style="color: #ff0000;">"utf-8"</span>?&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;cairngorm:ServiceLocator</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; xmlns:cairngorm=<span style="color: #ff0000;">"com.adobe.cairngorm.business.*"</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; xmlns:mx=<span style="color: #ff0000;">"http://www.adobe.com/2006/mxml"</span>&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &lt;!-- Login Service --&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &lt;mx:RemoteObject id=<span style="color: #ff0000;">"loginService"</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; showBusyCursor=<span style="color: #ff0000;">"true"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; destination=<span style="color: #ff0000;">"ColdFusion"</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; source=<span style="color: #ff0000;">"CairngormTest.CairngormLogin"</span>&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &lt;mx:method <span style="color: #0066CC;">name</span>=<span style="color: #ff0000;">"login"</span> /&gt;&nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &lt;/mx:RemoteObject&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;/cairngorm:ServiceLocator&gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 1</strong> - Sample ServiceLocator</p>
<p>The ServiceLocator is typically named <em>Services.mxml</em> and resides in the <em>business</em> folder of your Cairngorm project.</p>
<p><strong>Commands with Server Interaction</strong></p>
<p>In the last tutorial you hard-coded some values into the LoginCommand to check for a specific username and password.  Here was the execute method:</p>
<p></p>
<div class="igBar"><span id="lactionscript-13"><a href="#" onclick="javascript:showPlainTxt('actionscript-13'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-13">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> execute<span style="color: #66cc66;">&#40;</span>event:CairngormEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">var</span> loginEvent:LoginEvent = event as LoginEvent;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#40;</span>loginEvent.<span style="color: #006600;">username</span> == <span style="color: #ff0000;">"david"</span><span style="color: #66cc66;">&#41;</span> &amp;&amp; <span style="color: #66cc66;">&#40;</span>loginEvent.<span style="color: #0066CC;">password</span> == <span style="color: #ff0000;">"password"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; modelLocator.<span style="color: #006600;">workflowState</span> = ViewModelLocator.<span style="color: #006600;">WELCOME_SCREEN</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 2</strong> - Command Without Delegate</p>
<p>This methodology will hold true for any Command that doesn't have server interaction, but if you do have server interaction, it will need to be modified to include the delegate.  First, you will need to make a decision.  As stated earlier, you can have separate Commands and Responders, or they can be the same class.  For this example, they will be the same class.  The Command will now also need to implement the <em>mx.rpc.IResponder</em> class (please note that <em>com.adobe.cairngorm.business.Responder</em> is deprecated and should no longer be used).</p>
<p>The other initial change is that the execute method now instantiates a class named LoginDelegate (which will be created shortly).  The LoginDelegate class required one argument in its constructor, the Responder of the service.  In this case, the Command will function both as the command and the responder, so you simply need to insert the <em>this</em> keyword inside the parenthesis. If you chose to have a separate responder, you would insert the reference to it here (instead of the <em>this</em> keyword).</p>
<p></p>
<div class="igBar"><span id="lactionscript-14"><a href="#" onclick="javascript:showPlainTxt('actionscript-14'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-14">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">commands</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #006600;">commands</span>.<span style="color: #006600;">ICommand</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #0066CC;">control</span>.<span style="color: #006600;">CairngormEvent</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">controls</span>.<span style="color: #006600;">Alert</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">rpc</span>.<span style="color: #006600;">IResponder</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">business</span>.<span style="color: #006600;">LoginDelegate</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">LoginEvent</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">model</span>.<span style="color: #006600;">ViewModelLocator</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> LoginCommand <span style="color: #0066CC;">implements</span> ICommand,IResponder <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> modelLocator:ViewModelLocator = ViewModelLocator.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> LoginCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> execute<span style="color: #66cc66;">&#40;</span>event:CairngormEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">var</span> loginEvent:LoginEvent = event as LoginEvent;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">var</span> delegate:LoginDelegate = <span style="color: #000000; font-weight: bold;">new</span> LoginDelegate<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">this</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; delegate.<span style="color: #006600;">login</span><span style="color: #66cc66;">&#40;</span>loginEvent.<span style="color: #006600;">loginAttempt</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> result<span style="color: #66cc66;">&#40;</span> event:<span style="color: #0066CC;">Object</span> <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>event.<span style="color: #006600;">result</span> == <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; modelLocator.<span style="color: #006600;">workflowState</span> = ViewModelLocator.<span style="color: #006600;">WELCOME_SCREEN</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mx.<span style="color: #006600;">controls</span>.<span style="color: #006600;">Alert</span>.<span style="color: #0066CC;">show</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"Password Incorrect"</span>,<span style="color: #ff0000;">"ERROR"</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> fault<span style="color: #66cc66;">&#40;</span> event:<span style="color: #0066CC;">Object</span> <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"Service Error"</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 3</strong> - Command with Server Interaction Through a Delegate</p>
<p><strong>Value Objects</strong></p>
<p>A Value Object does not extend or implement any Cairngorm class.  As stated earlier, it simply is a class that is only required to have properties, but not methods.  For example, if you created a Value Object for a Login - it would have a property for <em>username</em> and a property for <em>password</em>.</p>
<div class="igBar"><span id="lactionscript-15"><a href="#" onclick="javascript:showPlainTxt('actionscript-15'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-15">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">vo</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#91;</span>RemoteClass<span style="color: #66cc66;">&#40;</span>alias=<span style="color: #ff0000;">"CairngormTest.LoginVO"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> LoginVO <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> username:<span style="color: #0066CC;">String</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">password</span>:<span style="color: #0066CC;">String</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> LoginVO<span style="color: #66cc66;">&#40;</span>username:<span style="color: #0066CC;">String</span>,<span style="color: #0066CC;">password</span>:<span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">username</span> = username;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #0066CC;">password</span> = <span style="color: #0066CC;">password</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 4</strong> - Value Object for Login</p>
<p>The <em>RemoteClass</em> metatag is important to note.  This will allow the corresponding server-side object (ColdFusion Component, PHP Class, Java Class, etc...) to be mapped to this Value Object.  In this case, it is mapped to a ColdFusion component named <em>LoginVO</em> in the <em>CairngormTest</em> folder.</p>
<p><strong>Business Delegates</strong></p>
<p>The final design pattern in the Cairngorm Micro-Architecture is the Business Delegate.  A Business Delegate essentially is the abstraction layer between your services and the rest of your application.  As stated earlier, it has three functions.  First, the Business Delegate will locate the service that is needed in the ServiceLocator.  Second, it will call a method on that service.  Finally, it will route the response back to the specified responder (usually either a command or separate responder).</p>
<p>A Delegate class doesn't extend or implement and Cairngorm classes, but it generally follows the following guidelines.</p>
<ul>
<li>The Delegate has at least two properties: one named service which is a reference to a service in the ServiceLocator and one named responder which is the responder for the service calls.</li>
<li>There is a method for each server-side method that you will be calling.</li>
<li>Both the responder and the service variables are set in the constructor.</li>
</ul>
<div class="igBar"><span id="lactionscript-16"><a href="#" onclick="javascript:showPlainTxt('actionscript-16'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-16">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">business</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">rpc</span>.<span style="color: #006600;">IResponder</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">vo</span>.<span style="color: #006600;">LoginVO</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #006600;">business</span>.<span style="color: #006600;">ServiceLocator</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> LoginDelegate <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> responder : IResponder;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> service : <span style="color: #0066CC;">Object</span>;&nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> LoginDelegate<span style="color: #66cc66;">&#40;</span> responder:IResponder <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">responder</span> = responder;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">service</span> = ServiceLocator.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getRemoteObject</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"loginService"</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> login<span style="color: #66cc66;">&#40;</span>login:LoginVO<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">call</span>:<span style="color: #0066CC;">Object</span> = service.<span style="color: #006600;">login</span><span style="color: #66cc66;">&#40;</span> login <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">call</span>.<span style="color: #006600;">addResponder</span><span style="color: #66cc66;">&#40;</span> responder <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 5</strong> - Service Delegate</p>
<p>There are many benefits to having this layer.  If coded correctly, you should be able to change out the server interaction (going from PHP to ColdFusion for example) and only have to change the code in your ServiceLocator and your Delegate. You also can easily insert "stub code" to simulate the actual server interaction during the early stages of development.</p>
<p><strong>The Application Tier</strong></p>
<p>In this example, the Application Tier will be handled by a ColdFusion 8 installation.  It will contain two Coldfusion components.  These components are purposefully simple.</p>
<ol>
<li><strong>LoginVO.cfc</strong> - This component will correspond to the ActionScript class LoginVO that you created earlier.</li>
<li><strong>CairngormLogin.cfc</strong> - This component will perform the actual login processing.</li>
</ol>
<p>In this example, the Flex application will pass a LoginVO ActionScript object to the CairngormLogin.cfc's login method through a RemoteObject call.  This will be mapped to a LoginVO.cfc object.  If this LoginVO.cfc object has the username "david" and the password "password" the method will return true.  If not, it will return false.</p>
<p></p>
<div class="igBar"><span id="lcoldfusion-17"><a href="#" onclick="javascript:showPlainTxt('coldfusion-17'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Coldfusion:</span>
<div id="coldfusion-17">
<div class="coldfusion">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfcomponent</span> <span style="color: #000066;">displayname</span>=<span style="color: #ff0000;">"LoginVO"</span> <span style="color: #000066;">hint</span>=<span style="color: #ff0000;">"Login VO For CairngormTest"</span> <span style="color: #000066;">output</span>=<span style="color: #ff0000;">"false"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfset</span> this.username = <span style="color: #ff0000;">""</span> <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfset</span> this.password = <span style="color: #ff0000;">""</span> <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/cfcomponent<span style="font-weight: bold; color: black;">&gt;</span></span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 6</strong> - LoginVO.cfc</p>
<div class="igBar"><span id="lcoldfusion-18"><a href="#" onclick="javascript:showPlainTxt('coldfusion-18'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Coldfusion:</span>
<div id="coldfusion-18">
<div class="coldfusion">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfcomponent</span> <span style="color: #000066;">displayname</span>=<span style="color: #ff0000;">"CairngormLogin"</span> <span style="color: #000066;">hint</span>=<span style="color: #ff0000;">"CFC to Test Cairngorm Service Interaction"</span> <span style="color: #000066;">output</span>=<span style="color: #ff0000;">"false"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cffunction</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"login"</span> <span style="color: #000066;">displayname</span>=<span style="color: #ff0000;">"login"</span> <span style="color: #000066;">access</span>=<span style="color: #ff0000;">"remote"</span> <span style="color: #000066;">output</span>=<span style="color: #ff0000;">"false"</span> <span style="color: #000066;">returntype</span>=<span style="color: #ff0000;">"boolean"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfargument</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"loginAttempt"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"LoginVO"</span> <span style="color: #000066;">required</span>=<span style="color: #ff0000;">"true"</span> <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfif</span> <span style="color: #66cc66;">&#40;</span>loginAttempt.username EQ <span style="color: #ff0000;">"david"</span><span style="color: #66cc66;">&#41;</span> AND <span style="color: #66cc66;">&#40;</span>loginAttempt.password EQ <span style="color: #ff0000;">"password"</span><span style="color: #66cc66;">&#41;</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfreturn</span> true <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfelse<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;cfreturn</span> false <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/cfif<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/cffunction<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/cfcomponent<span style="font-weight: bold; color: black;">&gt;</span></span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 7</strong> - CairngormLogin.cfc</p>
<div class="vidPreview">
<a href="#" onclick="window.open('/videoPlayer.php?vid=cairngorm4.flv','videoPopup','toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=0,resizable=1,width=640,height=480');"><br />
<img src='http://www.davidtucker.net/wp-content/uploads/cairngorm-p4.jpg' alt='Cairngorm Video 4 Screenshot'  style="border: 1px solid #666666;padding: 0; margin: 5px 0;"/></a>
</div>
<p><strong>Application Code</strong><br />
<a href="/airtips/Cairngorm4.zip">Download</a> (11 Kb)</p>
<p><strong>Looking Ahead</strong></p>
<p>There are only two tutorials remaining in the Cairngorm series.  In the next tutorials you will learn about code generation options for Cairngorm, and you will also build an actual application using Cairngorm.</p>
<p><strong>Reference</strong></p>
<p>The following resouces should assist you in getting Flex connected to your application server.</p>
<ul>
<li><a href="http://flex.org/coldfusion/" target="_blank">ColdFusion</a></li>
<li><a href="http://flex.org/java/" target="_blank">Java</a></li>
<li><a href="http://flex.org/dotnet/" target="_blank">.NET</a></li>
<li><a href="http://flex.org/coldfusion/" target="_blank">ColdFusion</a></li>
<li><a href="http://flex.org/php/" target="_blank">PHP</a></li>
<li><a href="http://flex.org/ruby/" target="_blank">Ruby</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2007/11/07/cairngorm-part-4/feed/</wfw:commentRss>
		<slash:comments>64</slash:comments>
		</item>
		<item>
		<title>Getting Started with Cairngorm – Part 3</title>
		<link>http://www.davidtucker.net/2007/10/29/cairngorm-part-3/</link>
		<comments>http://www.davidtucker.net/2007/10/29/cairngorm-part-3/#comments</comments>
		<pubDate>Tue, 30 Oct 2007 00:32:35 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/2007/10/29/cairngorm-part-3/</guid>
		<description><![CDATA[Now that you have isolated two specific elements of the Cairngorm Micro-Architecture, you will now create a more complete Cairngorm application.  Up to now the tutorials have covered only one design pattern, the ModelLocator, but now you will be introduced to the most crucial element of Cairngorm, the Service to Worker design pattern.  [...]]]></description>
			<content:encoded><![CDATA[<p>Now that you have isolated two specific elements of the Cairngorm Micro-Architecture, you will now create a more complete Cairngorm application.  Up to now the tutorials have covered only one design pattern, the ModelLocator, but now you will be introduced to the most crucial element of Cairngorm, the <em>Service to Worker</em> design pattern.  The explanation of this pattern will span two tutorials.  This tutorial will cover the basic flow inside of a Cairngorm application, and the next tutorial will expand this flow to include server interaction.  However, before you can properly implement this design pattern you need to learn about the organization of a Cairngorm project.</p>
<p><span id="more-69"></span></p>
<p><strong>Organizing a Cairngorm Project</strong></p>
<p>One of the tasks involved with any project is organization.  When working with other developers, this becomes extremely important.  Normally a Cairngorm project is organized in the following manner:</p>
<ul>
<li>There is a Main.mxml file that is the main application file for the Cairngorm application.</li>
<li>The project files are contained in a folder that uses "reverse-dns" format.  For example, if the project was named CairngormSample, I would use the following folders net/davidtucker/CairngormSample .</li>
<li>Within the CairngormSample directory, there will be the following folders (there will be additional folders added in the next tutorial).
<ul>
<li><strong>events/</strong> - This directory holds all of the custom events for the application</li>
<li><strong>control/</strong> - This directory houses the FrontController for the application</li>
<li><strong>commands/</strong> - This directory contains the Commands that are called by the FrontController</li>
<li><strong>model/</strong> - The ModelLocator is contained in this folder (and other classes related to the model)</li>
<li><strong>view/</strong> - The components of the view are contained in this directory</li>
</ul>
</li>
</ul>
<p>By following this standard, you can know where to find any class that you may need in your Cairngorm application.  Figure 1 illustrates this project structure.  <em>It also is a good development process to have a standard organizational structure for your projects - even if you are not using Cairngorm.</em></p>
<p><img src='http://www.davidtucker.net/wp-content/uploads/cairngormproject-1.jpg' alt='Cairngorm Project Folder' /></p>
<p class="figure"><strong>Figure 1</strong> - Cairngorm Project Structure</p>
<p><strong>The Service to Worker Pattern</strong></p>
<p>The Service to Worker pattern is the hardest for most people to grasp.  It encompasses most of the logic for a Cairngorm application.  To understand this pattern, you will need to understand some of the classes that are included with Cairngorm and their respective purposes.</p>
<ul>
<li><strong>CairngormEvent</strong> [<a href="http://www.davidtucker.net/docs/cairngorm/com/adobe/cairngorm/control/CairngormEvent.html" target="_blank">Reference</a>] - CairngormEvent is central in this pattern.  It extends from Event. For your event to be handled properly in Cairngorm, it will need to be of type CairngormEvent.</li>
<li><strong>CairngormEventDispatcher</strong> [<a href="http://www.davidtucker.net/docs/cairngorm/com/adobe/cairngorm/control/CairngormEventDispatcher.html" target="_blank">Reference</a>] - CairngormEventDispatcher actually dispatches the CairngormEvents.  It is a singleton (just like the ModelLocator).  In previous Cairngorm versions, you would call this class regularly, but now CairngormEvents can dispatch themselves (via the method dispatch).  This method is simply a wrapper for the CairngormEventDispatcher, so even if you don't actually import and call the class, it is still central to the Service to Worker pattern in Cairngorm.</li>
<li><strong>FrontController</strong> [<a href="http://www.davidtucker.net/docs/cairngorm/com/adobe/cairngorm/control/FrontController.html" target="_blank">Reference</a>] - The FrontController maps a CairngormEvent to a Command.</li>
<li><strong>ICommand</strong> [<a href="http://www.davidtucker.net/docs/cairngorm/com/adobe/cairngorm/commands/ICommand.html" target="_blank">Reference</a>] - For a Command to function properly in Cairngorm, it needs to implement the ICommand interface.  This interface requires that a command have a method named <em>execute</em> and that it accept the CairngormEvent that is mapped to it as an argument.</li>
</ul>
<p><strong>The Cairngorm Event Flow</strong></p>
<p>The way that these classes interact is the <em>Cairngorm Event Flow</em>.  Figure 2 illustrates this entire process.  While this process seems lengthy, it follows a logical order.</p>
<p><img src='http://www.davidtucker.net/wp-content/uploads/cairngormdiagram-basic.jpg' alt='Basic Cairngorm Event Flow' /></p>
<p class="figure"><strong>Figure 2 </strong> - Cairngorm Basic Event Flow</p>
<p>For example, assume that <em>Figure 2</em> shows what happens when a user clicks a login button.  It would follow the following steps:</p>
<ol>
<li>The user is viewing a component that has a login button.</li>
<li>When the button is clicked, that component would dispatch an event named LoginEvent that extends CairngormEvent.</li>
<li>The FrontController would receive the LoginEvent and execute the command that is mapped to that event.  For this example, it will be named LoginCommand and will implement ICommand.</li>
<li>The Command is executed and received the LoginEvent as an argument.  The LoginCommand will change the workflowState value in the ModelLocator.</li>
<li>The ModelLocator will have a predefined constant for the "Logged in View".  The command will change workflowState to this value.</li>
<li>Since the view is bound to workflowState, it will automatically update itself to the new view.</li>
</ol>
<p>Once these items are understood, the next most important thing to understand about Cairngorm is: <strong>Everything Should Be Mapped to an Event</strong>.  This is a drastic over-simplification, but it holds true in most situations.  When a user clicks a login button - it should dispatch a CairngormEvent.  When the user selects an option to change the view - it should dispatch a CairngormEvent.  When a user submits a form to be stored on in a database - the form should dispatch a CairngormEvent.  The dispatching of a CairngormEvent sets everything in motion.</p>
<p><strong>Custom CairngormEvents</strong></p>
<p>The class CairngormEvent can be used inside of your project, but in most situations you will create your own custom events that extend CairngormEvent (as stated previously, for an event to be included in the Cairngorm Event Flow it should extend CairngormEvent).  Another reason to create custom events it to create custom properties of the event which contain data that you need to pass to the command.  CairngormEvent has a property named data (of type Object) that can contain data, but it is ideal to have a strongly-typed property where you can place the data to pass.</p>
<p>For this example you will create an event that corresponds to the earlier example of a login page.  This event will need to meet the following criteria:</p>
<ul>
<li>Extend CairngormEvent</li>
<li>Have a property for the username</li>
<li>Have a property for the password</li>
</ul>
<p>Code Example 1 illustrates this completed event.  You can see that you will need to import both CairngormEvent and the basic Event class.  Also, as with all events, you have to define the Event constant.  In this instance, you can use LOGIN.  The properties are defined below the constant - and they also are passed into the constructor.  The only thing out of the ordinary is that you need to override the public method <em>clone()</em>.  This is the the method that the event uses to make a copy of itself.  This is key in the Cairngorm Event Flow.    Also, for the function to implement ICommand this method will need to have a return type of Event (and not CairngormEvent).</p>
<div class="igBar"><span id="lactionscript-23"><a href="#" onclick="javascript:showPlainTxt('actionscript-23'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-23">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">events</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #0066CC;">control</span>.<span style="color: #006600;">CairngormEvent</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">Event</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> LoginEvent <span style="color: #0066CC;">extends</span> CairngormEvent <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const LOGIN:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">"Login"</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> username:<span style="color: #0066CC;">String</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">password</span>:<span style="color: #0066CC;">String</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> LoginEvent<span style="color: #66cc66;">&#40;</span>submittedUsername:<span style="color: #0066CC;">String</span>,submittedPassword:<span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; username = submittedUsername;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">password</span> = submittedPassword;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">super</span><span style="color: #66cc66;">&#40;</span>LOGIN<span style="color: #66cc66;">&#41;</span>;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; override <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> clone<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:Event <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">new</span> LoginEvent<span style="color: #66cc66;">&#40;</span>username,<span style="color: #0066CC;">password</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 1</strong> - Custom Event</p>
<p><strong>Commands</strong></p>
<p>The Commands within a Cairngorm application actually "command" the application.  Even in the next tutorial where you will be interacting with a server, the command still will do a majority of the work.  In this example you will create a component that will receive the username and password from the LoginEvent, check the values against hard-coded values, and then change the workflowState on the ModelLocator if the values are correct.  The following example performs these steps (but it doesn't have the hard-coded values included - that will be covered in the video).</p>
<p>The first thing to notice about the code below in Code Example 2 is that the LoginCommand implements ICommand.  To accomplish this the ICommand class is also imported.  In addition, you will notice the boilerplate code that you have used in the past to bring in the ModelLocator.  To properly implement ICommand, the method <em>execute()</em> is also created.  It received an event of type CairngormEvent (it has to be CairngormEvent and not LoginEvent to properly implement ICommand).  To properly use the event, you will need to cast this event to the type LoginEvent (the process of casting will be further explained in the video).  The actual logic has been left out of this command, but you can see that the ModelLocator updates the view.  Once the logic is implemented this line of code would probably be inside of an <em>if</em> statement.</p>
<div class="igBar"><span id="lactionscript-24"><a href="#" onclick="javascript:showPlainTxt('actionscript-24'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-24">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">commands</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #006600;">commands</span>.<span style="color: #006600;">ICommand</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #0066CC;">control</span>.<span style="color: #006600;">CairngormEvent</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">LoginEvent</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">model</span>.<span style="color: #006600;">ViewModelLocator</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> LoginCommand <span style="color: #0066CC;">implements</span> ICommand <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> modelLocator:ViewModelLocator = ViewModelLocator.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> LoginCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> execute<span style="color: #66cc66;">&#40;</span>event:CairngormEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">var</span> loginEvent:LoginEvent = event as LoginEvent;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// COMMAND LOGIC</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; modelLocator.<span style="color: #006600;">workflowState</span> = ViewModelLocator.<span style="color: #006600;">WELCOME_SCREEN</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 2</strong> - Cairngorm Command</p>
<p><strong>Front Controller</strong></p>
<p>As stated earlier, the FrontController maps your CairngormEvents to specific commands.  Without this, your events would never integrate into the Cairngorm flow.  The class extends FrontController and has two methods: the constructor and the initialize method.  The initialize method is where you will use the <em>addCommand</em> method to map your events to commands (as you can see with the LoginEvent and LoginCommand).</p>
<div class="igBar"><span id="lactionscript-25"><a href="#" onclick="javascript:showPlainTxt('actionscript-25'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-25">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #0066CC;">control</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #0066CC;">control</span>.<span style="color: #006600;">FrontController</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">commands</span>.*;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">events</span>.*;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> SampleController <span style="color: #0066CC;">extends</span> FrontController <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> SampleController<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">initialize</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> initialize<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">//ADD COMMANDS</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">addCommand</span><span style="color: #66cc66;">&#40;</span>LoginEvent.<span style="color: #006600;">LOGIN</span>,LoginCommand<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 3</strong> - The Cairngorm FrontController</p>
<p>Simply creating a FrontController is not enough.  Like any class it needs to be instantiated inside of your application.  Code Example 4 illustrates how to instantiate your FrontController in the Main.mxml file of your application.  You simply need to add the control directory as an XML Namespace and then include the FrontController tag in the file.</p>
<div class="igBar"><span id="lmxml-26"><a href="#" onclick="javascript:showPlainTxt('mxml-26'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">mxml:</span>
<div id="mxml-26">
<div class="mxml">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;</span>?xml <span style="color: #000066;">version</span>=<span style="color: #ff0000;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">"utf-8"</span>?<span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:Application xmlns:<span style="color: #000066;">mx</span>=<span style="color: #ff0000;">"http://www.adobe.com/2006/mxml"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; xmlns:<span style="color: #000066;">control</span>=<span style="color: #ff0000;">"net.davidtucker.CairngormSample.control.*"</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066;">layout</span>=<span style="color: #ff0000;">"absolute"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;control</span>:FrontController <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"controller"</span> <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/mx</span>:Application<span style="font-weight: bold; color: black;">&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Code Example 4</strong> - Integrating a FrontController</p>
<p>Now that you have seen the basic elements of a Cairngorm project, you can actually build the working sample with the video.  As always, the application code is included below.</p>
<div class="vidPreview">
<a href="#" onclick="window.open('/videoPlayer.php?vid=cairngorm3.flv','videoPopup','toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=0,resizable=1,width=640,height=480');"><br />
<img src='http://www.davidtucker.net/wp-content/uploads/cairngorm-p3.jpg' alt='Cairngorm Video 3 Screenshot'  style="border: 1px solid #666666;padding: 0; margin: 5px 0;"/></a>
</div>
<p><strong>Application Code</strong><br />
<a href="/airtips/Cairngorm3.zip">Download</a> (7 Kb)</p>
<p><strong>Looking Ahead</strong></p>
<p>This is the basic Cairngorm flow.  You may notice that this flow really does not include any "Services" yet.  Server interaction will introduce a few additional steps to the flow (which will be covered in depth in the next tutorial).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2007/10/29/cairngorm-part-3/feed/</wfw:commentRss>
		<slash:comments>60</slash:comments>
		</item>
		<item>
		<title>Getting Started with Cairngorm – Part 2</title>
		<link>http://www.davidtucker.net/2007/10/18/cairngorm-part-2/</link>
		<comments>http://www.davidtucker.net/2007/10/18/cairngorm-part-2/#comments</comments>
		<pubDate>Thu, 18 Oct 2007 11:19:30 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/2007/10/18/cairngorm-part-2/</guid>
		<description><![CDATA[Recap:  In Part 1, I discussed the basic implementation and use of the ModelLocator pattern.  This pattern is one of many design patterns contained within the Cairngorm micro-architechture.  This design pattern will be used in Part 2 as well, so it is assumed that you are familiar with the concepts in Part [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Recap: </strong><i> In <a href="http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/">Part 1</a>, I discussed the basic implementation and use of the ModelLocator pattern.  This pattern is one of many design patterns contained within the Cairngorm micro-architechture.  This design pattern will be used in Part 2 as well, so it is assumed that you are familiar with the concepts in Part 1 of the tutorial.  At this point, we still are not working with a "complete" Cairngorm application (that will come in Part 3).</i></p>
<p><strong>Part 2 - Using a ModelLocator to Manage the View</strong></p>
<p><strong>Note: </strong>As with all of the tutorials that will come in this series, this lesson has two parts.  First, in the article you will learn the theory behind the topic, and then in the video you will do an actual "code-along".  The article will give some instructions in how to set up your project for the "code-along".</p>
<p><span id="more-64"></span></p>
<p>In the previous tutorial you learned the advantages of using a ModelLocator to manage data within an application, however, the advantage of the ModelLocator pattern extends beyond the management of data.  It can manage the "view" of an application as well.  To see how view management works in Cairngorm, you will first need to create a new project named "ViewManager" and name the main application file "Main.mxml".  For this project, your will also need to add the Cairngorm.swc to your project build path (as described in <a href="http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/">Part 1</a>).  You will also need to create two new folders inside of the "src" folder: view and model.  When you are completed, your project should look similar to Figure 1 below.</p>
<p class="figure"><img src='http://www.davidtucker.net/wp-content/uploads/u1.jpg' alt='Cairngorm Project Window' /><br /><strong>Figure 1</strong> - ViewManager Project</p>
<p>Next, you will need to take the ModelLocator code from the previous tutorial and place it inside your application.  I have posted the code below for your convenience.</p>
<div class="igBar"><span id="lactionscript-34"><a href="#" onclick="javascript:showPlainTxt('actionscript-34'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-34">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package model <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #006600;">model</span>.<span style="color: #006600;">IModelLocator</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ViewModelLocator <span style="color: #0066CC;">implements</span> IModelLocator <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Single Instance of Our ModelLocator</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">var</span> instance:ViewModelLocator;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> ViewModelLocator<span style="color: #66cc66;">&#40;</span>enforcer:SingletonEnforcer<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>enforcer == <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">throw</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Error</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">"You Can Only Have One ViewModelLocator"</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Returns the Single Instance</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> getInstance<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : ViewModelLocator <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>instance == <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; instance = <span style="color: #000000; font-weight: bold;">new</span> ViewModelLocator<span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">new</span> SingletonEnforcer <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">return</span> instance;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">//DEFINE YOUR VARIABLES HERE</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// Utility Class to Deny Access to Constructor</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">class</span> SingletonEnforcer <span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Example 1</strong> - The ModelLocator from <a href="http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/">Part 1</a></p>
<p>If you need information about the ModelLocator, please return to <a href="http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/">Part 1</a> of the tutorial.</p>
<p>The only item that must be changed in the ModelLocator is the "package" statement.  For this project, you will be placing the ModelLocator in the "model" folder, so the package path simply needs to me "model" (it has already been corrected above).  You will also need to add one variable to your ModelLocator initially.  This variable will be called "workflowState" and it will be of type "uint".  The declaration will look like this:</p>
<div class="igBar"><span id="lactionscript-35"><a href="#" onclick="javascript:showPlainTxt('actionscript-35'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-35">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> workflowState:uint = <span style="color: #cc66cc;color:#800000;">0</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Example 2</strong> - Defining the workflowState Variable</p>
<p>This variable will be used to "control" the view in your application.  The most common way to accomplish this is to use a ViewStack [ <a href="http://livedocs.adobe.com/labs/flex/3/langref/mx/containers/ViewStack.html" target="_blank">Reference</a>  ].  If you are not familiar with a ViewStack, feel free to read through <a href="http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&#038;file=navigators_066_03.html" target="_blank">this information</a>.  A ViewStack has a property named "selectedIndex".  This numeric value defines which "child" is visible in the ViewStack.  Consider the following code:</p>
<div class="igBar"><span id="lmxml-36"><a href="#" onclick="javascript:showPlainTxt('mxml-36'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">mxml:</span>
<div id="mxml-36">
<div class="mxml">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:ViewStack <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"myViewStack"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:HBox <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"box1"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:Label <span style="color: #000066;">text</span>=<span style="color: #ff0000;">"I am Box 1"</span> <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/mx</span>:HBox<span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:HBox <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"box2"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:Label <span style="color: #000066;">text</span>=<span style="color: #ff0000;">"I am Box 2"</span> <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/mx</span>:HBox<span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:HBox <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"box3"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:Label <span style="color: #000066;">text</span>=<span style="color: #ff0000;">"I am Box 3"</span> <span style="font-weight: bold; color: black;">/&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/mx</span>:HBox<span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/mx</span>:ViewStack<span style="font-weight: bold; color: black;">&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Example 3</strong> - A Basic ViewStack Example</p>
<p>Initially the value of <em>selectedIndex</em> is 0.  With this setting "box1" would be visible.  If you issue the following command:</p>
<p></p>
<div class="igBar"><span id="lactionscript-37"><a href="#" onclick="javascript:showPlainTxt('actionscript-37'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-37">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myViewStack.<span style="color: #006600;">selectedIndex</span> = <span style="color: #cc66cc;color:#800000;">1</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Example 4</strong> - Manually Setting the selectedIndex</p>
<p>then the box named "box2" would be visible.  However, if you apply the ModelLocator to this concept, you could use the workflowState varaible to set the selectedIndex property.  By binding the selectedIndex to the workflowState value, you now have complete control over what is displayed in the ViewStack from your ModelLocator.</p>
<div class="igBar"><span id="lmxml-38"><a href="#" onclick="javascript:showPlainTxt('mxml-38'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">mxml:</span>
<div id="mxml-38">
<div class="mxml">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx</span>:ViewStack <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"myViewStack"</span> <span style="color: #000066;">selectedIndex</span>=<span style="color: #ff0000;">"{modelLocator.workflowState}"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; ...</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/mx</span>:ViewStack<span style="font-weight: bold; color: black;">&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Example 5</strong> - Binding the selectedIndex to the workflowState</p>
<p><strong>Defining Constants for Better Code</strong></p>
<p>It would be simple to manipulate the view using this method, however, it could lead to potentially confusing code.  For example, assume that you have the following:</p>
<ul>
<li>A ViewStack with two children: a Login Screen and a Welcome Screen</li>
<li>The ViewStack's selectedIndex is bound to the workflowState property</li>
<li>A login button that performs the action shown in Example 4</li>
</ul>
<p>This might seem as if it works properly, but it doesn't account for any changes.  If another child is added to the ViewStack, it could throw off the order.  There needs to be a better way to manually set the selectedIndex property.  To accomplish this you just need to define constants inside of the ModelLocator.</p>
<div class="igBar"><span id="lactionscript-39"><a href="#" onclick="javascript:showPlainTxt('actionscript-39'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-39">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">//DEFINE YOUR VARIABLES HERE</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> workflowState:uint = <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// DEFINE VIEW CONSTANTS</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const LOGIN_SCREEN = <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const WELCOME_SCREEN = <span style="color: #cc66cc;color:#800000;">1</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Example 6</strong> - Defining View Constants in the ModelLocator</p>
<p>By using this method, you only have to change the value in one location if the number of children or the order of the children changes in the ViewStack.  Now, you would assign the login button the following action to the click event:</p>
<p></p>
<div class="igBar"><span id="lactionscript-40"><a href="#" onclick="javascript:showPlainTxt('actionscript-40'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-40">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myViewStack.<span style="color: #006600;">selectedIndex</span> = ViewModelLocator.<span style="color: #006600;">WELCOME_SCREEN</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p class="figure"><strong>Example 7</strong> - Setting the View with Defined Constants</p>
<p>Not only do you protect against future changes, you also have made your code much more logical.  Another developer could easily look at the code and understand the process without having to reference all of the children in the ViewStack.</p>
<p><strong>NOTE: </strong><em>The audio was not that great for this video.  I will be using a better system for the next tutorial.</em></p>
<p><strong>Video Example</strong> - Controlling the View with a ModelLocator</p>
<div class="vidPreview">
<a href="#" onclick="window.open('/videoPlayer.php?vid=cairngorm2.flv','videoPopup','toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=0,resizable=1,width=640,height=480');"><br />
<img src='http://www.davidtucker.net/wp-content/uploads/cairngorm2.jpg' alt='Cairngorm - Part 2 Screenshot'  style="border: 1px solid #666666;padding: 0; margin: 5px 0;"/></a>
</div>
<p></p>
<p><strong>Application Code</strong><br />
<a href="/airtips/ViewManager.zip">Download</a> (3 kB)
</p>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2007/10/18/cairngorm-part-2/feed/</wfw:commentRss>
		<slash:comments>31</slash:comments>
		</item>
		<item>
		<title>Cairngorm 2.2.1 Released</title>
		<link>http://www.davidtucker.net/2007/10/08/cairngorm-221-released/</link>
		<comments>http://www.davidtucker.net/2007/10/08/cairngorm-221-released/#comments</comments>
		<pubDate>Mon, 08 Oct 2007 16:28:01 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/2007/10/08/cairngorm-221-released/</guid>
		<description><![CDATA[Alistair McLeod announced the release of Cairngorm 2.2.1.  Read about it here and download it here.
]]></description>
			<content:encoded><![CDATA[<p>Alistair McLeod announced the release of Cairngorm 2.2.1.  Read about it <a href="http://weblogs.macromedia.com/amcleod/archives/2007/10/cairngorm_221_r.cfm">here</a> and download it <A href="http://labs.adobe.com/wiki/index.php/Cairngorm:Cairngorm2.2.1:Download" target="_blank">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2007/10/08/cairngorm-221-released/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Getting Started with Cairngorm – Part 1</title>
		<link>http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/</link>
		<comments>http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/#comments</comments>
		<pubDate>Sun, 07 Oct 2007 09:38:23 +0000</pubDate>
		<dc:creator>David Tucker</dc:creator>
				<category><![CDATA[Cairngorm]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/</guid>
		<description><![CDATA[I spoke about Cairngorm 2.2 in the Flex Bootcamp at Max this week.  Many people were interested in Cairngorm, but I only had about 10 minutes to explain the basics of Cairngorm.  I guess the easiest way to assist these people is to do a quick blog series on the benefits of Cairngorm. [...]]]></description>
			<content:encoded><![CDATA[<p>I spoke about Cairngorm 2.2 in the Flex Bootcamp at Max this week.  Many people were interested in Cairngorm, but I only had about 10 minutes to explain the basics of Cairngorm.  I guess the easiest way to assist these people is to do a quick blog series on the benefits of Cairngorm.  This series will combine articles with "code-along" videos.</p>
<p><strong>Disclaimer:</strong> <i>I do not claim the be "the expert" on Cairngorm - I am far from it.  However, I have used Cairngorm on several large projects (both at Georgia Tech and in my own business).  I am certainly open to corrections if you see that I have made an error on this project.  If you want "the experts" check out: <a href="http://weblogs.macromedia.com/swebster/" target="_blank">Steven Webster</a>, <a href="http://weblogs.macromedia.com/amcleod" target="_blank">Alistair McLeod</a>, <a href="http://weblogs.macromedia.com/auhlmann" target="_blank">Alex Uhlmann</a>, and <a href="http://weblogs.macromedia.com/pmartin" target="_blank">Peter Martin</a>.</i></p>
<p><span id="more-57"></span></p>
<p><strong>Note:</strong> <i>The guys at Adobe Consulting (that developed Cairngorm) are currently investigating some new things with the framework as a whole.  It is possible (actually probable) that some of these things will change in the future.  One of the very specific areas of change is the Model Locator.</i></p>
<p><strong>Part 1 – Getting Started By Using a Model Locator<br />
</strong></p>
<p>The Model Locator pattern is used in Cairngorm, but you don't have to have a full Cairngorm Implementation to use the pattern.  First, let's cover what benefits that you get from using a Model Locator.
</p>
<p>A Model Locator is a centralized repository for all of the data that is needed across your application.  Your data will exist inside of a "singleton class".  This "class" can only have one instance of itself.  Why is this important?  Let me give you an example.
</p>
<p>We have great mini-notepads at work that I use to write down data while I work.  However, sometimes, I lose a notepad – get a new one, and then find the old one.  After both have been heavily used – it is really hard to find out which notepad I used to write down a piece of information from one week ago.  That is a simple example – but imagine if I had 20 notepads?  This could get crazy.
</p>
<p>In the same way you could have a "class" that gets "instantiated" 20 times within your application (even if you don't mean for it to).  The easiest way to eliminate this problem is to use a "singleton".  A singleton is a class that is never "created" in the traditional way.  It has one main rule – no more than one of itself can exist at any point in time.  How does it do this?  I will show you in the Model Locator example.  </p>
<div class="igBar"><span id="lactionscript-46"><a href="#" onclick="javascript:showPlainTxt('actionscript-46'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-46">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">package net.<span style="color: #006600;">davidtucker</span>.<span style="color: #006600;">CairngormSample</span>.<span style="color: #006600;">model</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">cairngorm</span>.<span style="color: #006600;">model</span>.<span style="color: #006600;">IModelLocator</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ModelLocator <span style="color: #0066CC;">implements</span> IModelLocator <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Single Instance of Our ModelLocator</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">var</span> instance:ModelLocator;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> ModelLocator<span style="color: #66cc66;">&#40;</span>enforcer:SingletonEnforcer<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>enforcer == <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">throw</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Error</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">"You Can Only Have One ModelLocator"</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Returns the Single Instance</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> getInstance<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : ModelLocator <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>instance == <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; instance = <span style="color: #000000; font-weight: bold;">new</span> ModelLocator<span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">new</span> SingletonEnforcer <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">return</span> instance;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">//DEFINE YOUR VARIABLES HERE&nbsp; &nbsp; &nbsp; &nbsp; </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// Utility Class to Deny Access to Constructor</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">class</span> SingletonEnforcer <span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>This code may look a bit daunting in the beginning, but trust me that it is not as difficult as it may appear.  First, we have our package definition and we import some classes.  Right now we know that we will need the IModelLocator interface.  To use this you will need the Cairngorm SWC that can be found here: <a href="http://labs.adobe.com/wiki/index.php/Cairngorm:Cairngorm2.2:Download">Cairngorm</a>.  Also note - you could build a model locator without Cairngorm, and I do this frequently on small projects (you just leave out the 'implements IModelLocator' and 'import com.adobe.cairngorm.model.IModelLocator' code from the Model Locator).</p>
<div class="igBar"><span id="lactionscript-47"><a href="#" onclick="javascript:showPlainTxt('actionscript-47'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-47">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ModelLocator <span style="color: #0066CC;">implements</span> IModelLocator <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #808080; font-style: italic;">// Single Instance of Our ModelLocator</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">var</span> instance:ModelLocator; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Next we have our class definition.  It is important that you use the Bindable metatag directly above your class definition.  This will allow all of our variables that we define inside of the Model Locator to be used for binding.  We also will go ahead and create one variable.  It will be called "instance" and it will be of type ModelLocator.  This will be the variable where we will store our one instance of our class.  It will also be denoted as a "static" property.  If you are not sure what a "static" property is, it's ok - we will discuss that in our next lesson.</p>
<div class="igBar"><span id="lactionscript-48"><a href="#" onclick="javascript:showPlainTxt('actionscript-48'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-48">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> ModelLocator<span style="color: #66cc66;">&#40;</span>enforcer:SingletonEnforcer<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>enforcer == <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">throw</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Error</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">"You Can Only Have One ModelLocator"</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>This is followed by the constructor.  The constructor takes on argument - "enforcer".  You will notice that this "enforcer" has a type of "SingletonEnforcer" which is defined directly after our class.  Here is the logic behind that:</p>
<ul>
<li>When you put a class in an Actionscript file below the main class, it is only available to that class.  Many people refer to these as "utility classes" (although many people use that term in a much broader scope).</li>
<li>If the constructor requires this argument - then only our main class can create an instance of itself, because we do not have access to the "SingletonEnforcer" class - only the main class has this access.</li>
<li>We will not access our class in the normal way by using the "new" statement because we can't call the constructor (I will show you how we will do it in a bit).</li>
</ul>
<p>Once we get inside of the constructor, we have a few lines that make sure things work as planned.  The "if" statement ensures that we had a valid "enforcer" passed in.  If there wasn't it throws an Error stating that "You Can Have Only One ModelLocator".</p>
<div class="igBar"><span id="lactionscript-49"><a href="#" onclick="javascript:showPlainTxt('actionscript-49'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-49">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// Returns the Single Instance</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> getInstance<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : ModelLocator <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>instance == <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; instance = <span style="color: #000000; font-weight: bold;">new</span> ModelLocator<span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">new</span> SingletonEnforcer <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #b1b100;">return</span> instance;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The "getInstance" function is how we will access our ModelLocator from our application.  This function simply passes back the "instance" of the class.  If it doesn't exist yet, it creates it.  We can now get the ModelLocator by using the following code:</p>
<div class="igBar"><span id="lactionscript-50"><a href="#" onclick="javascript:showPlainTxt('actionscript-50'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-50">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">var</span> model:ModelLocator = ModelLocator.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p><strong>Video Example - Getting Started and Building a Contact List</strong></p>
<div class="vidPreview">
<a href="#" onclick="window.open('/videoPlayer.php?vid=cairngorm1.flv','videoPopup','toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=0,resizable=1,width=640,height=480');"><br />
<img src='http://www.davidtucker.net/wp-content/uploads/cairngorm1.jpg' alt='Cairngorm - Part 1 Screenshot'  style="border: 1px solid #666666;padding: 0; margin: 5px 0;"/></a>
</div>
<p></p>
<p><strong>Application Code</strong><br />
<a href="/airtips/ModelLocatorSample.zip">Download</a> (418 kB)
</p>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/feed/</wfw:commentRss>
		<slash:comments>95</slash:comments>
		</item>
	</channel>
</rss>
