OK, hopefully this example is a bit more interesting than a few of my previous ones. 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"?>
<!-- http://blog.flexexamples.com/2007/07/26/displaying-xml-data-in-a-datagrid/ -->
<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>
View source is enabled in the following example.
In case you’re curious, the sample XML document in question comes from a Quick Start I wrote for the Flash CS3 release, “Flash Quick Starts: Using the Adobe Flash CS3 Video Encoder“.





Hi, how can i refresh data?
Somehow, I can’t view the flash video. Could you please check into it?
Also, I tried the above code and it didn’t load for me.
var itemA:Number = parseInt(objA.Time.text()) as Number;
var itemB:Number = parseInt(objB.Time.text()) as Number;
Business Minded,
The previous video doesn’t display any video at all. It simply displays an XML packet in a Flex DataGrid control.
If you want to display a video you need to use the VideoDisplay control, or use the NetStream, NetConnection, and Video classes.
Peter