10 Replies Latest reply on May 25, 2012 2:46 PM by bleathem

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

    jasoningram

      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?
          bleathem

          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?
            jasoningram

            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?
              bleathem

              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?
                jasoningram

                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?
                  bleathem

                  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?
                    jasoningram

                    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?
                      jasoningram

                      Hi Brian,

                       

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

                       

                      Thanks again,

                      Jason

                      • 8. Re: Any way to have a context menu with a tree node target?
                        bleathem
                        • 9. Re: Any way to have a context menu with a tree node target?
                          jasoningram

                          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?
                            bleathem

                            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.