Flex datagrid component tutorial

This article or chapter is incomplete and its contents need further attention. Some information may be missing or may be wrong, spelling and grammar may have to be improved, use your judgment!

This is part of the Flex tutorials

Introduction[edit | edit source]

Learning goals

Learn how to fill the the DataGrid component with data

Flash level

Flex 3 (Flash 9 and AS3)

Prerequisites

Adobe Flex and AS3 Compiling a program or Adobe Flex Builder
Some knowledge about Flash or Flex components could be helpful: Flash components overview
To use the DataGrid component, you should know some ActionScript, e.g. from the ActionScript 3 interactive objects tutorial or the Flash drag and drop tutorial. This includes some basic programming skills (conditionals, loops and arrays) and idea of how events work in ActionScript, e.g. read the ActionScript 3 event handling tutorial
Some XML

Moving on

The Flash datagrid component tutorial shows how to do this with Flash
See the Flex tutorials

Level and target population

Beginners with a little programming / XML experience

Quality

Not finished yet, but this piece should help you solve some easy how to display data problems.

To do

Interact with the data grid

Notice for ActionScript programmers. The mxmlc compiler will not work with the Flash ActionScript *.fl classes. Flex doesn't include the fl.controls.DataGrid class but there is an mx equivalent

Simple mxml for creating a Data Grid[edit | edit source]

Have a look at the DataGridFlex.swf first. It is the result of some pure Flex XML code below:

 <?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Label width="600" color="blue"
            text="Flex DataGrid demo - list of learning management systems."/>

  <mx:DataGrid id="dg" width="600" height="400" rowCount="4">
    <mx:ArrayCollection>
      <mx:Object Name="Moodle" Type="LMSWare" Licence="GPL" Description="Good for blended activity-oriented learning"/>
      <mx:Object Name="PageFlakes" Type="Webtop service" License= "Free to use"
		 Description="A minimal personal learning environment"/>
      <mx:Object Name="Drupal" Type="Portalware" License="GPL" 
		 Description="Good for project-oriented teaching" />
      <mx:Object Name="MediaWiki" Type="Portalware" License="GPL"
		 Description="Good for writing-to-learn and technical mini-projects teaching" />
    </mx:ArrayCollection>

    <mx:columns>
      <mx:DataGridColumn dataField="Name"/>
      <mx:DataGridColumn dataField="Type"/>
      <mx:DataGridColumn dataField="License"/>
      <mx:DataGridColumn dataField="Description"/>
    </mx:columns>
  </mx:DataGrid>
</mx:Application>

To play with it, simply get the DataGridFlex.mxml file and compile it with the flex compiler, i.e. open a terminal and type:

 mxmlc DataGridFlex.mxml.

Of course Flex can do more sophisticated layout than that. E.g. see the slightly improved DataGridFlex1.swf and play with DataGridFlex1.mxml.

Alternatively, you may load this *.mxml code into the Adobe Flex Builder.

Creating a DataGrid and filling it with data using Flex[edit | edit source]

Have a look at DataGridFlexDataSource.swf. The examples shows how to pull in the same XML as above into an mxml DataGrid definition. Of course, it should be tuned a bit, e.g. column size should be adjusted and I should embed it into an HTML page, but I am happy enough that it works. It's only my second mxml exercise.

Tip: To debug this, you can load the swf into CS3 and then look a trace statements you may insert or error messages.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
		backgroundGradientColors="0xFFFFFF 0xAAAAAA"
		initialize="initializeHandler(event)">

  <mx:Script>
    <![CDATA[
  [Bindable]
  private var lms_list:XMLList;

  private var loader:URLLoader;
  
  private function initializeHandler (event:Event):void {
    var req:URLRequest = new URLRequest("lms-list.xml");
    loader = new URLLoader ();
    loader.addEventListener (Event.COMPLETE, completeHandler)
    loader.load(req);
  }

  private function completeHandler(event:Event):void {
    var xml_data:XML = new XML(loader.data);
    // trace ("Created XML datastructure from loaded XML - loader.data \n:" + loader.data); 
    lms_list = xml_data.children();
    // trace ("Extracted children from xml data - lms_list :\n" + lms_list);
 }
  ]]>

  </mx:Script>
    <mx:Panel title="DataGrid Example" height="100%" width="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="List of learning management systems."/>

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="7" dataProvider="{lms_list}">
	  <mx:columns>
	    <mx:DataGridColumn dataField="Name" headerText="Name"/>
	    <mx:DataGridColumn dataField="Type" headerText="Type"/>
	    <mx:DataGridColumn dataField="License" headerText="License"/>
	    <mx:DataGridColumn dataField="Description" headerText="Description"/>
	  </mx:columns>
	</mx:DataGrid>
    </mx:Panel>
</mx:Application>

Source code: Directory: http://tecfa.unige.ch/guides/flash/ex/data-grid/; MXML file: DataGridFlexDataSource.mxml