Working with Flex and Datagrids

Flex 3.0 offers a strong foundation of user interface (UI) controls by which users can harness a great deal of power to create beautiful UIs without having to toil in the details of low level functionality. Of these controls, the DataGrid sets itself apart by offering characteristics similar to a list or tree control (which are also listBase controls), but going further to offer an easy way of displaying columnar data without a complicated interface. In this article, I focus on creating a basic DataGrid and populating it with XML data by using only MXML tags.

TABLE OF CONTENTS:

By: Keith Lee

Poor Best

Rating:

/ 6

June 30, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Creating a Basic Data Grid

Flex provides anMXML tag to create a DataGrid. Here is our application, with the DataGrid colored in blue:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html"> <mx:DataGrid></mx:DataGrid>
</mx:Application>

The basics of a Flex application are present: the XML DTD, namespace attribute and the <mx:Application> tag. Most importantly for this lesson, you also see the DataGrid tag. If you compile and run this program you will see the following:

What you see is a DataGrid with no header and no data items. It is very basic so far. Before we continue on to spruce up this DataGrid, let's make it expand to the width our browser. By doing this, when we re-size our window, the datagrid will grow to the width and height of the web browser. Here is an updated version of the DataGrid tag with our size attributes added:

<mx:DataGrid width="100%" height="100%"></mx:DataGrid>

Try resizing your window to see the effects of our changes. Setting the width and height to "100%" tells Flex that this component should grow as large as it possibly can with reference to its parent container. In this case, the parent is the application, which also takes up as much real estate as possible.

Next: Adding Data >>