Getting Started with Flex 2 > Lessons > Use Web Services > Populate the DataGrid component

Populate the DataGrid component

You want to use the DataGrid control to display the data returned by the web service. Specifically, you want to display the titles of the most popular posts and the number of clicks each has received.

  1. In Source mode, enter the following dataProvider property in the <mx:DataGrid> tag (in bold):
    <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">

    You want to display the results of the web service's getMostPopularPosts operation in the DataGrid control.

  2. In the first <mx:DataGridColumn> tag, enter the following headerText and dataField property values (in bold):
    <mx:DataGridColumn headerText="Top Posts" dataField="postTitle" />

    You want the first column in the DataGrid control to display the titles of the posts. You do this by identifying the field returned by the web service operation that contains the title data, and then entering the field name as the value of the dataField property. According to the API documentation for the getMostPopularPosts method, the field called postTitle contains the information you want.

  3. In the second <mx:DataGridColumn> tag, enter the following headerText, dataField, and width property values (in bold):
    <mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75" />

    You want the second column in the DataGrid control to display the number of clicks for each post during the last 30 days. According to the API documentation, the field that contains the data is called clicks.

  4. Delete the third <mx:DataGridColumn> tag.

    You don't need a third column.

    The <mx:DataGrid> tag should look as follows:

    <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400"
    dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">
    <mx:columns>
        <mx:DataGridColumn headerText="Top Posts" dataField="postTitle"/>
        <mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75"/>
    </mx:columns>
</mx:DataGrid>
  5. Save the file, wait until Flex Builder finishes compiling the application, and then click the Run button in the toolbar to test the application. If you're using the plug-in configuration of Flex Builder, select Run > Run As > Flex Application.

    A browser opens and runs the application. You find a problem in the application's default state. The ComboBox reads Top 5 but the DataGrid does not display any information.

    The DataGrid should display the top five posts, but it doesn't because your application hasn't called the web service yet. The application only calls it when the ComboBox changes. Even if you click Top 5 in the ComboBox after the application starts, the call is still not made because the selected item hasn't changed.

    To fix the problem, you decide to also call the web service immediately after the application is created, as follows.

  6. In Source mode, enter the following creationComplete property (in bold) in the opening <mx:Application> tag:
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="wsBlogAggr.getMostPopularPosts.send()">

    The final application code should look like the following:

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    creationComplete="wsBlogAggr.getMostPopularPosts.send()">
    <mx:WebService id="wsBlogAggr" 
        wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
        useProxy="false">
        <mx:operation name="getMostPopularPosts">
            <mx:request>
                <daysBack>30</daysBack>
                <limit>{cbxNumPosts.value}</limit>
            </mx:request>
        </mx:operation>
    </mx:WebService>
    <mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
        title="Most Popular Posts">

        <mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
            <mx:Object label="Top 5" data="5" />
            <mx:Object label="Top 10" data="10" />
            <mx:Object label="Top 15" data="15" />
        </mx:ComboBox>
        
        <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">
            <mx:columns>
                <mx:DataGridColumn headerText="Top Posts" dataField="postTitle"/>
                <mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75"/>
            </mx:columns>
        </mx:DataGrid>

        <mx:LinkButton x="30" y="250" 
            label="Select an item and click here for full post"/>
    </mx:Panel>
    
</mx:Application>
  7. Save the file and run the application.

    Blog titles and click statistics should appear in the DataGrid control after the application starts, confirming that the application successfully retrieved data from the web service and populated the control.


    Flex application running in web browser with populated DataGrid.

    NOTE

     

    There may be a delay of a few seconds before the data appears while the application is contacting the server.

    Select another option from the ComboBox control to send a request to the web service and retrieve a longer or shorter list of posts.

Flex 2.01

Take a survey