Both of them speak about data editing/update not getting propagated properly through a ArrayCollection. The samples are using the ArrayCollection available from the HTTPService result directly. The HTTPService is creating the ArrayCollection first and then updating its source Array with items. The Array object doesn't dispatch any events when it is updated with new items. Due to this ArrayCollection has no way of adding event listeners for property changes to the items added later on. Hence the changes are detected only for the items present at the time of creation of ArrayCollection which happens to be 2 items.

If one desire to use the HTTP result as dataProvider and expects data updates to get properly propagated they need to create a new ArrayCollection using the source of the default ArrayCollection present in the HTTP result.

data_provider = new ArrayCollection(ArrayCollection(srv.lastResult.data.result).source);

where srv is the HTTPService. If data_provider is already a ArrayCollection then we can just modify the source as follows

data_provider.source = ArrayCollection(srv.lastResult.data.result).source;

This bug exists in Flex 2 and may not be fixed in Flex 3 as the current bug status is deffered! The source is available here and data getting loaded here.

This example could easily be extended further to pass a variable to a server-side script which would grab cue point information from a database and pass it back into Flex either as a string of name/value pairs, or as an XML document.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="httpService.send()"> <mx:HTTPService id="httpService" url="cuepoints.txt" result="httpService_result(event)" resultFormat="flashvars" /> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.events.VideoEvent; import mx.collections.ArrayCollection; import mx.events.CuePointEvent; import mx.managers.SystemManager; import mx.utils.URLUtil; import mx.utils.ObjectUtil; [Bindable] private var arrColl:ArrayCollection = new ArrayCollection(); private function httpService_result(evt:ResultEvent):void { var flashVars:Object = httpService.lastResult; var item:String; for (item in flashVars) { videoDisplay.cuePointManager.addCuePoint({name:item, time:flashVars[item]}); } } private function videoDisplay_cuePoint(evt:CuePointEvent):void { var cpDate:Date = new Date(evt.cuePointTime * 1000); arrColl.addItem({name:evt.cuePointName, time:dateFormatter.format(cpDate)}); } private function videoDisplay_playheadUpdate(evt:VideoEvent):void { var pDate:Date = new Date(evt.playheadTime * 1000 || 10); var tDate:Date = new Date(evt.currentTarget.totalTime * 1000); progressBar.setProgress(evt.playheadTime, evt.currentTarget.totalTime); progressBar.label = dateFormatter.format(pDate) + " / " + dateFormatter.format(tDate); } private function videoDisplay_progress(evt:ProgressEvent):void { progressBar.conversion = 1024; /* Convert bytes to kilobytes. */ progressBar.label = "%1 of %2 KB (%3%%)"; progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal); } private function videoDisplay_click(evt:MouseEvent):void { videoDisplay.play(); } ]]> </mx:Script> <mx:DateFormatter id="dateFormatter" formatString="NN:SS" /> <mx:HBox> <mx:Canvas> <mx:VideoDisplay id="videoDisplay" autoPlay="false" autoRewind="false" source="http://www.helpexamples.com/flash/video/water.flv" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoint="videoDisplay_cuePoint(event)" playheadUpdate="videoDisplay_playheadUpdate(event)" progress="videoDisplay_progress(event)" click="videoDisplay_click(event)" rewind="arrColl=new ArrayCollection()" rollOver="progressBar.visible = true" rollOut="progressBar.visible = false" /> <mx:ProgressBar id="progressBar" mouseChildren="false" labelPlacement="center" visible="false" mouseEnabled="false" mode="manual" left="5" right="5" bottom="5" /> </mx:Canvas> <mx:DataGrid id="dataGrid" height="100%" dataProvider="{arrColl}"> <mx:columns> <mx:DataGridColumn dataField="name" headerText="CuePoint Name:" /> <mx:DataGridColumn dataField="time" headerText="CuePoint Time:" /> </mx:columns> </mx:DataGrid> </mx:HBox> </mx:Application>

The following example demonstrates a very simple usage of sending parameters from Flex to a server-side script (written in ColdFusion) and then displaying the server response in our Flex application. The server-side script is a simple echo/”Hello world” type script, but it accepts URL or FORM variables, so you can send using the GET or POST HTTP-method.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="httpService.send(myObj);"> <!-- Parameters to send to remote script. --> <mx:Object id="myObj" name="john" /> <mx:HTTPService id="httpService" url="http://www.flash-mx.com/mm/greeting.cfm" method="POST" resultFormat="flashvars" /> <mx:Label text="{httpService.lastResult.welcomeMessage}" /> </mx:Application>

The following example shows how you can convert an XML file loaded at run-time using the HTTPService tag, into an ActionScript Object by simply setting the resultFormat property to “object”.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="serv.send();"> <mx:Script> <![CDATA[ import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; private function serv_result(evt:ResultEvent):void { var resultObj:Object = evt.result; /* Assign the values... */ nameText.text = resultObj.album.name; img0Text.text = resultObj.album.images.image[0]; img1Text.text = resultObj.album.images.image[1]; img2Text.text = resultObj.album.images.image[2]; } private function serv_fault(evt:FaultEvent):void { /* Show the error label. */ error.text += evt.fault.faultString; error.visible = true; /* Hide the form. */ form.visible = false; } ]]> </mx:Script> <mx:String id="XML_URL">album.xml</mx:String> <mx:HTTPService id="serv" url="{XML_URL}" resultFormat="object" result="serv_result(event);" fault="serv_fault(event);" /> <mx:ApplicationControlBar dock="true"> <mx:Label text="{XML_URL}" /> </mx:ApplicationControlBar> <mx:Label id="error" color="red" fontSize="36" fontWeight="bold" visible="false" includeInLayout="{error.visible}"/> <mx:Form id="form" includeInLayout="{form.visible}"> <mx:FormItem label="resultObj.album.name:"> <mx:Label id="nameText" /> </mx:FormItem> <mx:FormItem label="resultObj.album.images.image[0]:"> <mx:Label id="img0Text" /> </mx:FormItem> <mx:FormItem label="resultObj.album.images.image[1]:"> <mx:Label id="img1Text" /> </mx:FormItem> <mx:FormItem label="resultObj.album.images.image[2]:"> <mx:Label id="img2Text" /> </mx:FormItem> </mx:Form> </mx:Application> View album.xml <?xml version="1.0" encoding="utf-8"?> <album> <name>One</name> <images> <image>image1.jpg</image> <image>image2.jpg</image> <image>image3.jpg</image> </images> </album>

The followig example shows how you can pass parameters to an HTTPService by passing an Object in the HTTPService’s send() method. The remote ColdFusion script is a simple “hello world” type script which accepts a single parameter, “name”, and returns a single parameter, “welcomeMessage”.

 



 
 
 <?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.events.ValidationResultEvent;

import mx.utils.StringUtil;



private function submit_click(evt:MouseEvent):void {

var result:ValidationResultEvent = stringValidator.validate();

var params:Object = {};



lbl.text = "";



switch (result.type) {

case ValidationResultEvent.INVALID:

Alert.show(result.message, result.type);

break;

case ValidationResultEvent.VALID:

params["name"] = StringUtil.trim(firstName.text);

httpServ.send(params);

break;

}

}

]]>

</mx:Script>



<mx:StringValidator id="stringValidator"

source="{firstName}"

property="text"

minLength="2"

maxLength="{firstName.maxChars}" />



<mx:HTTPService id="httpServ">

<mx:resultFormat>flashvars</mx:resultFormat>

<mx:url>http://www.flash-mx.com/mm/greeting.cfm</mx:url>

<mx:result>lbl.text = httpServ.lastResult.welcomeMessage;</mx:result>

<mx:fault>Alert.show(event.toString(), event.type);</mx:fault>

</mx:HTTPService>



<mx:ApplicationControlBar dock="true">

<mx:Form>

<mx:FormItem label="Name:" required="true"

direction="horizontal">

<mx:TextInput id="firstName"

maxChars="20" />

<mx:Button label="Submit"

click="submit_click(event);" />

</mx:FormItem>

</mx:Form>

</mx:ApplicationControlBar>

<mx:Label id="lbl" fontSize="32" />

</mx:Application>