The problem with our Amazon application so far, is that you only display the first 10 items matching your search criteria. To solve this problem, you could provide the user with some kind of navigation buttons to browse through the different pages of the result set. Here is an example:

Here is what the application looks like:

Here is the code:

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

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*">

    <mx:Script>

        function search() {
            page.value=1;
            aws.KeywordSearchRequest.send();
        }

        function changePage() {
            aws.KeywordSearchRequest.send();
        }

    </mx:Script>

    <mx:WebService id="aws" wsdl="http://soap.amazon.com/schemas3/AmazonWebServices.wsdl">
        <mx:operation name="KeywordSearchRequest">
            <mx:request>
                <KeywordSearchRequest>
                    <keyword>{keyword.text}</keyword>
                    <page>{page.value}</page>
                    <mode>music</mode>
                    <tag>webservices-20</tag>
                    <type>lite</type>
                    <devtag>Your developer tag here</devtag>
                </KeywordSearchRequest>
            </mx:request>
        </mx:operation>
    </mx:WebService>

    <mx:Panel title="Amazon Search" widthFlex="1" heightFlex="1">

        <mx:DataGrid id="dg" dataProvider="{aws.KeywordSearchRequest.result.Details}" widthFlex="1" heightFlex="1">
            <mx:columns>
                <mx:Array>
                    <mx:DataGridColumn columnName="ProductName" headerText="Name"/>
                    <mx:DataGridColumn columnName="OurPrice" headerText="Price" textAlign="right"/>
                </mx:Array>
            </mx:columns>
        </mx:DataGrid>

        <mx:ControlBar>
            <mx:TextInput id="keyword"/>
            <mx:Button label="Search" click="search()"/>
            <mx:Label text="Page:"/>
            <mx:NumericStepper id="page" minimum="1" maximum="{aws.KeywordSearchRequest.result.TotalPages}" value="1" change="changePage()"/>
            <mx:Label text="/{aws.KeywordSearchRequest.result.TotalPages}"/>
        </mx:ControlBar>

    </mx:Panel>

</mx:Application>

However, this approach is not consistent with the fluid nature of RIAs, and is reminiscent of traditional page-centric applications. Moreover, manually paging through a DataGrid is not a standard use of the component and is counterintuitive.

Another approach would be to retrieve all the pages in the result set, and populate the UI control (in this case the datagrid) with the combined results. This is relatively easy to do: you issue multiple web services method invocations (one for each page) and consolidate the results in the DataGrid’s DataProvider.

This approach is not ideal either:

1) From a performance point of view, you will often end up retrieving much more data than the user actually wants to see. (If the user never scrolls down in the DataGrid, there was really no need to retrieve all the pages in the result set).
2) In this case, this might also be against the Amazon Web Services license agreement that specifically limits the number of requests per second you are allowed to make.

So a better solution might to retrieve data "as needed", in other words as requested by the user. We will look at this solution in the third part of this article.