Flex Sample App: Building the Restaurant Finder

Lab 1: Using HTTPService

With HTTPService, your client application can send traditional HTTP requests to a server and consume the response. Although you can use HTTPService to consume different types of responses, you typically use it to consume XML (XML over HTTP). You can use the HTTPService to send requests to any kind of back-end system: JSP, Servlet, ASP, ColdFustion, CGI, PHP, and so forth.

In this lab, you use the HTTPService to retrieve the list of restaurants. The HTTPService sends a request to a JSP, which returns the list of restaurants as an XML document.

1. Open the restaurantlist.jsp file in [webapp_root]/restaurant and familiarize yourself with the JSP that you will use to retrieve the restaurant list.

   Note: [webapp_root] is the root directory of the web application hosting the Flex server you are using. For example, if you chose the Integrated Server installation, the webapp_root is Program Files\Macromedia\Flex\jrun4\servers\default\flex

2. Create a new file named restaurant1.mxml in [webapp_root]/restaurant.
3. Edit restaurant1.mxml, and type the following code so that restaurant1 can start.

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   </mx:Application>

4. Define an HTTPService as follows so that the application can retrieve the XML data that restaurantlist.jsp generates.

   <mx:HTTPService id="srv" url="restaurantlist.jsp"/>

5. Add a Button labeled Get Data. Specify the click event handler so that it sends the HTTP request defined in the HTTPService above.

   <mx:Button label="Get Data" click="srv.send()"/>

6. Add a DataGrid component and bind it to the result of the HTTPService request.

   <mx:DataGrid id="dg" dataProvider="{srv.result.list.restaurant}" widthFlex="1" heightFlex="1"/>

   Note: Notice that srv.result points to the response of the HTTP request, while list and restaurant correspond to the nodes in the XML document you navigate through (see restaurantlist.jsp).

7. Test the application: http://localhost:8700/flex/restaurant/restaurant1.mxml

   If you haven't already modified the HTTPService whitelist, the following error message appears:

   

   Figure 5. This error message appears if you have not modified the whitelist

   This is because you have installed Flex with strict security constraints by default. To allow your application to access this HTTPservice, you must edit the HTTPService whitelist as described in the following steps.

8. Edit flex-config.xml in the [webapp_root]\WEB-INF\flex directory.
9. Locate the <http-service-proxy> entry

10. Add the http://{localserver}/* URL to the unnamed whitelist.

    <http-service-proxy>
         <!-- Other entries -->
         <whitelist>
             <unnamed>
                 <url>http://{localserver}/*</url>
             </unnamed>

    By setting this, the client application can access any URL on the server from where the application was downloaded.

11. Test the application again.

    http://localhost:8700/flex/restaurant/restaurant1.mxml

12. Modify the DataGrid tag to display only the name, city, and phone columns.

    <mx:DataGrid id="dg" dataProvider="{srv.result.list.restaurant}" widthFlex="1" heightFlex="1">
         <mx:columns>
             <mx:Array>
                 <mx:DataGridColumn columnName="name" headerText="Name"/>
                 <mx:DataGridColumn columnName="city" headerText="City"/>
                 <mx:DataGridColumn columnName="phone" headerText="Phone"/>
             </mx:Array>
         </mx:columns>
    </mx:DataGrid>

13. Finally, to improve the user interface, wrap the DataGrid and the Button in a Panel titled Restaurant List. Make sure you add the button to the ControlBar of the Panel.

    <mx:Panel title="Restaurant List">
         <!-- DataGrid Here -->
         <mx:ControlBar>
             <mx:Button label="Get Data" click="srv.send()"/>
         </mx:ControlBar>
    </mx:Panel>

14. Test the application again. Notice that if you resize the browser window, your application resizes your user interface accordingly.

Page 3 of 14

Previous Page

Next Page