2 Replies Latest reply on Sep 18, 2006 5:00 AM by hsivaram

    TileList itemRenderer

    ParomitaDey15 Level 1
      Hello All,

      I am trying to develop a simple photo album, where I have a TileList control that displays the different photos as Thumbnail view with respective name beneath the image. Therefore I am using a custom component (a VBox component having an image and a label) as an itemRenderer component for tiling the photos with names.
      Now I wish to implement a sizing option for the thumbnails, that is, I want to have three sizes of smaller, medium and large sizes for the thumbnail images. I have three buttons and on clicking these buttons the thumbnail size should change to the respective size.
      My question is, is can we access the thumbnail image within the itemRenderer component from outside the renderer component.

      My main application
      <mx:HBox width="100%" horizontalAlign="right">
      <mx:Button id="smThumb" label="S" click="GetImgSize();"/>
      <mx:Button id="midThumb" label="M"/>
      <mx:Button id="lgThumb" label="L"/>
      <mx:TileList id="DAThumbNailList" variableRowHeight="true"
      width="100%" height="100%" rowHeight="120" columnWidth="110"
      borderStyle="none" styleName="genDASelectionStyle"


      Renderer component

      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalScrollPolicy="off" horizontalScrollPolicy="off" verticalAlign="top" verticalGap="1" >
      <mx:HBox width="100%" height="100%" paddingBottom="1" paddingTop="1" horizontalAlign="center" verticalAlign="middle">
      <mx:Image id="imgDAAsset" source="{data.assetsm}"
      rollOut="destroyAssetToolTip();" />
      <mx:Text id="lblDATitle" text="{data.filename}" width="84"


      Can I access the 'imgDAAsset' from the main application mxml to change the the width/height properties.
      I also tried to accomplish the thumbnail sizing by adjusting the Tilelist rowHeight and columnWidth, but by doing that the item area for each tile increases but the renderer image is un-affected.
      How can I increase the image size within the renderer component?
      Is there any other way to perform the same operation?

      Please suggest.

      Thanks and Regards,
      Paromita Text My main application Renderer component
        • 1. Re: TileList itemRenderer
          inlineblue Level 1
          From what I know, this kind of thing is hard to do with a List-based component because renderers exist only for the visible items (among other complications). Since all you want to do is display your custom VBox in a tiled fashion, I suggest using the Tile container instead. This way, you can just add instances of your VBox to it and directly access each item. eg:

          mypic = new CustomVBox();
          mypic.init(...); //initialize with image data, etc.

          Then you can refer to each child by using myTile.getChidAt(). When you want to resize the images, you can loop through every child and make changes to mypic.imgDAAsset.
          • 2. Re: TileList itemRenderer
            You cannot directly access the itemRenderer instance from the main application. However, there is another way of doing it. Override the setter data in your itemRenderer, set a variable which indicates each image dimensions like _img which should be declared in the parentApplication. On click of the button, reset the dataProvider and since the itemRenderer listens to the variable _img and redraws the image control accordingly.