[ 05.03.2009 : Update : Cocomo is now called Adobe Flash Collaboration Services / AFCS and 0.9.1 was released with some bug fixes and a new namespace ]

(Translated from French tutorial on FlashXPress )

In this first application example, we will build, or rather “assemble”, a videoconferencing application including a chat tool, shared notes and a file sharing manager. For this we’ll use some “pods” , the highest level components of the Cocomo AFCS framework.

One of the most important component in a Cocomo AFCS application is the session manager. It will be in charge of communicating with Cocomo AFCS server, user authentication, connection management, data synchronization, and even more…

Two components in the framework can do this job: ConnectSessionContainer and ConnectSession (both implement com.adobe.rtc.session.IConnectSession).

Hello AFCS ( bye Cocomo )

For starting :

- create a new Flex project,
- copy Cocomo AFCS SWC file (from CocomoSDK_0.9/lib/player 9 or 10/afcs.swc) and paste it in your /libs/ folder

Let’s start with ConnectSessionContainer :
It’s a Canvas based component, which includes all features needed to communicate with Cocomo AFCS servers.

This container, and all of its children, will not be visible as long as the room connection is not established. This is the reason why we will integrate our pods (Webcamera, SimpleChat, Notes and FileShare) inside it. As long as our application isn’t connected to our room, collaborative components will remain hidden.

To start a session, we’ll need to define two attributes in the ConnectSessionContainer tag :

- roomURL( ex : http://connectnow.acrobat.com/yourAccount/roomName)
- authenticator : your user credentials

User credential’s transmission is done by using the AdobeHSAuthenticator class. It will encapsulate authentication data (userName and password). Several authentication modes are possible, we’ll probably focus on them in a future tutorial.

In this first step, we will hard-code our credentials in our application… Only for the first example.

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application layout="absolute"
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:rtc="AfcsNameSpace"
 >
<rtc:ConnectSessionContainer id="sessionManager" width="500" height="400"
 roomURL="http://connectnow.acrobat.com/yourAccount/roomName"
 authenticator="{identificator}"
 backgroundColor="#FFFFFF"
/>
<rtc:AdobeHSAuthenticator id="identificator"
 userName="votreLogin" password="VotreMotDePasse"
/>
</mx:Application>

In this step, your application can already connect to the server. By default, connectSessionContainer had a autoLogin property set to true. This means that it will try to communicate with the server as soon as it’s created. In this example, I set a background color for the container, so we can see when connection is established.

If you publish your project in debug mode, you’ll be able to see server / client communication logs.

To be notified about the login result, we can watch for AuthenticationEvent.AUTHENTICATION_FAILURE and AuthenticationEvent.AUTHENTICATION_SUCCESS on the AdobeHSAuthenticator.

To know if application is fully connected and synchronized, we must add a listenner to the SessionEvent.SYNCHRONIZATION_CHANGE event of sessionContainer and watch for its isSynchronized property. We will talk about differents aspects of this synchronisation in future tutorials.

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application layout="absolute"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:rtc="AfcsNameSpace"
>
     <mx:Script>
         <![CDATA[
             import mx.controls.Alert;
             import com.adobe.rtc.events.SessionEvent;

             // session's state
             private var isConnected:Boolean = false;

			// when a "server synchronization" event is dispatched
             public function onSynchro( e:SessionEvent ):void
             {
                 if ( sessionManager.isSynchronized &&  ! isConnected )
                 {
                     Alert.show("Application connectée");
                     isConnected = true ;
                 }
             }
     ]]>
 </mx:Script>
<rtc:ConnectSessionContainer id="sessionManager"
    width="100%" height="100%" backgroundColor="#FFFFFF"
    authenticator="{identificator}"
    roomURL="http://connectnow.acrobat.com/regartdemo/meetingzone"
    synchronizationChange="onSynchro( event )"
/>
<!-- Authentication component -->
 <rtc:AdobeHSAuthenticator id="identificator"
   userName="YourUserName" password="YourPassword"
   authenticationSuccess="Alert.show('authentication success')"
   authenticationFailure="Alert.show('authentication failed')"/>
</mx:Application>

Now that our application can establish a connection to the room, we can start adding pod components.

Using Cocomo AFCS Pods

Pods are “ready to go” components. When you use a ConnectSessionContainer, you just have to add pods as children in it, and allow them to detect and use your Cocomo AFCS server connection.

For now, Cocomo AFCS contains:
- Simple chat: chat component allowing public and private messages.
- WebCamera: webcam publisher / subscriber
- FileShare component: file sharing components (upload / download)
- Shared Notes components
- Roster and horizontalRoster: user management components
- SharedWhiteBoard

Let’s insert our pods :

<rtc:ConnectSessionContainer id="sessionManager" width="100%" height="100%" backgroundColor="#FFFFFF"
   authenticator="{identificator}"
   roomURL="http://connectnow.acrobat.com/votreCompte/nomSalon"
   synchronizationChange="onSynchro( event )"
   >

   <!-- PODS -->
   <mx:VBox width="50%" height="100%" horizontalAlign="center">

      <rtc:WebCamera id="webcam" width="300" />

      <rtc:SimpleChat id="chat" width="100%" height="100%" />

   </mx:VBox>

   <mx:VBox width="50%" height="100%"  right="0">

     <rtc:FileShare id="fileManager" width="100%" height="50%" />

      <rtc:Note id="notes" width="100%" height="50%" />
   </mx:VBox>
</rtc:ConnectSessionContainer>

Pods embed robust role management features, as we’ll see later.

Anyway, you’ve just built your first Cocomo AFCS application, or should I say your first “real time communication” application… I can’t think how we use to do that before!!??…

User authentication et connection management

Hmmm…there’s still something missing… For a single user app, it’s almost ok… but it’s not the scenario here… What are we going to do if, someday, we find friends and want to collaborate with them??? Does anybody need to connect with my “owner” account? Can we let any AS3 decompiler reveal our credential data? I don’t think so!! Fortunatly Cocomo AFCS allows us to easily manage these aspects.

Cocomo AFCS room allows several authentication methods, specially :
- as owner, based on your Cocomo AFCS Developer account credentials
- as guest, only needing a user name.

<mx:Panel id="logPanel" >
   <mx:Form>

      <mx:FormItem label="Login">
         <mx:TextInput id="chp_login" />
      </mx:FormItem>

      <mx:FormItem label="your role :" direction="horizontal" >

         <mx:RadioButtonGroup id="userRole" />

         <mx:RadioButton id="isGuest" groupName="userRole"
            label="Guest" value="{UserRoles.VIEWER}"  selected="true"
         />
         <mx:RadioButton id="isOwner" groupName="userRole"
            label="Host" value="{UserRoles.OWNER}"
         />
      </mx:FormItem>

      <mx:FormItem label="Password"  enabled="{ userRole.selectedValue == UserRoles.OWNER }">
         <mx:TextInput id="field_password" displayAsPassword="true"  />
      </mx:FormItem>

      <mx:FormItem >
         <mx:Button label="Enter"
            click="login(chp_login.text , userRole.selectedValue == UserRoles.OWNER ? field_password.text : null  )"
          />
      </mx:FormItem>

   </mx:Form>
</mx:Panel>

Users role definition is based on integer values, which are defined as constants in UserRoles class.

The principal roles are : owner (host / developer account), publisher (guest who can publish on one or several components) and viewer (passive guest who is only allowed to publish on chat channel). By default, guests can use a room only if the owner is connected. You can configure initial room settings (auto-promote guest as publisher, data persistence, free room access…). You can also manage user roles and permissions with the CocomoDevConsole AFCSDevConsole app, or directly by using the API. But that’s another story…

For now we will insert an authentication form. We thus need to deactivate the ConnectSessionContainer’s autoLogin property.

Then, we need to add a login() method, in charge of filling the AdobeHSAuthenticator with data. It will also initialize the sessionContainer room connection:

private function login ( login:String, password:String ):void
{
   identificator.userName = login;
	//if password is set : log as host
	//else log as guest
   identificator.password = password ;

	// run sessionManager connection
   sessionManager.login();
}

We can also add a logout button.

// disconnection
// in actual 0.9 beta, mostly pods, can't be re-connected after a disconnection

private function logout():void
{
    sessionManager.logout();

	// close() is supposed to disconnect et remove all childNodes, but seems not work yet
    //sessionManager.close();
}

<mx:VBox width="50%" height="100%" horizontalAlign="center" right="0">
    <mx:Button label="Logout" click="logout()" />

    <rtc:FileShare id="fileManager" width="100%" height="50%" />

    <rtc:Note id="notes" width="100%" height="50%" />
</mx:VBox>

Once the application is connected, we shall remove the form and the sessionContainer will be removed as well when the connection is stopped or lost

// for each synchronization event
// : connection, disconnection , state's change, ...
private function onSynchro( e:SessionEvent ):void
{

	// once application is successfully connected / synchronized
    if ( sessionManager.isSynchronized && ! isConnected )
    {
        Alert.show("Application connectée");

        isConnected = true ;

        removeChild( logPanel );

    } else if ( ! sessionManager.isSynchronized && isConnected ){
    // if disconnected
    isConnected = false ;

   /* remove the connectSessionContainer
   *  » in this version disconnected pods can't re-connect
   *
   *  » For re-connect, you can :
   *     - reload html page
   *     - dynamically re-create connectSession and pods
   */
   removeChild( sessionManager );

   // display logout message
   Alert.show( 'vous avez quitté la réunion, recharger la page pour entrer à nouveau');
   }
}

In this beta version, I encountered problems when trying to repeat multiple login/logout. After a few tests, the best way I found wass to force a page refresh.

Get sources

This first Cocomo AFCS example is finished, and obviously it’s possible to do a lot more. In future tutorials, we’ll take a deeper look on Cocomo AFCS architecture. We’ll also use the CocomoDevConsole AFCSDevConsole and LocalConnectionServer, two AIR utilities included in the SDK.

Have a good collaboration !!!

---

Par Erick, Samedi 31 janvier 2009 à 23:48
[Dev] Flash / Flex / AIR...

Tags: cocomo, collaboration, interactivité, tips, Tutoriels

---