You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Ma...@sanofi-aventis.com on 2008/01/10 15:58:14 UTC
problem with t:htmlTag and tree2
Hi,
I'm not sure if this is a bug but this has been driving me crazy for the
last hour or so. I have a modified tree2 to work with Ajax (via
Ajax4Jsf).
So the resulting code for the tree looks like this:
<t:tree2
value="#{mbDocuments.model}"
clientSideToggle="false"
var="node"
varNodeToggler="t"
showRootNode="false"
id="DocTree" >
<f:facet name="root"/>
<%-- Facet for expandable folders --%>
<f:facet name="treeFolder">
<a4j:commandLink
action="#{t.toggleExpanded}"
actionListener="#{mbDocuments.toggle}"
reRender="DocTree"
value="#{node.data.msEltLabel}"
immediate="false" >
<f:param name="docId"
value="#{node.data.msEltId}"/>
</a4j:commandLink>
</f:facet>
<%-- Facet for files --%>
<f:facet name="treeFile">
<t:commandLink
value="#{node.data.msEltLabel}"
action="LoadDocument" />
</f:facet>
</t:tree2>
When I say modified tree2, I mean specifically the renderer. What you
see above works just fine. I ran into some issues with formatting that
would have required me to put some very specific css things directly
into the renderer. To avoid this I figured I could just pull some of
that directly into the JSP page. I'm using <ul> and <li> to display the
tree, instead of tables... so originally I had the <li> come from the
renderer. But we want specific CSS classes depending on the item. So
after removing it from the renderer I ended up with this:
<%-- Facet for expandable folders --%>
<f:facet name="treeFolder">
<t:htmlTag value="li"
styleClass="#{t.nodeExpanded ? 'FolderLinkOpen' : 'FolderLink'}">
<a4j:commandLink
action="#{t.toggleExpanded}"
actionListener="#{mbDocuments.toggle}"
reRender="DocTree"
value="#{node.data.msEltLabel}"
immediate="false" >
<f:param name="docId"
value="#{node.data.msEltId}"/>
</a4j:commandLink>
</t:htmlTag>
</f:facet>
<%-- Facet for files --%>
<f:facet name="treeFile">
<t:htmlTag value="li"
styleClass="FileLink#{node.data.msEltType}">
<t:commandLink
value="#{node.data.msEltLabel}"
action="LoadDocument" />
</t:htmlTag>
</f:facet>
Now the result of this was not so nice. Basically the facets seems to
generate an extra <li>. I tested this by removing the t:htmlTag from the
treeFolder. Now after that the initial load appeared fine, but as soon
as I expand any node of the tree I get all kinds of extra <li>s all over
the place. It's hard to explain exactly what I mean here, but I tried
experimenting with removing the tag from the treeFolder facet, and then
when I expand a node, I can look at the DOM inspector and I'll see an
<li> surrounding a group of folders. If an expanded node has many files,
there will be an extra <li> in between each one. I thought maybe this
had to do with ajax4jsf. But then I tried something else, I tried
replacing <li> with <span> just to see if it would generate spans all
over the place and it worked just fine. This is why I think it may be
bug, but at the same time this seems like a very strange bug (if it is a
bug)... I don't have a test case at the moment but if I can't get this
working soon I may have to create a simple test case. Hopefully that
will reveal an error on my part... I find with JSF it's very easy to
overlook a minor detail and spend a while figuring out why it doesn't
work. But I guess this framework takes some practice.
Thanks for any help on this.
Matt