Part II: Exchanging Data Tutorial Application Overview

rate-5701671-19605 User rating? 1 2 3 4 5 Learn more Flex mx:HTTPService Tricks Using HTTPService tag to send/receive variables to a server-side script Flex data services Show / Hide hints for:

16. Switch to Source mode.

17. Your code appears as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">


	<mx:Label x="54" y="25" text="Zip Code"/>
	<mx:Label x="65" y="51" text="Weight"/>
	<mx:TextInput x="128" y="23" id="zipcode"/>
	<mx:TextInput x="128" y="49" id="weight_lb"/>
	<mx:Button x="128" y="79" label="Get Shipping Options"/>
	<mx:TextArea x="339" y="24" width="198" height="77" id="shippingOptions"/>

</mx:Application>

18. Click the Run button to compile and run the application.

The form does not submit yet, but your form appears as it did in Design mode.

Format the application display

19. In the first <mx:Application> tag, add the backgroundColor attribute with a value of white (#FFFFFF) and set the backgroundImage attribute to the entry string (otherwise you may get a gradient).

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    backgroundColor="#FFFFFF"
    backgroundImage="" >

20. Run the application; the background color of the application is now white.

Create the HTTPService object

1. After the first <mx:Application> tag but before the form display, create an <mx:HTTPService> tag code block.

2. Add an id attribute with a value of plainRPC to the opening <mx:HTTPService> tag.

3. Add a url attribute with a value of http://www.tipsandapps.com/quickstart/PlainHttpService.aspx.

Alternatively, you can use the following ColdFusion, PHP, or Java URLs:
http://www.coldfusionportal.org/flex3cf/PlainHTTPService.cfm
http://examples.adobe.com/flex3/exchangingdata/text/plainHttpService.php
http://examples.adobe.com/flex3app/flex3samples/exchangingdata/text/PlainHttpService.jsp

4. Define a result event handler named handlePlain() and a fault event handler named handleFault().

5. Ensurethat you pass the event object to each of the handlers.

6. Set the resultFormat attribute to text. Your code appears as follows:

<mx:HTTPService id="plainRPC"
	    url="http://www.tipsandapps.com/quickstart/PlainHttpService.aspx"
		result="handlePlain(event);"
		fault="handleFault(event);"
		resultFormat="text">
	</mx:HTTPService>

7. Between the <mx:HTTPService> tags, create an <mx:request> tag code block.

8. Pass the zipcode and pounds XML values bound to the zipcode.text and weight_lb.text TextInput component values, respectively. Your code appears as follows:

<mx:HTTPService id="plainRPC"
	    url="http://www.tipsandapps.com/quickstart/PlainHttpService.aspx"
		result="handlePlain(event);"
		fault="handleFault(event);"
		resultFormat="text">
	    <mx:request xmlns="">
	        <zipcode>{zipcode.text}</zipcode>
	        <pounds>{weight_lb.text}</pounds>
	    </mx:request>
	</mx:HTTPService>

Create the result and fault event handlers

9. Above the HTTPService component, create an <mx:Script> tag code block.

<mx:Script>
<![CDATA[

]]>
</mx:Script>

10. In the <mx:Script> tag, import the mx.rpc.events.ResultEvent, mx.rpc.events.FaultEvent and mx.controls.Alert classes.

<mx:Script>
<![CDATA[
	import mx.rpc.events.ResultEvent;
	import mx.rpc.events.FaultEvent;
	import mx.controls.Alert;
]]>
</mx:Script>

11. Create a private event handler named handlePlain() that accepts a ResultEvent argument named event. Make sure the return type is void.

12. Create a private event handler named handleFault() that accepts a FaultEvent argument named event. Make sure the return type is void. Your code appears as follows:

<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.controls.Alert;

	        private function handlePlain(event:ResultEvent):void
	        {

	        }

	        private function handleFault(event:FaultEvent):void
	        {

	        }
		]]>
	</mx:Script>

13. In the result handler, use the event.result.toString() method to convert the results to a string data type and then assign it to the htmlText property of the shippingOptions Text control.

14. In the fault handler, populate the Alert dialog box using the show() method and set the word Error for the header and the event.fault.faultString value for the body text. Your code appears as follows:

<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.controls.Alert;

	        public function handlePlain(event:ResultEvent):void
	        {
	            shippingOptions.htmlText = event.result.toString();
	        }

	        public function handleFault(event:FaultEvent):void
	        {
	           Alert.show(event.fault.faultString, "Error");
	        }
		]]>
	</mx:Script>

Create the submit button click event handler

15. Using the Outline view, locate the Button component.

16. To the button, add the click attribute with a value of plainRPC.send(); to tell the plainRPC HTTPService object to send the request.

<mx:Button x="128" y="79" label="Get Shipping Options" click="plainRPC.send();"/>

17. Save your file and run the application.

18. Enter a Zip Code and a weight. Your results appear similar to the following image: