Directory Tree with Empty Folders
Posted: 17 Jan 2011, 15:32
Just a little contribution for the community. I did not tested it with many browsers, but it worked FF 3.5/IE7/IE8.
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:
And a tree code example
Now the nodes with type DIRECTORY also have empty directory image for nodes without children.
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.
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.