Adding HTTPService Calls to Dashboard


These next tasks have you returning to the Dashboard.mxml file, modifying it to retrieve the data from a HTTPService, and passing it to the modified ChartPod.mxml component. The data currently resides in static XML files that you will pull into the application to fill the DataGrids in your Dashboard. The data is already presorted.

1.

Open the Dashboard.mxml file.

You can also copy Lesson11/start/Dashboard.mxml to your flexGrocer directory if you choose.

2.

Insert three <mx:HTTPService> tags to retrieve sales information for the three pods in the Dashboard. Place them just below the script block.

<mx:HTTPService    url="http://www.flexgrocer.com/rawSalesData.xml"   result="salesRPCResult(event)"   fault="showFault(event)"/> <mx:HTTPService    url="http://www.flexgrocer.com/categorySalesData.xml"   result="typeRPCResult(event)"   fault="showFault(event)"/> <mx:HTTPService    url="http://www.flexgrocer.com/salesData.xml"   result="compRPCResult(event)"   fault="showFault(event)"/> 


In Lesson 6, "Using Remote XML Data with Controls," it was discussed in detail how to use the <mx:HTTPService> tag and how to use the result handlers of the tag. Each tag has its own specific result handle method but uses one shared fault handle method.

3.

In the script block at the top of the file, create a private salesRPCResult() method. This method will handle the result from the HTTPService that gets the sales data by taking the result and passing it along to the sales pod.

private function salesRPCResult(event:ResultEvent):void{    sales.dp = event.result.salesData.dailySales; } 


This function takes the ResultEvent event passed in and assigns it to the sales component through the dp attribute that you defined earlier in the lesson.

4.

Just like the last step, create a private typeRPCResult() method in the script block. This method will handle the result from the HTTPService that gets the sales type data by taking the result and passing it along to the type pod.

private function typeRPCResult(event:ResultEvent):void{    type.dp = event.result.categorySalesData.categorySales; } 


This function takes the ResultEvent event passed in and assigns it to the type component through the dp attribute.

5.

In the script block at the top of the file, create a private compRPCResult() method. This method will handle the result from the HTTPService that gets the sales type data by taking the result passing it along to the comp pod.

private function compRPCResult(event:ResultEvent):void{    comp.dp = event.result.salesData.dailySales; } 


This function takes the ResultEvent event passed in and assigns it to the comp component through the dp attribute.

6.

Inside the script block, add an import for the mx.rpc.events.FaultEvent class.

import mx.rpc.events.FaultEvent; 


You need this class to be able to capture errors that were made during your request for the xml files.

7.

In the script block, create a private showFault() method. This method will trace out the fault codes that occur in the HTTPService call.

private function showFault(event:FaultEvent):void{    trace(event.fault.faultCode+":"+event.fault.faultString); } 


8.

Create a private method called getdata(). It accepts no arguments and returns void.

private function getData():void{ } 


This function will be called at application startup to fetch the data for the drop-down list and the three pods. In a later lesson, this function will be called when the filter criteria changes, which will request data from the server using the values the user specifies.

9.

In the getdata() method, call the three HTTPServices through their send() methods to fetch the data.

private function getData():void{    salesRPC.send();    typeRPC.send();    compRPC.send(); } 


As you may remember from an earlier lesson, we created a single method, called getdata(), where the data is requested for the whole Dashboard Application. Because you have three different outbound requests, you will need to call them all from inside this method.

10.

Create a private method called init(). It accepts no arguments and returns void.

private function init():void{ } 


This function will hold your initialization routine for the first time the application is started.

11.

Inside the init() method, initialize the startDate DateField control to have a selectedDate of 4/1/2006 and the endDate DateField control to have a selectedDate of 5/1/2006.

private function init():void{    startDate.selectedDate = new Date(2006,3,1);    endDate.selectedDate = new Date(2006,4,1); } 


This will default the start and end date of your date filter controls. You will use these in Lesson 17, "Accessing Server-side Objects," when you start to interact with the server to get the data dynamically.

Note

The constructor for the Date object allows you to quickly build a new date by specifying values such as the Year, Month and Day. However, in Flex, months are 0 based, meaning 0 represents January and 11 represents December. Specifying 2006, 3, and 1 to the constructor means April 1, 2006.

12.

Move the HTTPService call responsible for getting the categories from the creationComplete event of the <mx:Application> tag to inside the init() method.

private function init():void{    startDate.selectedDate = new Date(2006,3,1);    endDate.selectedDate = new Date(2006,4,1);    catRPC.send(); } 


13.

Make a call to the getdata() method inside the init() method.

private function init():void{    startDate.selectedDate = new Date(2006,3,1);    endDate.selectedDate = new Date(2006,4,1);    catRPC.send();    getData(); } 


This will retrieve the data for the Dashboardto be made available at the startup of the application.

14.

In the creationComplete event of the <mx:Application> tag, call the init() method.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   layout="horizontal"   creationComplete="init();"   xmlns:v="views.dashboard.*"> 


This sets the defaults for the filter controls and then initially loads the Dashboard data after the whole application is loaded.

15.

Save and run your Dashboard.mxml and see the data populated in the pods on the dashboard.

Note

Sorting the data is part of the default behavior of the DataGrid. The data came back from the XML file already presorted, so there was no need to sort the data upon receipt. Lesson 17 will demonstrate how to pragmatically sort the data of a DataGrid.




Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net