TwinTechs

I recently had the opportunity to integrate the Adobe Flash Collaboration Service, also known as AFCS, with another application.  For those of you that don’t know, AFCS is a hosted Adobe service that gives Flex developers the ability to easily add real-time social capabilities directly into an application.

Getting Started:

Although it’s still in Beta, the product team at Adobe has done a great job with documentation and has released a slew of sample applications. Setting up an initial “Hello World” AFCS project with webcam, text chat, and a white board support can be done in less than an hour. The Adobe “Hello World” code sample is here.

Getting Down and Dirty:

As we all know, sample applications always work perfectly. But if you are trying to do something a little off piste…  well… many times, things can get a bit dicey.  Our application’s requirements resulted in us extending the base AFCS functionality a fair amount.   These extensions can be summed up into two distinct groups:

1. Storage of additional data in AFCS.
2. Enhancements/additions to the current AFCS components (pods).

Storing additional data in AFCS

Luckily, storing additional data in AFCS is easy.   AFCS has a three-deep level data hierarchy,  including:

1. Collection Node: The highest level.  Collection Nodes wrap up functionality stored in components/pods and consist of a collection of nodes.
2. Node: Second Level.   These generally wrap up functionality to a certain section, e.g. a history of a chat window and consist of a collection of message items.
3. Message Item: Lowest level.  Message Item’s support both primitives and simple objects.

In addition, there is a whole bunch of additional goodness relating to all of these data structures including private messaging, session management, and user management.  Also, there is a rather extensive security model that allows you define read/write permissions at a granular level.

Retrieving data and notifying clients of data changes was very easy and the Nodes operated in much the same way as Shared Objects do in Flash Media Player. There were events notifying clients of both data changes as well as synchronization with the server.

I did find a couple of downsides with the data model. Creating a collection node requires owner permissions and  this ended up being a problem as our application had clients trying to dynamically add instances of pods. In addition, the data model is not N deep. This could be troublesome with some data sets, i.e. you want to store the data in nodes as a BST.

Extending AFCS Components

Extending the base components, while not particularly hard, is a little time consuming and does force a developer to get his hands dirty. Fortunately, the developers at Adobe followed some coding rigor and separated most of the pods into two components, model and view. Thus, if you only have to change the L&F of a component and not necessarily its underlying functionality, you can get away with just extending the view component.

In our case, we had to update both the model and the view components. This resulted in reading and understanding the individual components and updating them as necessary.

In hindsight, it might have been prudent to just write our own components.  Once you are comfortable with the API and its functionality, it is easy enough to write your own custom components and interface with AFCS.

Final Thoughts:

Overall, I was very impressed with AFCS and I think it has potential.  The ability to generate an application that gives you chat, webcam, and whiteboard functionality instantly is great. In addition, being able to develop Flex components without the fuss of configuring and installing (not to mention developing!) an app server is a huge plus. Recommendation to Adobe: a desktop sharing component would make this a killer service.

User Design Expert Will Evans was elected to the Information Architecture Institute today. His term will last three years, and he’ll be responsible for developing and leading initiatives that provide networking opportunities for information architects, education and mentoring, and driving awareness around the evolution of user experience and design.

Will has been a member of the Information Architecture Institute for years, but this is the first time he’s been elected to the board. He’s a frequent guest and popular speaker at IA conferences. Will serves as Twin Technologies’ Director of User Experience, providing visionary creativity and guidance for clients that are interested in redefining how users experience their brand online. Will’s designs explore how people engage on and off-line, which tools act as the right catalysts for online engagement, and what factors contribute to social traction.

The IA Institute is a professional organization dedicated to advancing the state of information architecture through research, education, advocacy and community service.  IA Institute sponsors the IDEA conference each year, that explores the convergence of experience design with social and user experiences, and the growing importance of aligning expectations.

Congratulations, Will!

Twin Technologies was selected as the Adobe Solution Partner award winner for Q2 2009.   Twin Technologies was chosen for the family-friendly web portal we created for ZapMyTV. Using the streaming media functionality of Adobe Flash—along with the agile development and deployment of Adobe Flex, ColdFusion, and LiveCycle Data Services ES—Twin Technologies built an elegant media platform for ZapMyTV from the ground up. The Zap platform will provide live streaming cable television across the internet to any streaming device and integrate it with elements of social media, allowing viewers to extend their television experience with text and video chat, shared remote control, and the opportunity to view TV together in real time.

The Solution Partner Recognition benefit was created to highlight the successes and significant impact and contributions Solution Partners make on Adobe users, prospects, and customers around the world.  The Adobe Partner team, along with a selection committee comprised of Adobe Executives, Business Unit Managers, Sales, Program and Partner managers determine the winners based on all applications received from qualifying partners.

Today, according to BusinessWire Twin Technologies’ partner and customer ZapMyTV has signed an agreement with Paramount Digital Entertainment to license content for live streaming broadcast across the Internet.  Under the agreement, viewers will have on demand access to Paramount’s vast library of movies and content.  Zap subscribers only have to access one web site to watch live television, view movies on-demand, search the internet, email, chat, video conference, and blogging. 

Viewers expect more control over their content and flexibility in where it’s consumed and how they share and discuss it.  To offer licensed, live cable TV to any streaming device, combined with social networking, interactive video, text and audio chat together in one place, Zap enlisted Twin Technologies to help create a multi-functional digital platform from the ground up using tools like Adobe Flash, Flex and ColdFusion.  This is the first web-based platform to offer live, fully licensed television over the Internet with picture-in-picture, recording capabilities and the ability to watch what you want, when you want it, wherever you are.

Before ZapMyTV, most TV content available on demand was pre-recorded and encoded into a format for viewing on a computer or mobile device. The few streams that are live are owned and managed by broadcast organizations, so users have to visit mul­tiple web sites for their favorite content.  Moreover, current platforms did not offer options for chatting or social networking with people watching different channels, and many required custom software that was limited by operating systems and browser.

ZapMyTV is currently in an early beta test period. Consumers may sign up for the beta at www.zapmytv.com. The site is currently streaming live cable channels, and at the time of its official public launch plans to have 50-100 channels in addition to Paramount’s theatrical motion picture content.

Zap is lining up additional content providers and studios, so viewers have lots of content to choose from.  This announcement is the first of several key strategic alliances with entertainment companies that ZapMyTV will announce in the near future.

“Twin’s combined expertise in digital media and product manage­ment and development allowed us to get our product up and run­ning quickly,” says Steven Turner CEO of ZapMyTV.

Flash enabled TV from Adobe

It’s not just YouTube and Facebook that agree Adobe Flash is the industry standard tool for streaming video. Over 80% of companies using digital video on their web sites use Flash. Today, Adobe announced that it is extending Flash for use in TV apps. The New York Times reported that Shantanu Narayen, Adobe’s chief executive, said the company is extending Flash to the television screen. He expects TVs and set-top boxes that support the Flash format to start selling later this year.

This means that we are closer than ever to watching TV on our phones, computers, or mobile devices. It also means that distributing video across multiple channels is becoming cheaper and easier. The trick is going to be integrating the systems. Systems integration companies with digital capabilities will be in high demand, building out enterprise operations to support Adobe’s new agenda.

The New York Times reports that to support the new effort to bring Flash to TV, Adobe has signed partners including Intel, Comcast, Netflix and Broadcom, the company that makes many of the components that go into cable and satellite set-top boxes. The New York Times Company is supporting this initiative to bring Flash to the TV set, as is Disney who stand to distribute an awful lot of Flash-based video with this initiative.

“ For anyone who wishes to deliver Web browsing on smartphone devices, supporting Flash will be an integral part of the experience,” said Shantanu Narayen, Adobe CEO.

Introduction

This blog post will be the first in a series about Continuous Integration  and how it relates to Flex.  In this post we will just talk about how to create a project using Antennae to help automate the build and test of our Flex code.  If you are using the stand alone version of Flex Builder 3 you may need to install Ant.  Here are some good directions on how.

Setting up the Project

First create a new ‘General’ Eclipse project called SampleTestProject in Eclipse. 

Now download Antennae and unpack it to a temporary directory which we will refer to as temp/.

Now go to tmp\Antennae-1.2.0\Antennae and look into templates directory for the SampleTestApplication template and just copy the build.xml and the src directory to your new project (note do not copy the SampleTestApplication directory just the files and directory underneath it).

Also copy over the Antennae lib/ and tools/ directories to your new project.

Next copy over the files build-user.properties, build-assets.xml, and build-imports.xml.

Next set the flex.dir property in build-user.properties file to the path of your Flex 3.0 SDK. For example:

Flex.dir=C:/flex_sdk_3.0.0.477

Next you need to edit the build.xml to point to your root as well as add some new tasks and in Listing 1.

Listing 1 – build.xml

<project name=”SampleTestApplication” default=”test”>

<!– Project specific overrides –>

<property name=”root.dir” location=”.”/>

<!– Shared properties –>

<property file=”${root.dir}/build-user.properties” />

<!– Common properties and targets –>

<import file=”${root.dir}/tools/build-common-imports.xml” />

<import file=”${root.dir}/lib/build-assets.xml” />

<!– Build path –>

<path id=”flex.lib.path”>

<pathelement location=”${flexunit.swc}”/>

<pathelement location=”${arc-flexunit.swc}”/>

</path>

<!– Project specific targets –>

<target name=”clean” description=”Clean the project”>

<delete dir=”bin” />

</target>

<target name=”build” depends=”init,flex-test-application” description=”Build the test application”/>

<target name=”test” depends=”clean,build,test-flexunit” description=”Run the test application”/>

</project>

Now let us add a new file called SampleTestProject.mxml to the src/ directory under the root. The file looks like listing 2.

Listing 2 – SampleTestProject.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

</mx:Application>

After you have completed listing 2 save the file. Now we let us add a test in the same place in the  src/ directory like listing 3.

Listing 3 – SampleTest.as

package
{
import flexunit.framework.TestCase;

public class SampleTest extends TestCase
{
public function testTrue():void
{
assertEquals(true, true);
}
}
}

If you now save these files and run the build.xml by simply right clicking on the build file, selecting Run As> Ant Build then then Ant will start, delete the bin director, then build the files, then call the FlexUnit package in the lib directory, run the Flex unit test, and return the results in the Eclipse editor.  That should look something like figure 1.

Figure 1:  Out put of Antennae build file with three tests.

Summary

As you can see nothing terribly exciting but Antennae provides us several things that make our life easier.  The first of these is a pretty well thought out framework for building complex Flex based application.  The second is solid integration of the FlexUnit project which is GUI based.  While having a GUI based unit test tool is valuable it is not very good for Agile development practices based around the concepts of continuous integration and continuous production.  Antennae allows us to call FlexUnit from Ant, having it run as part of our build cycle, and push the test results to something like a log file.  This is will become especially useful in later articles when we integrate our project with our Continous Integration server.

Also if you would just like to download the Eclipse version of this project you can find it here SampleTestProject.

Here is a nice short paper on using Flash for XSS attacks

For those readers who are interested here is my (Robi Sen) presentation from Web Maniacs on Securing Flex.  Currently I have only provided the PDF version and a PPT .  For those who asked for the presentation I will email you the PPT as well as the assoicated code and files for some of the examples.

Also because of the interest in this presentation I will start bloging in more depth about specific security issues related to RIA development so check back often for more information. 

Securing Flex PDF,  Securing Flex PPT

A few months ago I had the opportunity to review a advanced copy of Laszlo in Action and I have to say it is a excellent book.  Laszlo and OpenLaszlo has always had a compelling solution for RIA developers but one of the frustrating things about it was the lack of educational resources.  With this book I think developers know have a great tool to learn and become competent with Laszlo.  So if your playing with RIA’s and looking at Laszlo just go buy this book.  You will get far more out of reading it than you will playing with the example code that comes with OpenLaszlo in my Opinion.