interaction with listcontrol

[Kristtee]

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

Krish

[Unni_Gopinathan_S]

Hi,

I have an sample xml file with content

<test>

    <test1>

        <id>h</id>

        <content>Hello</content>

    </test1>

    <test1>

        <id>w</id>

        <content>World</content>

    </test1>

</test>

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:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:test="services.test.*">
   
   
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.FlexEvent;
           
            import spark.events.IndexChangeEvent;
            [Bindable]
           
            protected function list2_creationCompleteHandler(event:FlexEvent):void
            {
                getDataResult.token = test.getData();
            }
           

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

        ]]>

    </fx:Script>

    <fx:Declarations>

        <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 -->

    </fx:Declarations>

    <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:List>
        <s:TextArea x="73" y="222" id="contentDisplay"/>

    </mx:Form>

</s:WindowedApplication>

Screen Shot:

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

Unni