6 Replies Latest reply on Aug 27, 2009 3:56 AM by flex2008

    Retrieving image path from xml file for images

    shaylee tan

      Hi. I have created a xml file which stores all the image path. How am i supposed to retrieve the image path from the xml file and display for my images?

       

      Currently i am hardcoding the image path for the images.Can anyone tell me how to retrieve the images from my xml file? Thanks for the help

       

       

      <mx:Image id="test" x="480" y="177" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="test.source = 'assets/torres.JPEG';setTotalClicks();"/>

      <mx:Image id="tests" x="623" y="438" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="tests.source = 'assets/torres.JPEG';setTotalClicks();"/>

       

       

      <?xml version="1.0" encoding="utf-8"?>
        <memoryCards id="Soccer players">
       
         <memory> 
          <card>
            <name>Torres</name>
            <url>assets/torres.jpg</url>
          </card>
          </memory>
          </memory>
         
          <memory>
          <card>
            <name>Lampard</name>
            <url>assets/lamps.jpg</url>
          </card>
          </memory>
         
          <memory>
          <card>
            <name>Gerrard</name>
            <url>assets/ger.jpg</url>
          </card>
          </memory>
         
          <memory>
          <card>
            <name>Arshavin</name>
            <url>assets/ars.jpg</url>
          </card>
          </memory>
         
          <memory>
          <card>
            <name>Pato</name>
            <url>assets/pat.jpg</url>
          </card>
          </memory>
         
          <memory>
          <card>
            <name>Kaka</name>
            <url>assets/kaka.jpg</url>
          </card>
          </memory>
         
         <memory>
         <card>
         <name>Vidic</name>
            <url>assets/vidic.jpg</url>
          </card>
          </memory>
         
          <memory>
          <card>
         <name>Ronaldo</name>
            <url>assets/ron.jpg</url>
          </card>
          </memory>

       

      </memoryCards>

        • 1. Re: Retrieving image path from xml file for images
          Niranjan_swain Level 1

          Hi, shaylee tan

          when u want to assign image to ur image dynamically at that time u retrive the image path from ur xml file.

          before that this image should be in ur project and the path name should be correct.

          try to use relative path it is more appropiate and work perfectily in all case.

           

          i give a example below i think this will help u.

           

           

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

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

          <mx:Script>

          <![CDATA[

          private var path:String = "assets/open.gif";

          private function init():void

          {

          myImage.source = path;

          }

          ]]>

          </mx:Script>

          <mx:Image id="myImage" x="105" y="66"  width="57" height="29"/>

          </mx:Application>

           

           

          if u get sucess then give me mark

           

          Thanks

          niranjan

          1 person found this helpful
          • 2. Re: Retrieving image path from xml file for images
            shaylee tan Level 1

            Hi Niranja. I understand by what you meant. However, if i want to have more than 1 images in the application, i would need to declare another String.

             


            I want to retrieve those images from the path of my xml file. Are you able to solve my doubts? Thanks for the help once again

             

             

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

             

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

             

            <mx:Script>

             

            <![CDATA[

             

            private var path:String = "assets/open.gif";

            private var path1:String = "assets/open.gif";

             

            private function init():void

             

            {

             

            myImage.source = path;

            myImage1.source = path1;

             

            }

             

            ]]>

             

            </mx:Script>

             

            <mx:Image id="myImage" x="105" y="66"  width="57" height="29"/>

            <mx:Image id="myImage1" x="105" y="45"  width="37" height="49"/>

             

            </mx:Application>

            • 3. http://forums.adobe.com/thread/483306?tstart=0
              Niranjan_swain Level 1

              hi,

              if u faceing problem to retrive path from ur xml file this is the code of ur xml file given belo

               

               

              /**

                 * This function load the xml value from a file  to ur application

                 * */

                 private function  loadXml():void

                 {

                 var xmlLoader:URLLoader = new URLLoader();

                  xmlLoader.load(new URLRequest("yourFileNmae.xml"));

                  xmlLoader.addEventListener(Event.COMPLETE, handleLoad);

                 }

               

               

               

               

              private var componentXml :Xml = new Xml();

               

              private var ImageList:XmlList = new XmlList();

               

              /**  

                 *   This function call when the xml loading complete from external file

                 * */

                 private function handleLoad(event:Event):void

                 {

                

                 componentXml = new XML(event.target.data);;

              ImageList = componentXml .memory.card.url;

                 }

               

               

              this imagelist varable all the xml tag which contain image.

              u iterate the imagelist variable and get the image path and assign to the image.

               

              suppose ur image is image1.

              u assign the firstimage to this image1.

              thenn

              image1.source = imageList[0];

               

              I think this will helpu;

              • 4. Re: http://forums.adobe.com/thread/483306?tstart=0
                shaylee tan Level 1

                Hi Niranjan. Sorry to bother you again. Are you able to type out the exact codes? Because there is an error and i am not able to figure it out. Thanks for your help once again.

                • 5. Re: http://forums.adobe.com/thread/483306?tstart=0
                  christopher.mina

                  Building on Niranjain_swain's reply:

                   

                   

                   

                   

                     private function  loadXml():void

                     {

                      var xmlLoader:URLLoader = new URLLoader();

                      xmlLoader.load(new URLRequest("yourFileNmae.xml"));

                      xmlLoader.addEventListener(Event.COMPLETE, handleLoad);

                     }

                   

                   

                     private function handleLoad(event:Event):void

                     {

                            var xml:XML = new XML(event.target.data);

                            var list:XMLList = xml.memory;

                            for each(var node:XML in list){

                               var source:String = node.card[0].url;

                               //this is the source url you are looking for. 

                            }

                     }

                  • 6. Re: Retrieving image path from xml file for images
                    flex2008 Level 3

                    You can use two approaches:


                    Approach 1:
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                        <!--assuming details.xml is your xml file in the same folder as the mxml file-->
                        <mx:XML id="xml" source="details.xml"/>
                        <!--here i used the index directly to refer the xml nodes-->
                        <mx:Image x="104" y="184" source="{xml.memory[0]..url"/>
                        <mx:Image x="326" y="184" source="{xml.memory[1]..url}"/>
                       
                    </mx:Application>

                     

                    Approach2:

                    xml file should be modified as:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                      <memoryCards id="Soccer players">
                    <!--I have used two nodes only-->
                       <memory>
                        <card>
                          <name>Torres</name>
                          <image>img1</image>
                        </card>
                        </memory>
                        </memory>
                      
                        <memory>
                        <card>
                          <name>Lampard</name>
                          <image>img2</image>
                        </card>
                        </memory>
                         

                    </memoryCards>

                     

                    your mxml file should be:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                        <mx:Script>
                            <![CDATA[
                               
                                [Bindable]
                                [Embed(source="assets/torres.png")]
                                 private var img1:Class;
                                
                                 [Bindable]
                                 [Embed(source="assets/lamps.png")]
                                 private var img2:Class;
                                
                                 private function getImgClass(value:String):Class
                                {
                                    return this[value]
                                }
                            ]]>
                        </mx:Script>
                        <mx:XML id="xml" source="details.xml"/>
                        <mx:Image x="104" y="184" source="{getImgClass(xml.memory[0]..image)}"/>
                        <mx:Image x="326" y="184" source="{getImgClass(xml.memory[1]..image)}"/>
                       
                    </mx:Application>