6 Replies Latest reply on Jul 26, 2006 11:15 PM by keiron77

    importing xml text and menu

    keiron77
      I am just trying to get my head around Flex by building a simple application.

      What I have at the moment is index.mxml that has an ToggleButtonBar in it and a ViewStack that lists the three menu options in the ToggleButtonBar. Clicking each of the buttons in the ToggleButtonBar opens a new mxml either PageOne.mxml, PageTwo.mxml or PageThree.mxml (by wiping up and down). This all works and I have managed to style and position the elements as I want them and I have activated the history on the 'pages'.

      What I would like to be able to do is populate the ViewStack data from an external xml file (e.g. menu.xml) . I would also like to populate the sub-mxml files with data from another xml file (e.g. content.xml) where this would hold the panel's title and a paragraph of text into something like a textarea.

      I have managed to populate xml data into a datagrid on another test application, but I can't see how this can work with panels.

      Hopefully once I have grasped the basics on how Flex applications import data I can teach myself how to progress things to do other things.

      Thanks in advance.
        • 1. Re: importing xml text and menu
          peterent Level 2
          Flex has the ability to populate a DataGrid and other List-based components from XML data because they use a data provider. The ViewStack and Panels do not use a data provider.

          To do what you want you will have to dynamically generate the Flex components using ActionScript. Once you are notified that the XML has been loaded, you can traverse the XML document and create the components. Read up on the addChild() method for details.
          • 2. Re: importing xml text and menu
            keiron77 Level 1
            Thanks a lot, that has helped. Ok, so I point to the xml file, then for each element in the xml file create ViewStack entry and add that to the ToggleButtonBar and then also create a panel for each with the data inserted from the xml file. I'll have a play with that and see how I get on.

            I do have one other question that I forgot to mention:

            If in myViewStack I have three elements:
            <PageOne...... />
            <PageTwo...... />
            <PageThree...... />
            By default PageOne will be the first to display. Is it possible to make PageTwo display first?
            • 3. Re: importing xml text and menu
              peterent Level 2
              You can do selectedIndex="1" on the ViewStack tag to make it show the second page.

              One more thing: be sure to use the e4x support in Flex 2 as it is easier to work with than the XML document API.
              • 4. importing xml text and menu
                keiron77 Level 1
                I tried writing a tiny bit of xml - something like this:

                <xml id="test">
                <root>
                <menuitem>hello</menuitem>
                </root>
                </xml>

                Then a script that creates a new button (which works). But I have tried pulling in the data from the xml file to add to the button like this:

                myButton.label = test.root.menuitem;

                But it doesn't work. If I put some text in quotes it does display. The problem is the fact that I am not pulling in the data from the xml.

                Although this isn't the code I am using, how would this snippet of Adobe's code be adapated to add text from an xml document to poulate the button's label?

                <?xml version="1.0"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="left">

                <mx:Script>
                <![CDATA[
                import mx.controls.Button;

                public function addButton():void {
                var myButton:Button = new Button();
                myButton.label = "New Button";
                myHBox.addChild(myButton);
                }
                ]]>
                </mx:Script>

                <mx:HBox id="myHBox">
                <mx:Button label="Add Button" click="addButton();"/>
                </mx:HBox>
                </mx:Application>
                • 5. Re: importing xml text and menu
                  jtan Level 1
                  That piece of Adobe code would look like this:

                  <?xml version="1.0"?>
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="left">

                  <mx:Script>
                  <![CDATA[
                  import mx.controls.Button;

                  public function addButton():void {
                  var myButton:Button = new Button();
                  myButton.label = test.menuitem;
                  myHBox.addChild(myButton);
                  }
                  ]]>
                  </mx:Script>
                  <mx:XML format="e4x" id="test">
                  <root>
                  <menuitem>hello</menuitem>
                  </root>
                  </mx:XML>
                  <mx:HBox id="myHBox">
                  <mx:Button label="Add Button" click="addButton();"/>
                  </mx:HBox>
                  </mx:Application>

                  I hope this helps.
                  Joan Lafferty
                  Flex SDK QA
                  • 6. Re: importing xml text and menu
                    keiron77 Level 1
                    Cool.Thanks a lot, that's all I needed to get started! I am sure I tried that, maybe i missed someting!