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

Getting started with Adobe Flash Collaboration Service beta

03.23.2009
| 21441 views |
  • submit to reddit

Back in your Flex Project, you need to modify the ConnectSessionContainer and change the autoLogin property from true to false:

<rtc:ConnectSessionContainer  id="cSession"
authenticator="{auth}" roomURL="http://connectnow.acrobat.com/ryancocomotest/demoroom/" autoLogin="false">

Also, add a TextInput box so that your users can enter a username. Next, add a ViewStack above the ConnectSessionContainer so you can switch between the TextInput box and the pods you created earlier. In the ViewStack, create a VBox and then put the TextInput and a Button control in that VBox. The code is pretty standard:

<mx:ViewStack id="vs" width="100%" height="100%">
<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:TextInput id="username" text="Username" click="username.text = ''" />
<mx:Button id="btn" label="Login" click="onClick(event);" />
</mx:VBox>
<rtc:ConnectSessionContainer id="cSession" authenticator="{auth}"
roomURL="http://connectnow.acrobat.com/ryancocomotest/demoroom/" autoLogin="false">
<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:ViewStack>

Notice that ConnectSessionContainer is a child of the ViewStack. That's because ConnectSessionContainer extends the Canvas control so you can use it as you would other display objects. Also, make sure to add an onClick handler to the button. You'll create the function for that shortly.

Finally, you need to make changes to the AdobeHSAuthenticator component. Specifically, you're going to remove the username and password and add two event handlers, one for a successful authentication and one for an authentication failure:

<rtc:AdobeHSAuthenticator id="auth" 
authenticationSuccess="onAuthSuccess(event);"
authenticationFailure="onAuthFailure(event);" />

There are two new functions to create in addition to the function needed for the click event of the button. When autoLogin was set to true, you didn't need to worry about explicitly logging users in; Adobe Flash Collaboration Service beta did that for you. But now that you are prompting them for a username, you need to log them in after they click the button. To make sure everything works, you need the authenticationSuccess event handler. If the log in fails and there is a problem authenticating, you need the authenticationFailure event handler. The script tag should look like this:

<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function onClick(event:Event) : void
{
auth.userName = username.text;
cSession.login();
}

public function onAuthFailure(event:Event) : void
{
Alert.show('There was a problem!');
}

public function onAuthSuccess(event:Event) : void
{
vs.selectedIndex = 1;
}
]]>
</mx:Script>

The onClick method sets the username of the AdobeHSAuthenticator component to the one from the TextInput control. Users will see that username in the Roster pod. The onClick method then calls the login() method of the ConnectSessionContainer. That call will result in authorizationSuccess or authorizationFailure. In the case of a success, the code simply sets the ViewStack to the level with the pods.

Where to go from here

That's all there is to it! You created a room, set up the basic parameters, initialized it, and made it accessible to users. You can run this SWF in as many browsers as you want to test it out—just copy and paste the URL in your browser window to other windows. You'll see all the changes happen in real time. You could then export a release version of this from Flex Builder, put that SWF on a server, and create your own collaboration application.

There is much more that you can do with Adobe Flash Collaboration Service beta including creating your own collaboration components when the out-of-the-box pods don't meet your needs. Look for more on that topic in a future tutorial.

For more Adobe Flash Collaboration Service beta resources, visit the Adobe Labs.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

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.