Displaying XML data in a DataGrid

Today’s handy tip comes in the form of loading and embedding an XML file in our Flex application at compile-time (as opposed to dynamically loading at run-time, which we’ll save for a future example), and displaying that information in a DataGrid control.
The following example loads an XML file at compile-time using the mx:XML and displays the information in a DataGrid:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><FLVCoreCuePoints version="1">
<CuePoint> <Time>0</Time> <Type>event</Type> <Name>slide1</Name> <Parameters> <Parameter> <Name>id</Name> <Value>value</Value> </Parameter> </Parameters> </CuePoint>
<CuePoint> <Time>5000</Time> <Type>event</Type> <Name>slide2</Name> <Parameters> <Parameter> <Name>param1</Name> <Value>value1</Value> </Parameter> <Parameter> <Name>param2</Name> <Value>value2</Value> </Parameter> </Parameters> </CuePoint>
<CuePoint> <Time>20000</Time> <Type>event</Type> <Name>slide3</Name> </CuePoint>
</FLVCoreCuePoints><?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white">
<mx:XML id="tempXML" source="assets/cuePoints.xml" /> <mx:XMLListCollection id="cuePointXMLList" source="{tempXML.CuePoint}" /> <mx:XMLListCollection id="parametersXMLList" source="{dataGrid.selectedItem.Parameters.Parameter}" />
<mx:Script> <![CDATA[ private function parametersLabelFunction(item:Object, column:DataGridColumn):String { return item.Parameters.Parameter.length(); }
private function numericSortCompareFunction(objA:Object, objB:Object):int { var itemA:Number = parseInt(objA.Time.text()) as Number; var itemB:Number = parseInt(objB.Time.text()) as Number;
if (itemA > itemB) { return 1; } else if (itemA < itemB) { return -1; } else { return 0; } } ]]> </mx:Script>
<mx:VBox>
<mx:DataGrid id="dataGrid" dataProvider="{cuePointXMLList}" width="100%" rowCount="{cuePointXMLList.length + 1}"> <mx:columns> <mx:DataGridColumn id="timeCol" dataField="Time" headerText="Time (ms):" sortCompareFunction="numericSortCompareFunction" /> <mx:DataGridColumn id="typeCol" dataField="Type" headerText="Type:" /> <mx:DataGridColumn id="nameCol" dataField="Name" headerText="Name:" /> <mx:DataGridColumn id="parametersCol" dataField="Parameters" headerText="Parameters:" labelFunction="parametersLabelFunction" /> </mx:columns> </mx:DataGrid>
<mx:DataGrid id="parametersDataGrid" dataProvider="{parametersXMLList}" width="100%" visible="{parametersXMLList.length > 0}" rowCount="{parametersXMLList.length + 1}"> <mx:columns> <mx:DataGridColumn id="parameterNameCol" dataField="Name" headerText="Parameter Name:" /> <mx:DataGridColumn id="parameterValueCol" dataField="Value" headerText="Parameter Value:" /> </mx:columns> </mx:DataGrid>
</mx:VBox>
</mx:Application>