Friday, January 30, 2009
Adobe FLEX 3 .mxml code to display xml data in a datagrid table
This post contains .mxml code which reads in a xml file and outputs a table showing all information.
The xml file should look like this: (see my previous post to see how to dynamically generate such a xml file from a PostgreSQL or MySQL database using PHP)
<?xml version=\"1.0\" encoding=\"iso-8859-1\"?> <entries> <entry><column_1_name>column_1_row_1_value</column_1_name><column_2_name>column_2_row_1_value</column_2_name> .......... </entry> <entry><column_1_name>column_1_row_2_value</column_1_name><column_2_name>column_2_row_2_value</column_2_name> .......... </entry> ........ ........ </entries>
Here is the FLEX code:
(the xml data used in this example is dynamically generated by GetDataSmart.php)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" horizontalAlign="left" verticalAlign="top" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.http.HTTPService;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.collections.XMLListCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.utils.StringUtil;
import mx.collections.ArrayCollection;
private function init():void {
data_service.addEventListener("result", httpResult);
data_service.addEventListener("fault", httpFault);
data_service.send();
}
[Bindable]
public var datalist:XMLListCollection;
public function httpResult(event:ResultEvent):void {
var x:XML = event.result as XML;
var xl:XMLList = XMLList(x.children());
datalist = new XMLListCollection(xl);
list.columns=generateCols(datalist.copy(), false);
list.rowCount=datalist.length;
list.dataProvider=data_service.lastResult.entry;
}
public function httpFault(event:FaultEvent):void {
var faultstring:String = event.fault.faultString;
Alert.show(faultstring);
}
private function generateCols(input:XMLList, useAttributes:Boolean = false):Array {
var e1:XML = input[0];
var columns:Array = [];
var children:XMLList ;
if (useAttributes) {
children = e1.attributes();
}
else {
children = e1.children();
}
for each(var child:XML in children) {
var col:DataGridColumn = new DataGridColumn();
col.dataField = child.name();
columns.push(col);
}
return columns;
}
]]>
</mx:Script>
<mx:HTTPService id="data_service" url="GetDataSmart.php" showBusyCursor="true" resultFormat="e4x"/>
<mx:Panel width="100%" id="pp" resizeEffect="Resize" height="90%" layout="absolute" title="List of database: DD - Table: short02" horizontalAlign="left" verticalAlign="top">
<mx:DataGrid id="list" width="100%" enabled="true" editable="false" textAlign="center" variableRowHeight="false" wordWrap="false" y="0" sortableColumns="true" resizableColumns="true" minColumnWidth="150" x="0" rowCount="1">
</mx:DataGrid>
<mx:Spacer x="0" y="445"/>
</mx:Panel>
<mx:Spacer/>
<mx:Button label="Reload Data" id="Reload" click="data_service.send()" width="165" height="35"/>
</mx:Application>