You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Rob Decker <ro...@objectsource.org> on 2005/03/24 19:24:07 UTC
tree2
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
Re: tree2
Posted by Sean Schofield <se...@gmail.com>.
> See my posts that followed for more info on what I'm trying to do. I've the
> plus/minus signs working as a commandLink with an actionListener for
> toggling (posted the code in another post).
I guess you have this working then?
> Currently I'm trying to create an adapter between my data and the TreeNode
> interface so I don't have to wrap all my objects 1 to 1 in TreeNodeBase
> objects. TreeNode returns a List for children but apparently using a
> TreeNode object that implements List cause an exception in the coercion code
> for 'value' (see earlier posts). That prevents me from going
> TreeNode.getChildren() { /*set state then */ return this; }.
See my earlier answer to your earlier posts. Yes you will need an
adapter. You are not constrained to use TreeNodeBase but you are
constrained to use TreeNode interface. As I said earlier, we can
explore using your own TreeModel if that is helpful.
> What I'd like in the end is to only load the object visible to the user
> (those in the root and open folders). In order to do that I need the
> sequence of events to be like this:
> On first view for a user I show the list of nodes in the root collapsed.
> The user clicks a plus next to a folder.
> My backing bean gets an event: identifier/expanded.
> I get the node using the identifier from my list of top level objects and
> set it's children as the current set of data (at this point I'm loading the
> children from the db).
Right. This is what the server-side toggle is for.
> I'm not sure how I'll do that last since a new backing bean gets created for
> each level and it seems to call getTreeData before I get the event (although
> maybe it's getting the parent level first, which would be ok).
What do you mean by a new backing bean for each level? Are you
talking about the objects that implement TreeNode? If so, then yes
you have them for each level. If you are talking about the object
that holds the tree data, then there is generally only one of those
(TreeBacker in the case of the simple example.)
You should be able to update the data in the component every time a
node expands. Take a look at using the binding attribute to get a
reference to the tree. Then you can update the data using setValue
whenever you need to. I believe that should work.
[snip]
> Rob
sean
Re: tree2
Posted by Rob Decker <ro...@objectsource.org>.
See my posts that followed for more info on what I'm trying to do. I've the
plus/minus signs working as a commandLink with an actionListener for
toggling (posted the code in another post).
Currently I'm trying to create an adapter between my data and the TreeNode
interface so I don't have to wrap all my objects 1 to 1 in TreeNodeBase
objects. TreeNode returns a List for children but apparently using a
TreeNode object that implements List cause an exception in the coercion code
for 'value' (see earlier posts). That prevents me from going
TreeNode.getChildren() { /*set state then */ return this; }.
What I'd like in the end is to only load the object visible to the user
(those in the root and open folders). In order to do that I need the
sequence of events to be like this:
On first view for a user I show the list of nodes in the root collapsed.
The user clicks a plus next to a folder.
My backing bean gets an event: identifier/expanded.
I get the node using the identifier from my list of top level objects and
set it's children as the current set of data (at this point I'm loading the
children from the db).
I'm not sure how I'll do that last since a new backing bean gets created for
each level and it seems to call getTreeData before I get the event (although
maybe it's getting the parent level first, which would be ok).
I'll be trying some more today but any info is useful.
Thanks,
Rob
----- Original Message -----
From: "Sean Schofield" <se...@gmail.com>
To: "MyFaces Discussion" <my...@incubator.apache.org>
Sent: Friday, March 25, 2005 9:02 AM
Subject: Re: tree2
> What are you trying to achieve? Do you want a server-side tree
> without folders? If I knew more about what you wanted your tree to
> look like that might help me answer your questions easier.
>
> I don't have my source code handy (I am on the road) so I will try to
> answer your questions as accurately as I can.
>
> I don't think it will be easy to use the plus/minus icons as
> server-side commandLinks. They are currently generated by the
> renderer and in client-side mode they have javascript attached to them
> but I believe the server-side mode does not have any listeners for
> them (since those are to be supplied by the programmer at design
> time.)
>
> We could look at possibly allowing the user to add a listener to these
> "navigation icons" but right now that's not an option (although I
> would certainly consider it.) Maybe we could allow the user to
> provide a single listener (as a binding method in a tag attribute) and
> the tree could add it to the nav links. Obviously this requires the
> user to supply some information though because the renderer doesn't
> normally know what you want to do when the nav icon is clicked (other
> than to expand the nodes in the server-side mode.)
>
> "var" does indeed refer to the current node (as you iterrate through
> the tree's contents.) It represents the current node regardless of
> node type (similar to dataTable.) "varNodeToggler" (in the example,
> called 't') refers to the object that is responsible for maintaining
> the expand/collapse state of the nodes. It actually is a reference to
> the tree itself but its technically not guaranteed to be the tree (I'm
> not sure if that's a good or bad idea yet.)
>
> Let me know a few more details about what you are trying to accomplish
> and I will try and help you out. For now it sounds like you would
> like to have the plus/minus icons work on the server side along with
> folder icons and you would like to have the
> "nav lines."
>
> sean
>
>
> On Thu, 24 Mar 2005 13:24:07 -0500, Rob Decker <ro...@objectsource.org>
wrote:
> >
> > 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
> >
> >
Re: tree2
Posted by Sean Schofield <se...@gmail.com>.
What are you trying to achieve? Do you want a server-side tree
without folders? If I knew more about what you wanted your tree to
look like that might help me answer your questions easier.
I don't have my source code handy (I am on the road) so I will try to
answer your questions as accurately as I can.
I don't think it will be easy to use the plus/minus icons as
server-side commandLinks. They are currently generated by the
renderer and in client-side mode they have javascript attached to them
but I believe the server-side mode does not have any listeners for
them (since those are to be supplied by the programmer at design
time.)
We could look at possibly allowing the user to add a listener to these
"navigation icons" but right now that's not an option (although I
would certainly consider it.) Maybe we could allow the user to
provide a single listener (as a binding method in a tag attribute) and
the tree could add it to the nav links. Obviously this requires the
user to supply some information though because the renderer doesn't
normally know what you want to do when the nav icon is clicked (other
than to expand the nodes in the server-side mode.)
"var" does indeed refer to the current node (as you iterrate through
the tree's contents.) It represents the current node regardless of
node type (similar to dataTable.) "varNodeToggler" (in the example,
called 't') refers to the object that is responsible for maintaining
the expand/collapse state of the nodes. It actually is a reference to
the tree itself but its technically not guaranteed to be the tree (I'm
not sure if that's a good or bad idea yet.)
Let me know a few more details about what you are trying to accomplish
and I will try and help you out. For now it sounds like you would
like to have the plus/minus icons work on the server side along with
folder icons and you would like to have the
"nav lines."
sean
On Thu, 24 Mar 2005 13:24:07 -0500, Rob Decker <ro...@objectsource.org> wrote:
>
> 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
>
>