Flex datagrid component tutorial

This is part of the Flex tutorials

Introduction

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

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

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