6 Replies Latest reply on Dec 22, 2009 4:54 PM by mnott

    Potential Issue with Rich Tree and Primefaces layoutunit

    mnott Dec 17, 2009 7:40 AM

      I've noticed that when I integrate a richtree with another jsf component (primefaces layoutunit), the tree becomes mostly unusable once such a layout unit (a splitter pane) is closed and reopened. The top level of the entries in the richtree get all marked on mouse over, and can then only react to keyboard events, no longer to mouse events. that does not happen if the splitter pane is resized to size 0 manually by dragging the splitter bar, only when using a "close" function that that pane provides.

       

      HTH,

       

      M

      • 5454 Views
      • Tags:
        • 1. Re: Potential Issue with Rich Tree and Primefaces layoutunit
          ilya_shaikovsky
          ilya_shaikovsky Dec 17, 2009 7:43 AM (in response to mnott)
          As I know Primefaces uses prototype.js and seems there is a conflicts with RF bundled version.
            • Actions
          • 3. Re: Potential Issue with Rich Tree and Primefaces layoutunit
            mnott Dec 17, 2009 8:47 AM (in response to nbelaevski)
            Is there a solution?
              • Actions
            • 4. Re: Potential Issue with Rich Tree and Primefaces layoutunit
              nbelaevski
              nbelaevski Dec 17, 2009 1:45 PM (in response to mnott)
              Workaround for jQuery is described in the linked thread. Consult Primefaces documentation/resources for configuring the same in used layout component.
                • Actions
              • 5. Re: Potential Issue with Rich Tree and Primefaces layoutunit
                mnott Dec 22, 2009 4:45 PM (in response to nbelaevski)

                Thanks for the help. I figured the following solution:

                 

                a) I was using primefaces to have splitter panels. Just for the panels, Primefaces is not needed. JQuery is sufficient and works together with Richfaces.

                b) Looking into

                 

                  http://layout.jquery-dev.net/downloads.html

                 

                and particularly into the source code of

                 

                http://layout.jquery-dev.net/download/simple.html

                 

                and with a little help from this forum I came up with


                <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
                <%@ page contentType="text/html; charset=UTF-8" %>
                <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                <f:view>
                <html>
                <head>
                ...

                <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />
                <a4j:loadScript src="js/jquery.ui.all.js" />
                <a4j:loadScript src="js/jquery.layout.min.js" />
                <script type="text/javascript">
                  var m_outerLayout;
                  jQuery(document).ready(function () {
                    m_outerLayout = jQuery('body').layout({
                      slideTrigger_open: "mouseover",
                      fxName: "none",
                      north__resizable: false,
                      north__slidable: true,
                      north__closable: true,
                      west__resizable: true,
                      west__slidable: true,
                      west__closable: true
                    });
                  });
                </script>

                <style type="text/css">
                 .ui-layout-pane { /* all 'panes' */ 
                   background: #FFF; 
                   border: 1px solid #BBB; 
                   padding: 10px; 
                   overflow: auto;
                 } 

                 .ui-layout-resizer { /* all 'resizer-bars' */ 
                   background: #DDD; 
                 } 

                 .ui-layout-toggler { /* all 'toggler-buttons' */ 
                   background: #AAA; 
                 } 
                </style>

                </head>
                <body style="margin:0;padding:0;margin-right:0px;">
                  <a4j:region>
                  <h:form>
                      <DIV class="ui-layout-north" style="padding:0;overflow-x: hidden;overflow-y: hidden;">
                      ... bla ...
                      </DIV>
                      <DIV class="ui-layout-west" size="200" style="padding:0;overflow-x: hidden;">

                        <rich:tree id="tree" style="width:50px" 
                         ...
                        />

                            </DIV>

                            <DIV class="ui-layout-center" style="padding:0;overflow-x:hidden;">

                            ...blubber...

                            </DIV>

                      </h:form>
                      </a4j:region>
                  </body>
                </html>
                </f:view>

                 

                In particular, it was necessary to include the jquery.js from richfaces:

                 

                <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />

                 

                The other two files I've downloaded directly from the above source.

                 

                <a4j:loadScript src="js/jquery.ui.all.js" />
                <a4j:loadScript src="js/jquery.layout.min.js" />

                 

                HTH,

                 

                M

                  • Actions
                • 6. Re: Potential Issue with Rich Tree and Primefaces layoutunit
                  mnott Dec 22, 2009 4:54 PM (in response to mnott)
                  P.S. I just saw the jquery.ui.all.js is even not needed for the splitters if you're happy with just closing/opening (and not dragging). Saves another 300k or so.
                    • Actions