Flex Component Construction Using Cairngorm


We have configured the BlazeDS server, MySQL database, and Spring beans, and have built the Spring services. Flex is ready to consume those services with the help of Cairngorm to facilitate the transport of data.

We have strung together the entire application and need to populate it with data and application logic to visualize the data. To get started, we will build the main client views that will manage our client’s data through the main CRUD calls for the Client object.


Coding the Flex Transport Layer

To enable Flex to make calls to the Spring services, we need to create commands to support method calls exposed by Spring. Each command in Cairngorm needs a corresponding event. Flex is an event-based framework, and Cairngorm’s Event wraps the base Flex Event class.


DeleteClientEvent.as


package com.af.clientmanager.control.commands.events
{
import com.adobe.cairngorm.control.CairngormEvent;
import com.af.clientmanager.control.MainController;
import com.af.clientmanager.model.vo.ClientVO;
public class DeleteClientEvent extends CairngormEvent
{
public static const EVENT_DELETE_CLIENT:String =
"event_delete_client";
public var clientVO : ClientVO;
public function DeleteClientEvent( clientVO : ClientVO )
{
super(EVENT_DELETE_CLIENT );
this.clientVO = clientVO;
}
}
}

DeleteClientCommand.as


package com.af.clientmanager.control.commands
{
import com.adobe.cairngorm.commands.Command;
import com.adobe.cairngorm.control.CairngormEvent;
import com.af.clientmanager.business.ClientDelegate;
import com.af.clientmanager.control.commands.events. ➥
DeleteClientEvent;
import com.af.clientmanager.model.ModelLocator;
import mx.controls.Alert;
import mx.rpc.IResponder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

public class DeleteClientCommand implements Command, IResponder
{
private var model : ModelLocator =
ModelLocator.getInstance();
public function execute( event : CairngormEvent ) : void
{
var delegate : ClientDelegate = new ClientDelegate(
this );
var deleteClientEvent : DeleteClientEvent =
DeleteClientEvent( event );
delegate.deleteClient( deleteClientEvent.clientVO );
}
public function result( data:Object ) : void
{
var event:ResultEvent = data as ResultEvent;
var arrLength:int = model.clientsDP.length;
// Business logic to remove client
// from the model ArrayCollection
for(var i:int =0; i < arrLength; i++)
{
if(model.selectedClient.objectIdentifier ==
model.clientsDP[i].objectIdentifier)
{
model.clientsDP.removeItemAt(i);
break;
}
}
}
public function fault(event:Object):void
{
var faultEvt:FaultEvent = event as FaultEvent;
Alert.show("ERROR: " + event.toString());
}
}
}

GetClientsEvent.as


package com.af.clientmanager.control.commands.events
{
import com.adobe.cairngorm.control.CairngormEvent;
import com.af.clientmanager.control.MainController;
public class GetClientsEvent extends CairngormEvent
{
public static const EVENT_GET_CLIENTS:String =
"event_get_clients";
public function GetClientsEvent():void
{
super(EVENT_GET_CLIENTS);
}
}
}

GetClientsCommand.as


package com.af.clientmanager.control.commands
{
import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;
import com.af.clientmanager.business.ClientDelegate;
import com.af.clientmanager.control.commands.events. ➥
GetClientsEvent;
import com.af.clientmanager.model.ModelLocator;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.IResponder;
import mx.rpc.events.FaultEvent;
public class GetClientsCommand implements ICommand, IResponder
{
private var model:ModelLocator =
ModelLocator.getInstance();
public function execute(event:CairngormEvent):void
{
var getClientsEvent:GetClientsEvent =
GetClientsEvent(event);
var delegate : ClientDelegate = new ClientDelegate(
this );
delegate.getClients();
}

public function result(data:Object):void
{
model.clientsDP = ArrayCollection(data.result);
}
public function fault(event:Object):void
{
var faultEvt:FaultEvent = event as FaultEvent;
Alert.show("ERROR: " + event.toString());
}
}
}

InsertClientEvent.as


package com.af.clientmanager.control.commands.events
{
import com.adobe.cairngorm.control.CairngormEvent;
import com.af.clientmanager.control.MainController;
import com.af.clientmanager.model.vo.ClientVO;
public class InsertClientEvent extends CairngormEvent
{
public static const EVENT_INSERT_CLIENT:String =
"event_insert_client";
public var clientVO : ClientVO;
public function InsertClientEvent( clientVO : ClientVO )
{
super(EVENT_INSERT_CLIENT );
this.clientVO = clientVO;
}
}
}

InsertClientCommand.as


package com.af.clientmanager.control.commands
{
import com.adobe.cairngorm.commands.Command;
import com.adobe.cairngorm.control.CairngormEvent;
import com.af.clientmanager.business.ClientDelegate;
import com.af.clientmanager.control.commands.events. ➥
InsertClientEvent;
import com.af.clientmanager.model.ModelLocator;
import com.af.clientmanager.model.vo.ClientVO;

import mx.controls.Alert;
import mx.rpc.IResponder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
public class InsertClientCommand implements Command, IResponder
{
private var model : ModelLocator =
ModelLocator.getInstance();
public function execute( event : CairngormEvent ) : void
{
var delegate : ClientDelegate = new ClientDelegate(
this );
var insertClientEvent : InsertClientEvent =
InsertClientEvent( event );
delegate.insertClient( insertClientEvent.clientVO );
}
public function result( data:Object ) : void
{
var event:ResultEvent = data as ResultEvent;
model.clientsDP.addItem(ClientVO(data));
}
public function fault(event:Object):void
{
var faultEvt:FaultEvent = event as FaultEvent;
Alert.show("ERROR: " + event.toString());
}
}
}

UpdateClientEvent.as


package com.af.clientmanager.control.commands.events
{
import com.adobe.cairngorm.control.CairngormEvent;
import com.af.clientmanager.control.MainController;
import com.af.clientmanager.model.vo.ClientVO;
public class UpdateClientEvent extends CairngormEvent
{
public static const EVENT_UPDATE_CLIENT:String =
"event_update_client";
public var clientVO : ClientVO;

public function UpdateClientEvent( clientVO : ClientVO )
{
super( EVENT_UPDATE_CLIENT );
this.clientVO = clientVO;
}
}
}

UpdateClientCommand.as


package com.af.clientmanager.control.commands
{
import com.adobe.cairngorm.commands.Command;
import com.adobe.cairngorm.control.CairngormEvent;
import com.af.clientmanager.business.ClientDelegate;
import com.af.clientmanager.control.commands.events. ➥
UpdateClientEvent;
import com.af.clientmanager.model.ModelLocator;
import com.af.clientmanager.model.vo.ClientVO;
import mx.controls.Alert;
import mx.rpc.IResponder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
public class UpdateClientCommand implements Command, IResponder
{
private var model : ModelLocator =
ModelLocator.getInstance();
public function execute( event : CairngormEvent ) : void
{
var delegate : ClientDelegate = new ClientDelegate(
this );
var updateClientEvent : UpdateClientEvent =
UpdateClientEvent( event );
delegate.updateClient( updateClientEvent.clientVO );
}
public function result( data:Object ) : void
{
var event:ResultEvent = data as ResultEvent;
}


public function fault( event:Object ) : void
{
var faultEvt:FaultEvent = event as FaultEvent;
Alert.show("ERROR: " + event.toString());
}
}
}


To allow a command to be executed, you will need to update the MainController class to
map events to commands,

MainController.as


package com.af.clientmanager.control
{
import com.adobe.cairngorm.control.FrontController;
import com.af.clientmanager.control.commands.*;
import com.af.clientmanager.control.commands.events.*;
public class MainController extends FrontController
{
public function MainController():void
{
// Client
addCommand(GetClientsEvent.EVENT_GET_CLIENTS,
GetClientsCommand );
addCommand(InsertClientEvent.EVENT_INSERT_CLIENT,
InsertClientCommand );
addCommand(DeleteClientEvent.EVENT_DELETE_CLIENT,
DeleteClientCommand );

addCommand(UpdateClientEvent.EVENT_UPDATE_CLIENT,
UpdateClientCommand );
}
}
}


The controller in Cairngorm serves two main purposes:

• It accesses the event constants on the events themselves that are used to identify Cairngorm events in the framework.

• It maps the event constants to a corresponding command.The controller is listening
for those event types to be dispatched, and will call a mapped command when it catches
the event.


The commands reference delegates that represent method stubs for each Spring service.
Each Spring service has a delegate defined in Cairngorm. This is done to keep the layers in sync for maintainability purposes. You can see the client methods available in Spring through the ClientDelegate

ClientDelegate.as


package com.af.clientmanager.business
{
import com.adobe.cairngorm.business.ServiceLocator;
import com.af.clientmanager.model.vo.ClientContactsVO;
import com.af.clientmanager.model.vo.ClientLinksVO;
import com.af.clientmanager.model.vo.ClientVO;
import mx.controls.Alert;
import mx.rpc.AsyncToken;
import mx.rpc.IResponder;
public class ClientDelegate
{
private var responder : IResponder;
private var service : Object;
public function ClientDelegate( responder : IResponder )
{
this.service =
ServiceLocator.getInstance().getService(
"clientService" );
this.responder = responder;
}

// Client
public function getClients(): void
{
var call:AsyncToken = service.getClients();
call.addResponder( responder );
}
public function insertClient(clientVO : ClientVO): void
{
var call:AsyncToken =
service.insertClient(clientVO);
call.addResponder( responder );
}
public function deleteClient(clientVO : ClientVO): void
{
var call:AsyncToken =
service.deleteClient(clientVO);
call.addResponder( responder );
}
public function updateClient(clientVO : ClientVO): void
{
var call:AsyncToken =
service.updateClient(clientVO);
call.addResponder( responder );
}
// Client Contacts
public function getClientContacts(key:Number): void
{
var call:AsyncToken =
service.getClientContacts(key);
call.addResponder( responder );
}
public function insertClientContact(
clientContactVO : ClientContactsVO): void
{
var call:AsyncToken =
service.insertClientContact(clientContactVO);
call.addResponder( responder );
}

public function deleteClientContact(
clientContactVO : ClientContactsVO): void
{
var call:AsyncToken =
service.deleteClientContact(clientContactVO);
call.addResponder( responder );
}
public function updateClientContact(
clientContactVO : ClientContactsVO): void
{
var call:AsyncToken =
service.updateClientContact(clientContactVO);
call.addResponder( responder );
}
}
}

Leave a Reply

Subscribe to Posts | Subscribe to Comments

About This Site

Howdy! My name is Suersh Rohan and I am the developer and maintainer of this blog. It mainly consists of my thoughts and opinions on the technologies I learn,use and develop with.

Blog Archive

Powered by Blogger.

- Copyright © My Code Snapshots -Metrominimalist- Powered by Blogger - Designed by Suresh Rohan -