4 Replies Latest reply on Oct 6, 2006 3:31 PM by Whitetimer

    How do i write a change event for a combobox

    Whitetimer Level 1
      Hi All ...

      Ok this is what i'd like to do and being new to actionscript, i dont know what to do...

      I have a component with a combobox and a text box. I want to populate the combobox with an external XML file and the selected item description showing in the text box. Then whenever the the user clicks away and comes back to that page, the combobox is at the first index. And how do i writ a change handler & listener..?

      So how would i write all that in actionscript..?

      Can someone help and at least i'd have an idea to work from....

      Many thanks

      Jools
        • 1. Re: How do i write a change event for a combobox
          peterent Level 2
          Worry about the external XML file later; for now just code it into the MXML file:

          <mx:XML id="sampleData">
          <root>
          <node title="Some Book Title" description="This is a description of the book" />
          <node title="Another Book I Read" description="Here's my thoughts on this book" />
          ...
          </root>
          </mx:XML>

          <mx:ComboBox id="bookBox" dataProvider="{sampleData.node}"
          selectedIndex="1"
          labelField="@title"
          change="showDescription(event)" />

          <mx:TextArea id="description" ... />

          Setting selectedIndex to 1 will make the ComboBox show that entry.

          The change event handler could be:

          private function showDescription( event:flash.events.Event ) : void
          {
          description = XML(event.target.selectedItem).@description;
          }
          • 2. Re: How do i write a change event for a combobox
            Whitetimer Level 1
            Hi Peter ..

            I'm even more confused now than i was before.... Could you expand further as AS is something i'd like to better understand.

            Many thanks

            Jools
            • 3. Re: How do i write a change event for a combobox
              peterent Level 2
              I'd be more than happy too, if you could give me some direction. For example:

              <mx:TextArea id="description" /> is defines the place you would like your description to appear when something is picked from the ComboBox. The trick is to get the value from the ComboBox into this text field.

              I guessed that your data would be something like this: <node title="Some Book Title" description="something here" /> so that there are pairs of titles and descriptions. You'd want to see the title of the book in the ComboBox and when selected, have its description appear in the TextArea. So far so good?

              If the XML data is named sampleData and you want that associated with the ComboBox, then
              <mx:ComboBox dataProvider="{sampleData.node}" selects all of the <node> elements from the XML and makes an array-like structure out of them (called XMLList). The ComboBox also has to be told what of those items to display. There's title or description, so adding labelField="@title" tells the ComboBox that for any given element of the dataProvider to use the title attribute (the @ indicates an attribute of an XML element).

              You said that you wanted the first index to be displayed. Since all arrays begin with index 0 and that's the default index to display, you have to tell the ComboBox you want to see index 1, so you add selectedIndex="1" to say that's the index you are selecting.

              Now you have to tie the action of picking an item from the ComboBox to seeing the description in the TextArea. That action is the change event of the ComboBox. You add change="showDescription(event)" to the ComboBox tag.

              change is the name of the event. What follows in the quotes is the ActionScript to execute when that event occurs. Writing "showDescription(event)" means to call the showDescription function and pass it the change event. Sometimes it isn't necessary to pass an event, but for the sake of completeness, I'm doing that here.

              function showDescription( event:flash.events.Event ) : void defines the function with the event parameter of type flash.events.Event. The Flex 2 documentation for the ComboBox change event tells you what data type to use.

              Inside the function you see event.target - that's actually the ComboBox, a more generic way to refer to it. The "target" of the event is the object which sent out the event.

              The ComboBox has a property, selectedItem, which is the element of the dataProvider the user picked. In this example that's <node title="something" description="something" /> an XML element node. As with title, the description is referenced as @description, but you need to say that event.target.selectedItem is of type XML so you cast it to the type you want:

              XML(event.target.selectedItem) says that object is an XML-type object. Adding .@description gets the description attribute.

              Finally, description (the TextArea) .text (its text property) = (is assigned) XML(event.target.selectedItem).@description transfers the description attribute to the description TextArea.

              If you need more clarification just post a reply.
              • 4. Re: How do i write a change event for a combobox
                Whitetimer Level 1
                Peter ..
                Many thanks for that, and i think i understand a little better. But what i'd like to do is to place the call to an external XML file, the loading the ComboBox with the name node and the textbox with a description node. I also want to have a change event and also when the user returns to the page, the name is the first one again. All this in a function, thats the bit i cant figure out.

                I have it working in a basic way ... this is may code, bt want to tidy it up better .....

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                width="760" height="500"
                label="New Earth Papers"
                xmlns:childviews="views.childviews.*"
                initialize="myNetPapers.send()">

                <mx:Script>
                <![CDATA[

                import mx.rpc.events.ResultEvent;

                [Bindable]
                private var xmlNetPapers:XMLList;


                private function netPapersResultHandler(event:ResultEvent):void {
                xmlNetPapers = event.result.paper as XMLList;
                }

                ]]>
                </mx:Script>

                <mx:HTTPService id="myNetPapers" url="xml/newearthpapers.xml" result="netPapersResultHandler(event)" resultFormat="e4x"/>


                <mx:HBox width="700" height="400" borderStyle="none" horizontalCenter="0" verticalCenter="0" verticalAlign="top" horizontalAlign="center">
                <mx:ComboBox id="cbxNetPapers"
                dataProvider="{xmlNetPapers}"
                labelField="name"
                width="150" height="20"
                selectedIndex="1"
                cornerRadius="0"
                color="#000099"
                borderColor="#ffffff"/>

                <mx:Spacer width="20"/>

                <mx:Text id="txNetPapers"
                x="10" y="25"
                width="500" height="380"
                text="{cbxNetPapers.selectedItem.description}" color="#000099" fontSize="12"/>

                </mx:HBox>

                </mx:Canvas>


                Many thanks

                Jools