Flex datagrid component tutorial

From EduTech Wiki
Jump to: navigation, search

Draft

This is part of the Flex tutorials

1 Introduction

Learning goals
  • Learn how to fill the the DataGrid component with data
Flash level
  • Flex 3 (Flash 9 and AS3)
Prerequisites
Moving on
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

2 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.

3 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