Flex: 使用HTTPService获取数据

使用HTTPService获取数据

Retrieving Data via HTTPService

Flex data access components:

-Based on a service-oriented architecture

-Use remote procedure calls

-Can interact with server environments like PHP,CF,ASP.NET,Java

-Can retrieve and send data

-Can create in MXML or ActionScript

Three types of Flex data access components:

-HTTP via HTTPService component

-SOAP-compliant web services via WebService component

-AMF remoting services via RemoteObject component

Using the HTTPService Component

Retrieve data with HTTPService:

-Commonly use GET(default) or POST requests

-Can use HTTP or HTTPS protocal

Implementing HTTPService

Process for making HTTP requests:

1.Create HTTPService object

-Define an instance name

-Assign the URL for the data

-No request is made at this time

2.Make a HTTP request

3.Remote data retrieved

e.g

***********code******************

<mx:Application---->

<mx:HTTPService id="employeeService"/>

</mx:Application---->

*****************************

Setting the Data Retrieval URL

Details about the data and URL:

-Can be a relative file reference

-employees.xml

-Can also be absolute file reference

-http://www.adobe.com/employees.xml

-Can be static data

-http://www.adobe.com/employees.xml

-Can be dynamically generated XML file

-http://www.adobe.com/employees.jsp

e.g

I Created a static XML file "employee.xml"in subdirectory name data.

********************code****************************

<?xml version="1.0"?>

<employees>

    <employees>

        <firstname>Renee</firstname>

        <lastname>Diviss</lastname>

        <id>rdieviss</id>

        <email>rrdie@test.com</email>

        <department>Corportat Team</department>

    </employees>

    <employees>

        <firstname>Dean</firstname>

        <lastname>Hownson</lastname>

        <id>dhownson</id>

        <email>dHownson@test.com</email>

        <department>Corportat Team</department>

    </employees>

</employees>

*************************************************/*

I will reference the static XML data file in the HTTPService component

by adding the url property to point the file

************************code************************

<mx:HTTPService id="employeeService"

url="data/employee.xml"/>

**********************************************

Sending the Request

Send the HTTPService request:

-Use the send() method for the HTTPService instance

employeeService.send()

-Can retrieve on user event

<mx:Button label="Retrieve Data" click="employeeService.send()"/>

-Can retrieve on system event

<mx:Application... initialize="employeeService.send()"/>

e.g

In this case,I have named the event handler resultHander and passed the

event object

*********************code************************

<mx:Script>

<![CDATA[

    import mx.rpc.events.ResultEvent;

    private function resultHandler(event:ResultEvent):void

    {

    }

]]>

</mx:Script>

<mx:HTTPService id="employeeService"

url="data/employee.xml"

result="resultHandler(event)"/>

**********************************************

when I debug the code, I find the "ResultEvent"contain Array information

Understanding the ArrayCollection Class

The ArrayCollection class:

-Used more that the Array class in Flex applications

-Ability to sort and filter data

-Commonly used to store data access results

 HTTPService

 WebService

 RemoteObject

-Can be directly bound to Flex components(like the DataGrid or List

controls)

-Updated data immediately reflected in bound objects

e.g

In this case, I am creating a private named employeeData that is data

typed to the ArrayCollection class.Notice that the ArrayCollection class

was imported by Flex Builder.

I will make the variable bindable by adding the [Bindable] metadata

directive

Remember that the result event stores the employee data in the

event>result>employees>employee ArrayCollection

Inside the resultHandler()function, I am assigning the

event.result.employees.employee object to the employeeData

ArrayCollection

I can now create a DataGrid MXML control and bind the employeeData

ArrayCollection as the dataProvider

*********************code************************

<mx:Script>

<![CDATA[

    import mx.rpc.events.ResultEvent;

    import mx.collections.ArrayCollection;

    [Bindable]

    private var emloyeeData:ArrayCollection;

    private function resultHandler(event:ResultEvent):void

    {

        employeeData = event.result.employee.employee;

    }

]]>

</mx:Script>

<mx:HTTPService id="employeeService"

url="data/employee.xml"

result="resultHandler(event)"/>

<mx:DataGrid dataProvider="{employeeData}"

    width="100%" height="100%">

**********************************************

Understanding the Returned Data Format

Define the returned data fromat:

-object(default) as an ArrayCollection

-HTTPService resultFormat property

-Possible formats

 object

 xml

 flashvars

 text

 e4x

 array

Handling Fault

<mx:HTTPService id="employeeService"

    ...

    fault="faultHander(event)"

    requestTimeout="60"/>

Understanding the fault event:

-Similar to result event impliementaion

-Dispatched with problems returning data

-Dispatched when requestTimeout property is exceeded

-Specify a handler function in the fault property

Understanding the FaultEvent Properties

Fault object has the following properties (all of datatype String)

-faultDetail:Any extra details about the fault

-faultCode:A simple code describling the fault

-falutString:Text description of the fault

-message:The three properties above concatenated

 

 

 

 

 

WaKaaa, End now~~^_^