HTTP Service question

[kminev]

I want to pass xml web service to my flex components which xml fill have multiple roots.

For example:

<ROOT1>
<ITEM>
<Something></Something>
<Something2></Something2>
</ITEM>
</ROOT1>

<ROOT2>
<ITEM>
<Something3></Something3>
<Something4></Something4>
</ITEM>
</ROOT2>

My goal is when I load this xml with my HttpResult event I need to take the data from root1 and root2 and treat them as separate objects.

Would that be legal in Flex

httpService.send();

arrayCollection1 = result.ROOT1.ITEM;
arrayCollection2 = result.ROOT2.ITEM;

Thanks in advance.

[bdover28]

Make sure your httpservice result format is set to xml (or e4x). you should put your result all in one main root, so it would be like:


<ROOTS>

<ROOT1>
<ITEM>
<Something></Something>
<Something2></Something2>
</ITEM>
</ROOT1>

<ROOT2>
<ITEM>
<Something3></Something3>
<Something4></Something4>
</ITEM>
</ROOT2>

<ROOTS>


now i don't have any experience putting xml into an array collection, this is what i do after a request like the one above.


xmlRequest.send();

//then set the result of the httpservice to run this:

var root1:XML = xmlRequest.lastResult.ROOT1 as XML;
var root2:XML = xmlRequest.lastResult.ROOT2 as XML;



that should do the trick, if you know how to deal with XML you should have no trouble creating an array collection from there.

[kminev]

My next question is can I assign the xml data to my chart without converting it to an ArrayCollection which significantly slows my application down?

I am very confused on what should be the best technique to follow in my data binding. Whether I should convert my xml to array collections and then go from there or if there is a more elegant and efficient way of capturing the xml and than performing the necessary processing.

Any help tips would be very much helpful and appreciated.

Thanks. I am pasting my code just in case someone has the time to glans through it.

CODE:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application width="100%" height="100%" xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mccune="com.dougmccune.controls.*"
creationComplete="chartComplete()"
initialize="init()"
backgroundColor="#FFFFFF" >

<mx:HTTPService
id="nfsXML"
url="Data/nfsData.xml"
showBusyCursor="true"
fault="faultHandler(event)"
result="resultHandler(event)"
method="GET"


/>


<!--Series Sliders for multiples: Exchange to GW, GW2WS, WS2Exchange-->
<mx:SeriesSlide id="slideIn" duration="600" direction="up"/>
<mx:SeriesSlide id="slideOut" duration="600" direction="down"/>
<!-- Define custom colors to use as plot point fills. -->
<mx:SolidColor id="sc1" color="green" alpha=".5"/>
<mx:SolidColor id="sc2" color="red" alpha=".5"/>
<mx:SolidColor id="sc3" color="#0045f0" alpha=".5"/>
<mx:SolidColor id="sc4" color="Blue" alpha=".5"/>

<!-- Define custom Strokes. -->
<mx:Stroke id="s1" color="green" weight="1"/>
<mx:Stroke id="s2" color="red" weight="1"/>
<mx:Stroke id="s3" color="#0045f0" weight="1"/>
<mx:Stroke id="s4" color="blue" weight="1"/>



<mx:Panel title="NFS Analysis" width="100%">
<mx:Legend dataProvider="{bigChart}" direction="horizontal"/>
</mx:Panel>
<mx:Spacer height="20"/>
<mx:HBox height="30">
<mx:Label width="100%" color ="blue" text="Lookup by Order Number:"/>
<mx:TextInput id="txtOrderNum" />
<mx:ComboBox id="orNoCombo" initialize="addFirstItem()" change="orNumOnChange()" labelField="OrNo" dataProvider="{chartData}" selectedIndex="0" enabled="true" >

</mx:ComboBox>
<mx:Button label="Look Up" id="btnLookup" click="selectItems(event)"/>
<mx:Button label="Clear Selection" id="btnClr" click="bigChart.clearSelection()"

/>

</mx:HBox>
<mx:HBox >
<mx:RadioButtonGroup id="nfs"/>
<mx:RadioButton groupName="{nfs}" id="wtog" label="W2G"
selected="true" click="bigChart.dataProvider=mainData;"/>
<mx:RadioButton groupName="{nfs}" id="wtoe" label="W2Exchange"
click="bigChart.dataProvider=mainData;"/>
<mx:RadioButton groupName="{nfs}" id="gtoe" label="G2Exchange"
click="bigChart.dataProvider=mainData;"/>
<mx:RadioButton groupName="{nfs}" label="G2Exchange Derived"
click="bigChart.dataProvider=xmlData;"/>
</mx:HBox>


<mx:Spacer height="10" />
<mx:CartesianChart id="bigChart" selectionMode="multiple" mouseSensitivity="5" dataTipMode="multiple" width="80%" height="80%" showDataTips="true" dataTipFunction="myDataTipFunction" dataProvider="{mainData}" >

<mx:horizontalAxis>
<!--<mx:DateTimeAxis dataUnits="hours" parseFunction="parseDate"/>-->
<!--<mx:CategoryAxis categoryField = "E" title="Date/Time"/>-->
<mx:DateTimeAxis id ="bigChartDateAxis" dataUnits="days" />
</mx:horizontalAxis>

<mx:horizontalAxisRenderer>
<mx:AxisRenderer visible="true" />
</mx:horizontalAxisRenderer>

<mx:verticalAxis>
<mx:LinearAxis title="" />
</mx:verticalAxis>

<mx:verticalAxisRenderer>
<mx:AxisRenderer visible="true" />
</mx:verticalAxisRenderer>

<mx:backgroundElements>
<mx:GridLines direction="both" alpha="1" >
<mx:horizontalStroke>
<mx:Stroke color="black" weight="0" alpha="0.2" />
</mx:horizontalStroke>
</mx:GridLines>
<!--<mx:Image source="Assets/Power_By_Logo_Faded.gif" horizontalAlign="center" alpha=".09"/>-->
</mx:backgroundElements>

<mx:series>
<mx:PlotSeries
yField="W2G"
radius="2"
xField="Date"
itemRenderer="mx.charts.renderers.CircleItemRenderer"
displayName="W2G"
fill="{sc1}"
stroke="{s1}"
/>
<mx:PlotSeries

yField="G2E"
xField="Date"
radius="2"
itemRenderer="mx.charts.renderers.CircleItemRenderer"
displayName="G2E"
fill="{sc2}"
stroke="{s2}"
/>
<mx:PlotSeries
radius="2"
yField="W2E"
xField="Date"
itemRenderer="mx.charts.renderers.CircleItemRenderer"
displayName="W2E"
fill="{sc3}"
stroke="{s3}"
/>
</mx:series>

<mx:annotationElements>
<mx:Canvas width="100%" height="100%" buttonMode="true" mouseDown="setMouseDown(bigChart)" />
</mx:annotationElements>

</mx:CartesianChart>


<mx:VBox verticalGap="0" width="80%" verticalScrollPolicy="off" horizontalAlign="center">

<mx:CartesianChart id="smallChart" dataProvider="{chartData.source}" width="100%" showDataTips="false" height="150" >

<mx:horizontalAxis>
<mx:DateTimeAxis id="smallChartDateAxis" dataUnits="days"/>


</mx:horizontalAxis>

<mx:horizontalAxisRenderer>
<mx:AxisRenderer visible="false" />

</mx:horizontalAxisRenderer>

<mx:verticalAxis><mx:LinearAxis/></mx:verticalAxis>

<mx:verticalAxisRenderer>
<mx:AxisRenderer visible="false" /></mx:verticalAxisRenderer>


<mx:series>

<mx:AreaSeries name="W2E" yField="W2E" areaFill="{new SolidColor(0x0033CC, 0.5)}" areaStroke="{new Stroke(0x0033CC, 2)}" />

</mx:series>


<mx:annotationElements>
<mx:HDividedBox id="overlayCanvas" width="80%" alpha="1" dividerAffordance="5" liveDragging="true" horizontalGap="10" verticalGap="0" horizontalScrollPolicy="off"
dividerDrag="updateBoundariesFromDivider(event)" dividerSkin="{blankDividerClass}"
mouseOver="overlayCanvas.setStyle('dividerSkin', dividerClass);" mouseOut="overlayCanvas.setStyle('dividerSkin', blankDividerClass);">
<mx:Canvas id="leftBox" height="100%"
width="{(overlayCanvas.width / chartData.length) * leftBoundary}"
backgroundAlpha="0.8" backgroundColor="#EEEEEE" borderThickness="1" borderColor="#999999" borderStyle="solid" />
<mx:Canvas id="visibleBox" width="100%" height="100%" buttonMode="true" mouseDown="setMouseDown(smallChart)" />
<mx:Canvas id="rightBox" height="100%"
width="{(overlayCanvas.width / chartData.length) * (chartData.length - rightBoundary)}"
backgroundAlpha="0.8" backgroundColor="#EEEEEE" borderThickness="1" borderColor="#999999" borderStyle="solid"/>
</mx:HDividedBox>
</mx:annotationElements>

</mx:CartesianChart>

<mx:Spacer height="-30" />

<mccune:HSlider id="slider" width="{overlayCanvas.width}" height="25"
trackHighlightSkin="com.dougmccune.skins.SliderThumbHighlightSkin"
allowTrackClick="true" allowThumbOverlap="false"
liveDragging="true" change="updateBoundariesFromSlider()"
showDataTip="true" dataTipPlacement="bottom" dataTipOffset="3"
showTrackHighlight="true"
thumbCount="2" snapInterval="1"
values="{[leftBoundary, rightBoundary]}"
minimum="0" maximum="{chartData.length}"
/>
</mx:VBox>

[kminev]

<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.messaging.AbstractConsumer;
import mx.charts.chartClasses.DataDescription;
import mx.charts.DateTimeAxis;
import mx.utils.ObjectProxy;
import mx.charts.series.PlotSeries;
import mx.charts.series.items.PlotSeriesItem;
import mx.rpc.events.ResultEvent;
import mx.charts.GridLines;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.charts.chartClasses.Series;
import mx.managers.SystemManager;
import mx.events.ResizeEvent;
import mx.graphics.Stroke;
import mx.graphics.SolidColor;
import mx.collections.ArrayCollection;
import mx.events.DividerEvent;
import mx.managers.SystemManager;
import mx.charts.HitData;
import mx.graphics.IFill;
import mx.charts.ChartItem;
import mx.core.IFlexDisplayObject;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.ColumnSeries;
import mx.effects.Move;
import mx.events.DragEvent;
import mx.controls.List;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.rpc.events.*;
import mx.rpc.http.HTTPService;
import mx.utils.ObjectUtil;
import mx.collections.Sort;
import mx.collections.SortField;


[Embed(source="divider.png")] [Bindable] public var dividerClass:Class;
[Embed(source="blank.png")] [Bindable] public var blankDividerClass:Class;

//private var LEFT_START:Number = 123;//Covert to date object value
//private var RIGHT_START:Number = 250;//Covert to date object value

//Decrlare array to gather data from web service
//and distribute to chart elements
[Bindable] public var chartData:ArrayCollection;
[Bindable] public var mainData:ArrayCollection;

[Bindable] public var xmlData:ArrayCollection;//Initially takes the data from xml
[Bindable] public var g2eData:ArrayCollection;

[Bindable] private var leftBoundary:Number;
[Bindable] private var rightBoundary:Number;

private var staticLeftBoundary:Number;
private var staticRightBoundary:Number;

public var smallDrag:Boolean = false;
public var bigDrag:Boolean = false;
public var mouseXRef:Number;


private function init():void
{

var value:String = '12/18/2007 10:40:00 AM';
var dt:Date = new Date();

var regX:RegExp = /\d+g/;

var match:Array = value.match(regX);

var dateArray:Array = value.split('/');

var arr:Array = dateArray[2].toString().split(' ');

var timeArry:Array = arr[1].toString().split(':');

for each(var str in dateArray)
{
trace('dateArray: ' + str);
}

for each(var t in arr)
{
trace('Arr: ' + t);
}

for each(var item in timeArry)
{
trace('TimeArray: ' + item);
}

trace('Arr[1] ' + arr[1]);

}
private function orNumOnChange():void
{
txtOrderNum.text = orNoCombo.selectedLabel;
trace(orNoCombo.selectedLabel);

}
private function addFirstItem():void
{

}

private function chartComplete():void
{
nfsXML.send();
}


public function resultHandler(event:ResultEvent):void
{



//g2eData = event.result.G2E.Trade as ArrayCollection;

if(event.result.NFS.Trade == null )
{
mx.controls.Alert.show("The response data are empty!");
}
else if ( event.result.NFS.Trade is ObjectProxy )
{
// the response data has only one item
xmlData = new ArrayCollection([event.result.NFS.Trade]);
chartData = new ArrayCollection(xmlData.source);
mainData = new ArrayCollection(chartData.source);

leftBoundary = xmlData.length /2; //SET left boundary to be be set a week from the present day...
rightBoundary = xmlData.length / 2 + 100;//SET right boundary to be set
updateBoundariesFromSlider();

}
else
{
xmlData = event.result.NFS.Trade as ArrayCollection;
chartData = new ArrayCollection(xmlData.source);
mainData = new ArrayCollection(chartData.source);

leftBoundary = xmlData.length /2; //SET left boundary to be be set a week from the present day...
rightBoundary = xmlData.length / 2 + 100;//SET right boundary to be set
updateBoundariesFromSlider();
}


}

public function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Failed loading data!");
}


private function loadData(smallChart:CartesianChart, bigChart:CartesianChart, data:ArrayCollection):void
{
bigChart.dataProvider=data;
smallChart.dataProvider=data;
}

private function updateBoundariesFromSlider():void
{
leftBoundary = slider.values[0];
rightBoundary = slider.values[1];
updateMainData();
}


private function updateBoundariesFromDivider(event:DividerEvent):vo id
{
leftBoundary = Math.abs(HDividedBox(event.target).getChildAt(0).w idth / (event.target.width / chartData.length));
rightBoundary = Math.abs(chartData.length - (HDividedBox(event.target).getChildAt(2).width / (event.target.width / chartData.length)));
updateMainData();
}

private function updateMainData():void
{
mainData.source = chartData.source.slice(leftBoundary, rightBoundary)
}

private function setMouseDown(theChart:CartesianChart):void
{
mouseXRef = this.mouseX;
staticLeftBoundary = leftBoundary;
staticRightBoundary = rightBoundary;
if(theChart == bigChart) bigDrag = true;
if(theChart == smallChart) smallDrag = true;
this.systemManager.addEventListener(MouseEvent.MOU SE_MOVE, moveChart);
this.systemManager.addEventListener(MouseEvent.MOU SE_UP, stopDragging);
}

private function stopDragging(event:MouseEvent):void
{
smallDrag = false;
bigDrag = false;
this.systemManager.removeEventListener(MouseEvent. MOUSE_MOVE, moveChart);
this.systemManager.removeEventListener(MouseEvent. MOUSE_UP, stopDragging);
}

private function moveChart(event:MouseEvent):void
{
if(bigDrag)
{
leftBoundary = staticLeftBoundary + (mouseXRef - this.mouseX) / (bigChart.width / mainData.length);
rightBoundary = staticRightBoundary + (mouseXRef - this.mouseX) / (bigChart.width / mainData.length);
}
else if(smallDrag)
{
leftBoundary = staticLeftBoundary - (mouseXRef - this.mouseX) / (smallChart.width / chartData.length);
rightBoundary = staticRightBoundary - (mouseXRef - this.mouseX) / (smallChart.width / chartData.length);
}
}

public function selectItems(event:Event):void
{

var allSeries:Array = bigChart.series;

for (var i:int=0; i < allSeries.length; i++)
{

var selectedData:Array = [];
// Iterate over each item in the series.
for (var j:int=0; j< mainData.length; j++)
{
if (mainData.getItemAt(j).OrNo == String(txtOrderNum.text))
{
selectedData.push(j);
}

}
allSeries[i].selectedIndices = selectedData;

}
txtOrderNum.text = '';

}

public function ResetChart():void
{
leftBoundary = 1;//SET left boundary to be be set a week from the present day...
rightBoundary = 300;//SET right boundary to be set
updateBoundariesFromSlider();
}

public function myDataTipFunction(e:HitData):String
{
var s:String;
//s = "<B>" + PlotSeries(e.element).displayName + "</B>" + "\n";
s = "<B>" + e.item.A + "</B>" + "\n";
s += "------------------------------" + "\n";
s += "<B>Order Number:</B> " + "<FONT COLOR='#FF0000'><B>" + e.item.OrNo + "</B></FONT>"+ "\n";
s += "<B>Date:</B> " + e.item.Date + "\n";
s+= "<B>Trader:</B> " + e.item.Trd + "\n";
s+= "<B>IP:</B> " + e.item.IP + "\n";
s+= "<B>Exchange:</B> " + e.item.Ex + "\n";

return s;
}

private function dateParse(value:String):Date
{
try
{

trace('Value: ' + value);
var dateArray:Array = value.split('/');

var str:String = dateArray[2].toString();

var arr:Array = str.split(' ');

var timeArry:Array = arr[1].toString().split(':');

trace('dateArray[0]: ' + dateArray[0]);
trace("parsefunction return: " + new Date(arr[0], dateArray[0] - 1, dateArray[1], timeArry[0], timeArry[1], timeArry[2], 0).toString());


//return new Date(timeArry[0], dateArray[0], dateArray[1],
}
catch(arr:Error)
{
return new Date();
}
return new Date(arr[0], dateArray[0] - 1, dateArray[1], timeArry[0], timeArry[1], timeArry[2], 0);
}



]]>
</mx:Script>
</mx:Application>
[/AS]

[bdover28]

you can assign the XML from your HTTPService right to your chart. You need to set the result format on the HTTPService to xml or e4x depending on how your XML is formatted (probably just XML will do) like this:


<mx:HTTPService
resultFormat="xml"
....
/>


then on your chart:


dataProvider={nfsXML.lastResult.ITEM}


or whatever you're using instead of <ITEM> in your XML

hope that helps.. I don't have time to read through all the code right now