Ryan has posted 9 posts at DZone. View Full User Profile

Getting started with Adobe Flash Collaboration Service beta

03.23.2009
| 21962 views |
  • submit to reddit

Adobe Flash Collaboration Service beta authentication

Adobe Flash Collaboration Service beta authentication uses the Adobe Flash Collaboration Service beta SDK's AdobeHSAuthenticator component, which you will need add to your the application.

You can use external authentication, which is the most powerful and flexible way of deploying production applications, or you can open up the room and allow guests to enter without authentication. During development, you can use your developer Adobe ID and password to initialize the components you want to put in your room. For this tutorial, because you're in development, you can start with your Adobe ID, but I encourage you to look at the ExternalAuthentication example in the SDK for the safest way to deploy Adobe Flash Collaboration Service beta apps.

Note: From a security standpoint, hard coding your Adobe ID into a deployed Flex application is never a good idea. Instead it is better to either open your room up to guest users or to use some server-side code to bring the shared secret dynamically so you don't have to hard code it into your application. There are examples and instructions for this in the examples folder of the Adobe Flash Collaboration Service beta SDK as well as some more information in the Adobe Flash Collaboration Service beta Getting Started PDF in the docs/pdf folder.

Your code should look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:rtc="AfcsNameSpace">
<rtc:AdobeHSAuthenticator id="auth" userName="<your Adobe ID>" password="<your password>" />
</mx:Application>

That's all you need to do! The AdobeHSAuthenticator component takes care of making the connection to the Adobe Flash Collaboration Service beta servers.

Creating sessions

Adobe Flash Collaboration Service beta interactions are based on sessions, and sessions are all based on rooms. You'll use the room you created in the Creating your Adobe Flash Collaboration Service beta account section as your room. To create a Adobe Flash Collaboration Service beta session, use the ConnectSessionContainer component. This will be the outsidemost component of the application—everything nested inside of it will refer to the session you create with it. (Although you will you only one session in this tutorial, youcan have multiple sessions in one application.) There are two main parameters for the session component: authenticator and roomURL. The authenticator parameters points to the authentication you set up with the AdobeHSAuthenticator component. The roomURL parameters points to your Adobe Flash Collaboration Service beta account and the room you created with the format http://connectnow.acrobat.com/<your account>/<your room name>/. Set the id of this component to cSession and add it after the AdobeHSAuthenticator component.

<rtc:ConnectSessionContainer id="cSession" authenticator="{auth}"
roomURL="http://connectnow.acrobat.com/<your account>/<your room name>/" autoLogin="true">

</rtc:ConnectSessionContainer>

Notice that the code uses the binding brackets for the authentication property. As a result, when the AdobeHSAuthenticator property changes those changes will be applied to the session. When the autoLogin property is set to true, as in the code above, you will automatically log into the session as soon as the component is created. If set to false, you will need to explicitly call the login() method in your code. By default the autoLogin property is true. Later in the tutorial you'll set it to false, so add it to the component but set it to the default, true, until you need to change it.

Using pods

Now that you have the room and session set up, you can start adding collaborative components. Creating your own components is beyond the scope of this tutorial, so for now, you'll simply use a few of the out-of-the-box pods that come with Adobe Flash Collaboration Service beta.

One of the first things you'll want to do is see who is in the room. There are a number of ways to get this data, but the simplest is just to use a roster pod. you can add that using one line of code inside the ConnectSessionContainer tag:

<rtc:Roster id="roster" width="250" height="200" />

To complete your first collaboration application with a room that has chat functionality and whiteboard functionality, add just two more pods:

<rtc:SharedWhiteBoard id="wb" width="400" height="400" x="205" />
<rtc:SimpleChat id="chat" width="200" height="200" y="205" />

The final code should look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:rtc="AfcsNameSpace" >
<rtc:AdobeHSAuthenticator id="auth" userName="<your adobe username>" password="<your password>" />
<rtc:ConnectSessionContainer id="cSession" authenticator="{auth}"
roomURL="http://connectnow.acrobat.com/<your account url>/<your room name>/"
autoLogin="true">
<rtc:Roster id="roster" width="200" height="200" />
<rtc:SharedWhiteBoard id="wb" width="400" height="400" x="205" />
<rtc:SimpleChat id="chat" width="200" height="200" y="205" />
</rtc:ConnectSessionContainer>
</mx:Application>

When you run that code you'll be automatically brought into the room, and you'll be able to chat and use the whiteboard. If you copy and paste the room's URL into a new browser window you can see any changes you make represented in both windows. But you'll also notice a problem. Your second window will display your name in the roster as "<Your User Name> 2".

References
Published at DZone with permission of its author, Ryan Stewart. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Manuel Saint-Victor replied on Tue, 2009/06/02 - 2:17pm

Great Article Ryan- I'm off to play with Flash Collaboration now! 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.