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>