Page 1 of 1

Directory Tree with Empty Folders

Posted: 17 Jan 2011, 15:32
by Radulf
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:

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;
}
And a tree code example

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>
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.

Re: Directory Tree with Empty Folders

Posted: 21 Oct 2011, 11:50
by hermie
Thx it helped me alot