OK, not much to write home about, but as a first go I’m quite pleased with myself.

Have a butchers!

In Part Four we tidied up the code a bit with another class I’ve called CustomPreloader to extend the DownloadProgressBar class and hold the required functions for CustomPreloaders.  Now if we extend the CustomPreloader class all we need to do is override the listener functions to control our preloader.  So lets have a look at another example.

In this case we are going to use the timeline on the MovieClip to display the download time.  All I’ve done is create a Flash File and a preloader MovieClip within it.  Then in the preloader MovieClip i made it have 100 frames and on each frame I put the text “Frame 1″, “Frame 2″ etc.  You can get the example from here -> Timeline Preloader FLA

Now the code.

package com.worthyashes.preloaders
{
	import flash.display.MovieClip;
	import flash.events.ProgressEvent;

	public class TimelineCustomPreloader extends CustomPreloader
	{
		private var preloadMovieClip:MovieClip

		[Embed(source="assets/swf/timeline.swf",symbol="preloader")]
		private var PreloadAssets:Class;

		public function TimelineCustomPreloader()
		{
			super();
			preloadMovieClip = new PreloadAssets();
			addChild(preloadMovieClip);
			preloadMovieClip.gotoAndStop(1);
		}

		private function centrePreloader():void
		{
			x = (stageWidth/2) - (preloadMovieClip.width/2);
			y = (stageHeight/2) - (preloadMovieClip.height/2);
		}

		override protected function preloadStarted():void
		{
			centrePreloader();
		}

		override protected function downloadProgress(event:ProgressEvent):void
		{
			var percent:int = Math.floor(event.bytesLoaded/event.bytesTotal*100);
			preloadMovieClip.gotoAndStop(percent);
		}

	}
}

And we change the code on the Application tag in the MXML to be

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”horizontal”
preloader=”com.worthyashes.preloaders.DynamicPreloader”>

So we are pointing to the correct class.  Lets quickly go through the code, as it is quite straightforward.

public function TimelineCustomPreloader()
{
super();
preloadMovieClip = new PreloadAssets();
addChild(preloadMovieClip);
preloadMovieClip.gotoAndStop(1);
}

The only change we have here is we need to stop the preloader playing as soon as it is instantiated.

override protected function downloadProgress(event:ProgressEvent):void
{
var percent:int = Math.floor(event.bytesLoaded/event.bytesTotal*100);
preloadMovieClip.gotoAndStop(percent);
}

As we go through the download as we work out the percentage downloaded we round off the figure and then tell the clip to display (and stop at) that frame.

Click here to have a look.

Right – well that should give you a good idea how you can use a Falsh MovieClip in a swef as a preloader for flex and how to control it.  What about somethign a bit more interesting?  What if you wanted to create a preloader but not use any Flash assets at all, and do it totally dynamically?  OK – lets have a go.

Lets look at the DynamicPreloader.as

package com.worthyashes.preloaders
{
	import flash.events.ProgressEvent;

	public class DynamicPreloader extends CustomPreloader
	{
		private var preloadSprite:DynamicPreloadDisplay;

		public function DynamicPreloader()
		{
			super();
			preloadSprite = new DynamicPreloadDisplay();
			addChild(preloadSprite);
			trace("New dynamic preloader");
		}

		private function centreSprite():void
		{
			x = (stageWidth/2) - (preloadSprite.width/2);
			y = (stageHeight/2) - (preloadSprite.height/2);
		}

		override protected function preloadStarted():void
		{
			centreSprite();
		}

		override protected function downloadProgress(event:ProgressEvent):void
		{
			preloadSprite.displayDownload(event.bytesLoaded/event.bytesTotal*100);
		}

	}
}

Lets go through the code – it won’t take long .

First look at the variables

private var preloadSprite:DynamicPreloadDisaply;

This is the preloader that we will dynamically create.  We instantiate it in the DynamicPreloader constructor. (NOTE: I left the trace in so if you run this code through the debugger it will trace to the console even though flex hasn’t started properly yet)

Finally we need to send the percent downloaded to the DynamicPreloadDisplay class, so we trigger a function I’ve called displayDownload

override protected function downloadProgress(event:ProgressEvent):void
{
preloadSprite.displayDownload(event.bytesLoaded/event.bytesTotal*100);
}

Lets now look at the DynamicPreloadDisplay.as

package com.worthyashes.preloaders
{
	import flash.display.Sprite;
	import flash.filters.BevelFilter;
	import flash.filters.DropShadowFilter;
	import flash.filters.GlowFilter;
	import flash.text.TextField;

	public class DynamicPreloadDisplay extends Sprite
	{
		private var percentText:TextField;
		private var line:Sprite;
		private var totalLineWidth:int = 260;

		public function DynamicPreloadDisplay()
		{
			drawBackground();
			addText();
			addLine();
			createFilters();
		}

		private function drawBackground():void
		{
			graphics.beginFill(0x666666,1);
			graphics.drawRoundRect(0,0,300,100,10,10);
			graphics.endFill();
		}

		private function createFilters():void
		{
			var bevel:BevelFilter = new BevelFilter();
			this.filters = [bevel];
		}

		private function addText():void
		{
			percentText = new TextField();
			percentText.width = 300;
			percentText.x = 20;
			percentText.y = 20;

			var glowFilter:GlowFilter = new GlowFilter();

			percentText.filters = [glowFilter];

			addChild(percentText);
		}

		private function addLine():void
		{
			line = new Sprite();
			line.x = 20;
			line.y = 40;

			addChild(line);
		}

		public function displayDownload(percent:int):void
		{
			line.graphics.clear();
			line.graphics.lineStyle(2,0x00ff00,1);
			line.graphics.beginFill(0xffffff,1);
			var lineWidth:int = totalLineWidth*percent/100;
			line.graphics.drawRect(0,0,lineWidth,15);
			line.graphics.endFill();

			var dropShadowFilter:DropShadowFilter = new DropShadowFilter();
			line.filters = [dropShadowFilter];

			percentText.text = percent.toString() + "% Downloaded";
		}

	}
}

Again lets go through the code.  The DynamicPreloadDisplay extends the Sprite class.  This gives us access to the drawing api and a sprite to display the preloader in.

Constructor : -

public function DynamicPreloadDisplay()
{
drawBackground();
addText();
addLine();
createFilters();
}

When I’m coding I like to pull things out into individual functions that do one thing (well that’s what i try to do) this means that if I need to fix something I’m normally only looking at one specific problem at a time.

Draw Background function

private function drawBackground():void
{
graphics.beginFill(0x666666,1);
graphics.drawRoundRect(0,0,300,100,10,10);
graphics.endFill();
}

This merely draws the background.

Add Text

I want to have a text field to display the percentage downloaded so I create one on the fly.  Note that we create this after the background.  If we did it the other way round the background would be on top of the textfield.

private function addText():void
{
percentText = new TextField();
percentText.width = 300;
percentText.x = 20;
percentText.y = 20;
//Add a filter for a laugh
var glowFilter:GlowFilter = new GlowFilter();

percentText.filters = [glowFilter];

addChild(percentText);
}

Now I want to create a line to display how much has been downloaded visualy

private function addLine():void
{
line = new Sprite();
line.x = 20;
line.y = 40;

addChild(line);

}

The line is another sprite held by the DynamicPreloadDisplay sprite.

Finally – and this is just to demonstrate that this is possible – I’ve added a filter to the background.

private function createFilters():void

{

var bevel:BevelFilter = new BevelFilter();

this.filters = [bevel];

}

The last function to look at is the displayDownload function

public function displayDownload(percent:int):void

{

line.graphics.clear();

line.graphics.lineStyle(2,0x00ff00,1);

line.graphics.beginFill(0xffffff,1);

var lineWidth:int = totalLineWidth*percent/100;

line.graphics.drawRect(0,0,lineWidth,15);

line.graphics.endFill();

var dropShadowFilter:DropShadowFilter = new DropShadowFilter();

line.filters = [dropShadowFilter];

percentText.text = percent.toString() + "% Downloaded";

}

We clear the graphics from the line sprite.  Then we define the line style and fill.  If you want to understand this a bit better then please look at the Flash Drawing API.  Again I’ve applied filters just for the sake of it.

Finally we set the percentText to the percent downloaded.

Click here to see it working.

Well – I apologise for the shocking design but I hope this has given you a good overview of how to implement and create custom preloaders for Flex.  Have fun!

Right so in Part Three we actually got to write a bit of code and see a working custom flex preloader (even if it doesn’t really look very pretty).

Looking at the code I can tidy this up a bit.  We are always going to need to override the set preloader function to add the listeners.  I’m a bit lazy so if I create a class in-between then I can save a bit of typing.  My new CustomPreloader class looks like this : -

package com.worthyashes.preloaders
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.ProgressEvent;

	import mx.events.FlexEvent;
	import mx.preloaders.DownloadProgressBar;

	public class CustomPreloader extends DownloadProgressBar
	{
		public function CustomPreloader()
		{
			super();
		}
		//This is the most important
		override public function set preloader(preloader:Sprite):void
		{
			preloader.addEventListener(ProgressEvent.PROGRESS,downloadProgress);
			preloader.addEventListener(Event.COMPLETE,downloadComplete);
			preloader.addEventListener(FlexEvent.INIT_PROGRESS,flexInitProgress);
			preloader.addEventListener(FlexEvent.INIT_COMPLETE,flexInitComplete);
			preloadStarted();
		}

		protected function preloadStarted():void{}

		protected function downloadProgress(event:ProgressEvent):void{}

		protected function downloadComplete(event:Event):void{}

		protected function flexInitProgress(event:FlexEvent):void{}

		protected function flexInitComplete(event:FlexEvent):void
		{
			dispatchEvent(new Event(Event.COMPLETE));
		}
	}
}

To use this class then we can extend it and then override the listener functions as required.  There is also a default function in the flexInitComplete listener to trigger the COMPLETE Event.  Unless it is required to change this function (easily done by overriding the function) then this class will deal with letting the Application know when to start.

So if we refactor the BasicCustomPreloader.as class we get : -

package com.worthyashes.preloaders
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.ProgressEvent;

	import mx.events.FlexEvent;

	public class BasicCustomPreloader extends CustomPreloader
	{
		private var preloadMovieClip:MovieClip;

		[Embed(source="assets/swf/basic.swf",symbol="preloader")]
		private var PreloaderAssets:Class;

		public function BasicCustomPreloader()
		{
			super();
			preloadMovieClip = new PreloaderAssets();
			addChild(preloadMovieClip);
		}

		private function centreClip():void
		{
			x = (stageWidth/2) - (preloadMovieClip.width/2);
			y = (stageHeight/2) - (preloadMovieClip.height/2);
		}

		override protected function preloadStarted():void
		{
			centreClip();
		}

		override protected function downloadProgress(event:ProgressEvent):void
		{
			var percentage:int = Math.round(event.bytesLoaded/event.bytesTotal*100)
			preloadMovieClip.percent_txt.text = percentage.toString() + "%";
		}

		override protected function downloadComplete(event:Event):void
		{
			preloadMovieClip.percent_txt.text = "100%"
		}

		override protected function flexInitProgress(event:FlexEvent):void
		{
			preloadMovieClip.percent_txt.text = "Initialising";
		}
	}
}

This is hardly earth shattering, bit it does tidy things up a bit and make the implementation of a CustomPreloader a little easier.

In the final part of this tutorial I’ll create two more preloaders, one that will use the timeline of the swf and another that will dynamically draw a preloader without using any assets at all.

OK – so check out Part Two for see the flash assets we’ve produced and download them from here if you need them – > Basic Flash Assets.

Now we want to create a new flex project.  Open flex and create a new project, call it whatever you feel like and click on finish.

Create an assets folder, and in the assets folder create a swf folder (where we’ll pop the preloader swf) and I’ve created an originals folder to put some images that we will use to bloat the flex file so we can have a decent file size to test the preloaders are working.

To hold the code I’ve created a com/worthyashes/preloaders folder.  This is a standard way of creating a namespace for your code so it won’t conflict with any other code that you may be using in the project.  I also create an archive folder – this is just something I do to hold bits and is not necessary for this to work.

Save the swf to the assets/swf folder and we are ready to go.

First off we need to bloat the file so we’ve got something to work with.

BasicCustomPreloader.mxml : -

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
preloader="com.worthyashes.preloaders.BasicCustomPreloader"
layout="vertical">
<mx:Script>
<![CDATA[
/*
Here are some images to bloat up the size of the swf
*/
import mx.events.FlexEvent;

[Bindable]
[Embed(source="assets/originals/bush.jpg")]
private var img1:Class;
[Embed(source="assets/originals/charlieHavingBreakfast.jpg")]
private var img2:Class;
[Embed(source="assets/originals/field1.jpg")]
private var img3:Class;
[Embed(source="assets/originals/field2.jpg")]
private var img4:Class;
[Embed(source="assets/originals/frostyHedge.jpg")]
private var img5:Class;
[Embed(source="assets/originals/frozenBranches.jpg")]
private var img6:Class;
[Embed(source="assets/originals/gardenSteps1.jpg")]
private var img7:Class;
[Embed(source="assets/originals/gardenSteps2.jpg")]
private var img8:Class;
]]>
</mx:Script>
<!--We'll display an image so we can prove it initialised properly-->
<mx:Image source="{img1}" width="100%" height="100%" horizontalAlign="center"/>
</mx:Application>

Using the Embed keyword we are telling the compiler to add these files to the swf, not load them at runtime.  Normally you wouldn’t want to do this but it’s perfect for us as we want to have a large swf.  This has pushed the swf size up to just over 10Meg.  Perfect.  The last thing we do is display one of the images so we have a visual cue that the application has loaded.

The line in the Application tag

preloader=”com.worthyashes.preloaders.BasicCustomPreloader”

Tells the application to ignore the standard preloader and load our Custom Preloader class instead.

Now for the preloader code.  I’ll reproduce it here and then we’ll go through it.

BasicCustomPreloader.as

package com.worthyashes.preloaders
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.ProgressEvent;

	import mx.events.FlexEvent;
	import mx.preloaders.DownloadProgressBar;

	public class BasicCustomPreloader extends DownloadProgressBar
	{
        private var preloadMovieClip:MovieClip;

		[Embed(source="assets/swf/basic.swf",symbol="preloader")]
		private var PreloaderAssets:Class;

		public function BasicCustomPreloader()
		{
			super();
            preloadMovieClip = new PreloaderAssets();
			addChild(preloadMovieClip);
		}
		//This is the most important
		override public function set preloader(preloader:Sprite):void
		{
			preloader.addEventListener(ProgressEvent.PROGRESS,downloadProgress);
			preloader.addEventListener(Event.COMPLETE,downloadComplete);
			preloader.addEventListener(FlexEvent.INIT_PROGRESS,flexInitProgress);
			preloader.addEventListener(FlexEvent.INIT_COMPLETE,flexInitComplete);
			preloadStarted();
		}

		private function preloadStarted():void
        {
             centreClip();
        }

        private function centreClip():void
		{
			x = (stageWidth/2) - (preloadMovieClip.width/2);
			y = (stageHeight/2) - (preloadMovieClip.height/2);
		}

		private function downloadProgress(event:ProgressEvent):void
        {
            var percentage:int = Math.round(event.bytesLoaded/event.bytesTotal*100)
			preloadMovieClip.percent_txt.text = percentage.toString() + "%";
        }

		private function downloadComplete(event:Event):void
        {
            preloadMovieClip.percent_txt.text = "100%";
        }

		private function flexInitProgress(event:FlexEvent):void
        {
            preloadMovieClip.percent_txt.text = "Initialising";
        }

		private function flexInitComplete(event:FlexEvent):void
		{
			dispatchEvent(new Event(Event.COMPLETE));
		}
	}
}

We’d better go through the code.

First of all, as we discussed in Part One, we are extending the DownloadProgressBar class.  This class has all of the functionality for handling the loading and initialising of the application, so we don’t have to worry about that.

Next we have a variable to hold our MovieClip that we will use as the preloader.

private var preloadMovieClip:MovieClip;

And we will embed the swf.

[Embed(source="assets/swf/basic.swf",symbol="preloader")]
private var PreloaderAssets:Class;

The swf needs to be embedded as a generic Class, but we have a second attribute in the Embed metadata which has a reference to the symbol we are going to use.  This is given the same name as the Linkage name we gave the symbol in the flash movie.  So we now have access to the preloader movieclip.

In the constructor we can tie these two variables together.

public function BasicCustomPreloader()
{
super();
preloadMovieClip = new PreloaderAssets();
addChild(preloadMovieClip);
}

This bit of code sets up the preloadMovieClip variable as a new instance of the preloader movieclip from the embeded swf file.  Now we can use dot notation to access anything within this clip.

Next we override the set preloader function from the DownloadProgressBar Class.  We set up four event listeners to handle the download progress and the initialisation of the application.

override public function set preloader(preloader:Sprite):void
{
preloader.addEventListener(ProgressEvent.PROGRESS,downloadProgress);
preloader.addEventListener(Event.COMPLETE,downloadComplete);
preloader.addEventListener(FlexEvent.INIT_PROGRESS,flexInitProgress);
preloader.addEventListener(FlexEvent.INIT_COMPLETE,flexInitComplete);
preloadStarted();
}

These are mapped to further functions which will actually do the work for the preloader.  The preloadStarted function is called to do any initial work required for the preloader, in our case making sure the preloader is displayed in the centre of the screen. (I won’t go through that code, it’s very straight-forward)

Lets look at the listeners

private function downloadProgress(event:ProgressEvent):void
{
var percentage:int = Math.round(event.bytesLoaded/event.bytesTotal*100)
preloadMovieClip.percent_txt.text = percentage.toString() + “%”;
}

The downloadProgress function works out the percentage loaded and then displays the result in the percent_txt dynamic text field that lives in the preload movieclip in the swf.  As you can see we can get to this text field using the preloadMovieClip variable we set up earlier and dot notation.
private function downloadComplete(event:Event):void
{
preloadMovieClip.percent_txt.text = “100%”;
}

When the download is complete we can simply set it to 100%.  However this isn’t the end of the preload process as we now need to wait for the application to build itself and initialise.
private function flexInitProgress(event:FlexEvent):void
{
preloadMovieClip.percent_txt.text = “Initialising”;
}

Once the download is complete we need to display some sort of indicator that the application is starting.  In this case I made it quite simple and just changed the text in the percent_txt text  field.
private function flexInitComplete(event:FlexEvent):void
{
dispatchEvent(new Event(Event.COMPLETE));
}

Once the application is fully downloaded and initialised we need to dispatch a COMPLETE event.  As we’ve overridden the existing function in the DownloadProgressBar it will not automatically dispatch this event and we need to do it ourselves.

You can see the working preloader here.

Next lets tidy up the code and have a bit of fun.

Please see Part One for the introduction to this post

We are going to embed a swf into a class that extends the DownloadProgressBar to take the place of the standard flex preloader.  Rather than just dumping a swf into the preloader we want to have some form of access to the assets in the swf so we can display the percent loaded, maybe show some sort of visual cue as to how much has downloaded.

So fire up flash and lets get stuck in.

Create a new flash document (FLA), and select ActionScript 2.

We need to create a MovieClip to expose the asset to Flex and we don’t want to associate it with a class, which we would have to do if we chose ActionScript 3.

As I’ve pointed out many times before I am NOT a designer, so this preloader is going to look a bit ropey, but it will serve to illustrate the point.

What we need is a movieclip with a linkage name in the library for us to be able to access it from Flex.  So draw a box and then select it and press F8 to turn it into a movielcip.

I’ve popped the name of preloader and selected “Export for ActionScript” and “Export in the first Frame”.  I’ve left the linkage name as “preloader,” this is the name we will use in the Flex code to identify this MovieClip.

Click OK.  Double Click the movie clip (Cntrl Click on a Mac – I think, I don’t use one) to edit it.  To make things easy I’ve created a couple of layers, one for the background (the box) one for static text and one for dynamic text (the text that will display the amount  of the application that is loaded).

As you can see I gave the dynamic text a name of “percent_txt.”  Save the file and export it.

You can download the fla from here – > Basic Flash Assets

Next - lets look at the flex code.

EDIT – I said this needed to be in AS2 from the Flash IDE.  After more time working with Flex I’ve actually realised that you can export in AS3 from the IDE and use class names, ignore the warnings about there being no class file and use the class name you gave the asset exactly as I said the instance name should be used above.

Just a quickie, but I thought I’d share this.  Basically all of a sudden Flex Builder stopped showing me errors in the problems panel.  I couldn’t work out what on earth was going on, I was being show the visible warnings on the actual lines of code that were wrong when I was looking at the file and I was getting the alert box pop up to let me know there was an error when I compiled but nada in the problems panel.  I paniced and reinstalled flex builder.  That didn’t work, I went through everything and eventually found the problem.

A few days ago I had loads of projects I was working on and so I started using working sets to limit the number of projects I was seeing in the resources panel.  Somehow the problems panel reset itself to filter the error reporting to just the working set selected.  I didn’t see this and that is when I stopped getting my error reporting.

Solution, click on the filter button to the right of the problems panel.  Select the “on any element” radio button and then ok.  Should sort the problem.

So – I’ve got bored of the standard flex preloader.  (Actually the company I’m working at has)  I’ve got away with it so far as the applications I’ve been working on have either been back-end systems or prototypes so the great unwashed (in which I include myself, expecially today as Charlie was up most of the night and I didn’t have a chance for a shower this morning after oversleeping) never saw the grey box.

Don’t get me wrong, as with most flex components the standard design is very nice, just a bit, well, er, basically it looks like a flex app.

As normal I need to thank a few guys for some fantastic posts that put me on the right track : -

Jesse Warden

Ted On Flex

I am Josh

I’m not trying to steal these guys ideas and post them as my own, what I am doing is to write up what I understand here in a way that I can swallow.

Back to custom preloaders.

With all the other framework components it is really easy to apply CSS, skins or images to style them up.  The problem with the preloader is that it is, well it’s preloading the framework.  We have no access to any of the flex framework except for a class called the DownloadProgressBar.  We have this class and the standard flash classes that are available to us in the flash player.

We definately do want to use the DownloadProgressBar, for the reasons explained by Jesse Warden

“Flex’ built in preloader is pretty sweet. It auto-adjusts for your application’s color to stand out, it handles all aspects of preloading. This includes remote shared libraries, fonts, and even deferred classes used in modules. Finally, it deals with the initialization of your Flex application which can possibly take longer than a few milliseconds. ”

There’s no point in us re-writing functions that do the above if they are already in the DownloadProgressBar class, so we only need to worry about displaying something instead of the standard preloader and get some useful information into it.

Lets look at a very simple example, we will load a swf as a replacement for the standard preloader.

Next we’ll look at what we need to do with the Flash FLA to make it’s assets available for Flex.

OK, one of the great things about working with Flex is how configurable the design is.  You can use CSS, easily create skins by using images or programatically with ActionScript.  So why do so many flex apps look like, er, flex apps.  I think for two reasons.  The big take up on flex has been by coders rather then designers, and we don’t care what it looks like really – we just worry about it working.  And the other reason is linked to this, when designers do get involved it all seems far too complicated and codey.

There are two great little apps for getting around this, one which I’m sure everyone has had a play with (when I say everone I mean the flex community, I’m sure that my Dad isn’t really all that excited about it) is the Flex Style Explorer.  This cool app allows you to try out different CSS on Flex Framework components to see what it looks like and generates the CSS code for you to pop into your own applications.

The other cracking app is FlexSpy.  This is like the Flex Style Explorer, but it actually allows you to apply the same concept to your own application.  Really handy and very clever.  You can see and example of it working here.

For an overview of Cairngorm check out part one.

OK – before we can start we need to set up the environment.  First things first go and get Cairngorm from here.  For now just download the binary, but further down the line you may want to download the source to have a look at the guts of the code.  Unzip the folder to somewhere that you can easily find.  I have a central folder called codeLibrary for all central code, but to be honest you can keep it on the desktop if you want.

Now fire up Flex Builder and create a new project.

Don’t click on finish click on next, the next screen asks where you want to compile the application to (default is fine, normally bin-debug), click next again.  Now we need to map in the Cairngorm library in, this is the .swc file you got in the download.

Click on the library tab, then the Add SWC button.

Browse to the folder where you unzipped the file and select the Cairngorm.swc.

Click OK

then finish.

Now we have access to the Cairngorm library.

NOTE : If tyou do get overexcited and click on finish and create the project before adding the Cairngorm.swf simply right click on the project, select preferences then Flex Build Pah.  This will then show you a similar dialog to the one I described above and you can map in the SWC there.

Final thing to do is to set up the folders for the Cairngorm structure.  This is not compulsory, but you’ll find it a lot easier if you have a folder structure like this.

Right click and select new – > folder.  I won’t go through it step by step, but here’s the recommended structue.

EDIT : I realised that’s not too clear.  The folder structure is : -

com

____>worthyashes

————->simpleCairngorm

—————————>business

—————————>commands

—————————>control

—————————>events

—————————>model

—————————>responder

—————————>view

—————————>vo

The com/worthyashes bit is just a standard namespace so if someone uses my classes they shouldn’t conflict with other classes (worthyashes is my normal username).

simpleCairngorm – this folder is really to hold all the code that specifically relates to this Cairngorm app.  This means that if you have a number of different bits of your app all using Cairngorm in theory you can pull an individual bit out and use it on other project, for example a user management system.

The sub folders of the simpleCairngorm folder are the actual suggested folder structure for Cairngorm.

Sorry it wasn’t clear from the piccy.

END OF EDIT.

OK – thats done.  Next – finally time to get our hands dirty with some code! (Well nearly.…..)

First things first I need to acknowledge David Tucker for this fantastic post that got me started.

As David Tucker says in his post, though I think he’s lying, I’m no Cairngorm Expert either.  But I have used it recently and I like it.  What I’m doing with this post is to explain it as I get it, so if I’ve made any glaring errors please let me know.  This is also an aide memoir to myself too so I apologise for the slightly jovial tone, I like to keep myself amused while I’m writing.  What I can say with authority though is that I really like Cairngorm even though I’m currently using the PureMVC framework (I hope to post a similar getting started for that framework).

The Cairngorm framework appears to be the main framework suggested by Adobe for use when creating RIAs with Flex.  There are lots of other frameworks, Pure MVC being one of them, but this one is really being pushed as they bought the company that created it (Iteration II – acutally they were bought by Macromedia, who were then bought by Adobe, but the essential theory stands).

Cairngorm is an MVC (Model, View, Controller) framework that aims to seperate these different parts of an application so it is easy to maintain and also easier for large development teams to work on.  As each part of the application is seperate a different developer can work on each bit, after planning the application of course.

In essence with an MVC design pattern the Model should deal with the data, the Controller with telling the Model what to do and the View should site there happily being told by the model what it’s supposed to be display.

I’ll have a go at some pretty diagrams of the MVC pattern (you’ll see I’m no designer) but I’ll mainly explain the way I understand it.

At the most simple level : -

A user interacts with the view.  The view dispatches an event which is mapped to the controller (known as a command), the command makes a change in the model and the model then tells the view what to display.

Now this is all well and good, but really the whole point of framework is to make it easy to manage the application and that includes data connections.  So the next step is : -

A user interacts with the view.  The view dispatches an event which is mapped to the controller (command).  The command creates a delegate to make a call to a data source and a responder that the result from the data call is mapped to.  The responder makes a change to model (which it is allowed to do as it is a controller) and the model tells the view what to display.

So for a simple app that loads some XML the flow would be : -

• Application Inititialises
• Dispatches an “I’m alive” event to a controller class
• The controller class creates a “GetXMLDelegate” class that calls to load the XML
• The XML is delivered back to responder (at the control level)
• The responder changes the model
• The view displays the data the model holds

OK, OK, I’m laboring the point – but that sort of is the point. It seems very obvious but this is really important.  View talks to Control, Control changes the model, model gets the view to display what it tells it to.

The most important and cardinal rule is ONLY CONTROLLERS (ie. Commands or Responders) CAN CHANGE THE MODEL!  If you stick to this cardinal rule your life with Cairngorm will be much more fruitful.

One other bit of advice is to try and keep things simple. One command does one function. This means you’ll end up with loads of classes, but if something does go tits up then you’ll probably have a good idea as to exactly where the application is failing, and probably the filename of the class that is the problem.

OK – part 2 – lets set up the environment for developing with Cairngorm.