I'm brand new to JSF, so I'm not sure if this is a RichFaces issue or Ajax4JSF or what. But I don't understand the documentation surrounding tree icons.

I have the demo code up and running in my local environment. (richfaces 3.0.1, ajax4jsf 1.1.1 inside Tomcat 5.5) But I can't seem to change any of the icons used for the tree nodes. What I have is as follows:

<f:view>
<h:form>
<div class="sample-container">
 <rich:tree switchType="client" style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}">
 <rich:treeNode type="library" icon="http://www.someserver.com/images/myIcon.png"
 iconExpanded="http://www.someserver.com/images/myExpandedIcon.png"
 iconCollapsed="http://www.someserver.com/images/myCollapsedIcon.png"
 iconLeaf="http://www.someserver.com/images/myLeafIcon.png">
 <h:outputText value="#{item.type}" />
 </rich:treeNode>
 <rich:treeNode type="artist">
 <h:outputText value="#{item.name}" />
 </rich:treeNode>
 <rich:treeNode type="album">
 <h:outputText value="#{item.title}" />
 </rich:treeNode>
 <rich:treeNode type="song">
 <h:outputText value="#{item.title}" />
 </rich:treeNode>
 </rich:tree>
</div>

</h:form>
</f:view>

I have dummy values filled out there on the library node for icon, iconExpanded, iconCollapsed, and iconLeaf. I've tried setting those values at both the rich:tree and rich:treeNode level, and I've tried both relative and absolute urls for my image locations. However, every time I run the page, I get the same folder icons that come with the A4J out of the box (a4j.res/images/iconFolder.gif.jsf). Doesn't matter what I do, I can never seem to change these icons.

The documentation makes no sense to me either.

 <rich:treeNode ...>
 <f:facet name="icon">
 <hutputText value="A"/>
 </f:facet>
 <f:facet name="iconCollapsed">
 <hutputText value="B"/>
 </f:facet>
 <f:facet name="iconExpanded">
 <hutputText value="C"/>
 </f:facet>
 <f:facet name="iconLeaf">
 <hutputText value="D"/>
 </f:facet>
 </rich:treeNode>

First, is this a typo? Shouldn't it be h:outputText? Second, I don't understand what this is telling me here. What the heck are A, B, C, and D? I want icons, so I imagined it would want me to put in some sort of image url. Is this not the case? Image urls don't seem to do anything here. Are these suposed to be identifiers that reference something else which will provide the icons? Third, if I "correct" the markup and use h:outputText, this code throws an exception when used in conjunction with the demo song-library example (Duplicate component ID '_id0:_id1:_id9' found in view). The facet exception issue I can workaround just by using attributes on the parent though (if I could make the attributes work right).

Lastly, when I look at the HTML markup generated by RichFaces, I see a node's icon rendered as an IMG tag. Seems to me it would make more sense to provide a 16x16 DIV or transparent IMG and allow the user to control the icons via background-image CSS on the element, rather than force them to swap out images directly in their markup. This would allow users fine-grained control over their icons just by swapping out class selectors (disregarding the fact that the "nodeClass" attribute only seems to apply to a node's label TD and doesn't affect the TD enclosing its icon-image).

But I guess that's more of a design choice the developers have had to make. I was just wondering, if I can manage to change my icons, would it be feasible to use a transparent 16x16 icon across my entire tree, then use class selectors to style the icons for each of my nodes (I have many sibling nodes that will require different icons)?