The example given in the primefaces showcase of a directory tree does not consider empty directory nodes. The problem is that the CSS override only works for nodes with children, the others get no image.
So, to get empty trees you will these rules on your css:
Code: Select all
.locationTreeIcon {
background-image: url("#{resource['images/tree:empty_location_icon.gif']}");
background-repeat: no-repeat;
padding-left: 20px !important;
}
/** populated directory nodes dont need the empty image */
td.ygtvtm+td.locationTreeIcon, td.ygtvtmh+td.locationTreeIcon,
td.ygtvlm+td.locationTreeIcon, td.ygtvlmh+td.locationTreeIcon,
td.ygtvlp+td.locationTreeIcon, td.ygtvlph+td.locationTreeIcon,
td.ygtvtp+td.locationTreeIcon, td.ygtvtph+td.locationTreeIcon {
background-image: none;
padding-left: 0 !important;
}
Code: Select all
<p:tree
dynamic="true"
value="#{cc.attrs.tree.root}"
var="node"
update="#{cc.attrs.update}"
expandAnim="FADE_IN"
collapseAnim="FADE_OUT"
selectionMode="single"
cache="true"
nodeSelectListener="#{cc.attrs.tree.nodeSelectListener}"
>
<p:treeNode type="LOCATION" styleClass="locationTreeIcon">
<h:outputText value="#{node.label}"/>
</p:treeNode>
<p:treeNode type="DEVICE" styleClass="deviceTreeIcon">
<h:outputText value="#{node.label}" />
</p:treeNode>
</p:tree>
I like the idea of CSS power, but it would be easier if we could set in the component an expanded/collapse/default icon ;P
Anyway, hope this help anyone that needs the same feature or something similar.