if you are working with Oracle ADF, you must have a menu with af:tree component here or there. i also used af:tree as main menu, but there was this annoying expand icon for leaf nodes. i googled it for a while and searched in forums, nothing has appeared. so i solved this with kind of tricky solution.
this is how a recursive af:tree looks like with expand icons on leaf nodes:
as you see, we can’t figure out which one is leaf node that has no child. you should try to expand to see if there are child nodes:
and here is tricky part. we need a 10px * 10px white spacer image and some inline styling in af:tree nodeStamp facet. initial facet code is:
<f:facet name="nodeStamp"> <af:outputText value="#{node}" id="ot1"/> </f:facet>
then i added af:image and css positioning. but most important part is rendered attribute.
<f:facet name="nodeStamp"> <af:group id="g1"> <af:image id="i1" source="/i/spacer.png" rendered="#{node.children == null}" inlineStyle="position: absolute; margin-left:-17px; border: 2px solid white; width: 15px; height: 10px;"/> <af:outputText value="#{node}" id="ot1"/> </af:group> </f:facet>
i added red border styling to make easy to see where spacer image is located and how it covers expand icon.
this tricky solution has challenges like adf skinning. i am using blafplus-rich skin family and white spacer is suitable for me. if you have another skin, you may need different image or css styling.
i prepared test application with Oracle JDeveloper 11.1.1.4.0.
Can you pls post what was cut off in your af:image?
af:image tag has not cut off. it has 4 attributes as seen(id, source,rendered, inlineStyle).
he…what is the “children” suggest here?
“node.children” gives child nodes of current node.
i have solved it by override the generated ADF css styleClass with
background-image: none !important;
thank you Adel.
thanks a lot for the post.
Is there a similar way to find if a node is disclosed or not, so that I could use a different icon for each.
hi Vishnu,
i assume that you want to change expanded icon. so best way to change icon is to use adf skin selectors.
check out following documentation.
https://docs.oracle.com/middleware/1213/adf/tag-reference-skin-selectors/toc.htm#tree
thanks a lot for the reply, Ayhan.
I do not exactly want to change the expanded icon, but want to know from an EL if node is expanded or not.
Such as ‘node.children==null’, I thought of discovering something similar ‘node.expanded==true’. No luck.
We have a requirement to change other row level icon and text based on this.
-Vishnu
Vishnu, you can focus on rowDisclosureListener attribute of af:tree component for your requirement
You might want to be aware that this will cause the query to execute for each rendered level because the framework needs to query the each node’s children to know if it has children or not.
You could consider doing the child count in the query’s select list to avoid the cost of the extra queries. It depends on your data. then you could replace node.children with node.childCount eq 0
Thank you Luis for valuable input.
Sure, for bigger menus your concern will bother who uses this method.
Your suggestion points well.
In my opinion, this kind of always-shown-user-specific-menus should be cached after user logs in. So there is no need for re-querying db.
Thank you sou much Ayhan Güngör for your post. It was much needed one for me.
Thank you adel based on your point , I made a solution. Thanks much
.noIconForLeafNodes af|treeTable::collapsed-icon-style {
background-image: none !important;
}
.noIconForLeafNodes af|treeTable::expanded-icon-style {
background-image: none !important;
}
styleClass=”#{ your child node condition ? ‘noIconForLeafNodes’ : ”}”