Tutorial :Flex: ListItem pulling data from other items in the list?



Question:

I have a TileList with a custom ItemRenderer, and each item shows an image which it extgracts from the data it receives from the dataProvider. The wierd thing is, and I have no clue why is some items are show images that are not in their data-bock but in another items data. If I am extracting the image url from its own data I have no clue how it can be getting the image urls from another item. I used a tool tip to show the image url and the item's data and verified that the URL is not in its data.

Here is temp XML I am using:

    <data>            <bs item_id="1">              <variation price="300" month="JAN" stone="Garnet" image="<?=$img_dir?>jan.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="400" month="FEB" stone="Garnet" image="<?=$img_dir?>feb.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="550" month="MAR" stone="Garnet" image="<?=$img_dir?>march.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="625" month="APR" stone="Garnet" image="<?=$img_dir?>april.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>          </bs>            <bs item_id="2">              <variation price="300" month="JAN" stone="Garnet" image="<?=$img_dir?>jan.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="400" month="FEB" stone="Garnet" image="<?=$img_dir?>feb.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="550" month="MAR" stone="Garnet" image="<?=$img_dir?>march.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="625" month="APR" stone="Garnet" image="<?=$img_dir?>april.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>          </bs>            <bs item_id="3">              <variation price="300" month="JAN" stone="Garnet" image="<?=$img_dir?>jan.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="400" month="FEB" stone="Garnet" image="<?=$img_dir?>feb.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="550" month="MAR" stone="Garnet" image="<?=$img_dir?>march.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="625" month="APR" stone="Garnet" image="<?=$img_dir?>april.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>          </bs>            <bs item_id="4">              <variation price="300" month="JAN" stone="Garnet" image="<?=$img_dir?>PE105-BT.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="400" month="FEB" stone="Garnet" image="<?=$img_dir?>PE105-EM.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="550" month="MAR" stone="Garnet" image="<?=$img_dir?>PE105-OP.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>              <variation price="625" month="APR" stone="Garnet" image="<?=$img_dir?>PE105.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>          </bs>      </data>  

Each item gets a < bs > block. (4 items)

And here is the code from the ItemRender:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="150" xmlns:local="*">        <mx:Script>          <![CDATA[              import mx.controls.Alert;                private var _randomIndex:uint;              private var _indexSet:Boolean;                private function getRandomImage ():String              {                  if (!_indexSet)                  {                      var maxIndex:uint = data.children().length();                      _randomIndex = Math.floor(Math.random()*maxIndex);                      _indexSet = true;                  }                  return data.children()[_randomIndex].@image;              }            ]]>      </mx:Script>          <local:LoadingImage id="tn" toolTip="{tn.source+'\n\n'+data}" source="{getRandomImage()}" width="150" height="150"/>    </mx:Canvas>  

The 2nd and 3rd are showing images that are only in the 4th block.

Does anyone see something I am not seeing?

Thanks!


Solution:1

Itemrenderers are recycled, so if you do any processing in set data() you should always have matching if / else statements. You cannot assume that the member variables in the itemrender are in a "known" state. In your code, it looks like indexSet is not being initialized properly + there is no else in the if statement.


Solution:2

When does getRandomImage get called? ItemRenderer's are reused so they may have an old image attached to it. If you don't reload it with a new value, it will still have the same image. Maybe you could try overloading the dataChanged event? I also noticed your _indexSet is probably not working the way you want as stated above, but that shouldn't be your main problem.


Solution:3

I found that if I pass the "data" to the function like this getRandomImage(data) it solves the issue. Not 100% sure why though.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »