4 Replies Latest reply on Jun 6, 2011 5:19 PM by William Spence

    Populating a Tilelist with Thumbnail Images

    William Spence Level 1

      I apologize upfront, I am a Flex newbie and know that I am missing something small.  I am trying to get an array of image objects into a tilelist.  I am not loading images from a URL, my program dynamically creates thumbnails of images that a user chooses from their own files.  The images are imported and then converted into high-quality thumbnails then put into a "thumbnail" array where each array element is formatted as an image type.  So:

       

      thumbnail[1] is of type Image and is filled with a bitmap image 75x75 pixels

      thumbnail[2] is of type Image and is filled with a bitmap image 75x75 pixels

      thumbnail[3] is of type Image and is filled with a bitmap image 75x75 pixels

      etc.....

       

      I know that this much is done correctly because if I add each element of the array to a Group container, I get a series of images displayed.  All good.

       

      I then wrap the image array into an arraycollection to be used as a dataprovider for my Tilelist.  I accomplish this as follows:

       

           [Bindable]

           var imageCollection:ArrayCollection = new ArrayCollection(thumbnail);

       

      Finally, I bind the arraycollection to the dataprovider property in MXML and use a Image drop in itemrenderer like this:

       

           <mx:TileList id="MyTileList" x="100" y="100" width="650" height="650" dataProvider="{imageCollection}" itemRenderer="mx.controls.Image"/>

       

      Unforunately, all I get is a bunch of empty boxes with  little empty image icons in them.  I have the correct number of boxes, they just do not have my thumbnails in them.  I don't know if my dataprovider has to be cast as Objects instead of Images somehow, or if it is a problem with my itemRenderer or I am missing a small property, but I could really use some help.  Thanks!!!

        • 1. Re: Populating a Tilelist with Thumbnail Images
          pauland Level 4

          William,

           

          All the item renderer wants is the path to your images, not an image itself. I'm afraid all your work in the other thread was unnecessary.

           

          Paul

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
          <mx:Script>
              <![CDATA[
               import mx.collections.ArrayCollection;
               [Bindable]
               private var _filePaths:ArrayCollection = new ArrayCollection(
               ["http://www.xara.com/theme/xtreme5/xaralogo.png",
                           "http://www.xara.com/uploaded_files/2011/3/23/GSCJnMzT/wd7.jpg"]);

              ]]>
          </mx:Script>
              <mx:TileList dataProvider="{_filePaths}"  itemRenderer="mx.controls.Image"/>
          </mx:Application>

          • 2. Re: Populating a Tilelist with Thumbnail Images
            William Spence Level 1

            Paul, for many reasons that would take too long to type(the images get cropped and color adjusted, etc.), in my current situation I don't have a choice but to work with these image objects and not file paths.  With my current understanding, I have these choices:

             

            1.  Write these thumnails to the hard drive and then pass those paths to the item renderer.  I could do this but it would make my application slow and clumsy.

            2.  Choose a different container that doesn't need an itemrenderer like a group or tilegroup.  I could do this but there is a lot of effort needed to program all of the drag and drop capabilities and effects that are built into the tilelist that I think would look really professional.

            3.  Create a clever itemrenderer to display my image objects.  I really like this option best.

             

            Do you know if there is a way to write a custom renderer where I could use image objects instead of paths?  For instance, could I use a custom item renderer where I create a small Group container 75x75 pixels big inside of the item renderer and add an image object to the group using ThumbnailContainer.addElement(thumbnail[1]), maybe something like this:

             

             

            <mx:itemRenderer>

                 <fx:Component>

                      <s:Group id="ThumbnailContainer" width="75" height="75">

                           <!-- add thumnails to "ThumbnailContainer" using ActionScript-->

                      </s:Group>

                 </fx:Component>

            </mx:itemRenderer>

             

             

            The only thing that I can't figure out is how to identify the group to put each thumnail in.  I need each group produced by the itemrenderer to have a unique identifier like Group1, Group2, Group3...then I could just add a thumbnail to each group.  Is there a way to identify components that you add in an itemrenderer so you can identify them for each element in a tilelist?

            • 3. Re: Populating a Tilelist with Thumbnail Images
              William Spence Level 1

              Does anyone know if when you create a custom itemrenderer, whether there is some way to access the components that you place within the itemrenderer?  For instance, if I create a custom itemrenderer like this one:

               

              <mx:itemRenderer>

                   <fx:Component>

                        <s:Group id="ThumbnailContainer" width="75" height="75">

                             <!-- add thumnails to "ThumbnailContainer" using ActionScript-->

                        </s:Group>

                   </fx:Component>

              </mx:itemRenderer>

               

              Is there a way that I can access the "Group" container for each tiles that the program produces?  So if I create a TileList, use the item renderer above, and have a dataprovider with 10 elements in it, is there a way that I can access or address the Group container for each of the 10 tiles that are created?

              • 4. Re: Populating a Tilelist with Thumbnail Images
                William Spence Level 1

                Anyone?  Is it possible to do this?