Sharing data with Adobe Flash Collaboration Service beta – Part 1: Custom messaging
Created
6 April 2009
Requirements
Prerequisite knowledge
You should be comfortable with Flex and Flex Builder. It will help if you understand the concepts of Model-View-Controller (MVC), and the practice of separating model data from your views.
Also, take the time to work through and understand Ryan Stewart's article, Getting started with Adobe Flash Collaboration Service beta.
User level
Intermediate
Required products
- Flex Builder 3 (Download trial)
- Flash Player
Additional Requirements
Adobe Flash Collaboration Service beta account and SDK (Adobe ID required)
Adobe recently introduced the Adobe Flash Collaboration Service (formerly, code name "Cocomo") beta, which is a hosted solution for real-time data sharing, collaboration, and custom messaging for Flex. Developers can create Flex applications that allow multiple clients to be aware of each other and to push data to each other at near-instantaneous speeds. The Adobe Flash Collaboration Service beta library allows you to wire all this up with only a few lines of code.
Adobe Flash Collaboration Service beta provides several built-in components, or pods, which you can use to add shared whiteboard, video, or chat to your application. These are useful, but often you will want to share raw data across clients.
This tutorial will show you how to share custom data between clients using Adobe Flash Collaboration Service beta.
Going custom
This article will dive a little deeper than a getting started tutorial and show you how to share data using a custom collection node. To do this, you will be building an application that lets users type a message to each other, much like a chat room. Before getting started, read Getting started with Adobe Flash Collaboration Service beta to learn how to set up an account, and make sure you can compile and run the examples in that article.
Getting connected
First, create a new Flex application. You are going to use a plain ConnectSession component instead of a ConnectSessionContainer. There are two reasons for this. First, it enables the view to be as decoupled from Adobe Flash Collaboration Service beta as possible. In addition, ConnectSession makes it possible to create a loading screen (ConnectSessionContainer, in contrast, delays creating any components until connected to Adobe Flash Collaboration Service beta). The application includes a Text component to display a message, and a TextInput to send one.
Here's the code so far:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:rtc="AfcsNameSpace">
<rtc:ConnectSession id="session"/>
<mx:Panel width="70%" verticalCenter="0" horizontalCenter="0" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:Text id="display" text="The last message sent will display here" width="100%" fontSize="24" fontWeight="bold"/>
<mx:TextInput id="input" width="100%" fontSize="18"/>
</mx:Panel>
</mx:Application>
Next, you'll need to add a roomURL and authentication. Follow the instructions in Getting started with Adobe Flash Collaboration Service beta to create a new room and to set up your account. Add your connection information to the code as shown below (replace the username, password, and roomURL values with your own):
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:rtc="AfcsNameSpace"
layout="absolute"
initialize="onInit()" >
<mx:Script>
<![CDATA[
private function onInit():void
{
session.login();
}
]]>
</mx:Script>
<!-- Using our administrator account to authenticate -->
<rtc:AdobeHSAuthenticator id="admin"
userName="xxxxx"
password="xxxxx"
/>
<!-- Connect to a new room for this tutorial -->
<rtc:ConnectSession id="session" authenticator="{admin}"
roomURL="http://connectnow.acrobat.com/username/devcenter" />
<mx:Panel width="70%" verticalCenter="0" horizontalCenter="0"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:Text id="display" text="The last message sent will display here"
width="100%" fontSize="24" fontWeight="bold"/>
<mx:TextInput id="input" width="100%" fontSize="18"/>
</mx:Panel>
<!-- Prevent the user from doing anything until connected -->
<mx:Canvas visible="{!session.isSynchronized}" width="100%" height="100%"
backgroundColor="#000000" backgroundAlpha="0.5"/>
</mx:Application>
If you run your application now, the console should display some information about your connection. You should also see the loading screen disappear once you are connected.
Adding a CollectionNode
Next you need to add your own CollectionNode and give it a name, in this case chatWithCustomMessaging. This node will be automatically created in your room if you run the application once as an administrator. Alternatively, you can open up AFCSDevConsole and create it manually before running the application. See Ryan's tutorial for more information on using AFCSDevConsole.
The following code adds the CollectionNode:
<sharedModel:CollectionNode id="node" sharedID="chatWithCustomMessaging" />
You also need to tell the node to connect, add a listener for the ConnectSession synchronizationChange event, and call node.subscribe():
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rtc="AfcsNameSpace"
layout="absolute" initialize="onInit()" xmlns:sharedModel="com.adobe.rtc.sharedModel.*">
<mx:Script>
<![CDATA[
import com.adobe.rtc.events.SessionEvent;
private function onInit():void
{
session.login();
}
private function onSync(event:SessionEvent):void
{
node.subscribe();
}
]]>
</mx:Script>
<!-- Using our administrator account to authenticate -->
<rtc:AdobeHSAuthenticator id="admin"
userName="xxxxxx"
password="xxxxxx"
/>
<!-- Connect to a new room for this tutorial -->
<rtc:ConnectSession id="session"
authenticator="{admin}"
roomURL="http://connectnow.acrobat.com/username/devcenter"
synchronizationChange="onSync(event)"
/>
<!-- Everything is shared through the collection node -->
<sharedModel:CollectionNode id="node"
sharedID="chatWithCustomMessaging" />
<mx:Panel width="70%" verticalCenter="0" horizontalCenter="0"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:Text id="display" text="The last message sent will display here"
width="100%" fontSize="24" fontWeight="bold"/>
<mx:TextInput id="input" width="100%" fontSize="18"/>
</mx:Panel>
<!-- Prevent the user from doing anything until connected -->
<mx:Canvas visible="{!session.isSynchronized}" width="100%" height="100%" backgroundColor="#000000"
backgroundAlpha="0.5"/>
</mx:Application>
Sending messages
When a user types a message and presses the Enter key (use the enter event on TextInput), the application will create a new MessageItem, and publish it with node.publishItem(). You can set the body of the message to be any object. The first parameter ("chatNode"), of the MessageItem is the name chosen for the node representing this message. The value chatNode will be stored inside the CollectionNode as the nodeName.
private function sendMessage():void
{
var message:MessageItem = new MessageItem("chatNode"message.body = input.text;
node.publishItem(message);
input.text = "";
}
You also need a handler for the itemReceive event on the collection node, which will be called whenever someone else sends a message or when the application logs in for the first time. The handler checks to make sure there is a message, and that the subnode is the same one the application publishes to (in this case, "chatNode").
protected function onReceive(event:CollectionNodeEvent):void
{
if (event.item && event.nodeName == "chatNode")
display.text = event.item.body as String;
}
That's it! When you run the application you should be able to type a message, press the Enter key, and see your changes in the text field. Quit the application and run it again. By default, your node stores only the last message sent, and will automatically send it to any user that enters the room. This can be changed by setting the node's nodeConfiguration.
Finally, open the application in two web browsers, put them side-by-side, and watch them update each other.
Here is the complete code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:rtc="AfcsNameSpace"
layout="absolute"
initialize="onInit()"
xmlns:sharedModel="com.adobe.rtc.sharedModel.*">
<mx:Script>
<![CDATA[
import com.adobe.rtc.messaging.MessageItem;
import com.adobe.rtc.events.CollectionNodeEvent;
import com.adobe.rtc.events.SessionEvent;
private function onInit():void
{
session.login();
}
private function onSync(event:SessionEvent):void
{
node.subscribe();
}
protected function onReceive(event:CollectionNodeEvent):void
{
if (event.item
&& event.nodeName == "chatNode")
display.text = event.item.body as String;
}
private function sendMessage():void
{
var message:MessageItem = new MessageItem("chatNode");
message.body = input.text;
node.publishItem(message);
input.text = "";
}
]]>
</mx:Script>
<!-- Using our administrator account to authenticate -->
<rtc:AdobeHSAuthenticator id="admin"
userName="xxxxxxx"
password="xxxxxxx"
/>
<!-- Connect to a new room for this tutorial -->
<rtc:ConnectSession id="session"
authenticator="{admin}"
roomURL="http://connectnow.acrobat.com/username/devcenter"
synchronizationChange="onSync(event)"
/>
<!-- Everything is shared through the collection node -->
<sharedModel:CollectionNode id="node"
sharedID="chatWithCustomMessaging"
itemReceive="onReceive(event)"
/>
<mx:Panel width="70%" verticalCenter="0" horizontalCenter="0"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:Text id="display" text="The last message sent will display here"
width="100%" fontSize="24" fontWeight="bold"/>
<mx:TextInput id="input" width="100%" fontSize="18" enter="sendMessage()"/>
</mx:Panel>
<!-- Prevent the user from doing anything until connected -->
<mx:Canvas visible="{!session.isSynchronized}" width="100%" height="100%"
backgroundColor="#000000" backgroundAlpha="0.5"/>
</mx:Application>
Where to go from here
Be sure to use AFCSDevConsole to look at how Adobe Flash Collaboration Service beta is structuring your nodes, and where it is storing your data. Ryan's tutorial provides more details on how to do use AFCSDevConsole.
Adobe Flash Collaboration Service beta includes tags that simplify much of what was covered in this article. Using SharedProperty, for example, you can share data with even fewer lines of code. However, understanding how to set up collection nodes and publish items to them is essential for creating applications that need to share custom data.
Visit my blog for the rest of the series, more articles, and tutorials on Adobe Flash Collaboration Service beta.
