Flex Development Framework Cairngorm Getting Started instance

Cairngorm is the MVC framework developed by Flex and is now owned by Adobe. It is similar in architecture to the Eclipse plug-in development GEF architecture and works as follows:

The framework is a CAIRNGORM.SWC file, you can go to Cairngrom's official website to download, I am here to provide the address: Http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm

Then create a new Flex project, with a CAIRNGROM.SWC package that must be introduced (typically in the Libs folder), or simply add the package to the build path.

The following example illustrates how the Cairngorm framework is used. We do a simple book entry display function, finished after the interface as follows:

The flex engineering structure is as follows:

1th step: Define VO, it may be assumed that a book contains the title, author, and unit price. The code is as follows and the file name is bookvo.as

Package Com.dobodo.vo
{
public class Bookvo
{
public Var bookname:string;
public Var bookauthor:string;
public Var bookprice:string;
Public Function Bookvo ()
{
}
}
}



2nd step: Create Modellocator, which is a singleton pattern that is used to place the entire application's data.

Package Com.dobodo.model
{
Import mx.collections.ArrayCollection;
public class Modellocator
{
Static private Var __instance:modellocator=null;
[Bindable]
public var bookac:arraycollection = new ArrayCollection ();
static public Function getinstance (): Modellocator
{
if (__instance = = null)
{
__instance=new Modellocator ();
}
return __instance;
}
}
}



3rd Step: Now we are going to start designing our view, that is, our interface effect, it is a component,.

File name is: Bookadd.mxml

<?xml version= "1.0" encoding= "Utf-8"?>
<mx:panel xmlns:mx= "Http://www.adobe.com/2006/mxml" width= "562" height= "306" horizontalalign= "left" title= "add book" >
<mx:Script>
<! [cdata[
Import com.dobodo.event.AddBookEvent;
Import Com.adobe.cairngorm.control.CairngormEventDispatcher;
Import Com.dobodo.vo.BookVO;
Import mx.collections.ArrayCollection;
[Bindable]
public var bookac:arraycollection = new ArrayCollection ();
Public Function Addbook (): void
{
var bookvo:bookvo = new Bookvo ();
Bookvo.bookname = This.bookName.text;
Bookvo.bookauthor = This.bookAuthor.text;
Bookvo.bookprice = This.bookPrice.text;
var event:addbookevent = new Addbookevent (BOOKVO);
Cairngormeventdispatcher.getinstance (). dispatchevent (event);
This.bookName.text = "";
This.bookAuthor.text = "";
This.bookPrice.text = "";
}
]]>
</mx:Script>

<mx:hbox width= "100%" height= "258" horizontalscrollpolicy= "off" >
<mx:vbox width= ">"
<mx:form width= "233" height= "212" >
<mx:formitem label= "title:" >
<mx:textinput width= "118" id= "BookName"/>
</mx:FormItem>
<mx:formitem label= "" >
<mx:textinput width= "118" id= "Bookauthor"/>
</mx:FormItem>
<mx:formitem label= "unit Price:" >
<mx:textinput width= "119" id= "Bookprice"/>
</mx:FormItem>
<mx:button label= "Add" click= "This.addbook ()"/>
</mx:Form>
</mx:VBox>

<mx:VBox>
<mx:datagrid width= "263" height= "208" dataprovider= "{Bookac}" >
<mx:columns>
<mx:datagridcolumn headertext= "title" datafield= "BookName"/>
<mx:datagridcolumn headertext= "Author" datafield= "Bookauthor"/>
<mx:datagridcolumn headertext= "Unit Price" datafield= "Bookprice"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:HBox>

</mx:Panel>



4th step: Inherit our cairngormevent, create our custom event, here we might as well name it as Addbookevent, that is, to increase the book event, the event triggered by the "Add" button click, it is worth mentioning that the event needs to pass data, So we give it a BOOKVO variable. Its file name is: addbookevent.as, and its code is as follows:

Package Com.dobodo.event
{
Import com.adobe.cairngorm.control.CairngormEvent;
Import Com.dobodo.vo.BookVO;
public class Addbookevent extends Cairngormevent
{
public Var Bookvo:bookvo;
public static Const Event_add_book:string = "Addbook";
Public Function Addbookevent (BOOKVO:BOOKVO) {
Super (Addbookevent.event_add_book);
This.bookvo = Bookvo;
}
}
}



5th step: Add the code that triggers the event in the view, and when the Add button is clicked, we trigger a function in which the most important two sentences are: ActionScript code

var event:addbookevent = new Addbookevent (BOOKVO);
Cairngormeventdispatcher.getinstance (). dispatchevent (event);

These two sentences indicate that a new addbookevent has been created, and the event is sent outward, and after this event is sent, our foreground controller can receive it. For detailed code, refer to the Bookadd.mxml code in the third step.



6th step: The front controller receives and maps to a command processing, whose file name is Addbookcontrol.as, with the following code:

Package Com.dobodo.controller
{
Import Com.adobe.cairngorm.control.FrontController;
Import Com.dobodo.command.AddBookCommand;
Import com.dobodo.event.AddBookEvent;
public class Addbookcontrol extends Frontcontroller
{
Public Function Addbookcontrol ()
{
AddCommand (Addbookevent.event_add_book, Addbookcommand);
}
}
}


7th, the foreground controller maps this event to a command called Addbookcommand, which handles all the event logic, which requires two interfaces, an interface command, Another for the Responder,command interface corresponds to the Execute method, the Iresponder interface corresponds to the result and fault method, these two are a callback function, if the server passed the correct data object, will execute the actual result function, If the data object is wrong, execute the fault function. In order to fully demonstrate the operating mechanism of our Cairngorm framework, we have also used proxies in the Execute method, but for this example, this is not necessary, the agent is generally needed to interact with the server side of the data will be used.

Package Com.dobodo.command
{
Import Com.adobe.cairngorm.commands.ICommand;
Import com.adobe.cairngorm.control.CairngormEvent;
Import Com.dobodo.business.BookDelegate;
Import com.dobodo.event.AddBookEvent;
Import Com.dobodo.model.ModelLocator;
Import Com.dobodo.vo.BookVO;
Import Mx.rpc.IResponder;
Import Mx.controls.Alert;
public class Addbookcommand implements ICommand, Iresponder
{
Public function Execute (event:cairngormevent): void
{
var book:bookvo= (event as Addbookevent). Bookvo;
var bookdelegate:bookdelegate = new Bookdelegate (this); Entrusted to bookdelegate to deal with specific
Bookdelegate.addbook (book);
}

Processing based on the results returned by bookdelegate

Public function result (data:object): void
{
var book:bookvo = data as Bookvo;
if (book!=null)
{
Alert.show ("added success! ");
}
Else
{
Alert.show ("Increase failure! ");
}
}
Public function Fault (event:object): void{}
}
}



8th step, let's look at the implementation of this proxy class. The file name for the definition proxy is bookdelegate.as, and the proxy class is generally responsible for handling and server interaction. The code is as follows

Package com.dobodo.business
{
Import Com.dobodo.vo.BookVO;
Import com.dobodo.model.*;
Import Mx.rpc.IResponder;
Import mx.rpc.events.ResultEvent;
public class Bookdelegate
{
private var model:modellocator = Modellocator.getinstance ();
private Var Responder:iresponder;
Public Function bookdelegate (responder:iresponder)
{
This.responder = responder;
}

Public Function Addbook (BOOKVO:BOOKVO): void
{
It is possible to invoke a class that handles business logic, such as invoking a remote database operation class and inserting the book into the database.
if (bookvo.bookname!= "")
{
Model. Bookac.additem (BOOKVO);
Responder.result (BOOKVO);//Return to command
}
Else
{
Responder.result (null);//Return to command
}
}
}
}



The 9th step, how to combine this big pile of things together, its secret in our main program file, it is a application, its file name is: Cairongormdemo.mxml, in the file used in the Cairngorm framework of some tags, Please refer to their documentation for specific usage. The code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml"
Xmlns:control= "Com.dobodo.controller.*"
xmlns:view= "com.dobodo.view.*"
horizontalalign= "center" verticalalign= "Middle" fontsize= ">"
<mx:Script>
<! [cdata[
Import Com.dobodo.model.ModelLocator;
[Bindable]
public var model:modellocator = modellocator.getinstance ();
]]>

</mx:Script>
<control:addbookcontrol id= "Controller"/>
<view:bookadd id= "Addbookview" bookac= "{model. BOOKAC} "/>
</mx:Application>

Source code: http://download.csdn.net/source/2400541

Flex Development Framework Cairngorm Getting Started instance