Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rate Thread Display Modes
Old 05-22-2007, 10:07 AM   #1
Mortimer Jazz
Thing
 
Mortimer Jazz's Avatar
 
Join Date: Jun 2001
Location: UK
Posts: 2,418
Default ItemRenderers List/Tree/DataGrid (recycling of)

Hello all,

I wanted to ask how others deal with recycled item renderers. I have 2 solutions to the problem (see links below), but I'm asking because I've come across the need to implement them reasonably often, and so assume others do to - yet I see very little mention of this problem (and solutions) on the web ... and I wanted to double-check there's not a standard way of achieving this, that I may be overlooking?

Setup (it's easy):
  1. You'll need to create a customer item renderer for a List component
  2. This renderer must contain a component which can be selected (e.g. a radiobutton or checkbox is ideal)
  3. Add enough items so that your List scrolls.
Now simply select one of the radiobuttons/checkboxes, then scroll down so that it disappears offscreen - you will probably find that one of the other radiobuttons/checkboxes further down the screen is selected ... and when you scroll back up, the original one you selected may or may not still be selected - in other words the selected item appears to jump around.

The same thing can be seen to happen if you use radiobuttons or checkboxes in a Tree component and open/close the branches.

I have solutions posted on my blog here and source code for one of the solutions here

I've encountered the same issue with RadioButton Trees, scrolling renderers with selectable items, and itemRenderers with more than one state, yet I've only ever seen one other person post on the subject, so I'm really curious ..... are other people simply not running in to this problem, or do you handle it the same way?

Cheers,
Neil
__________________
............................
FLEX/FLASH BLOG
Previous Flash Tutorials

............................
Mortimer Jazz is offline   Reply With Quote
Old 05-22-2007, 04:50 PM   #2
dr_zeus
Feathers
 
dr_zeus's Avatar
 
Join Date: Mar 2005
Location: Silicon Valley
Posts: 1,999
Default

I don't have the code for my CheckTree class handy right now, but I believe that I force the item renderers to redraw when the selection changes.
__________________
Josh Tynjala | Feathers
dr_zeus is offline   Reply With Quote
Old 05-22-2007, 06:58 PM   #3
cuk
Registered User
 
Join Date: May 2007
Posts: 10
Thumbs up

Hi Everybody,

Its nice that you brought this topic up Jazz. Well I have been working with itmRenderers for just 2 weeks now, so I guess I may not be right. But I thought I should put my views down too.

I have come to a point where I am not able to accomplish a few things. My main problem comes with itemRenderers usage inDatGrids, NESTING them with other layoutControls.

In my case, I would like to override the RadioButtonGroup/CheckBox functions and place it in an HBox and then put it in a DataGrid. This is what I have to do to get the RadioButtonGroup or CheckBox to appear centered in the DataGrid. But by this time, I have gone far enough to have lost control of the set and get value functions of the RadioButtonGroup/CheckBox. Be it a RadioButtonGroup or CheckBox, there must be someway of both displaying it beautifully and still being able to override the set/get functions.

So please share your ideas and thoughts on how this can be accomplished without having to compromise on any one of the goals i want to achieve. May be I am being to amateurish and missing out some valuable valid points. So please feel free to discuss the same.
cuk is offline   Reply With Quote
Old 05-23-2007, 07:17 AM   #4
Mortimer Jazz
Thing
 
Mortimer Jazz's Avatar
 
Join Date: Jun 2001
Location: UK
Posts: 2,418
Default

Quote:
Originally Posted by dr_zeus View Post
I don't have the code for my CheckTree class handy right now, but I believe that I force the item renderers to redraw when the selection changes.
Hey Josh, thanks for the reply. Yes, I saw a CheckTree example in the Flex cookbook (yours?), and each node is checked recursively, which makes sense in that situation because of the "Schroedinger" state (i.e. where the selected state of the children will affect the display state of the branch). I thought about recursion as an option, but for something as simple as a List full of scrolling renderers, it seemed a bit unnecessary.


Hey cuk, I don't want this post to go too off-topic if that's okay (it may be worth starting a new thread for your question ) but as I've done this I can help out (or at least it sounds like I'm doing what you want - check the attached gif)

You mention "loosing control of the set". By this, if you mean a lack of access to the events being fired, it may be worth taking a look at my post on how to dispatch an event from a custom item renderer
As for the general layout, my setup is as follows: my DataGrid item renderer is an Hbox, and inside that I have three VBoxes, each with a label and RadioButton inside. My VBoxes have horizontalAlign="center" set. On the DataGrid itself (not the columns) I set verticalAlign="middle". The RadioButton click event calls a single method which checks the event.currentTarget.id to see which button was clicked. What you can also do is override the data getter/setter in your itemRenderer - there is an example of this in my source-code example (see the source-code link in my first post)
Attached Thumbnails
Click image for larger version

Name:	rb.gif
Views:	187
Size:	4.3 KB
ID:	22574  
__________________
............................
FLEX/FLASH BLOG
Previous Flash Tutorials

............................
Mortimer Jazz is offline   Reply With Quote
Old 06-05-2007, 08:58 PM   #5
cuk
Registered User
 
Join Date: May 2007
Posts: 10
Default

Hi guys,

I didnt mean to take the topic off-track sorry. Actually i did post it as a different thread and I did not receive any response and that is the reason, I ended up seeking help from this thread. Thanks for the suggestions because they did work indeed. but i had a weird problem,. I had to get only the first 2 columns aligned centrally, all other columns conained long decimal values and had to be displayed aligned to the left. But my problem was finally solved. i went through a sample code that i had downloaded sometime back, which seemed to fix the issue.

Thanks for the help and suggestions guys!
cuk is offline   Reply With Quote
Old 06-06-2007, 07:21 AM   #6
Mortimer Jazz
Thing
 
Mortimer Jazz's Avatar
 
Join Date: Jun 2001
Location: UK
Posts: 2,418
Default

Quote:
Originally Posted by cuk View Post
Hi guys, I didn't mean to take the topic off-track sorry.
Ah no problem at all :] I just know how easily threads can wander and I had been hoping to hear back from more people on this topic - but the thread went quiet after that anyway.
It would be interesting to hear more details of how you solved the problem.

I've since posted a follow up, with a slightly more scalable way to dispatch events from an item renderer (as a result of discussions on Flexcoders) if you're interested.
__________________
............................
FLEX/FLASH BLOG
Previous Flash Tutorials

............................
Mortimer Jazz is offline   Reply With Quote
Old 08-20-2007, 12:40 PM   #7
Roustalski
Registered User
 
Join Date: Aug 2007
Posts: 11
Default

When the data is rendered, you are likely only setting the outcome based on one condition.

e.g. you want a check box to be selected based on a property, so you say something like:

if (archived) {
//set archived checkbox value to true
}

Now when you scroll down the list, you get what you see.

So try adding the rest of the conditions. In our case, it is only the else.

if (archived) {
//set archived checkbox value to true
} else {
//set archived checkbox value to false
}

That should do the trick.
Roustalski is offline   Reply With Quote
Old 08-20-2007, 01:45 PM   #8
Mortimer Jazz
Thing
 
Mortimer Jazz's Avatar
 
Join Date: Jun 2001
Location: UK
Posts: 2,418
Default

Thanks for the reply Roustalski :]

If I recall my thinking when I posted this, the main problem I was trying to nail down was displaying the relevant state for a component without storing this information in the data-source.

In other words, the data used to generate the checkboxes should not also be used to store the state of each checkbox (because details about the visual state simply do not belong there).

If I understand your suggestion that seems to be what would be needed - it is what most people do, but I was looking for a way around that. The problem is that while there is a block of data that pertains to every checkbox, the item renderers themselves get recycled - so a single component could appear several times in a scrollable list.
__________________
............................
FLEX/FLASH BLOG
Previous Flash Tutorials

............................
Mortimer Jazz is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
recycling layers happypants ActionScript 2.0 1 03-12-2007 04:25 PM
New Tutorial - Flex 2.0 ItemRenderers nathanpdaniel Content Postings / Updates 2 01-20-2007 02:59 PM
[AS2] Drag-drop GAME about recycling meelis_l Gaming and Game Development 0 12-04-2005 03:18 PM


All times are GMT. The time now is 02:08 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.