Working with Flex and Datagrids (
Page 1 of 4 )
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.Creating a Basic Data Grid
Flex provides an
MXML 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.
