Getting Started with Flex

Next is the DataGrid control. It is useful when one needs to display tabular data.

<?xml version="1.0" encoding="utf-8"?>

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

<mx:HTTPService id="httpRSS"
url="http://apmuses.blogspot.com/feeds/posts/default"
resultFormat="object"/>

<mx:Panel id="reader" title="RSS Reader" width="776" height="100%">

<mx:DataGrid id="entries"
dataProvider="{httpRSS.lastResult.rss.channel.item}"
width="100%">

</mx:Panel>

</mx:Application>

The DataGrid has three main properties and dataProvider is the one that links it with the data source. Next comes the column. The column of DataGrid is an array.

<?xml version="1.0" encoding="utf-8"?>

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

<mx:HTTPService id="httpRSS"
url="http://apmuses.blogspot.com/feeds/posts/default"
resultFormat="object"/>

<mx:Panel id="reader" title="RSS Reader" width="776" height="100%">

<mx:DataGrid id="entries"
dataProvider="{httpRSS.lastResult.rss.channel.item}"
width="100%">

<mx:columns>

<mx:Array>

<mx:DataGridColumn headerText="Title"
dataField="title"/>

<mx:DataGridColumn headerText="Publish Date"
dataField="pubDate"/>

</mx:Array>

</mx:columns>

</mx:DataGrid>

</mx:Panel>

</mx:Application>

The DataGridColumn has two main attributes. The headerText provides the header of the column and dataField provides the data for the column.

That completes the application. When compiling it, the application will be converted to a flash file and embedded in an HTML file. When loading the HTML file, you will be able to see the RSS feeds from http://apmuses.blogspot.com/feeds/posts/default in a tabular format.

That brings us to the end of this section as well as this discussion. This discussion has just shown you the tip of the iceberg regarding Flex. In a future discussion, each of the components and controls will be explained in detail. Till then…