Problem with Item Renderer in TileList

[Sudipta.Ch...@gmail.com]

if a textinput box or a check box is used as a itemRenderer in
TileList and user checks or gives input to them , after that if anyone
scrolls down or up the TileList the data in the textInputbox does not
show properly.

[Vinod M. Jacob]

What is the problem ? Is the data lost in the input Box ?can you be little more specific?

[Sudipta.Ch...@gmail.com]

suppose user has input text in 1st,2nd and 3rd box,all other
textInputBoxes are blank in other itemRenderers, if now you scroll
down, you will seee that data which user inputes in 1,2,3 reflects in
other boxes randomly and the data is lost or mringled the same thing
happens in case of check boxes to in their selected property.

On Nov 5, 2:11 pm, "Vinod M. Jacob" <flex4...@gmail.com> wrote:
> What is the problem ? Is the data lost in the input Box ?can you be little
> more specific?
>

> On Wed, Nov 5, 2008 at 2:24 PM, Sudipta.Chakrabort...@gmail.com <

>
>
>
> Sudipta.Chakrabort...@gmail.com> wrote:
>
> > if a textinput box or a check box is used as a itemRenderer in
> > TileList and user checks or gives input to them , after that if anyone
> > scrolls down or up the TileList the data in the textInputbox does not

> > show properly.- Hide quoted text -
>
> - Show quoted text -

[dolly]

Hi Sudipta,

This is happening because flex re-uses an item renderer, so when the
data changes, it might not always update the correct view. To overcome
this problem, I used "dataChange" event in renderer as followed -
Whenever data changes, imagesource in this code is reconstructed
again. You will have to re-set the values of the check-boxes. It
forces the view to change when data changes.

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="100%" creationComplete="initializeRenderer()"
dataChange="initializeRenderer()">

<mx:Image horizontalAlign="center" source="{imageSource}"
width="100%" height="100%" maintainAspectRatio="false" />

<mx:Script>
<![CDATA[
[Bindable]
private var imageSource:String = new String();

private function initializeRenderer():void
{
imageSource = ("images/vid/" + data.Id + ".jpg");
}

]]>
</mx:Script>

</mx:VBox>

On Nov 5, 2:34 pm, "Sudipta.Chakrabort...@gmail.com"

[vandyK]

Hey,

I spent almost a day working on this freaking issue of getting my
itemrenderer working correct.
But, most of them went through some complicated ways. This one was the best.
I got mine working.

Thanks,
Vandita

--
View this message in context: http://www.nabble.com/-flex_india%3A15725--Problem-with-Item-Renderer-in-TileList-tp20338047p24762954.html
Sent from the Flex India mailing list archive at Nabble.com.

[HISSAM]

I guess the best solution is very simple

When ever a user uses a list base component[List,tilelist... all extends
ListBase] make sure an Item-renderer is used and depending upon the action
in the item-renderer define states in it so changing the state on data
change will make things magically simpler.
The next override the set Data(data:Object) method

like:
override public function set data(data:Object):void
{
img.source=data.src;
lblName.text=data.ImageName;
currentState=data.state;
}
Now here it seems simpler where any changing DisplayObject data should be
set here so as it reduce
complications and only 1 method to look for changes in future.

Now the other part is the data ,getting the data and setting it.

I usually use XML as most of the time my data comes from httpservice or from
a dummy XML.
So Suppose I get XML in the format (XML shown in the end)

U wont find a state tag in that so how will my data will get the state
info??
For this I explictly add state tag in between
See like this
private function result(e:ResultEvent):void{
var resultXML:XML=e.result as XML;//this could be object/arraycollection
for each (var t:XML in resultXML.Image) {
var xml:XML=<state ></state >
xml.appendChild(normalState);
resultXML.appendChild(xml);
}
}

so while changing data of any item renderer I just manuplate its data before
setting its data and accessing that rendere using the listEvent
Like this
private function selectListItem(l:ListEvent):void//this is usually the
click or select event
{
var item:ListRenderer;
if(l.currentTarget is List)
{
var list:MyList=l.currentTarget as MyList;// I always create my own list

//extending list or tilelist according to

//my requirement
var o:Object=l.itemRenderer.data;//this gives the current data which
renderere

//is holding

o.state ="MaxmiseState";//here changing state
l.itemRenderer.data=o;//asigning again to reflect in the set data
method//Done
}

its simplest n clean part .
Earlier I used to abuse this list base bcos of the changing nature of the
renderes but its the best as it recycle renderers to minimize the execution
and excessive object creation.

I generally create my own list/tilelise extending list/tilelist and keeps a
variable Dictionary to map things
of the dataprovider that makes thing robust as to avoid any bug :)

Please do mail me on hissam....@gmail.com for any more help.
Also let me know if this helped.
Thanks

////////////////////////////////////

<?xml version="1.0" encoding="UTF-8" ?>
<root>
<Image>
<id>1</id>
<name>Template Name 1</name>
<source>com/assets/Template Thumbnails/template1.png</source>
</Image>
<Image>
<id>2</id>
<name>Template Name 2</name>
<source>com/assets/Template Thumbnails/template2.png</source>
</Image>
<Image>
<id>3</id>
<name>Template Name 3</name>
<source>com/assets/Template Thumbnails/template3.png</source>
</Image>
<Image>
<id>4</id>
<name>Template Name 4</name>
<source>com/assets/Template Thumbnails/template3.png</source>
</Image>
<Image>
<id>5</id>
<name>Template Name 5</name>
<source>com/assets/Template Thumbnails/template3.png</source>
</Image>
</root>

--
View this message in context: http://www.nabble.com/-flex_india%3A15725--Problem-with-Item-Renderer-in-TileList-tp20338047p24766255.html

[Preetham Hegde]

Hi Hissam,

It was good info. Abdul had created a page for posting best practice.
Why don't you rewrite this with some more info and post it.

Thanks again

--
Regards,
Preetham Hegde