Log In  
  Getting Started  
Version 61 by Randy Nielsen
on May 07, 2008 10:57.

<< Changes from 60 to 61
compared with
Current by Randy Nielsen
on May 28, 2009 13:50.
(show comment)
 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 2 changes. View first change.

 {section}
 {column:width=80%}
  
 h2. Part II: Exchanging Data Tutorial
  
 h3. Application Overview
  
 !dataRetrieval.png!
 {column}
 {column}
 {adbe-prev:http://learn.adobe.com/wiki/display/Flex/2c.+Code+Anatomy}
 {adbe-next:http://learn.adobe.com/wiki/display/Flex/Part+III.+Top+things+you+need+to+know}
 {rate:title=User rating|theme=dynamic|key=focal|display=default}
 {adbe-pod}
  
 h6. Learn more
  
 * {adbe-popup:http://www.powersdk.com/ted/2005/07/flex-mxhttpservice-tricks.php}Flex mx:HTTPService Tricks{adbe-popup}
 * {adbe-popup:http://blog.flexexamples.com/2007/08/16/using-httpservice-tag-to-sendreceive-variables-to-a-server-side-script/}Using HTTPService tag to send/receive variables to a server-side script{adbe-popup}
 * {adbe-popup:http://livedocs.adobe.com/labs/flex3/html/data_1.html}Flex data services{adbe-popup}
 {adbe-pod}
  
 {adbe-showhide}
 {column}
 {section}
 {section}
 {column:width=80%}
  
 h2. Use Design view to lay out the user interface
  
 1. Create an application file named *PlainText.mxml*.
  
 2. Switch to the *Design mode*.
  
 !swtichToDesignView.jpg!
  
 3. From the *Components* view, drag a *Label* component from the *Controls* folders to the upper-left corner of the design area. Keep the default values of the component.
  
 !DesignView_Label.jpg!
  
 4. Double-click the label and rename it *Zip Code*.
  
 !DesignView_Label_ZipCode.jpg!
  
 5. Drag a second *Label* component below the first, and rename it *Weight*.
  
 6. Use the blue guide lines to reposition the *Weight* label so that its right edge aligns with the right edge of the Zip Code label.
  
 !DesignView_Label2_Weight.jpg!
  
 7. Add two *TextInput* components to the right of each *Label* component. Use the blue guide lines to help you position the elements.
  
 !DesignView_TextInput.jpg!
  
 8. Select the first *TextInput* component and then locate the *Flex Properties* view.
  
 9. Set the *ID* property of the *TextInput* component to *zipcode*.
  
 !DesignView_FlexProperties_TextInput_ID.jpg!
  
 10. Select the second *TextInput* component. Set the&nbsp;value of the& *ID* property to *weight_lb*.
  
 11. Add a *Button* component below the *TextField* components.
  
 !DesignView_Button.jpg!
  
 12. Double-click the button and&nbsp;change its label to *Get Shipping Options*.
  
 13. Drag a *TextArea* component to the right of the form so that your display appears similar to the following image. Resize it as necessary.
  
 !DesignView_Complete.jpg!
  
 14. Select the *TextArea* component and then locate the *Flex Properties* view.
  
 15. Set the *ID* property of the TextArea component to *shippingOptions*.
  
 !DesignView_FlexProperties_TextInput_ID.jpg!
 {column}
 {column}
 {adbe-pod}
  
 h6. LEARN MORE
  
 * See the [3a. Working with Data] module for more about working with data and connecting to databases.
 * For more information on how to retrieve data, see the {adbe-popup:http://www.adobe.com/devnet/flex/articles/progflex/programming_flex_ch16.pdf}Remote Data Communication{adbe-popup} chapter from O'Reilly's Programming Flex 2.
 * For more detailed information on using HTTPService, Web Services and RemoteObjects, see {adbe-popup:http://livedocs.adobe.com/flex/3/html/data_access_1.html}Accessing Server-Side Data with Flex
 {adbe-popup} in LiveDocs.
  
 {adbe-cf}
 h6. ColdFusion
  
 * For more information, see the {adbe-popup:http://www.adobe.com/devnet/flex/flex_cf.html}Flex and ColdFusion{adbe-popup} area of the ColdFusion Developer Center.
 * Download a {adbe-popup:http://learn.adobe.com/wiki/download/attachments/5701770/Flex3GSE_ExchangingData_CF.zip}ZIP file{adbe-popup} that contains the completed application and includes the related CFML files.
 {adbe-cf}
 {adbe-asp}
 h6. ASP
  
 * See {adbe-popup: http://msdn2.microsoft.com/en-us/library/aa140324(office.10).aspx}Calling XML Web Services over the Web Using the Web Service References Tool and Microsoft Access{adbe-popup}
 * And {adbe-popup:http://msdn2.microsoft.com/en-us/library/aa140268(office.10).aspx}Microsoft Office XP Web Services Toolkit{adbe-popup}.
 * You can then connect to these web services by using the Flex tags.
 * Download a {adbe-popup:http://learn.adobe.com/wiki/download/attachments/5701770/Flex3GSE_ExchangingData_ASP.zip}ZIP file{adbe-popup} that contains the completed application and includes the related ASPX and C# files (requires access to ASP.NET server)
 * To import the project into Flex Builder, select File > Import Flex Project.
 {adbe-asp}
 {adbe-java}
 h6. Java
  
 * {adbe-popup:http://www.adobe.com/products/livecycle/dataservices}Adobe LiveCycle Data Services ES{adbe-popup} provides sophisticated ways to integrate Flex clients with J2EE infrastructure, ColdFuson, and LiveCycle document and process services.
 * Download a {adbe-popup:http://learn.adobe.com/wiki/download/attachments/5701770/Flex3GSE_ExchangingData_JSP.zip}ZIP file{adbe-popup} that contains the completed application and includes the related JSP and Java files.
 * To import the project into Flex Builder, select File > Import Flex Project.
 {adbe-java}
 {adbe-php}
 h6. PHP
  
 * For information on integrating PHP and Flex using AMF to encode the data, and general information on using PFP with Flex, see
 {adbe-popup:http://www.adobe.com/devnet/flex/flex_php.html}the Adobe Flex PHP developer center{adbe-popup}
 * And {adbe-popup:http://flex.org/php}the PHP pages of flex.org.{adbe-popup}
 * Download a {adbe-popup:http://learn.adobe.com/wiki/download/attachments/5701770/Flex3GSE_ExchangingData_PHP.zip}ZIP file{adbe-popup} that contains the completed application and includes the related PHP files.
 * To import the project into Flex Builder, select File > Import Flex Project.
 {adbe-php}
 {adbe-pod}
 {column}
 {section}
 16. Switch to *Source* mode.
  
 !swtichToSourceView.jpg!
  
 17. Your code appears as follows:
 {code}
 <?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>
 {code}
 18. Click the Run button to compile and run the application.
  
 !Run_Button.jpg!
  
 The form does not submit yet, but your form appears as it did in Design mode.
  
 h2. Format the application display
  
 19. In the first {{<mx:Application>}} tag, add the&nbsp;*backgroundColor* attribute with a value of white (*\#FFFFFF*) and set the *backgroundImage* attribute to the entry string (otherwise you may get a gradient).
 {code}
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute"
  backgroundColor="#FFFFFF"
  backgroundImage="" >
 {code}
 20. Run the application; the background color of the application is now white.
  
 h2. 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:
 {code}
 <mx:HTTPService id="plainRPC"
  url="http://www.tipsandapps.com/quickstart/PlainHttpService.aspx"
   url="http://aspexamples.adobe.com/flex3/exchangingdata/PlainHttpService.aspx"
  result="handlePlain(event);"
  fault="handleFault(event);"
  resultFormat="text">
  </mx:HTTPService>
 {code}
 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:
 {code}
 <mx:HTTPService id="plainRPC"
  url="http://www.tipsandapps.com/quickstart/PlainHttpService.aspx"
   url="http://aspexamples.adobe.com/flex3/exchangingdata/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>
 {code}
  
 h2. Create the result and fault event handlers
  
 9. Above the {{HTTPService}} component, create an *<mx:Script>* tag code block.
 {code}
 <mx:Script>
 <![CDATA[
  
 ]]>
 </mx:Script>
 {code}
 10. In the {{<mx:Script>}} tag, {{import}} the {{mx.rpc.events.ResultEvent}}, {{mx.rpc.events.FaultEvent}} and {{mx.controls.Alert}} classes.
 {code}
 <mx:Script>
 <![CDATA[
  import mx.rpc.events.ResultEvent;
  import mx.rpc.events.FaultEvent;
  import mx.controls.Alert;
 ]]>
 </mx:Script>
 {code}
 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:
 {code}
 <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>
 {code}
 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:
 {code}
 <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>
 {code}
  
 h2. Create the submit button click event handler
  
 15. Using the *Outline* view, locate the {{Button}} component.
  
 !OutlineView_Button.jpg!
  
 16. To the button, add the *click* attribute with a value of *plainRPC.send();* to tell the *plainRPC* {{HTTPService}} object to send the request.
 {code}
 <mx:Button x="128" y="79" label="Get Shipping Options" click="plainRPC.send();"/>
 {code}
 17. Save your file and run the application.
  
 18.&nbsp;Enter a Zip Code and a weight. Your results appear similar to the following image:
  
 !WorkingCode.jpg!
  
 {adbe-prev:http://learn.adobe.com/wiki/display/Flex/2c.+Code+Anatomy}
 {adbe-next:http://learn.adobe.com/wiki/display/Flex/Part+III.+Top+things+you+need+to+know}
Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators