3 Replies Latest reply on Dec 17, 2009 8:50 PM by Bertrand G.

    dynamically load image into item renderer

    Bertrand G. Level 1

      Here is what I would like to do:

      - display the individual image of each item in a plotChart (AIR application, Flex 4).

       

      my code so far:

      <mx:PlotChart...

           <mx:series...

                <mx:PlotSeries...

                     <mx:itemRenderer>

                          <fx:Component>

                               <mx:image source="images/{data.name}" />

                          </fx:Component>

                     </mx:itemRenderer>

                </mx:PlotSeries>

           </mx:series>

      <mx:PlotChart>

       

      The problem is that it only works if the image is one embeded image (@embed(url)) and not loaded with the url read from the dataProvider (image not found icon on each item).

       

      I know there is no way to dynamically embed images, I've even tried to override the 'set data' function with HBox to load the image inside the method, but without any success.

       

      How could I trigger the loader for each image?

       

      Pleaaaaase Help!!!

        • 1. Re: dynamically load image into item renderer
          Gregory Lafrance Level 6

          This is code I provided for a similar post, but it could be of value for you as well.

           

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


          Greg Lafrance
          www.ChikaraDev.com

          Flex Development and Support Services

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
                public function getImageSource(item:Object):String{
                  var retVal:String;
                  switch(uint(item.type)){
                    case 1:
                      retVal = "black.png";
                      break;
                    case 2:
                      retVal = "blue.png";
                      break;
                    case 3:
                      retVal = "gray.png";
                      break;
                    case 4:
                      retVal = "green.png";
                      break;
                    case 5:
                      retVal = "purple.png";
                      break;
                    case 6:
                      retVal = "red.png";
                      break;
                  }
                  trace(retVal);
                  return retVal;
                }
              ]]>
            </mx:Script>
            <mx:DataGrid id="dgvParagraphs" dataProvider="{dataXML..item}">
              <mx:columns>
                <mx:DataGridColumn dataField="type" headerText="Type" width="50">
                  <mx:itemRenderer>
                    <mx:Component>
                      <mx:Image source="{outerDocument.getImageSource(data)}" horizontalAlign="center"/>
                    </mx:Component>
                  </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn dataField="title" headerText="Title" width="100"/>
                <mx:DataGridColumn dataField="content" visible="false"/>
              </mx:columns>
            </mx:DataGrid>
            <mx:XML id="dataXML" xmlns="">
              <data>
                <item>
                  <type>2</type>
                  <title>My Title 1</title>
                  <content>Content 1</content>        
                </item>
                <item>
                  <type>5</type>
                  <title>My Title 2</title>
                  <content>Content 2</content>
                </item>
                <item>
                  <type>3</type>
                  <title>My Title 3</title>
                  <content>Content 3</content>
                </item>
                <item>
                  <type>1</type>
                  <title>My Title 4</title>
                  <content>Content 4</content>
                </item>
                <item>
                  <type>4</type>
                  <title>My Title 5</title>
                  <content>Content 5</content>
                </item>
                <item>
                  <type>6</type>
                  <title>My Title 6</title>
                  <content>Content 6</content>
                </item>
                <item>
                  <type>2</type>
                  <title>My Title 7</title>
                  <content>Content 7</content>
                </item>
                <item>
                  <type>1</type>
                  <title>My Title 8</title>
                  <content>Content 8</content>
                </item>
                <item>
                  <type>4</type>
                  <title>My Title 9</title>
                  <content>Content 9</content>
                </item>
                <item>
                  <type>5</type>
                  <title>My Title 10</title>
                  <content>Content 10</content>
                </item>
                <item>
                  <type>2</type>
                  <title>My Title 11</title>
                  <content>Content 11</content>
                </item>
              </data>
            </mx:XML>
          </mx:Application>
          
          • 2. Re: dynamically load image into item renderer
            Bertrand G. Level 1

            Actually, my problem is with Flex 4 (Gumbo), hence the <fx:Component tag>

             

            And using <mx:Component> is not accepted for some reasons in the case of plot series...

             

            The image does not get loaded. I am considering using an image loader now.

            • 3. Re: dynamically load image into item renderer
              Bertrand G. Level 1

              Actually, my problem was that the image directory was not in the 'src' folder... That's why it didn't load.

               

              It works this way now, but I still would need to read images from an external location, or copy them to the application directory at run time. And now the problem is caching all these little images so that they are not loaded each time the graph is loaded.

               

              Any suggestion on how to do that anyone?