Go Tripod

Building a medium to large scale Flex App using Cairngorm (Part 1)

Fri Jun 06 2008

This is the first part of a four part series on my own approach to using Cairngorm to build an enterprise Rich Internet App.

In the first part, I cover setting up your project and creating the foundation classes that will hand our Rich Internet Application together.

Getting Started

Before we start although I am using Flex 3 and building a Flex app, this method works for Flex 2 and also Adobe Air applications.

Cairngorm is a Model View Controller framework and the first thing I like to do after creating a new Flex project is to create the appropriate folders in my project namespace. so for example, under uk/co/clockobj/projectname, I would create three folders named model, view and controller. Note: you don’t have to namespace or use this folder structure I use, but this is what I like to do by convention.

The controller folder will store my controller (Cairngorm’s Front Controller), my commands, my service locator, services and custom events.

The model folder will store my model locator, models and my Value Objects / Data Transfer Objects, in the screenshot above I have created a product subfolder to hold product related model classes.

Finally the view folder will store all our mxml.

Note: I have an additional folder shown above called presentation. This is entirely optional but if you use a Presentation methodology, you can mimicking the folder structure of the view folder and store your Presentation modifier classes here.

Note: For now the presentation layer is beyond the scope of this article but I hope to post an article on this soon.

Next, you will want to download the Cairngorm.swc file from here. (If you are new to Cairngorm do read Steven Websters articles, they are a little outdated but explain the rationale and thinking behind cairngorm). Once downloaded, put the cairngorm.swc file in your libs folder.

With the Cairngorm.swc in our libs folder we have access to the Cairngorm classes. I also really recommend looking at the source code for Cairngorm (separate download from the link above).

Setting up Cairngorm

First thing we can setup is our controller. This is done by extending Cairngorm’s front controller class. Cairngorm’s front controller is very similar to the controller class created in my scaling up EasyMVC articles except Cairngorm uses it’s own EventDispatcher. Rather than listening to native events, it listens to CairngormEvents dispatched by it’s custom event handler.

We create an initialiseCommands function which is called from the constructor and this function will be where we will register our command classes as event listeners for cairngorm events. (more on that in part 3)

Your controller class should look a little like this, I have called mine AppController:

package uk.co.clockobj.cairngormdemo.controller
{
	import com.adobe.cairngorm.control.FrontController;

	public class AppController extends FrontController
	{
		public function AppController()
		{
			super();
			initialiseCommands();
		}

		private function initialiseCommands() : void
		{
			// We will register our commands as event handlers here.
		}
	}
}

Next, I will create a Model Locator and Service Locator using the known locator pattern which yes, uses Singletons but as Steven Webster so rightly puts it:
“The singleton nature of the Model Locator pattern ensures that you don’t suffer from duplicate state on the client, gives a large development team a consistent place to expose and share application-level state as instances of value objects, while ensuring that developers leverage the powerful data-binding capabilities of Flex to ensure that the view is notified when the model has changed.”

Model Locator

I create my model locator named ModelLocator, however you will get a class name clash as there is a deprecated class in Cairngorm called ModelLocator (This just means when ever you add it to a class in Flex Builder you will be asked which one to use, which may annoy you).

package uk.co.clockobj.cairngormdemo.model
{
	import com.adobe.cairngorm.model.IModelLocator;

	[Bindable]
	public class ModelLocator implements IModelLocator
	{
		private static var _instance:ModelLocator;

		public static function getInstance():ModelLocator {
			if (_instance == null) {
				_instance = new ModelLocator();
			}
			return _instance;
		}

		public function ModelLocator()
		{
			if ( _instance != null )
			{
				throw( new Error( "Singleton class has already been instantiated" ) );
			}	else
			{
				// Instantiate services here
			}
		}

	}
}

Note: Although I implement Cairngorm’s IModelLocator interface above, it does not actually enforce any methods or properties.

In Steven Webster’s guide to Cairngorm, he stores the DTOs/VO as static properties of the model locator. I take a slightly different approach and I like to have models which are accessible through, and instantiated when the ModelLocator is first created, I will discuss this later (in part 2)

Service Locator

I am also going to deviate slightly from the Cairngorm documented approach for Service Locators and implement a slightly less enforced version. Cairngorm uses an IServiceLocator interface which enforces the use of simple factory methods to access your services. You may need this so have a look at the documentation, but I going to keep my Service Locator consistent with my Model Locator.

So in the controller folder create a new ActionScript Class called ServiceLocator.as as follows:

package uk.co.clockobj.cairngormdemo.controller
{
	public class ServiceLocator
	{
		private static var _instance:ServiceLocator;

		public static function getInstance():ServiceLocator {
			if (_instance == null) {
				_instance = new ServiceLocator();
			}
			return _instance;
		}

		public function ServiceLocator()
		{
			if ( instance != null )
			{
				throw( new Error( "Singleton class has already been instantiated" ) );
			} else
			{
				// Instantiate services here
			}
		}

	}
}

For now we are not going to create any web services, we will do this in part 3.

In the next part of this series I will go into detail about how I implement models, discuss the advantages and disadvantages of accessing your DTOs directly and propose a different solution and show how we can bind our currentState view state property directly to the model.

Contents:

Part 1 – Setting up a project for Cairngorm
Part 2 – The Model
Part 3 – Commands
Part 4 – Services
Cairngorm Demo Source Files

Got an idea for a project?

Need a website? Web-enabled software to streamline your business? Just some advice?