6 Replies Latest reply on Dec 18, 2010 9:30 AM by ericzutter

    Flex 4 and external XML

    ericzutter

      I have problems to load dynamically, data from an external XML file at runtime using Flex 4 with browser Firefox. Actually I have all data hardcoded in my mxml file but I want to get it from the external XML file.

       

      I have made the following mxml file "testapp.mxml" :

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx">

      <fx:Style>
      @namespace s "library://ns.adobe.com/flex/spark";

      s|Panel {
         borderColor: black;
         cornerRadius: 16;
         borderAlpha: 1;
         headerColors: #ADC3DE, #ADC3DE;
      }
      </fx:Style>

      <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
      </s:layout>

      <s:Panel title="Search engines" width="90%">

        <s:layout>
          <s:VerticalLayout horizontalAlign="left" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
        </s:layout>

        <s:HGroup>
        <s:Button label="Google" click="navigateToURL(new URLRequest('http://www.google.fr'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
        <s:Label text="-" />
        <s:Label text="Search engine 1" />
        </s:HGroup>

        <s:HGroup>
        <s:Button label="Yahoo" click="navigateToURL(new URLRequest('http://www.yahoo.fr'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
        <s:Label text="-" />
        <s:Label text="Search engine 2" />
        </s:HGroup>

      </s:Panel>

      <s:Panel title="Webmail providers" width="90%">

        <s:layout>
          <s:VerticalLayout horizontalAlign="left" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
        </s:layout>

        <s:HGroup>
        <s:Button label="Hotmail" click="navigateToURL(new URLRequest('http://login.live.com/'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
        <s:Label text="-" />
        <s:Label text="Webmail 1" />
        </s:HGroup>

        <s:HGroup>
        <s:Button label="Yahoo mail" click="navigateToURL(new URLRequest('https://mail.yahoo.com/'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
        <s:Label text="-" />
        <s:Label text="Webmail 2" />
        </s:HGroup>

      </s:Panel>

      </s:Application>

       

       

      I want to modify the above file so that it gets dynamically at runtime all his data from the following external XML file "testdata.xml" :

       

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

      <table title="Search engines">
      <row>
      <url>http://www.google.fr</url>
      <name>Google</name>
      <desc>Search engine 1</desc>
      </row>
      <row>
      <url>http://www.yahoo.fr</url>
      <name>Yahoo</name>
      <desc>Search engine 2</desc>
      </row>
      </table>

      <table title="Webmail providers">
      <row>
      <url>http://login.live.com/</url>
      <name>Hotmail</name>
      <desc>Webmail 1</desc>
      </row>
      <row>
      <url>https://mail.yahoo.com/</url>
      <name>Yahoo mail</name>
      <desc>Webmail 2</desc>
      </row>
      </table>

      </page>

       

       

      Can anybody tell me how to do this in Flex 4 and using Firefox as browser ?

       

      Can you also tell me how to put url in browser-statusbar when hover over button ?

        • 1. Re: Flex 4 and external XML
          JeffreyGong

           

           

          Hi ericzutter,

           

          You may load xmlData like

           

          [

          Bindable]

           

          private var xmlData:XML;

           

          private var loader:URLLoader;

           

           

           

           

          private function loadMenu():void {

          loader =

          new URLLoader();

          loader.addEventListener(Event.COMPLETE, onXMLLoaded);

          loader.load(

          new URLRequest("testdata.xml"));

          }

           

           

           

          private function onXMLLoaded(event:Event):void {

           

          try {

              xmlData =

          new XML(loader.data);

          }

          catch(e:Error) {

               Alert.show(

          "e = "+e,"Error:")

          }

          }

           

          The above will work for Firefox as well as IE.

           

          As for the second question,  ExternalInterface JavaScript will help.

           

          Jeffrey

           

          • 2. Re: Flex 4 and external XML
            ericzutter Level 1

            Thanks for your quick answer.

             

            I have included your code into my MXML file. When compiling with Flex 4 SDK (=mxmlc.exe), I receive error "Error: Access of undefined property Alert.". Why do I receive an error on the "Alert.show" line ? What have I done wrong ?

             

            Your code only opens an XML file. How do I replace the hardcoded data in my MXML file by XML data ?

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx">

            <fx:Style>
            @namespace s "library://ns.adobe.com/flex/spark";

            s|Panel {
               borderColor: black;
               cornerRadius: 16;
               borderAlpha: 1;
               headerColors: #ADC3DE, #ADC3DE;
            }
            </fx:Style>

            <fx:Script>
            [Bindable]
            private var xmlData:XML;
            private var loader:URLLoader;

            private function loadMenu():void
            {
              loader = new URLLoader();
              loader.addEventListener(Event.COMPLETE, onXMLLoaded);
              loader.load(new URLRequest("testdata.xml"));
            }


            private function onXMLLoaded(event:Event):void
            {
              try
              {
                xmlData = new XML(loader.data);
              }
              catch(e:Error)
              {
                Alert.show("e = "+e,"Error:")
              }

            }
            </fx:Script>

            <s:layout>
              <s:VerticalLayout horizontalAlign="center" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
            </s:layout>

            <s:Panel title="Search engines" width="90%">

              <s:layout>
                <s:VerticalLayout horizontalAlign="left" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
              </s:layout>

              <s:HGroup>
              <s:Button label="Google" click="navigateToURL(new URLRequest('http://www.google.fr'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
              <s:Label text="-" />
              <s:Label text="Search engine 1" />
              </s:HGroup>

              <s:HGroup>
              <s:Button label="Yahoo" click="navigateToURL(new URLRequest('http://www.yahoo.fr'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
              <s:Label text="-" />
              <s:Label text="Search engine 2" />
              </s:HGroup>

            </s:Panel>

            <s:Panel title="Webmail providers" width="90%">

              <s:layout>
                <s:VerticalLayout horizontalAlign="left" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
              </s:layout>

              <s:HGroup>
              <s:Button label="Hotmail" click="navigateToURL(new URLRequest('http://login.live.com/'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
              <s:Label text="-" />
              <s:Label text="Webmail 1" />
              </s:HGroup>

              <s:HGroup>
              <s:Button label="Yahoo mail" click="navigateToURL(new URLRequest('https://mail.yahoo.com/'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
              <s:Label text="-" />
              <s:Label text="Webmail 2" />
              </s:HGroup>

            </s:Panel>

            </s:Application>
            • 3. Re: Flex 4 and external XML
              JeffreyGong Level 1

              Hi ericzutter,

               

              If you don't want to catch a possiable error, you may comment the line like

               

              // Alert.show("e = "+e,"Error:")

               

              Or you may add import mx.controls.Alert;

               

              You may use the xmlData in your code like

               

              <s:HGroup>
                <s:Button label="Google" click="navigateToURL({xmlData.table[0].row[0].url}'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
                <s:Label text="-" />
                <s:Label text="{xmlData.table[0].row[0].desc}" />
                </s:HGroup>

               

              Hope you are luck,

               

              Jeffrey

              • 4. Re: Flex 4 and external XML
                ericzutter Level 1

                I have put your code in my MXML file, but when executing the SWF file, your code displays no XML data. What have I done wrong ?

                 

                How can I loop through the whole XML file by putting a loop at XML-element "table" and XML-element "row" ?

                 

                See here my MXML file that I have modified with your code :

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                               xmlns:s="library://ns.adobe.com/flex/spark"
                               xmlns:mx="library://ns.adobe.com/flex/mx">
                
                <fx:Style>
                @namespace s "library://ns.adobe.com/flex/spark";
                
                s|Panel {
                   borderColor: black;
                   cornerRadius: 16;
                   borderAlpha: 1;
                   headerColors: #ADC3DE, #ADC3DE;
                }
                </fx:Style>
                
                <fx:Script>
                import mx.controls.Alert;
                
                [Bindable]
                private var xmlData:XML;
                private var loader:URLLoader;
                
                private function loadMenu():void
                {
                  loader = new URLLoader();
                  loader.addEventListener(Event.COMPLETE, onXMLLoaded);
                  loader.load(new URLRequest("testdata.xml"));
                }
                
                private function onXMLLoaded(event:Event):void
                {
                  try
                  {
                    xmlData = new XML(loader.data);
                  }
                  catch(e:Error)
                  {
                    Alert.show("e = "+e,"Error:")
                  }
                }
                </fx:Script>
                
                <s:layout>
                  <s:VerticalLayout horizontalAlign="center" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
                </s:layout>
                
                <s:Panel title="Search engines" width="90%">
                
                  <s:layout>
                    <s:VerticalLayout horizontalAlign="left" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
                  </s:layout>
                
                  <s:HGroup>
                  <s:Button label="{xmlData.table[0].row[0].name}" click="navigateToURL(new URLRequest('{xmlData.table[0].row[0].url}'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
                  <s:Label text="-" />
                  <s:Label text="{xmlData.table[0].row[0].desc}" />
                  </s:HGroup>
                
                  <s:HGroup>
                  <s:Button label="Google" click="navigateToURL(new URLRequest('http://www.google.fr'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
                  <s:Label text="-" />
                  <s:Label text="Search engine 1" />
                  </s:HGroup>
                
                  <s:HGroup>
                  <s:Button label="Yahoo" click="navigateToURL(new URLRequest('http://www.yahoo.fr'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
                  <s:Label text="-" />
                  <s:Label text="Search engine 2" />
                  </s:HGroup>
                
                </s:Panel>
                
                <s:Panel title="Webmail providers" width="90%">
                
                  <s:layout>
                    <s:VerticalLayout horizontalAlign="left" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
                  </s:layout>
                
                  <s:HGroup>
                  <s:Button label="Hotmail" click="navigateToURL(new URLRequest('http://login.live.com/'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
                  <s:Label text="-" />
                  <s:Label text="Webmail 1" />
                  </s:HGroup>
                
                  <s:HGroup>
                  <s:Button label="Yahoo mail" click="navigateToURL(new URLRequest('https://mail.yahoo.com/'), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" />
                  <s:Label text="-" />
                  <s:Label text="Webmail 2" />
                  </s:HGroup>
                
                </s:Panel>
                
                </s:Application>
                
                • 5. Re: Flex 4 and external XML
                  JeffreyGong Level 1

                  Hi ericzutter,

                   

                  You may need to learn E4X before using it in Flex.  One of such simple links is

                   

                  http://ajaxandbeyond.blogspot.com/2007/09/working-with-data-in-flex-e4x.html

                   

                   

                  Good luck!

                   

                  Jeffrey

                  • 6. Re: Flex 4 and external XML
                    ericzutter Level 1

                    I found the reason why the XML data was not displayed.

                    In your example you created the function loadMenu(), but you did not execute the function loadMenu().

                     

                    I changed your code by the following (to be able to execute loadMenu()) :

                     

                      <s:HGroup>
                      <s:Button label="{xmlData.table[0].row[0].name}" click="navigateToURL(new URLRequest(xmlData.table[0].row[0].url), '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" preinitialize="loadMenu()"/>
                      <s:Label text="-" />
                      <s:Label text="{xmlData.table[0].row[0].desc}" />
                      </s:HGroup>

                     

                    I don't know if this is the best way to execute your function loadMenu().

                     

                    My following problem is how to create a loop for the XML elements table and row. I tried the following but it did not work :

                     

                    <fx:Script>

                    for (row_index = 0; row_index < xmlData.table[0].row.length; row_index++)

                    {

                    </fx:Script>

                      <s:HGroup>
                       <s:Button label="{xmlData.table[0].row[0].name}"  click="navigateToURL(new URLRequest(xmlData.table[0].row[row_index].url),  '_self')" horizontalCenter="0" verticalCenter="0" buttonMode="true" preinitialize="loadMenu()"/>
                       <s:Label text="-" />
                       <s:Label text="{xmlData.table[0].row[0].desc}" />
                       </s:HGroup>

                    <fx:Script>

                    }

                    </fx:Script>

                     

                    What is wrong with the above for-loop ?

                     

                    Exist there a FLEX equivalent of document.write from Javascript ?

                    So that I can do the following :

                    <fx:Script>for (...) { document.write('<s:Button ... />'); }</fx:Script>