I'm trying to understand how item renderer components work in
a situation when the rendering of a data item depends on the data
being rendered. To be exact, I'd like to understand how to
customize a renderer's appearance based on the data it renders.
What I'm trying to accomplish is to have a list that
customizes how each element is displayed based on the list cell
data. I have a custom item renderer for a list that combines
several data properties into a single component (a VBox). This
works well, but I'd like to customize the appearance of each item
based on what data is represented.
For instance, there is a "due date" property for the data
item, and when that property is in the past, I want that label's
color to change to red.
In addition to simple property values, I'd like to customize
the view state of the renderer based on data, too. For instance, I
have a "comments" property (an ArrayCollection) on the data being
rendered, and when that collection contains some items, I want to
switch to a view state that displays the most recent comment in the
I was able to create an item renderer fine, and I tried to
perform this customization by invoking a customizer method in the
renderer's initialized() or creationComplete() methods. This I
defined between Script tags in the item renderer component.
However, something weird is going in when the item renderer
paints my list. It's almost as though state was shared between item
renderers for various cells - strange things happen, for instance,
when I set the view state of a renderer inside the customizer
method (invoked on creationComplete()). Other cells also render
with that view state, etc.