TwinTechs

Adobe has a new a framework that allows developers to create standalone Flex applications and then gather them together into a larger application. If you haven’t seen Adobe Mosaic Tiles yet, check it out here http://www.adobe.com/products/livecycle/mosaic/. Tiles permits multiple applications to be “mashed” together into one larger application; of course, once they are, there needs to be an efficient way for the tiles to talk to one another. We could write a lot of server code to send messages back and forth between tiles, but luckily for us, Adobe has created an easy way to communicate between tiles.

Setting up cross-tile communication is simple because sending a message from one tile to another is like dispatching events in a Flex application. One tile will send a message and the other tiles can listen for it. The two main players that enable cross-tile communication in this relay are the IRuntime interface and the Message class.

Each tile specified by the <mc:Tile> tag has a protected property named runtime. The runtime property, as defined in the Adobe live docs, is a tile’s access to the runtime system. The focus of this article is on two methods of the runtime object: the addMessageListener function and the sendMessage function.

The addMessageListener function sets up a message listener just like the addEventListener method does with other Flex components. The syntax is slightly different, however: addMessageListener(ns:String, name:String, listener:Object). Let’s say I wanted to call the function named doSomething whenever the message name “callDoSomething” is sent in the namespace titled “myNamespace.” I would then add the code this.runtime.addMessageListener( “myNamespace”, “callDoSomething”, doSomething).

Before we can send a message, an instance of the Message class needs to be created. The Message class acts like an event in Flex except that it has different properties. A message object has three properties: a namespace, name, and payload. The namespace and name will match up a message with a given messageListener defined in another tile. The payload object is the data sent from one tile to the other. Taking the example above, the message that would call the doSomething method would look like this:

var msg:Message = new Message( “myNamespace”, “callDoSomething”, payload )

To send the message, simply call runtime.sendMessage( msg )

The example below sends a message with a string as the payload to any tiles that are listening. The tile that sends the message will be named SendMessageTile and the listening tile is named ReceiveMessageTile. The send message tile simply creates the message and calls the runtime.sendMessage function as shown.


private function sendSampleMessage():void
{
var payload:Object = new Object();
payload.theMessage = "Hello from Send Message Tile";

var message:Message = new Message( "sampleNamespace", "callDoSomething", payload );
this.runtime.sendMessage( message );
}

The ReceiveMessageTile’s job is to setup the messageListener. In this example, the doSomething method alerts a property named “theMessage” to the user.

public function onCreationComplete():void
{
this.runtime.addMessageListener( "sampleNamespace", "callDoSomething", doSomething );
}

private function doSomething( message:Message ):void
{
Alert.show( message.payload.theMessage, "Received Message" );
}

Once the sendSampleMessage() function is called from the SendMessageTile, an alert displaying “Hello from Send Message Tile” will be shown. Pretty simple, right? There are some limitations on the types of objects that can send through the IRuntime interface. If you have complex objects you may want to create helper methods that transform a typed value object to a simple object before calling runtime.sendMessage(). Then on the ReceiveMessageTile you would call a helper method to transform a simple object to your typed value object.

Depending on your requirements, tile communication may be an important part of your project. Now that we’ve discussed how messaging works between tiles, feel free to download the source and build off this simple example.

Sample Application Code