Adobe
Products
Creative Suite
Photoshop Family
Acrobat Family
Flash Platform
Digital Marketing Suite
Digital Publishing Suite
More products
Solutions
Digital marketing solutions
Digital media solutions
Education
Financial services
Government
Web Experience Management
More solutions
Learning Help Downloads Company
Store
Adobe Store for home and home office
Education Store for students, educators, and staff
Business Store for small and medium businesses
Other ways to buy
Search
 
Info Sign in
Welcome,
My cart
My orders My Adobe
My Adobe
My orders
My information
My preferences
Sign out
Why sign in? Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
Adobe
Products Sections   Search  
Solutions Company
Help Learning
Sign in Welcome, My orders My Adobe
Qty:
Purchase requires verification of academic eligibility
Subtotal
Review and Checkout
Adobe Developer Connection / Flex Developer Center /

Sharing data with Adobe Flash Collaboration Service beta – Part 1: Custom messaging

by Sean Clark Hess

Sean Clark Hess
  • http://seanhess.net

Created

6 April 2009

Page tools

Share on Facebook
Share on Twitter
Share on LinkedIn
Bookmark
Print
Flash Player Flex

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)

  • Sign up

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.

Tutorials & Samples

Tutorials

  • Flex mobile performance checklist
  • Flex and Maven with Flexmojos – Part 3: Journeyman
  • Migrating Flex 3 applications to Flex 4.5 – Part 4

Samples

  • Twitter Trends
  • Flex 4.5 reference applications
  • Mobile Trader Flex app on Android Market

Flex User Forum

More
02/08/2012 Localising Flex Validators
02/10/2012 Pass Http Header information to a Flex application
02/09/2012 Global Event Listeners for all Views in a ViewNavigatorApplication
01/24/2008 Is Stacked Bar/Column chart Supports Multiseries..?

Flex Cookbook

More
02/09/2012 Using Camera with a MediaContainer instead of VideoDisplay
02/08/2012 Digital Clock
01/20/2012 Skinnable Transform Tool
12/12/2011 Date calculations using 'out-of-the-box' functions

Products

  • Creative Suite
  • Photoshop Family
  • Acrobat Family
  • Flash Platform
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Mobile apps

Solutions

  • Digital marketing
  • Digital media
  • Web Experience Management

Industries

  • Education
  • Financial services
  • Government

Help

  • Product help centers
  • Orders and returns
  • Downloading and installing
  • My Adobe

Learning

  • Adobe Developer Connection
  • Adobe TV
  • Training and certification
  • Forums
  • Design Center

Ways to buy

  • Adobe Store
  • For students and educators
  • For small and medium businesses
  • For enterprises
  • Special offers

Downloads

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

Company

  • News room
  • Partner programs
  • Corporate social responsibility
  • Career opportunities
  • Investor Relations
  • Events
  • Legal
  • Contact Adobe
Choose your region United States (Change)
Choose your region Close

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • Pacific - English
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).

Ad Choices

Reviewed by TRUSTe: site privacy statement