Flex cairngorm overview and tutorial

Cairngorm is a framework in flex which is developed based on the front controller pattern, This framework is used to develop the rich interface applications (RIA) in flex. In a normal MVC framework such as struts, the controller role is played by a xml named struts-config.xml. In cairngorm there is no such xml is used. Instead a action script class should be created which would extend the FrontController class defined in the cairngorm framework. The workflow of cairnform framework in a flex application is explained below.

creating an application class

As you may already know that the flex application would load the .mxml file which is defined with the application tag as the home page, define a class which would extend the application class and then use the new class for defining the application the tag. This is as below. When the application starts loading, it would call the 'onCreationComplete' method in the below class.

import mx.core.Application;
/**
 * 
 * Main application class.
 * 
 */
  public class W2PApplicationClass extends Application
   {
	/**
		 * Starts application configuration process.   
		 * 
		 */
		protected function onCreationComplete() : void 
		{
		// write the logic to start loading the application.
		}
   }
<?xml version="1.0" encoding="utf-8"?>
<app:W2PApplicationClass
 xmlns:app="*"
 xmlns:mx="http://www.adobe.com/2006/mxml" 
</app:W2PApplicationClass>

Define the cairngorm events

As the workflow in flex cairngorm framework happens through cairrngorm events, create custom events which would extend the cairngorm event. An example is given below.

import com.adobe.cairngorm.control.CairngormEvent;

public class NavClickEvent extends CairngormEvent
 {
  public static var EVENT_NAV_CLICK : String = "navClick";
  
  public function NavClickEvent(state:String)
    {
	 super(EVENT_NAV_CLICK);
	 this.state = state;
    }
 }

Define command and responders

When a cairngorm event is dispatched, the event should be handled by a command. The mapping for a cairngorm event to a command will be defined in a controller class which extends the front controller class. This controller will be deined in the mxml file of application defined above.

import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;

public class NavClickCommand implements ICommand
  {
	public function execute(event : CairngormEvent) : void
	{
	// logic to handle the event
	}
  }
package com.personal.cairngorm.control

public class MyController extends FrontController
{
 addCommand(NavClickEvent.EVENT_NAV_CLICK, NavClickCommand);
}

The appliation.mxml file will include the controller as shown below. The controller would dispatch the event to the execute method of the command.

<app:W2PApplicationClass
xmlns:app="*"
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:view="com.deluxe.view.*"
	xmlns:control="com.personal.cairngorm.control.*"		
	layout="absolute" 
	creationComplete="onCreationComplete();">
<control:MyController id="controller" />
</app:W2PApplicationClass>

The remaining part is in another hub here.

More by this Author


Comments 1 comment

klanguedoc profile image

klanguedoc 5 years ago from Canada

I have been developing with Adobe Flex for 4 years now but I have never used the Cairngorm framework. To provided a nice tutorial which I will try later this week. Thanks

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working