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~~^_^