TwinTechs

Twin Technologies was recently selected as a winner of Adobe’s LiveCycle Partner Solution Showcase in San Jose, CA for the 1st Quarter of 2010. Nine solutions were presented by partners to a panel of Adobe judges. Twin entered in two LiveCycle-based business solutions:

• The JumpStart: Human Capital Applications Solution – a best-practice implementation of the HCA Solution Accelerator that has been able to realize a 958% ROI in only 1 year after implementation, based on improvements in Human Resource on-boarding and off-boarding systems.

• The Digital Media Review, Commenting and Approval (DMRCA) Solution – which fuses Twin’s proprietary DigiNodes video-streaming technology into LiveCycle’s Review, Commenting and Approval (RCA) LiveCycle building block using the new Adobe Mosaic Tiles technology to create a powerful new video-editing tool that allows frame-by-frame review and commenting ability.

Kevin Okragly Presenting DMRCA

And the winner is . . . the DMRCA Solution! The video editing possibilities that DMRCA provides are endless, and it directly answers the requests by multi-media organizations of all sizes for a robust and intuitive video review and commenting system.

The solution will now be a standard product in Adobe’s repository and a featured LiveCycle product to present to customers for 2010. DMRCA is now looking to make a splash on the main stage of Adobe’s MAX Conference 2010.

• Learn more about DigiNodes, the heart of the DMRCA solution here: Twin Technologies: DigiNodes

• Watch the video about the LiveCycle Showcase on Adobe Television: Adobe TV: LiveCycle Showcase

• To learn more about LiveCycle, Adobe’s powerful Enterprise-Application Architecture, visit: LiveCycle

• To learn more about Adobe’s MAX check out the homepage at: Adobe Max

Adobe has a new a framework that allows developers to create standalone Flex applications and then gather them together into a larger application. If you haven’t seen Adobe Mosaic Tiles yet, check it out here http://www.adobe.com/products/livecycle/mosaic/. Tiles permits multiple applications to be “mashed” together into one larger application; of course, once they are, there needs to be an efficient way for the tiles to talk to one another. We could write a lot of server code to send messages back and forth between tiles, but luckily for us, Adobe has created an easy way to communicate between tiles.

Setting up cross-tile communication is simple because sending a message from one tile to another is like dispatching events in a Flex application. One tile will send a message and the other tiles can listen for it. The two main players that enable cross-tile communication in this relay are the IRuntime interface and the Message class.

Each tile specified by the <mc:Tile> tag has a protected property named runtime. The runtime property, as defined in the Adobe live docs, is a tile’s access to the runtime system. The focus of this article is on two methods of the runtime object: the addMessageListener function and the sendMessage function.

The addMessageListener function sets up a message listener just like the addEventListener method does with other Flex components. The syntax is slightly different, however: addMessageListener(ns:String, name:String, listener:Object). Let’s say I wanted to call the function named doSomething whenever the message name “callDoSomething” is sent in the namespace titled “myNamespace.” I would then add the code this.runtime.addMessageListener( “myNamespace”, “callDoSomething”, doSomething).

Before we can send a message, an instance of the Message class needs to be created. The Message class acts like an event in Flex except that it has different properties. A message object has three properties: a namespace, name, and payload. The namespace and name will match up a message with a given messageListener defined in another tile. The payload object is the data sent from one tile to the other. Taking the example above, the message that would call the doSomething method would look like this:

var msg:Message = new Message( “myNamespace”, “callDoSomething”, payload )

To send the message, simply call runtime.sendMessage( msg )

The example below sends a message with a string as the payload to any tiles that are listening. The tile that sends the message will be named SendMessageTile and the listening tile is named ReceiveMessageTile. The send message tile simply creates the message and calls the runtime.sendMessage function as shown.


private function sendSampleMessage():void
{
var payload:Object = new Object();
payload.theMessage = "Hello from Send Message Tile";

var message:Message = new Message( "sampleNamespace", "callDoSomething", payload );
this.runtime.sendMessage( message );
}

The ReceiveMessageTile’s job is to setup the messageListener. In this example, the doSomething method alerts a property named “theMessage” to the user.

public function onCreationComplete():void
{
this.runtime.addMessageListener( "sampleNamespace", "callDoSomething", doSomething );
}

private function doSomething( message:Message ):void
{
Alert.show( message.payload.theMessage, "Received Message" );
}

Once the sendSampleMessage() function is called from the SendMessageTile, an alert displaying “Hello from Send Message Tile” will be shown. Pretty simple, right? There are some limitations on the types of objects that can send through the IRuntime interface. If you have complex objects you may want to create helper methods that transform a typed value object to a simple object before calling runtime.sendMessage(). Then on the ReceiveMessageTile you would call a helper method to transform a simple object to your typed value object.

Depending on your requirements, tile communication may be an important part of your project. Now that we’ve discussed how messaging works between tiles, feel free to download the source and build off this simple example.

Sample Application Code

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.

CEO Ben Elmore’s second installment of his four part series on building a a Flex Team was recently featured in InsideRIA.  Read it here!

In our last post, I made the case for building out a Flex team and debunked the current misconceptions surrounding why companies choose not to: that the resources are too scarce, it’s too expensive, and you need a team of experts. With those roadblocks eliminated, the next step is to determine who you need and how to identify them. That’s what we’re going to address here.

Understanding Your Needs
It’s imperative to identify what your requirements are and the number of resources that you’ll need to address them. You must determine what your team needs to accomplish before you begin to assemble it, otherwise you risk redundancy, inefficiency, and slowed or stalled projects. It sounds elementary, but this step can save you a lot of headaches later on. Ask yourself these questions:

What is the size of the application(s) that you need built? You need to know this to decide the size of your team.

Are you building or augmenting your team? If you’re building, a senior resource along with two mid-level resources is ideal. If you’re augmenting, your decision will be based on the amount of work to be done.

Do you have time to train resources? If you do, consider hiring junior resources to pair with a senior resource who can provide mentoring and oversight.

How large and complex is your target application? This question will help you focus the size and needs of your team in direct relation to the duration of the project.

I want to emphasize a couple salient points about building your team. You likely don’t need a huge team (our experience has been that 3-5 resources are sufficient for most projects), nor must that team be comprised of experts with years of experience under their belts. We’ve found that mixed teams of junior and senior level resources are the most productive.

That said, there are times when experience does matter, which returns to my point about clearly delineating the task at hand before you select resources. The key is to realize that while you’ll need an expert to accomplish certain complex tasks like performance profiling an application for scaling or custom visualization, their skill set isn’t typically necessary throughout the entire project.

Here’s a handy categorization:

• Expert: min 2+ years experience with Flex. Built and produced highly available and/or interactive Flex application. Unique understanding of specific part(s) of Flex related to complex domain problem to solve. Not typically someone who will lead or grow a team.

 

• Senior: min 2+ years experience with Flex. Been on teams before, led a project, solid grasp of MXML and AS. Understands Flex in context of product life cycle. If ‘Designer’ then custom components and look/feel. Min 2 other languages. Performance best practices on Flex. Implemented min 2 Flex projects.

 

 

• Mid: 6m – 2yr working with Flex. Been on a team before, good grasp of MXML and AS languages. Has some understanding of performance related issues to actions.
• Junior: 0 – 6 months: One other language, preferably scripting language. Has been through training and/or read and walked through good Flex book.

The Hiring Process
The hiring process has three components: identification, qualification, and on boarding. The first step is to make a list of how many resources you want to hire at which level of experience (expert, senior, mid and junior), and what skill set is needed (architect, designer, developer). The next thing to do is to locate them. You can use personal referrals, Monster, or similar sites, user group manager/lists, or a corporate recruiter.

Once a candidate has applied there are some specific things I look for on the resume. The most important thing for me is that the languages listed on their resume are consistent, complimentary, and parallel to Flex. If I need a Flex designer, I look for Flash, CSS, JavaScript, or other visually expressive languages; if I need a core Flex developer, I look for programming languages like Java, Ruby, .NET, JavaScript or CF. I’m looking for consistency here. Too much variety is often an indication of lack of focus.

I also look at experience with Flex itself: the length of time working with it and whether it was used peripherally or as a project core. I want to ascertain how they became exposed to the language to understand how they’ll think when working with Flex If I am looking for a senior level developer or architect I look at frameworks, patterns, and methodologies listed on their resume.

The last things I look for are soft skills and overall work experience. I look for both variety and stability here. Were past jobs remote, on-site, or both? Also, speaking or writing engagements are a good indication of a potential team mentor.

Once you’ve found an applicant that you believe matches the criteria you’ve established, it’s time to move on to the interview. This is the “qualifying” component of the hiring process and, arguably, the most important. The interview is generally where the decision to hire is made, and this decision is critical. You need to hire the right people at the right time and understand that mistakes made here could potentially doom a project. Although that sounds scary, knowing what skills resources need and how to identify them will help you make the most informed choice and that’s what we’ll discuss in our next post.

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.

Boston.com featured Twin Technologies Customer Paragon Lake in a recent article covering the start-up trend toward developing software solutions that allow retailers to customize apparel and jewelry for customers.  These services are aimed at consumer base who is comfortable purchasing made-to-order items online.

Paragon Lake enlisted Twin to help them create a Virtual Display Case, an online jewelry platform, so customers could help choose, design, and view their selections online before they buy them.  These reduces the amount of inventory retailers need to keep on hand, allows customers to choose and see exactly what they are ordering, and improves the manufacturing process by organizing the workflow between artists and designers.

Twin Technologies’ start-up assistance program gives companies like Paragon Lake technical and business consulting expertise so they can get products to market quickly and start making money.   For Paragon Lake, the Virtual Display Case makes them more agile than traditional retailers, which potentially gives them an edge in a sluggish economy.

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.

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.

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

In case people are interested I will be giving a high level talk on creating secure Flex applications mostly derived from the OWASP top 10 at Web Maniacs. The session will be mostly focused on those top ten risks, how to mitigate them through best practices, but I will also talk some about specific Flash/FLEX risks as well as the growing risk of XSS attacks because of SOA type infrastructures. I think this would be a could intro for developers who have never really though about security as well as IT managers who are running Flex projects.