7 Replies Latest reply on Oct 2, 2006 6:26 AM by Whitetimer

    Combobox Issue

    Whitetimer Level 1
      Firstly hello to everyone .. I'm new-ish to flex & actionscript and would like help with a problem.

      I'm building a web site / application and on the main page i'm using viewstacks to navigate to all the pages. That works nicely.

      On several pages i want to a combobox pulling data from an external xml file and then depending on what the user selects, the relevant info is displayed in a textfeld on the same page.

      Can any one give me some advice. I'm using a HTTPService call.

      Many thanks in advance

      Whitetimer

      This is what i have

      <!-- MXML Component -->
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" initialize="myNetPapers.send()">

      <mx:Script>
      <![CDATA[
      import mx.rpc.events.ResultEvent;
      import mx.collections.ArrayCollection;


      [Bindable]
      private var myData:ArrayCollection;

      private function resultHandler(event:ResultEvent):void {
      myData = event.result.papers.paper;
      }

      ]]>
      </mx:Script>


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

      <mx:ComboBox id="cbxNetPapers" dataProvider="{myData}" labelField="paper"/>

      </mx:Application>

      <!-- XML File -->

      <papers>
      <paper>
      <name><name>
      <description><description>
      <paper>
      <papers>
        • 1. Re: Combobox Issue
          peterent Level 2
          You are real close. You've got the HTTPService set up and returning XML and you are storing it into myData. Almost there.

          Since you are returning XML, myData should be XMLListCollection and not ArrayCollection:

          [Bindable] private var myData:XMLListCollection;

          The result handler looks OK.

          Since <paper> looks like: <paper><name>...</name><description>...</description></paper>

          add to the ComboBox: labelField="name" to pick up the name child.

          Then you need a change event handler on the ComboBox: change="setText(event)"

          and write the setText function:

          private function setText( event:flash.events.Event ) : void
          {
          var node:XML = XML(event.currentTarget.selectedItem);
          sometextField.text = node.description;
          }
          • 2. Combobox Issue
            Whitetimer Level 1
            Hi Peterent ...

            Thanks for your help, but i'm still not quite sure.....

            This is what i have......for the actual component

            <?xml version="1.0" encoding="utf-8"?>

            <!-- Net Papers Component -->
            <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
            width="980"
            height="500"
            label="New Earth">

            <mx:Script>
            <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.rpc.events.ResultEvent;



            [Bindable]
            private var myData:XMLListCollection;

            private function resultHandler(event:ResultEvent):void {
            myData = event.result.papers.paper;
            }

            ]]>
            </mx:Script>



            <mx:HBox
            x="0" y="0"
            width="980"
            height="500"
            horizontalGap="0">


            <mx:VBox width="220" height="100%" horizontalAlign="center">
            <mx:Image x="10" y="10" width="180" height="50" source="images/NewEarth.jpg"/>
            <mx:Spacer width="200" height="10"/>
            <mx:ComboBox id="cbxNetPapers" dataProvider="{myData}" labelField="name" width="200" height="20" borderColor="#000080"/>

            </mx:VBox>

            <mx:VBox width="760" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
            <mx:Canvas width="750" height="490" x="10" y="10" cornerRadius="3" borderStyle="solid" borderColor="#000000">
            <mx:Text id="taNetPapers" x="25" y="25" width="700" height="440"/>




            </mx:Canvas>
            </mx:VBox>


            </mx:HBox>

            </mx:Canvas>

            This is a sample of the XML file ......

            <papers>
            <paper id="1">
            <name>Net Paper One</name>
            <description>
            Introductory material and info on the New Earth
            Work with creating small portals on land and sea
            How to purify oceans and lakes
            How to release Karma for yourself and Earth
            Mother Earth’s soul and spirit meditation
            Information about the new chakras
            How to make a frequency raising elixir
            Further meditations
            The Sacred Golden Movement part1
            Plus initiation
            </description>
            </paper>
            <paper id="2">
            <name>Net Paper Two</name>
            <description>
            How to make Star Points and Star Point Systems that clean the Earth
            Exercise to help you reach deeper and find your power
            How to prepare people and their psyche for the New Earth
            How to make a chakra ladder
            Meditation for the new sun
            Meditations with crystals/gemstones (also see Gems section)
            How to build your own spiritual foundation
            Journey to the New Earth meditation
            The Sacred Golden Movement part 2 for the New Earth
            Plus initiation
            </description>
            </paper>
            <papers>

            So how would i finish the data part with listing the "Name" from the XML file in the combobox and the relevant "Description" showing in the Text box ... ?

            Many thanks again

            • 3. Re: Combobox Issue
              ntsiii Level 3
              Is your ComboBox working?

              if so then you should be able to bind the text box to the combobox selectedItem. selectedItem will be an XML "paper" node so:
              <mx:Text id="taNetPapers" test="{cbxNetPapers.selectedItem.description}"

              Tracy
              • 4. Combobox Issue
                Whitetimer Level 1
                quote:

                Originally posted by: ntsiii
                Is your ComboBox working?

                if so then you should be able to bind the text box to the combobox selectedItem. selectedItem will be an XML "paper" node so:
                <mx:Text id="taNetPapers" test="{cbxNetPapers.selectedItem.description}"

                Tracy



                Hi Tracy

                No i have just tried what you suggested and also no my combobox does not work .... this is what i have in my component...

                <?xml version="1.0" encoding="utf-8"?>

                <!-- Net Papers Component -->
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                width="980"
                height="500"
                label="New Earth">


                <mx:Script>
                <![CDATA[
                import mx.collections.XMLListCollection;
                import mx.rpc.events.ResultEvent;



                [Bindable]
                private var myData:XMLListCollection;

                private function resultHandler(event:ResultEvent):void {
                myData = event.result.papers.paper;
                }

                ]]>
                </mx:Script>


                <mx:HTTPService id="myNetXml" url="../xml/newearthpapers.xml" />

                <mx:HBox
                x="0" y="0"
                width="980"
                height="500"
                horizontalGap="0">


                <mx:VBox width="220" height="100%" horizontalAlign="center">
                <mx:Image x="10" y="10" width="180" height="50" source="images/NewEarth.jpg"/>
                <mx:Spacer width="200" height="10"/>
                <mx:ComboBox id="cbxNetPapers" dataProvider="{myData}" width="200" height="20" borderColor="#c0c0c0" themeColor="#ffffff" fillColors="[#ffffff, #ffffff]" cornerRadius="0" />

                </mx:VBox>

                <mx:VBox width="760" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                <mx:Canvas width="750" height="490" x="10" y="10" cornerRadius="3" borderStyle="solid" borderColor="#000000">
                <mx:Text id="txNetPapers" x="25" y="25" width="700" height="440" text="{cbxNetPapers.selectedItem.description}"/>




                </mx:Canvas>
                </mx:VBox>


                </mx:HBox>

                </mx:Canvas>

                And my XML document is the same structure as above .... What am i doing wrong .... ?

                Many many thanks as this is bugging me and although i'm new, i hate being beaten ... lol

                Jools
                • 5. Re: Combobox Issue
                  ntsiii Level 3
                  Try this:
                  on the HTTPService tag, set resultFormat="e4x"
                  In your result handler, trace or alert the result object;
                  trace(event.result.toXMLString());

                  What do you see?

                  Tracy
                  • 6. Re: Combobox Issue
                    chris.huston.t10 Level 3
                    Try this:

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="load_xml('newearthpapers.xml')">
                    <mx:Script>
                    <![CDATA[

                    [Bindable]
                    private var xmlData:XML = new XML();

                    private var myLoader:URLLoader;

                    private function load_xml(xml_url:String):void {
                    var myXMLURL:URLRequest = new URLRequest(xml_url);
                    myLoader = new URLLoader(myXMLURL);
                    myLoader.addEventListener("complete", xmlLoaded);
                    }

                    private function xmlLoaded(evtObj:Event):void {
                    xmlData = XML(myLoader.data);
                    }

                    ]]>
                    </mx:Script>

                    <mx:HBox
                    x="0" y="0"
                    width="980"
                    height="500"
                    horizontalGap="0">


                    <mx:VBox width="220" height="100%" horizontalAlign="center">
                    <mx:Image x="10" y="10" width="180" height="50" source="images/NewEarth.jpg"/>
                    <mx:Spacer width="200" height="10"/>
                    <mx:ComboBox id="cbxNetPapers" dataProvider="{xmlData.paper}" labelField="name" width="200" height="20" borderColor="#c0c0c0" themeColor="#ffffff" fillColors="[#ffffff, #ffffff]" cornerRadius="0" />

                    </mx:VBox>

                    <mx:VBox width="760" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                    <mx:Canvas width="750" height="490" x="10" y="10" cornerRadius="3" borderStyle="solid" borderColor="#000000">
                    <mx:Text id="txNetPapers" x="25" y="25" width="700" height="440" text="{cbxNetPapers.selectedItem.description}"/>

                    </mx:Canvas>
                    </mx:VBox>

                    </mx:HBox>
                    </mx:Application>

                    Also, your sample XML file in your above post does not have a closing papers tag: </papers>
                    Make sure all your tags are closed properly.
                    You can change the xml path by changing the value passed to the load_xml function. Now it is currently in the creationComplete call for the Application tag.

                    Vygo
                    • 7. Re: Combobox Issue
                      Whitetimer Level 1
                      Many thanks to everyone for there input, but for somereason i finally got it working.......This is my code ...

                      <?xml version="1.0" encoding="utf-8"?>

                      <!-- Net Papers Component -->
                      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                      width="980"
                      height="500"
                      label="New Earth" initialize="myNetPapers.send()">


                      <mx:Script>
                      <![CDATA[
                      import mx.rpc.events.ResultEvent;
                      import mx.collections.ArrayCollection;

                      [Bindable]
                      private var xmlNetPapers:ArrayCollection;

                      private function resultHandler(event:ResultEvent):void {
                      xmlNetPapers = event.result.papers.paper
                      }

                      ]]>
                      </mx:Script>

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

                      <mx:HBox
                      x="0" y="0"
                      width="980"
                      height="500"
                      horizontalGap="0">


                      <mx:VBox width="220" height="100%" horizontalAlign="center">
                      <mx:Image x="10" y="10" width="180" height="50" source="images/NewEarth.jpg"/>
                      <mx:Spacer width="200" height="10"/>
                      <mx:ComboBox id="cbxNetPapers"
                      dataProvider="{xmlNetPapers}"
                      labelField="name"
                      width="200" height="20"
                      borderColor="#c0c0c0"
                      themeColor="#ffffff"
                      fillColors="[#ffffff, #ffffff]"
                      cornerRadius="0" />

                      </mx:VBox>

                      <mx:VBox width="760" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                      <mx:Canvas width="750" height="490" x="10" y="10" cornerRadius="3" borderStyle="solid" borderColor="#000000">
                      <mx:Text id="txNetPapers"
                      x="25" y="25"
                      width="700" height="440"
                      text="{cbxNetPapers.selectedItem.description}"/>




                      </mx:Canvas>
                      </mx:VBox>


                      </mx:HBox>

                      </mx:Canvas>

                      Many Thanks

                      Jools :)