Accessibility

Flex Article

 

Integrating Remote Shared Objects with Flex and Flash Communication Server


Table of Contents

Comments

The Good Stuff

After the last round of revisions, your application can receive updates from the server, but can't do anything with them yet. Now you’ll add that functionality.

Add the highlighted code below to Example 2 (flexFCS_02.mxml) or, open the solution file, flexFCS_03.mxml, which contains all of the changes. The flexFCS_03.mxml file is included in the fcs_flex_sample.zip that you downloaded in the Requirements section of this article.

Example 3: flexFCS_03.mxml (additions shown in bold):

<?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();
	//Connect to the flash communication server.
	//we are using rtmp as our first protocol attempt
	my_fcs.connect('rtmp://[your_server]/random');
}
	function syncData( event ) 
{
	var currentIndex:Number; 
	var currentNode:Object; 
	for ( var i=0; i<event.actions.length; i++ ) 
{ 
/* This is cheap and cannot be relied upon, however, for this example: our slot 'names' are all numeric and can be used as Indexes into the array.These names are set when we do the random_so.setProperty("0", ... ); in the main.asc file.The "0" is the slot name 
So, in this case the slots are named 0,1,2,3 and so on. */ 
	currentNode = event.actions[i]; 
	/* Whenever we receive a synchronization event from FCS, it is provided as an array.Each element in the array has a code, which defines the type of event we are receiving. 
In this case, we are only looking at two of the possibilities, a slot changed or the whole array should be cleared */ 
	switch (currentNode.code) 
{ 
	case "change" : 
//This slot has changed and needs to be 
//updated

if ( myData[ currentNode.name ] == undefined ) 			
{ 
//Even though FCS sees this data as //a change, this is the first time we have 	
//data in the slot 
	//So we add it to our data structure 
	myData.addItemAt( currentNode.name, 
	{ label:event.data[ currentNode.name ].label, 						
	value:event.data[ currentNode.name ].value } ); 
	//Notice above that we are using the { } as a shortcut to create a new object from the data we received from FCS 
	//This is do to the databinding properties of flex. 
	//If we do not create a copy of the object, flex will try to update FCS server everytime we make a change to the object 
	//This can be desireable, but, it is not for this example 			
	} 
		else 
	{ 
	//We have seen data for this slot before, so we update our data structure 
	myData.replaceItemAt( currentNode.name,
	{ label:event.data[ currentNode.name ].label, 			
	value:event.data[ currentNode.name ].value } ); 					
	} 
		break; 
		case "clear" : 
	//FCS has instructed us to clear all of our existing data 				
	myData.removeAll(); 
	break; 
		}
			} 
				}  
	]]>
</mx:Script>
<mx:DataGrid id="display_grid" dataProvider="{myData}" width="90%" height="90%"/>
<!--Created a DataGrid and bound the dataProvider to myData-->
<!--Instantiate an FCSService component-->

<FCSService id="my_fcs"
	closed=" alert( 'server closed connection' )"			
	rejected=" alert('Server rejected connection')"			
	failed=" alert('Server connection failed')" />
<!--Instantiate an SharedRemote component and bind it to the FCSService tag above-->
<!--The name property of this tag must match the argument in the SharedObject.get command on the server file main.asc-->
<SharedRemote id="my_remote1"
		name="RandomNumbers"
		service="{my_fcs}"
		failed="alert('Shared Object Failed')"						
		status="alert('Status ' + event.info.level + ' ' + event.info.code );"
	sync="syncData( event )"/>
</mx:Application> 

In this version, you added two important items. You specify an event handler for the sync event of the SharedRemote component and added the code for that handler.

First, let’s talk about the syncData function. This is the function that performs all of the work in preparing the data for display. The event object passed to this function always contains two very important properties: actions and data.

The actions property is an array that will contain a variable number of elements based on the changes that occurred on the Flash Communication Server. FCS adds one object to this array for every action it implements on the client. Examples of actions include: clear all of the data, delete a single element, change the value of an existing element, and so forth.

When you look at the individual elements of the actions array, you will always find a single property named code, and for some codes an additional property called name. The data structure looks like the following:

• event 
	
	actions 
		
		o 0 -  
		code 
		[name] 
		o 1 -  
		code 
		[name] 
		o 2 -  
		code 
		[name] 

 data 

At the start of the syncData function, the code loops through the actions array and examines each element. You perform a switch statement on the code property, which defines the type of action you can perform. For this example, you are only interested in two specific codes: change and clear.

A clear code simply means that all of the current data should be cleared. The code executes a removeAll method on the data structure.

A change code indicates that a slot has changed on the server and provides the name of this slot through the name property. In this case, the slot names are 0-9.

The data array is the other extremely important part of this equation. The data is an associative array of the slots defined on FCS. So, in this example, data has slots named 0-9.

When you receive a change code, you also receive the name of the changed slot. This name allows you to look up the new slot information in the data array.

There are two more issues to understand, however. First, FCS informs the Flex client of changes to the data, however, it is up to the client program to analyze this data and determine whether it is new content to store or existing content to replace.

In this simplified example, you simply check to see if data of this slot name exists in the myData array. If it does, you replace that item with the new data. If it does not, you add it.

Second, and perhaps more complicated, is the interaction of the data from FCS with the Flex data binding mechanism.