Introduction to Cairngorm framework

Recently while designing my site, i thought to move it to Cairngrom framework, so that later i can feel much better if i had to add more features. Many people have asked me is it neccessary to use this framework, the answer is pretty simple as more complex your project becomes the more tough to manage it. Cairngrom is used in complex projects. enough blabbering, lets dig into this framework.

What is Cairngrom? — > Taken from Adobe.

Cairngorm is the lightweight micro-architecture for Rich Internet Applications built in Flex or AIR. A collaboration of recognized design patterns, Cairngorm exemplifies and encourages best-practices for RIA development advocated by Adobe Consulting, encourages best-practice leverage of the underlying Flex framework, while making it easier for medium to large teams of software engineers deliver medium to large scale, mission-critical Rich Internet Applications.

Now lets jump into structure. The below diagram shows how it is organised. I will explain whats happening in and around of the structure.

1. The sampleHello.mxml or yourname.mxml is the main application file for the Cairngrom.

2. I have named my project as sampleHello, so it would be something com/vinoth/sampleHello.

3. Within the vinoth directory, there will be the following folders.

• events/ It will be holding all the custom events of the application.
• control/ – The home of FrontController for the application.
• commands/ – This directory contains the Commands that are called by the FrontController
• model/ – The ModelLocator is contained in this folder (and other classes related to the model)
• view/ – The components of the view are contained in this directory

Don’t worry readers, i will surely explain with an example. RajiniKanth fans never leave people in messy. For better understanding of this pattern, we need to understand some of the classes that are included with Cairngorm and their respective purposes.

• CairngormEvent – Your event needs to be of type CairngromEvent, as it could be handled properly. It is mandatory for Cairngorm event dispatching.

public class yourClassName extends CairngormEvent

• CairngormEventDispatcher – CairngormEventDispatcher actually dispatches the CairngormEvents. It is a singleton (just like the ModelLocator). It is used by the application developer to broadcast events that correspond to user gestures and requests.
• FrontController – A base class for an application specific front controller, that is able to dispatch control following particular user gestures to appropriate command classes.The FrontController maps a CairngormEvent to a Command.

public class yourClassName extends FrontController

• ICommand – The ICommand interface enforces the contract between the Front Controller and concrete command classes in your application.In a Cairngorm application, the application specific Front Controller will listen for events of interest, dispatching control to appropriate command classes according to the type of the event broadcast.

public class yourClassName implements ICommand

Now a days i am into designing too, creating too much art work. Its for my lover who likes new wallpaper weekly.. lets get back to the topic. The below diagram shows you the event flow.

1. User views the page and sees a submit button.



2. Once the button is click, the button component would dispatch an event that extends CairngromEvent.
3. Our FrontCrontroller recieves it with in a great fashion and it executes the command mapped to the event.
4. The Command is executed and received the event as an argument. The LoginCommand will change the workflowState value in the ModelLocator.
5. The ModelLocator will have a predefined constant for the “Logged in View”. The command will change workflowState to this value.
6. Since the view is bound to workflowState, it will automatically update itself to the new view.

I now feel, readers might need to take back a break and have a cup of tea and cigar as next part is full of action like RajniKanth’s Sivaji Movie. The next part will refresh back, as techy guys like coding.

sampleHello.mxml

 <?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx= “http://www.adobe.com/2006/mxml” layout = “absolute”>

  <view:Main  xmlns:view   = “com.vinoth.sampleHello.view.*”/>

</mx:Application>

This is the mxml file which will be calling the Main.mxml which is located under view.

Main.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” height=”100%” width=”100%”>

    <mx:Script>
        <![CDATA[
            import com.vinoth.sampleHello.controller.events.HelloEvent;

            private function sayHello():void{
                new HelloEvent().dispatch();
            }
        ]]>
    </mx:Script>
    <mx:Button x=”94″ y=”78″ label=”Say Hello” click=”sayHello()”/>

</mx:Panel>

Here we are dispatching the sayHello event which is located in events directory which we are importing.

HelloEvent.as

 package com.vinoth.sampleHello.controller.events {

     import com.universalmind.cairngorm.events.UMEvent;
    import mx.controls.Alert;

    public class HelloEvent extends UMEvent {

        public function HelloEvent() {
           Alert.show(“A Simple example passing an event using Cairngrom framework”);
        }
    }
}

Now here we extending the HelloEvent class to UMEvent class and then goes the the function HelloEvent. The below shows the Output of the Following code and as well as i am providing you the entire source code which will give you much better view.

Download Here

Popularity: 100% [?]