10 Replies Latest reply on Oct 26, 2009 10:12 AM by oldMster

    Image Source Data in XML not Working

    Gregory Lafrance Level 6

      In the following code I am specifying the name of "Embed" class in XML, which I feed into a Repeater, but I'm getting broken image icons.

       

      If I have the XML like this it still doesn't work:  <image color="0xFF0000" source="redImg" />

       

      So how do we have Image source data in XML that requires binding at runtime?

       

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        creationComplete="init();">
        <mx:Script>
          <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.controls.Image;

            [Embed(source='red.png')] [Bindable] public var redImg:Class;
            [Embed(source='green.png')] [Bindable] public var greenImg:Class;
            [Embed(source='blue.png')] [Bindable] public var blueImg:Class;
           
            [Bindable] private var imagesXLC:XMLListCollection;
           
            private var imageXMLData:XML =
              <imageData>
                <image color="0xFF0000" source="redImg" />
                <image color="0x00FF00" source="greenImg" />
                <image color="0x0000FF" source="blueImg" />
              </imageData>;
           
            private function init():void{
              imagesXLC = new XMLListCollection(imageXMLData..image);
            }
          ]]>
        </mx:Script>
        <mx:Repeater id="rp" dataProvider="{imagesXLC}">
          <mx:Image name="{rp.currentItem.@color}" source="{rp.currentItem.@source}"/>
        </mx:Repeater>   
      </mx:Application>

        • 1. Re: Image Source Data in XML not Working
          Francisc Level 3

          The code looks good, it should be working...

          Only thing I can think of that I would need to test to be sure is correct is this definition:

          imagesXLC = new XMLListCollection(imageXMLData..image);//the double dot especially

           

          Hope this helps.

          • 2. Re: Image Source Data in XML not Working
            kkc_mca Level 2

            All the code is well

             

            Try with XMLList and remove the double dot while creating instance

             

            imagesXLC = new XMLList(imageXMLData.image);

             

            I hope this will help you

             

            If my post answers your question or helps, please mark it as such

            • 3. Re: Image Source Data in XML not Working
              Francisc Level 3

              I think I've heard that before...

              Anyway! Double dot synthax is correct, what I am "worried" about is that it does not target the element you need - hence the non-displaying images.

              • 4. Re: Image Source Data in XML not Working
                kkc_mca Level 2

                Check the path of the source

                 

                <image color="0xFF0000" source="http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg" />

                 

                I tried with the above it is working

                 

                 

                <?xml version="1.0"?>

                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                  creationComplete="init();">

                  <mx:Script>

                    <![CDATA[

                      import mx.collections.XMLListCollection;

                      import mx.controls.Image;

                      [Embed(source='red.png')] [Bindable] public var redImg:Class;

                      [Embed(source='green.png')] [Bindable] public var greenImg:Class;

                      [Embed(source='blue.png')] [Bindable] public var blueImg:Class;

                 

                      [Bindable] private var imagesXLC:XMLList;

                 

                      private var imageXMLData:XML =

                        <imageData>

                          <image color="0xFF0000" source="http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg" />

                          <image color="0x00FF00" source="greenImg" />

                          <image color="0x0000FF" source="blueImg" />

                        </imageData>;

                 

                      private function init():void{

                        imagesXLC = new XMLList(imageXMLData.image);

                      }

                    ]]>

                  </mx:Script>

                  <mx:Repeater id="rp" dataProvider="{imagesXLC}">

                    <mx:Image name="{rp.currentItem.@color}" source="{rp.currentItem.@source}" />

                  </mx:Repeater> 

                </mx:Application>

                 

                 

                I hope this post helps you

                • 5. Re: Image Source Data in XML not Working
                  kkc_mca Level 2

                  When  try to debug the solution I got this warnings

                   

                  warning: unable to bind to property 'color' on class 'XML' (class is not an IEventDispatcher)

                  warning: unable to bind to property 'source' on class 'XML' (class is not an IEventDispatcher)

                   

                  Check it once

                   

                  I hope this post helps you

                  • 6. Re: Image Source Data in XML not Working
                    Gregory Lafrance Level 6

                    I changed my code a bit, notice how hard coding the embedded class name works, but accessing it from XML does not work:

                     

                    <?xml version="1.0"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                      creationComplete="init();">
                      <mx:Script>
                        <![CDATA[
                          import mx.collections.XMLListCollection;
                          import mx.controls.Image;

                          [Embed(source='red.png')] [Bindable] public var redImg:Class;
                          [Embed(source='green.png')] [Bindable] public var greenImg:Class;
                          [Embed(source='blue.png')] [Bindable] public var blueImg:Class;
                         
                          [Bindable] private var imagesXLC:XMLListCollection;
                         
                          private var imageXMLData:XML =
                            <imageData>
                              <image color="0xFF0000" source="redImg" />
                              <image color="0x00FF00" source="greenImg" />
                              <image color="0x0000FF" source="blueImg" />
                            </imageData>;
                         
                          private function init():void{
                            imagesXLC = new XMLListCollection(imageXMLData..image);
                          }
                        ]]>
                      </mx:Script>
                      <mx:Label text="Hard Coded:"/>
                      <mx:Image source="{redImg}"/>
                      <mx:Image source="{greenImg}"/>
                      <mx:Image source="{blueImg}"/>
                      <mx:Label text="From XML:"/>
                      <mx:Repeater id="rp" dataProvider="{imagesXLC}">
                        <mx:HBox>
                          <mx:Label text="rp.currentItem.@source"/>
                          <mx:Label text="{rp.currentItem.@source}"/>
                          <mx:Image name="{rp.currentItem.@color}" source="{rp.currentItem.@source}"/>
                        </mx:HBox>   
                      </mx:Repeater>   
                    </mx:Application>

                    • 7. Re: Image Source Data in XML not Working
                      Gregory Lafrance Level 6

                      I solved this by getting the embedded image class using a method:

                       

                      <?xml version="1.0"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                        creationComplete="init();" layout="horizontal">
                        <mx:Script>
                          <![CDATA[
                            import mx.collections.XMLListCollection;
                            import mx.controls.Image;

                            [Embed(source='red.png')] [Bindable] public var redImg:Class;
                            [Embed(source='green.png')] [Bindable] public var greenImg:Class;
                            [Embed(source='blue.png')] [Bindable] public var blueImg:Class;
                           
                            [Bindable] private var imagesXLC:XMLListCollection;
                           
                            private var imageXMLData:XML =
                              <imageData>
                                <image color="0xFF0000" source="redImg" />
                                <image color="0x00FF00" source="greenImg" />
                                <image color="0x0000FF" source="blueImg" />
                              </imageData>;
                           
                            private function init():void{
                              imagesXLC = new XMLListCollection(imageXMLData..image);
                            }

                            private function getImage(str:String):Class{
                              var retVal:Class;
                              retVal = this[str];
                              return retVal;
                            }     
                          ]]>
                        </mx:Script>
                        <mx:VBox>
                          <mx:Label text="Hard Coded:"/>
                          <mx:Image source="{redImg}"/>
                          <mx:Image source="{greenImg}"/>
                          <mx:Image source="{blueImg}"/>
                        </mx:VBox>
                        <mx:Spacer width="50"/>
                        <mx:VBox>
                          <mx:Label text="From XML:"/>
                          <mx:Repeater id="rp" dataProvider="{imagesXLC}">
                            <mx:Image name="{rp.currentItem.@color}" source="{getImage(rp.currentItem.@source)}"/>
                          </mx:Repeater>   
                        </mx:VBox>
                      </mx:Application>

                      • 8. Re: Image Source Data in XML not Working
                        VipersG

                        Hey greg,

                         

                        How would you rework this solution for a custom itemrenderer for a TileList (using XMLList instead of XML)?

                        • 9. Re: Image Source Data in XML not Working
                          oldMster Level 3

                          The problem is, the 'source' node of the XML object is a string, not a pointer to the variable you created in the script.  So at run time, it is looking for an image with the source path of literal 'redImage', not looking at the image instance variable redImage.  I don't know if putting curly braces around the source="redImage" to make it source="{redImage}" would work, but it might.

                           

                          I don't know of any way to do this, except as you did with the function call.  Since flex is compiled, substituting variable names for strings at run time is not something that is supported. If there is a way to do it, I would love to learn!

                          Mark

                          • 10. Re: Image Source Data in XML not Working
                            oldMster Level 3

                            When I was suggesting the curly braces for binding, I was suggesting it for the XML Declaration - not down in the hardcoded section you had before.  I don't know if you can do that in the XML Declaration or not, but that is the only way it would point to the image variable instance, rather than the string 'redImage'