Spring ActionScript at FlexCamp 2008 Belgium
ActionScript, Conferences, Flex, Inversion of Control, Spring ActionScript, Talks 1 Comment »Here's a rundown of the presentation I did on Spring ActionScript at the FlexCamp in Antwerp, Belgium. In 40 minutes I tried to cover the basic theory on Inversion of Control, Dependency Injection and the Spring ActionScript project in general. We then dove right into some code we've been writing for an enterprise app that extensively uses Spring ActionScript's IoC container.
Since time was limited (or in case you were not there), I'll run through the key features of the code I ran through and try to give some more explanation.
Targeting BlazeDS via remoting and messaging
Whenever I'm hitting a backend, I try to have the endpoints externally configured. This allows me to switch between different endpoints - different test or production servers for instance - just by specifying the ip and port in an external properties file. This means that you don't have to specify any compiler arguments that point to the services-config.xml or messaging-config.xml files.
You can set up a channelset and a consumer with the following code. Notice the "method-invocation" element that allows you to execute a method on the object you create. This allows us to directly pass in a channel to the channelset. (In case you are interested, the method-invocation element is preprocessed to an instance of MethodInvokingFactoryObject)
-
<object id="channelSet" class="mx.messaging.ChannelSet">
-
<method-invocation name="addChannel">
-
<arg>
-
<object id="streamingAMFChannel" class="mx.messaging.channels.StreamingAMFChannel">
-
<property name="url" value="http://${host}:${port}/${context-root}/messagebroker/streamingamf" />
-
</object>
-
</arg>
-
</method-invocation>
-
</object>
-
-
<object id="eventMessageFeedConsumer" class="mx.messaging.Consumer">
-
<property name="destination" value="eventMessageFeed" />
-
<property name="channelSet" ref="channelSet" />
-
</object>
Have you noticed the placeholders "${...}" for the host, port and context-root? These are loaded from a properties file that is referenced in the application context file.
Here's the external properties file:
-
host=192.168.2.134
-
port=8081
-
context-root=server-web
And here's the import declaration in the application context xml file:
-
<property file="application-context.properties.txt" />
Of course, you can also specify remote objects in the application context. Here's an example:
-
<object id="remoteObject" class="mx.rpc.remoting.mxml.RemoteObject" abstract="true">
-
<property name="endpoint" value="http://${host}:${port}/${context-root}/messagebroker/amf" />
-
<property name="showBusyCursor" value="true" />
-
</object>
-
-
<object id="userRemoteObject" parent="remoteObject">
-
<property name="destination" value="userService" />
-
</object>
Notice that we actually split this up into 2 objects. The first object is an abstract remote object which we use as a parent object for concrete remote objects. Notice the "abstract=true" and the "parent=remoteObject" properties on these objects.
MVCS support
As part of the project we are working on, we also starting working on some experimental MVCS support. If you haven't heard of MVCS, be sure to check out at Joe Berkovitz' blog.
What we provide so far are some interfaces and abstract base classes for services, operations and commands. Let's look at some code for services and operations.
Here's an interface for a user service, which defines a "getAll" method.
-
public interface IUserService {
-
function getAll():IAsyncOperation;
-
}
We now want to create a concrete service for that interface. For instance, this could be a remote object enabled service. For that, we have a abstract remote object service base class.
-
public class UserRemoteObjectService extends AbstractRemoteObjectService implements IUserService {
-
-
public function UserRemoteObjectService(remoteObject:RemoteObject) {
-
super(remoteObject);
-
}
-
-
public function getAll():IAsyncOperation {
-
var token:AsyncToken = remoteObject.getAll();
-
token.addResponder(new Responder(onGetAllResult, onGetAllFault));
-
return getOperation("getAll");
-
}
-
-
private function onGetAllResult(event:ResultEvent):void {
-
getOperation("getAll").dispatchEvent(new AsyncOperationResultEvent(event.result));
-
}
-
-
private function onGetAllFault(event:FaultEvent):void {
-
getOperation("getAll").dispatchEvent(new AsyncOperationErrorEvent(event.fault.faultDetail));
-
}
-
}
For testing purposes, we could also create a mock user service:
-
public class UserMockService extends AbstractService implements IUserService {
-
-
private static var logger:ILogger = Log.getLogger("UserMockService");
-
-
public function UserMockService() {
-
logger.warn("Mock user service instantiated.");
-
}
-
-
public function getAll():IAsyncOperation {
-
var users:ArrayCollection = new ArrayCollection();
-
-
var user1:User= new User();
-
user1.name = "John";
-
users.addItem(user1);
-
-
var user2:User= new User();
-
user2.name = "Peter";
-
users.addItem(user2);
-
-
setTimeout(onGetUsersResult, Math.random()*3000, users);
-
CursorManager.setBusyCursor();
-
-
return getOperation("getAll");
-
}
-
-
private function onGetUsersResult(users:ArrayCollection):void {
-
var operation:IAsyncOperation = getOperation("getAll");
-
operation.dispatchEvent(new AsyncOperationResultEvent(users));
-
CursorManager.removeBusyCursor();
-
}
-
}
We can now define these objects in the application context as follows:
-
<object id="userService" class="UserMockService"/>
-
-
... or ...
-
-
<object id="userService" class="UserRemoteObjectService">
-
<constructor-arg>
-
<object id="userRemoteObject" parent="remoteObject">
-
<property name="destination" value="detectorGroupService" />
-
</object>
-
</constructor-arg>
-
</object>
You can now use one of these implementations by calling the getAll() method. Make sure that you type the service to IUserService and not to a concrete implementation:
-
public function getUsers():void {
-
var operation:IAsyncOperation = _userService.getAll();
-
operation.addEventListener(AsyncOperationEvent.RESULT,
-
function(e:AsyncOperationResultEvent):void {
-
logger.info("Users loaded successfully.");
-
var users:ArrayCollection = ArrayCollection(e.result);
-
}
-
);
-
operation.addEventListener(AsyncOperationEvent.ERROR,
-
function(e:AsyncOperationErrorEvent):void {
-
logger.error("An error occurred when loading the users: " + e.fault);
-
}
-
);
-
}
To implement your own services, you don't necessarely need to extend the AbstractService or AbstractRemoteObjectService class. These base classes just provide you with some convenient methods, like "getOperation" that creates a generic AsyncOperation for you.
You could of course also create an own implementation of the IAsyncOperation interface for your specific needs. For instance, you could create a GetAllUsersOperation that has all the logic for invoking a method on a remote object and that also deals with the result and fault handling of the remote call.
Presentation Model and Autowiring
I mentioned that we were using Presentation Model to seperate our UI state and logic from our views. This has worked surprisingly well for us and it certainly allows us to write better tests (for the presentation model). If you are new to Presentation Model and Presentation Patterns in general, I really recommend taking a look at the writings by Martin Fowler and Paul Williams.
Seperating logic and state from the view is one thing, but of course in order to use this combination you have to provide your view with an instance of a presentation model at some point. It's easy to read a presentation model from an application context, but injecting it is not that easy. Especially if your view component is nested a few levels deep inside other view components, it can be tricky to pass in the instance of the presentation model. We started of by passing in the presentation models from the root of the application through all components until we had finally reached the component that needed the presentation model. Needless to say that this approach required us to write a lot of extra code that really wasn't supposed to exist...
Enter custom metadata and SystemManager! Using the systemManager, you can listen to events that get fired when view components are added to the stage. This was exactly what we needed to know. Combined with a custom metadata element [Autowired], we now support dependencies being injected into views automatically.
Here's how it works. Suppose you have a UserPanel and a UserPanelPresentationModel. In you UserPanel you'll have a reference to that presentation model so you can actually use it in your view component. By adding the extra [Autowired] metadata you can mark a property (the presentation model) as a property that needs to be autowired when the view is created and added to the stage.
In your UserPanel.mxml file, you declare the presentation model as follows.
-
[Bindable]
-
[Autowired]
-
public var presentationModel:UserPanelPresentationModel;
Now all we need to do is listen to the ADDED event on the systemManager and write some glue code that injects the presentation models defined in the application context into the view components. This code goes in your main application file.
-
systemManager.addEventListener(Event.ADDED, onAdded);
-
-
...
-
-
private function onAdded(event:Event):void {
-
var autowiredObject:Object = event.target;
-
var type:Type = Type.forInstance(autowiredObject);
-
-
for each (var accessor:Accessor in type.accessors) {
-
var autowiredMetaData:MetaData = accessor.getMetaData("Autowired");
-
if (autowiredMetaData) {
-
var objectName:String = accessor.name;
-
var autowireByType:Boolean = true;
-
-
if (autowiredMetaData.hasArgumentWithKey("mode")) {
-
if (autowiredMetaData.getArgument("mode").value == "byName") {
-
autowireByType = false;
-
if (autowiredMetaData.hasArgumentWithKey("name")) {
-
objectName = autowiredMetaData.getArgument("name").value;
-
}
-
}
-
}
-
-
if (autowireByType) {
-
var objectNames:Array = m_applicationContext.getObjectNamesForType(accessor.type.clazz);
-
if (objectNames.length == 1) {
-
objectName = objectNames[0];
-
}
-
}
-
-
autowiredObject[accessor.name] = m_applicationContext.getObject(objectName);
-
}
-
}
-
}
You may have noticed that we do some extra checks on the attributes of the Autowired metadata. This is because the code above support autowiring by type (the default) and autowiring by name. Autowiring by type means that we will look in the context for objects that are of a certain type. If we find one, we will inject it. Autowiring by name means that we will look for objects in the context that have a certain id.
You can set up autowiring by name as follows:
-
[Bindable]
-
[Autowired(mode="byName")]
-
public var presentationModel:UserPanelPresentationModel;
Conclusion
I hope you now got a good understanding of some of the key features, best practices and what we are doing with Spring ActionScript in general. Don't hesitate to join our forum or the team if you want to help us out. We are really looking for more people to join, especially for working on samples and documentation.
http://forum.springframework.org/forumdisplay.php?f=60
Add to Bloglines - Digg This! - del.icio.us - Stumble It! - Twit This! - Technorati links - Share on Facebook - Feedburner
Christophe Herreman is a software developer living in Belgium. He's working on high-end Flex and AIR solutions at
Recent Comments