1 Reply Latest reply on Jun 17, 2010 2:24 AM by Unni Gopinathan S

    interaction with listcontrol


      Hi there

      I have setup a simple xml data into a listcontrol comp. I wonder how to bind it to textarea so that when an item is selected in the comp. the textarea gets text data from the same xml file. Appreciate you time and help.

      Thank you


        • 1. Re: interaction with listcontrol
          Unni Gopinathan S Adobe Employee



          I have an sample xml file with content






















          In the design view of application add a List Control and TextArea.


          List will display the text from the "id" elements in the XML and when user selects any id from the list corresponding text from the "content" element will be displayed in the textarea.


          Create a new Data/Service ( Data/Services view in Flash Builder )using connect to data and assign that data to the list.


          (Drag the corresponding API to the list and set the property "labelField" to the tag for binding)


          Implement the change event handler which will get fired when a selection change happens in the list.


          In the implementation get the selected item in list and get the corresponding element to be displayed in


          the textarea and assign to the text property of the text area.



          Following is the mxml for the sample application


          <?xml version="1.0" encoding="utf-8"?>
               <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:test="services.test.*">
                      import mx.controls.Alert;
                      import mx.events.FlexEvent;
                      import spark.events.IndexChangeEvent;
                      protected function list2_creationCompleteHandler(event:FlexEvent):void
                          getDataResult.token = test.getData();


                      protected function list2_changeHandler(event:IndexChangeEvent):void
                          contentDisplay.text = list2.selectedItem.content;





                  <s:CallResponder id="getDataResult"/>
                  <test:Test id="test" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->


              <mx:Form >

                    <s:List x="76" y="34" width="112" height="168" id="list2" creationComplete="list2_creationCompleteHandler(event)"

                                                                                labelField="id" change="list2_changeHandler(event)">
                           <s:AsyncListView list="{getDataResult.lastResult}"/>
                  <s:TextArea x="73" y="222" id="contentDisplay"/>




          Screen Shot:




          Please let me know if this sample helps to solve your problem.