10 Replies Latest reply: May 25, 2012 2:46 PM by Brian Leathem RSS

Any way to have a context menu with a tree node target?

Jason Ingram Newbie

I'm using RichFaces 4.2.  I'm trying to make use of context menus with trees.  I'm just wondering if it's possible to have context menus attached to specific nodes.

 

I tried the following:

 

    <h:form>

      <p>Procedures</p>

      <a4j:outputPanel ajaxRendered="true" layout="block">

        <rich:tree rendered="#{not empty testStructureBean.uutSelected}"

                   id="uutProceduresTree"

                   nodeType="#{node.nodeType}"

                   var="node"

                   value="#{testStructureBean.uutProceduresTree}"

                   toggleType="client"

                   selectionType="ajax"

                   selectionChangeListener="#{testStructureBean.selectProcedure}">

          <rich:treeNode type="UUT" expanded="#{true}" id="uutProcTreeRoot">

            Procedures for (#{node.label})

          </rich:treeNode>

          <rich:treeNode type="TEST_PROCEDURE">

            #{node.label}

          </rich:treeNode>

        </rich:tree>

        <rich:contextMenu target="uutProcTreeRoot" mode="ajax">

          <rich:menuItem label="Insert Procedure" />

        </rich:contextMenu>

      </a4j:outputPanel>

    </h:form>

 

The problem is that the context menu will appear for any node I right click on, or even if I right click anywhere in the tree area.

 

Thanks,

Jason

  • 1. Re: Any way to have a context menu with a tree node target?
    Brian Leathem Master

    Jason,

     

    You can use the targetSelector attribute of the contextMenu to override which child elements of the tree you will attach the contextMenu to.  So you could add a class "menuable" to the nodes of interest, then specify a targetSelector=".menuable".

     

    Brian

  • 2. Re: Any way to have a context menu with a tree node target?
    Jason Ingram Newbie

    Hi Brian,

     

    Thanks for the speedy response.  Unfortunately I haven't been able to get your suggestion to work.  I'm using RichFaces 4.2.2 and here's my code as it currently stands:

     

            <h:form rendered="#{not empty testStructureBean.uutSelected}">

              <rich:tree id="uutProceduresTree"

                         nodeType="#{node.nodeType}"

                         var="node"

                         value="#{testStructureBean.uutProceduresTree}"

                         toggleType="client"

                         selectionType="ajax"

                         selectionChangeListener="#{testStructureBean.selectProcedure}">

                <rich:treeNode type="UUT"

                               expanded="#{true}"

                               iconExpanded="/images/Trash_30x30.gif"

                               iconCollapsed="/images/Trash_30x30.gif"

                               iconLeaf="/images/Trash_30x30.gif"

                               styleClass="menuable">

                  Procedures for (#{node.label})

                </rich:treeNode>

                <rich:treeNode type="TEST_PROCEDURE"

                               iconExpanded="/images/GreenCheckMark_30x30.gif"

                               iconCollapsed="/images/GreenCheckMark_30x30.gif"

                               iconLeaf="/images/GreenCheckMark_30x30.gif">

                  #{node.label}

                </rich:treeNode>

              </rich:tree>

              <rich:contextMenu mode="ajax" target="uutProceduresTree" targetSelector="#{.menuable}">

                <rich:menuItem label="Insert Procedure" />

              </rich:contextMenu>

            </h:form>

     

    This results in a the following error message:

     

    javax.servlet.ServletException: /manageTestStructure.xhtml @88,98 targetSelector="#{.menuable}" Error Parsing: #{.menuable}

    javax.faces.webapp.FacesServlet.service(FacesServlet.java:321)

    org.jboss.weld.servlet.ConversationPropagationFilter.doFilter(ConversationPropagationFilter.java:67)

     

    Also, I've tried using targetSelector="#{menuable}" (without "."), targetSelector=".menuable", and targetSelector="menuable" (all with and without the target attribute set).  Only "#{.menuable}" causes a parse error, but the other attempts just didn't work (i.e. had the same behavior I described in my previous post).

     

    I haven't been able to find much on the targetSelector attribute of contextMenu.  Any help is greatly appreciated.

     

    Thanks again,

    Jason

  • 3. Re: Any way to have a context menu with a tree node target?
    Brian Leathem Master

    sorry, typo, that attribute shouldn't be EL: targetSelector=".menuable"

     

    note: I'll update the previous reply, so as not to confuse future readers.

  • 4. Re: Any way to have a context menu with a tree node target?
    Jason Ingram Newbie

    with targetSelector=".menuable", I no longer get the EL related parse exception, but I still don't get the desired behavior.  The context menu still appears if I right click on any nodes (not just those with styleClass="menuable"), or even anywhere in the vicinity of the tree (not on a specific node).

     

    Thanks again,

    Jason

  • 5. Re: Any way to have a context menu with a tree node target?
    Brian Leathem Master

    This attribute was introduced in resolution to RF-11936 in RichFaces 4.2.1.CR1 - what version of RichFaces are you using?  I'd recommend you grab 4.2.2.Final.

     

    If you are using a version of RichFaces with this fix, debug this line of javascript (find the tree.js script file in your developer tools, and set a breakpoint):

    https://github.com/richfaces/components/blob/develop/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.js#L509

     

    Be sure the selector is doing what you think it should be doing.

     

    Brian

  • 6. Re: Any way to have a context menu with a tree node target?
    Jason Ingram Newbie

    I'm using RichFaces 4.2.2.Final.  I set a couple breakpoint in the contextMenuAttach function, but it doesn't appear to be getting called.

  • 7. Re: Any way to have a context menu with a tree node target?
    Jason Ingram Newbie

    Hi Brian,

     

    I still haven't resolved this issue.  Is there any way a basic working example could be posted?

     

    Thanks again,

    Jason

  • 9. Re: Any way to have a context menu with a tree node target?
    Jason Ingram Newbie

    Thanks for the example.

     

    Do I need to use the iteration tags for this to work?  Also, I tried switching to the iteration tags (xmlns:it="http://richfaces.org/iteration") and now my tree isn't being rendered (same tree that was being rendered fine with rich:tree)

     

    For example, this:

    ----------------------------

    <?xml version="1.0" encoding="UTF-8"?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:it="http://richfaces.org/iteration">

    <h:head>

      <title>Manage Test Structure</title>

    </h:head>

    <h:body>

      <h:form>

        <p>UUT Hierarchy</p>

        <it:tree value="#{testStructureBean.uutHierarchy}"

                 var="node"

                 nodeType="#{node.nodeType}"

                 id="uutHierarchyTree">

          <it:treeNode type="PROGRAM">

            #{node.label}

          </it:treeNode>

          <it:treeNode type="UUT">

            #{node.label}

          </it:treeNode>

        </it:tree>

      </h:form>

    </h:body>

    </html>

     

    results in the following HTML:

    --------------------------------------------

    <?xml version="1.0" encoding="UTF-8"?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:it="http://richfaces.org/iteration"><head><link type="text/css" rel="stylesheet" href="/TEIv2/rfRes/skinning.ecss.xhtml?db=eAG7mShzEgAFjAIg" />

      <title>Manage Test Structure</title></head><body>

    <form id="j_idt7" name="j_idt7" method="post" action="/TEIv2/manageTestStructureIter.xhtml" enctype="application/x-www-form-urlencoded">

    <input type="hidden" name="j_idt7" value="j_idt7" />

     

     

        <p>UUT Hierarchy</p>

        <it:tree value="[TeiTreeNode{data=null}]" var="node" id="uutHierarchyTree">

          <it:treeNode type="PROGRAM">

           

          </it:treeNode>

          <it:treeNode type="UUT">

           

          </it:treeNode>

        </it:tree><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7696563685767449078:-260248192359605777" autocomplete="off" />

    </form></body>

    </html>

     

    Thanks again,

    Jason

  • 10. Re: Any way to have a context menu with a tree node target?
    Brian Leathem Master

    The iteration tags are part of the rich: tags you use when you include the richfaces-ui jar.  The dev-example just uses them before they are aggregated into the single jar (to allow for a quicker turnaround when developing compnents).  So "no", you don't need the iteration tags.