tree2

[Rob Decker]

I'm trying to use the tree2 component in a project. Because I have to load a 
large 
amount of data I need to use the server-side option so that I only have to load 
visible data. 

I like the plus/minus toggles however clicking them seems to only call 
the 'value'/backingbean.method. It seems to me this is where I want the 
actionListener 
so I can decide what data to load given that a node is expanding/collapsing. 

I pulled the images out of the jar so I could use them in commandLinks on my 
jsp page. 
I'd like to use the 'lines' but I can't tell how to determine which node is 
being 
layed out. The documentation is very sparse. I don't have alot of time to try 
to 
figure out what all the code for it does so I hope someone can help me with 
this. If I 
can get this working within a few days I can convert my current struts version 
to 
myfaces. 

I've pasted what I have in the jsp below. I think the varNodeToggler 't' 
variable 
corresponds to a HTMLTree UIComponent. What does 'var' correspond to (a 
TreeNode?) and 
if so within each of the facets (see below - 'branch' and 'leaf') does it 
correspond 
to the current node? How do I get my object that the TreeNode wraps? 
t.getValue()?

One thing I'd like to accomplish are using the plus/minus 'lines'. To do so I 
need to 
know which is the first node (I made a nav-plus-line-first.gif to get rid of 
the top 
line) and which is the last child. I see lastChild in HTMLTree. How do I tell 
when the 
first node is being layed out? Is there a way to tell the current level?



So far I have the following in the jsp:

<x:tree2 value="#{treeBacker.treeData2}" id="server-tree" var="node" 
varNodeToggler="t" clientSideToggle="false" showRootNode="false" 
showNav="false" 
showLines="false">
                
                <f:facet name="branch">
                        <h:panelGroup>
                                <h:commandLink immediate="true" id="hl1" 
actionListener="#{treeBacker.select}" action="#{t.toggleExpanded}">
                                        <h:graphicImage 
value="/images/nav-plus.gif" 
rendered="#{!t.nodeExpanded}" border="0"/>
                                        <h:graphicImage 
value="/images/nav-minus.gif" 
rendered="#{t.nodeExpanded}" border="0"/>
                                </h:commandLink>
                                <h:commandLink immediate="true" id="hl2" 
actionListener="#{treeBacker.select}">
                                        <h:graphicImage 
value="/images/yellow-folder-
open.png" rendered="#{t.nodeExpanded}" border="0"/>
                    <h:graphicImage value="/images/yellow-folder-closed.png" 
rendered="#{!t.nodeExpanded}" border="0"/>
                </h:commandLink>
                <h:outputText value="#{node.description}" 
styleClass="nodeFolder"/>
                <h:outputText value="(#{node.childCount})" 
styleClass="childCount" 
rendered="#{!empty node.children}"/>
            </h:panelGroup>
        </f:facet>
        
        <f:facet name="leaf">
                        <h:panelGroup>
                                <h:commandLink immediate="true" 
styleClass="document">
                                        <h:graphicImage 
value="/images/document.png" 
border="0"/>
                                        <h:outputText 
value="#{node.description}"/>
                                        <f:param name="docNum" value="#
{node.identifier}"/>
                                </h:commandLink>
                        </h:panelGroup>
                </f:facet>
                
        </x:tree2>
--
Rob

@objectsource.org