More Thinking About Item Renderers
Well, the last post definitely got people thinking. Since then I've seen a few of you struggle with images, centering, etc. Again, if you're in a hurry, take a container and center an Image in it, but just be aware that that is kind of heavy.
This example shows how I would do it in order to optimize on performance. Most drop-in renderers like Image and CheckBox are comprised of child components that actually display the content, text and icons. By overriding the updateDisplayList methods, you can center the content without the cost of wrapping the renderer in a container.
This example also shows how to use labelFunction to map fields in your data to external or embedded images. The usual caveats and disclaimers apply.
-Alex
Comments
Great work man... exactly what I needed....
check this out I'm using it in the fullScreen mode of a photogallery:
http://theo.flexcoders.nl/005/
Posted by: Maikel Sibbald | April 9, 2007 04:41 AM
Hi Alex,
I am pretty much completely lost in these examples, but I will start with a simple question. How is it that CenteredCheckBox is setting its selected state? How does it know to apply the value of its data property to its selected property?
Thanks,
Ben
-------------
Ben,
Sorry you got lost. Maybe what you're missing is that CheckBox, Image and some other out-of-the-box Flex components are drop-in item renderers. They implement IDropInListItemRenderer and know how to pick up extra information from the DataGrid such as which column they are renderering and therefore which dataField to pick out of the data.
If you just drop in CheckBox you'll see it work fine but left-aligned.
There's a lot of power in the standard components that can be leveraged once you figure out what they can do. And once you get a better understanding of that, it becomes more clear that lightweight subclassing of these components is better than the old Canvas-with-a-component pattern, which is much easier to learn, but may not be optimal.
Posted by: Ben | April 9, 2007 06:55 AM
Hi Alex, great work. I have a dude. If i click in the header for sort, the values of the chekboxes lost, it's by not have editor ??
----------
Yes, I did not add the code where clicking on the checkbox updates the dataprovider.
Posted by: Fabian | April 17, 2007 12:51 PM
Hi Alex,
may be you would be able to advise me. I’m looking for a solution to layout a row such what a line of text would start in the leftmost column and span multiple columns. Content of other columns should be pushed down as to allow space for the text line.
Thank you in advance,
Vlad
-------------
Haven't tried this yet, but you will probably need to know that the z order of renderers in a row is left to right where the right side is "above" the left. It turns out that once the list class determines the size and position of the renderer, you can change it later as long as you don't cause the list to re-render everything. So in your renderers' updateDisplayList, one should get really wide and the others should move down.
That's the theory. I think somebody got this to work. I'd try it myself but I'm pretty busy right now. Good luck
---------------
Yeah, this is how I'm trying to do it now, but it looks a bit too much as a hack. Well, as long as it works and there is no better way… :-)
Cheers,
Vlad
---------------
Yeah, we didn't support row/column span. There should be better support in the next major release.
Posted by: Vlad | May 4, 2007 08:06 PM
Hi Alex,
Thanks for your helpful CenteredWidgets example. I did have some trouble importing it into Flex, but that's because I am a Flex noobie.
Anyhow, my question is... I'm trying to make a very simple "Icon + text" combination. Let's say my icon is 16 pixels square. I'd want perhaps 8 pixels gap. And then the text to the right of the icon.
I want all this in one column!
What's the best way to do this in flex?
Should I extend your image to draw the text to the right of it? Oh wait, it's centered isn't it. I don't want it centered.
Thanks if you have any advice.
-----------------
I would take a UIComponent and add children Image and UITextField. You can look at the Flex framework source for ListItemRenderer for inspiration.
Posted by: Theodore H Smith | May 11, 2007 06:42 AM
Hi Alex,
I am trying to display some HTML data to Flex application. From Server it is coming as CDATA. It may contain tables, html text, images things.
Now I have 2 problems:
1. Which component is best to display such component. Is there any built in component for this?
2. I am displaying data in TextArea using its htmlText property. But it is not showing output as it is coming from server. Can u tell me why so?
Thanks in advance for looking in this problem.
----------------
Flash support for HTML is historically poor. Ask about it on FlexCoders and you'll see alternative approaches, one of which is called HTMLComponent. Oher support may get better over time, but no promises.
Posted by: Ashish Mishra | May 11, 2007 09:49 PM
Hi Alex,
I would like to create a list item renderer that displays a value as a horizontal bar, as in a bar graph. Do you have any suggestions on how to do this efficiently?
Thanks!
Rob
-------------------------------
I would start with UIComponent and draw a rectangle into its graphics layer. Hope that's enough info to get you started.
Posted by: Rob Turknett | May 21, 2007 01:14 PM
Alex,
I just read both of these articles about item renderers. I was really missing the mark. I will fix my grids and let you know how it went.
What the heck was I thinking. Thank you so much for the redirection. Your rock dude!
Thanks again,
Tony
Posted by: Tony | July 14, 2007 01:44 PM
Alex,
I'm trying to use the CenteredCheckBox in a datagrid, using actionscript instead of mxml. I've tried to get the backing arrayCollection to be updated when it changes, but it isn't working. It reflects the data being sent to the grid, but not the state of the checkboxes. Could you post a quick example of what needs to be added for it to fully function in a datagrid? Thanks, John
-----------
How to update depends a bit on the backing data. I implement change event handlers that update the data. You may need to call itemUpdated though
Posted by: John Lentz | July 25, 2007 08:58 PM
Alex, I wanted to personally thank you for saving me many painful hours. Thanks a million.
-Rameen
Posted by: rameen | September 20, 2007 02:02 PM
This works but you loose the ability to have a click event in the column which you have with an component.
Are there other methods of centering the image?
--------------
Not sure what you mean by that. You can always put some sort of alpha=0 shield over the entire column if you think you need to detect mouse outside the image bounds.
Posted by: Nigel | October 30, 2007 03:00 AM