Moods, Tutorials, Videos

LCCS showcase on your tablet

12 Comments 07 March 2011

LCCS showcase on your tablet

To demonstrate how powerful LiveCycle Collaboration Service is, I developed a Flex application that showcases interesting use-cases. Tablet devices connected to the Enterprise backend can revolutionize the way we achieve a complex task and the way we collaborate to improve our knowledge. Using very classic features of LCCS, I was able to share the webcam of my tablet in real-time, use voice over IP, take a picture and share it in real-time, draw graphical annotations on this picture, fill-in an intelligent shared form. In this article, I’ll focus on portions of my code to explain the background architecture of my sample. The code is messy, sorry for that, but you should understand the mechanisms used reading this tutorial. Here is the link to the source code of this Flex project: http://www.riagora.com/pvt_content/android/LCCStabletShowcase.zip As you can see, I used Flex 4 and not Flex Hero to code this application. I deployed it on my Android device using command lines and the Serge’s Packager application. To compile the application, don’t forget to download the LCCS SDK. Once unzipped, you’ll get the LCCS.swc library.

Here’s a video that presents the application and how to navigate through the screens:

Authentification

<rtc:authenticator>
	<rtc:AdobeHSAuthenticator userName="{txtLogin.text}"/>
</rtc:authenticator>

In this case, I create a user per session as all my users are automatically promoted as publishers in my room. To do so, launch the room console (in the developer tools of the LCCS SDK Navigator application), enter within your room and check the box auto-promote users. Before doing that, you may want to use your own credentials the first time you run the application. As you’re the owner of your room, you’ll be able to create as many collection node as you wish. To do so, update the AdobeHSAuthenticator tag:

<rtc:authenticator>
	<rtc:AdobeHSAuthenticator  userName="mylogin@mydomain.com" password="myAdobeAccountPassword"/>
</rtc:authenticator>

Depending on your login mechanisme, don’t forget to set the autoLogin parameter to true or false. In my sample:

<rtc:ConnectSessionContainer id=”connectSession”  autoLogin=”false” roomURL=”http://collaboration.adobelivecycle.com/yourname/yourroom/”…>

Then you can call the login method on your session object: connectSession.login();

Webcams and audio

After importing the lccs.swc library in your Flex project, you’ll discover in the Design view of Flash Builder a new folder of LCCS components (in the Components panel). For this sample, I just dragged and dropped the Webcamera component. It handles for me the layout (if several webcams are connected at the same time), and automatically adds a “Start my camera” button.

<rtc:WebCamera includeIn="LCCSscreen" left="149" right="190" top="10" bottom="10"/>

To enable VoIP, I declared two additional tags to publish and receive audio streams.

<rtc:AudioPublisher id="audioPublisher" includeIn="LCCSform,LCCSpicture,LCCSscreen" x="10" y="446" gain="50" silenceTimeout="2000"
							useEchoSuppression="true"/>
<rtc:AudioSubscriber id="audioSub" includeIn="LCCSform,LCCSpicture,LCCSscreen" x="10" y="503"/>

To start broadcasting your voice, just call the audioPublisher.publish() method. Don’t forget to subscribe to the audio stream: audioSub.subscribe().

Take and share a picture

When you download the LCCS SDK, it will install a lot of commented samples. One of them deals with the FileManager API. I used this sample to develop my application. First, you need to take a picture using the native UI of your tablet OS. To do so, use the CameraUI class available in AIR for Android. I already posted a sample on this topic here: http://www.riagora.com/2010/07/android-air-and-the-camera/

It will launch the native UI of the Android Camera application so that you can take a picture and click on the SAVE button. The file reference to this picture is made available to your AIR application. A MediaEvent is fired when the picture has been captured so that you can start uploading it to LCCS. To upload the picture, I use the FilePublisher class of LCCS.

private function onComplete(evt:MediaEvent):void{
// the picture is retrieved from the tablet os
	var myFileRef:FileReference = new FileReference();
	myFileRef = evt.data.file;
 
	// the picture is uploaded in the LCCS room
	_filePublisher.uploadFileReference(myFileRef,(Math.random()*9999*100).toString());
	_filePublisher.addEventListener(Event.COMPLETE, onFileUploadComplete);
	theImage.source = evt.data.file.url;
	sharedPictureURL = evt.data.file.url;
}

Once the picture uploaded, it fires a COMPLETE event.

protected function onFileUploadComplete(event:Event):void
{
	// The picture has been uploaded in the LCCS room
 
	var tmpFile:FileDescriptor = _fileDescriptors.getItemAt(_fileDescriptors.length -1) as FileDescriptor;
	newPicture.value = tmpFile.downloadUrl;
}

I use the FileDescriptor class to get the last file uploaded in the FileManager of the LCCS room. All the members can then download the picture thanks to the downloadUrl parameter. But how to notify them that a new picture is available ? Using a SharedProperty. In this case, my variable newPicture is a LCCS SharedProperty. Every time a shared property is updated, LCCS sends a message to all participants. You just need to handle this message and read the value of your property.

protected function onSharedPictureChange(event:SharedPropertyEvent):void
			{
				// the sharedProperty has been changed. A new picture is shared.
				if(theImage != null){
					theImage.source = event.value;
					loadingLabel.text = "DOWNLOADING...";
					loadingLabel.visible = true;
					loadingSquare.visible = true;
				}
			}

To draw in real-time on the picture and add graphical annotations, I’m using the default SharedWhiteboard component available in the LCCS SDK. Just place the image in the background of the component, and set the backgroundAlpha parameter to 0.

<mx:Image id="theImage" complete="theImage_completeHandler(event)" includeIn="LCCSpicture" x="150" y="10" width="684" height="485"/>
<rtc:SharedWhiteBoard includeIn="LCCSpicture" x="150" y="10" width="684" height="502" backgroundAlpha="0.03" sessionDependent="false"/>

Shared form

To develop the shared form with the check-in/check-out mechanism, I used the BatonProperty class of LCCS. I’ll publish asap a tutorial on this topic.

On which tablet ?

This application can run on Android tablets today. After the launch of the BlackBerry Playbook, the exact same code will also run perfectly on this first class tablet. What about the iPad ? Well, Apple just announced the iPad 2 with cameras. As you already know, the Adobe engineers are working hard to update the iOS packager to add features and to improve the performance of the runtime. What I can say is that there are good chances to run this app on an iPad in 2011… but I can’t tell you how and when… Be patient guys, you’ll be amazed, trust me.

How to start developing apps with LCCS ?

LCCS is free for Flex developers who want to build and deploy prototypes. Just visit this page and download the SDK: http://www.adobe.com/products/livecycle/collaborationservice/. The SDK contains video tutorials, samples and a professional documentation. HAVE FUN !!!

 

Post to Twitter

Your Comments

12 Comments so far

  1. GAULARD Guillaume says:

    Very interesting.

  2. Khalil Mohammed Shams says:

    Nice one Chaize, keep the good work. Riagora is my online Flex + Air library and reference house!

  3. Alessio says:

    Very interesting, thank you.

  4. Mado says:

    Hi admin, good job what you done, i run your code but my flash bulider got 2 error
    the first is “1046: Type was not found or was not a compile-time constant: MediaEvent.”

    the second error: when i run the code on flash bulider error message “file not found, lccstabletshowcase.html”
    any ideas.
    Thanks,

  5. Mado says:

    hi admin, I’m still try solve 1046: Type was not found or was not a compile-time constant: MediaEvent error but you explain up that you use import FilePublisher for this right however i import media event but also still have the error please any idea will be helpful.
    thanks

  6. admin says:

    I think that the Media Event has been introduced with FP10.1 and AIR 2.5 so make sure to target these platforms when you compile your app

  7. Prince ATTOBLA says:

    I tested it, It runs well with ADOBE SDK 2.5

  8. hjwatso1 says:

    Hi Michael,

    This is really interesting as I’m try to develop an app like this internally at my company. Have you created any mobile apps with push notifications yet as this is going to be requirement for mine.

    Cheers, love the blog btw.

  9. jack murtha says:

    Michael, is it possible for you to post a fxp file for flash builder 4.5.1

    I tried importing your code into a mobile project but I was unsuccessful.

    It would be awesome if I could just import it as a eclipse project and it compiled right away.

  10. jack murtha says:

    to be precise i am getting this error “‘ConnectSessionContainer’ declaration must be contained within the tag, since it is not assignable to the default
    property’s element type ‘mx.core.IVisualElement’.”

    my namespaces are declared correctly so i am kinda clueless what is going on.

    xmlns:fx=”http://ns.adobe.com/mxml/2009″
    xmlns:s=”library://ns.adobe.com/flex/spark”

    xmlns:rtc=”http://ns.adobe.com/rtc”
    xmlns:mx=”library://ns.adobe.com/flex/mx”

  11. Mike Titus says:

    Hi Michael,

    Can you please explain how you created the initial project for this app? If I create a Flex Project I’m not able to debug on a mobile device, if I create a Flex Mobile Project then I don’t get the MX libraries necessary to use the Whiteboard components. I can’t quite figure out how to use MX libraries in a mobile project — I know they’re not optimal for mobile devices, but your app indicates it’s possible somehow. Thanks!


Trackbacks/Pingbacks

  1. TFA01 : Yoocasa and LCCS | RIAgora - March 24, 2011

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2014 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes