Flex
Integrating Remote Shared Objects with Flex and Flash Communication Server
In this project, a remote shared object on a Flash Communication Server contains data that changes frequently
Mar. 1, 2006 05:00 PM
Communication Server (FCS) together provide an amazing toolbox that will undoubtedly provide inspiration to thousands of developers and projects. Unfortunately, without concrete examples and guidelines for good practices on their integration, we spent many hours on tiny issues that, with additional information, could have been easily circumnavigated.
Those hours of trail-blazing are the inspiration for this article. This article tackles the basic integration of how to use a remote shared object on FCS with Flex. Our goal was to make this integration as simple and straightforward as using a web service from within a Flex MXML file.
Flex and FCS provide the foundation for Internet applications that deliver continually changing data to the desktop. This technology, called data push, allows a developer to update information on a user's screen without a browser refresh. In our company, we use this technology to build interactive auction sites that, within moments of a new bid, deliver updated prices on thousands of items to users around the world and update business systems that track critical orders, from estimate through final delivery. This coupling of technology can help you build any application where presentation, collaboration, and up-to-the-moment information is paramount.
Before continuing, I must emphasize that this is a basic implementation and a basic example. If you want to dig into more complex implementations, read, "Developing Rich Clients with Macromedia Flex" and "Programming Flash Communication Server." These books have become invaluable to our organization, and I can't say enough positive things about both of them.
The Project and Approach
In this project, a remote shared object on a Flash Communication Server contains data that changes frequently. It is imperative that the client immediately receive this data without any need to refresh.
In our approach, we connect to FCS server, attach to the remote shared object, and display the data in a Flex DataGrid control. Then, using FCS and Flex, we push changes to the client with Flex data-binding capabilities, so that the DataGrid displays updated data as changes occur.
The Project Scope
You can accomplish 95% of this project solely through MXML constructs, without ever writing a line of ActionScript; however, there are a few issues to understand.
- Flex has components available for WebService and RemoteObject connections that you can easily access through MXML. Our team wanted to offer this same feature for FCS connections and gain some event listener and broadcasting capabilities.
- The SharedObject class is static, and therefore it is not used from within MXML in the same way as familiar Flex components. Our team thought that a wrapper for this class that interacted with FCS and provided the user with viable events would be a useful.
If the above points are a bit foreign right now, that is okay. They will become clearer in the course of this and other articles; also, using the following components, you can still work with FCS.
Please take a moment and review FCSService and SharedRemote class documentation, available from the fcs_flex_sample.zip that you downloaded at the beginning of this article.
- FCSService documentation (fcsservice_class_readme.html)
- SharedRemote documentation (sharedremote_class_readme.html)
- Examples of using the two classes together (two_classes_example.html)
- FCSService.as
- SharedRemote.as
Now read on to assemble the application.
The Layout
The following example creates a DataGrid control that displays in 90% of the available horizontal and vertical space.
You can create the following MXML file and name it flexFCS_01.mxml, or you can open the solution file (flexFCS_01.mxml) available in the ZIP file that you downloaded in the Requirements section of this article.
Example 1: flexFCS_01.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
xmlns="*" creationComplete="initializeApplication(event)">
<mx:Script>
<![CDATA[
var myData:Array;
function initializeApplication( event )
{
//We are called by the creation complete event of the application tag
//Instantiate a new Array
myData = new Array();
}
]]>
</mx:Script>
<mx:DataGrid id="display_grid" dataProvider="{myData}" width="90%" height="90%"/>
<!--Created a DataGrid and bound the dataProvider to myData--> </mx:Application>
The example specifies the dataProvider property for the DataGrid control as a variable named myData. In the creationComplete event of the <mx:Application> tag, the example calls initializeApplication, which instantiates myData as an instance of Array.
When you run this example, you a DataGrid control and other information displays. Next, you will add the functionality.
Flash Communication Server
Flex and FCS create a client/server environment. Using the MXML code in the flexFCS_01.mxml file, Flex creates a client application that executes on a user's machine. FCS acts as the server in this relationship, providing data and updates to the client.
This article is about interfacing two components, not programming FCS. For more on FCS check out the books mentioned in the beginning of the article. For now, I provide a basic server-side script to demonstrate the interface.
Place file, main.asc (included with the ZIP file in the Requirements section) on FCS server in a directory called random in the \Flash Communication Server MX\applications\ directory.
This file sets up a simple shared object on FCS server. The object has 10 slots, named 0-9. Each of these slots will have a random number (Figure 1). This random number changes every two seconds and FCS pushes the results to the client.
The Connection
At this point you have a simple client application, created in Flex, and a FCS application. Now you will make the client display the changing data from FCS. You accomplish this in two phases. First, you connect to FCS and the Remote Shared Object. Second, you receive information back from FCS and process it for display purposes.
First, add the following highlighted lines to Example 1
(flexFCS_01.mxml) or open the solution file, flexFCS_02.mxml, which is available from the fcs_flex_sample.zip that you downloaded at the beginning of this article.
About Michael LabriolaMichael Labriola is a founding partner and senior consultant at Digital Primates IT Consulting Group. Digital Primates analyzes client business processes and develops custom solutions that extend the latest technology.