Retrieving XML Data with HTTPService

In the last lesson, you embedded XML in a SWF file by specifying the source attribute of the <mx:Model> tag and pointing to an external XML file. This method can be a bad practice because the XML is compiled into the SWF file, increasing the file size. The XML is also not readily updateable; you would have to recompile the SWF every time the data changed. This is not practical for data that will change or for large datasets. In real life, you will rarely embed XML data. It is a much better practice to load the XML at run time using the HTTPService class. When you use the HTTPService class to load the XML dynamically, there will be a small lag as the data is retrieved and loaded because the SWF is actually making an HTTP request using either the GET or POST method.

In this lesson, you will harness the power of XML to connect the e-commerce, Dashboard, and DataEntry applications to XML data using the HTTPService class. This class enables you to make HTTP calls, using GET or POST, at run time directly from a SWF file. You can make asynchronous requests to remote HTTPServices that process the requests and return the data results to the Flex application. The complex data structures can be returned in a number of formats, but in this lesson you will use either an ActionScript XML object or an ActionScript ArrayCollection. You will also use data provider controls that are specifically designed to display this data.

A client-side request/response component, such as HTTPService, can be created in either MXML or ActionScript, and will make an asynchronous call to the URL that you specify; this is one way to access data in a rich Internet application (RIA). The HTTPService object will access either static or dynamically created XML through a URL. This dynamically created XML can be from ColdFusion, .NET, Java, PHP, or any type of server-side technology. After the HTTPService object has executed, the results of the call are sent back to the Flex client and stored in a client-side ActionScript object. You can specify the format of the object using the resultFormat property.

When you call the HTTPService object's send() method, it makes an HTTP or HTTPS, GET or POST request to the specified URL, and an HTTP response is returned. When the last byte of data has been received by the client, a result event is broadcast, and the data is accessible. This is powerful because you can manipulate the data before you start using it. The results of the call are stored in the lastResult property of the HTTPService object and in the result property of the event object created from the ResultEvent class. If you do not specify a resultFormat, Flex will automatically parse the XML data to represent appropriate base ActionScript types.

Using ArrayCollections

By default, complex data structures are returned in an ArrayCollection. Arrays are still very useful in ActionScript, especially for managing large amounts of data. However, collections like the ArrayCollection are a much more robust method of working with data. Arrays do not work well for displaying data visually because they lack the functionality that enables them to work correctly with data bindings. You have worked with data binding in earlier lessons to link an underlying data structure to a visual control, but you have used only very simple data structures. When using complex data structures with controls, you should always use collections instead of Arrays. Collections provide operations that automatically update the visual display when the underlying data changes. They also provide operations that include the retrieval, insertion and deletion of objects, as well as sorting and filtering.

For an example of that functionality, consider the following XML, and assume it was retrieved by an HTTPService object with an id of serviceid.

<?xml version="1.0" encoding="utf-8"?> <allUnits>    <unit>       <unitName>Bunch</unitName>       <unitID>4</unitID>    </unit>    <unit>       <unitName>Dozen</unitName>       <unitID>2</unitID>    </unit>    <unit>       <unitName>Each</unitName>       <unitID>1</unitID>    </unit> </allUnits> 

You would retrieve the "Dozen" node outside the result handler using the following code:

 serviceid.lastResult.allUnits.unit.getItemAt(1) 

In a result handler, you would retrieve the same node using the following code:

 private function unitRPCResult(event:ResultEvent):void{    trace(event.result.allUnits.unit.getItemAt(1)); } 

Using Collections as Data Providers

There are multiple controls that enable you to display complex data structures using the dataProvider property. The list-based controls, which include List, Tree, DataGrid, TileList and ComboBox, among others, use a dataProvider property.

A data provider is simply a collection of objects, much like an Array or ArrayCollection. You can think of a dataProvider property as a client-side data model and the Flex components as views of the model. You will learn more about this model-view-controller design pattern (MVC) in the next lesson. A data provider control will display a complex data structure to the end user. For example, the dataProvider property of a ComboBox control can be set to an array of objects or an ArrayCollection, which you will work with in this lesson. The labelField property of the data provider controls specify which dataProvider property should be displayed to the end user. The code in the following example would result in a ComboBox displayed with three items: Fruit, Meat and Dairy:

<mx:ComboBox  labelField ="type">    <mx:dataProvider>       <mx:ArrayCollection>          <mx:Object type="Fruit" />          <mx:Object type="Meat" />          <mx:Object type="Dairy" />       </mx:ArrayCollection>    </mx:dataProvider> </mx:ComboBox> 

The data provider controls have multiple advantages. You can populate multiple controls with the same data, you can switch out data providers at run time, and you can modify a data provider so changes in it are reflected by all controls using it.

Understanding Security Issues

Flex is subject to the security sandbox restrictions of Flash Player, which means that an application on one domain is prevented from loading data from another domain. To automatically give an application loaded from www.mysite.com access to data on www.yoursite.com, you must use a cross-domain policy file. This file, named crossdomain.xml, specifies which domains have access to resources from Flash Player and is placed on the root of the web server that the SWF file is calling. Here is an example of a cross-domain policy file that would enable any SWF to access resources available on the web server where it resides:

<cross-domain-policy> <allow-access-from domain="*"/> </cross-domain-policy> 

Tip

Browse the URL www.flexgrocer.com/crossdomain.xml to see the cross domain file that allows you to retrieve data from your data source for this book. Also check www.cnn.com/crossdomain.xml to see who CNN allows to syndicate their content using Flash Player.

If you are using Flex Data Services, a built-in proxy is included to overcome this restriction (this will be covered in later lessons). More information about the sandbox restrictions of the Flash Player is available in the tech note on the Adobe site: www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14213

Before deploying a cross-domain security file like this to a server, be sure to understand all the ramifications.