1 2 Previous Next 24 Replies Latest reply on Dec 4, 2011 6:25 PM by Paul Dijou

    PrimeFaces and RichFaces compatibility issue

    Patrick Meidl Newbie

      I'm trying to use both PrimeFaces and RichFaces in the same project. I use PrimeFaces 2.2.RC2 and RichFaces 4.0.0.M5 on JSF2 (Mojarra 2.0.3.b03).

       

      when using some RichFaces components, some PrimeFaces components no longer work. it seems that simple RichFaces components (like rich:panel) don't cause issues, but RichFaces components using Javascript/Ajax do (e.g. rich:calendar or rich:progressBar).

       

      the symptoms in PrimeFaces components I see are e.g.:

       

      • p:fileUpload flash component no longer works, rather fallback (<input type=file>) is displayed
      • p:tabView doesn't render correctly (rather, p:tab titles are displayed as <ul>)
      • p:tooltip no longer works

       

      these are just the ones I had on the test page, so the list is of course not conclusive. some components still seem to work, e.g. p:dataTable with sorting.

       

      as far as I can tell, the RichFaces components work fine.

       

      it looks to me that there is an incompatibility in the javascript libraries used by RichFaces and PrimeFaces.

       

      anybody else seen the problem? any suggestions for solutions? (other than saying "stick to one library"...)

       

      TIA for any help.

       

      p.s. I also posted the question in the PrimeFaces support forum, see http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=7421

        • 1. PrimeFaces and RichFaces compatibility issue
          Jay Balunas Master

          We would certainly like to interoperate with other component libraries like primfaces, so I'd like to see what is going on.

           

          I'm guessing something with jquery versions or something like that.  Can you post your xhtml file, and what html was actually generated?

          • 2. PrimeFaces and RichFaces compatibility issue
            Patrick Meidl Newbie

            a problem with different jquery versions is also what somebody over in the PrimeFaces forum suggested.

             

            I'll put together a simple xhtml and html output to demonstrate the issue later today or tomorrow and post it here.

            • 3. Re: PrimeFaces and RichFaces compatibility issue
              Patrick Meidl Newbie

              so here is a simple example (xhtml and html output).

               

              1. in the first example, the PrimeFaces tooltip works:

               

              xhtml:

               

              {code:xml}

              <!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:f="http://java.sun.com/jsf/core"

                    xmlns:ui="http://java.sun.com/jsf/facelets"

                    xmlns:rich="http://richfaces.org/rich"

                    xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:p="http://primefaces.prime.com.tr/ui">

               

              <h:head>

                  <title>PrimeFaces / RichFaces test</title>

              </h:head>

               

              <h:body>

                  <f:view contentType="text/html">

                      <h:form>

                          <p:panel id="pfPanel" header="PrimeFaces p:panel">

                              <h:outputText id="text1" value="text with tooltip" />

                              <p:tooltip for="text1" value="this is the tooltip text" />

                          </p:panel>

                          <br /><br />

                          <rich:panel id="rfPanel" header="RichFaces rich:panel">

                              <f:facet name="title"/>

                              <p>A RichFaces Panel</p>

                          </rich:panel>

                      </h:form>

                  </f:view>

              </h:body>

               

              </html>

              {code}

               

              html output:

               

              {code:xml}

              <!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"><head><link type="text/css" rel="stylesheet" href="/idmapper-web/rfRes/skinning.ecss.jsf?db=eAErceGbBAADTgFZ" />

              <link type="text/css" rel="stylesheet" href="/idmapper-web/javax.faces.resource/menu/menu.css.jsf?ln=primefaces" />

              <link type="text/css" rel="stylesheet" href="/idmapper-web/javax.faces.resource/panel/panel.css.jsf?ln=primefaces" />

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/yui/utilities/utilities.js.jsf?ln=primefaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/core/core.js.jsf?ln=primefaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/menu/menu.js.jsf?ln=primefaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/panel/panel.js.jsf?ln=primefaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/tooltip/tooltip.js.jsf?ln=primefaces"></script>

              <link type="text/css" rel="stylesheet" href="/idmapper-web/rfRes/panel.ecss.jsf?db=eAErceGbBAADTgFZ&amp;ln=org.richfaces" />

              <link type="text/css" rel="stylesheet" href="/idmapper-web/javax.faces.resource/skins/sam/skin.css.jsf?ln=primefaces" />

               

              <title>PrimeFaces / RichFaces test</title>

              </head>

              <body>

              <form id="j_idt6" name="j_idt6" method="post" action="/idmapper-web/public/test1.jsf" enctype="application/x-www-form-urlencoded">

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

               

              <div id="j_idt6:pfPanel" class="ui-panel ui-widget ui-widget-content ui-corner-all">

                  <div id="j_idt6:pfPanel_header" class="ui-panel-titlebar ui-widget-header ui-corner-all">

                      <span class="ui-panel-title">PrimeFaces p:panel</span>

                  </div>

                  <div id="j_idt6:pfPanel_content" class="ui-panel-content ui-widget-content">

                      <span id="j_idt6:text1">text with tooltip</span>

                      <script type="text/javascript">jQuery(function() {widget_j_idt6_j_idt7 = new PrimeFaces.widget.Tooltip({global:false,forComponent:'j_idt6:text1',content:'this is the tooltip text',show:{when:{event:'mouseover'}, delay:140, effect:{length:500, type: 'fade'}},hide:{when:{event:'mouseout'}, delay:0, effect:{length:500, type: 'fade'}},position: {container:jQuery(PrimeFaces.escapeClientId('j_idt6:text1')).parent(),corner:{target:'bottomRight',tooltip:'topLeft'}}});});</script>

                  </div>

              </div>

              <script type="text/javascript">widget_j_idt6_pfPanel = new PrimeFaces.widget.Panel('j_idt6:pfPanel', {visible:true});</script>

               

              <br /><br />

               

              <div class="rf-p " id="j_idt6:rfPanel">

                  <div class="rf-p-hdr " id="j_idt6:rfPanel_header">RichFaces rich:panel</div>

                  <div class="rf-p-b " id="j_idt6:rfPanel_body">

                      <p>A RichFaces Panel</p>

                  </div>

              </div>

               

              <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8260735167394854162:5293530035134867886" autocomplete="off" />

               

              </form>

              </body>

              </html>

              {code}

               

              2. now if I add a rich:calendar, the tooltip stops working:

               

              xhtml (only diff is shown):

               

              {code:xml}

              <rich:calendar />

              {code}

               

              html output (diff):

               

              {code:xml}

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/jquery.js.jsf"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/jquery.position.js.jsf"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/richfaces.js.jsf"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/richfaces-base-component.js.jsf"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/richfaces-event.js.jsf"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/json-dom.js.jsf?ln=org.richfaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/jquery.effects.core.js.jsf?ln=org.richfaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/jquery.effects.highlight.js.jsf?ln=org.richfaces"></script>

               

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/JQuerySpinBtn.js.jsf?ln=org.richfaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/calendar-utils.js.jsf?ln=org.richfaces"></script>

              <script type="text/javascript" src="/idmapper-web/javax.faces.resource/calendar.js.jsf?ln=org.richfaces"></script>

              <link type="text/css" rel="stylesheet" href="/idmapper-web/rfRes/calendar.ecss.jsf?db=eAErceGbBAADTgFZ&amp;ln=org.richfaces" />

               

              [...]

               

                      <span id="j_idt6:j_idt13">

                          <span id="j_idt6:j_idt13Popup">

                              <input class="rf-ca-inp " id="j_idt6:j_idt13InputDate" name="j_idt6:j_idt13InputDate" readonly="readonly" style="vertical-align: middle; " type="text" />

                              <img alt="" class="rf-ca-btn " id="j_idt6:j_idt13PopupButton" src="/idmapper-web/rfRes/calendarIcon.png.jsf?v=4.0.0.20101226-M5&amp;db=eAH7f-X88f!PZzEAAB5uBeo_&amp;ln=org.richfaces.images" style="vertical-align: middle" />

                              <input autocomplete="off" id="j_idt6:j_idt13InputCurrentDate" name="j_idt6:j_idt13InputCurrentDate" style="display:none" type="hidden" value="01/2011" />

                          </span>

                          <span id="j_idt6:j_idt13Content" style="display: none;"></span>

                          <span id="j_idt6:j_idt13Script" style="display: none;">

                              <script type="text/javascript">RichFaces.ui.Calendar.addLocale("en",

                                  {"monthLabels":["January","February","March","April","May","June","July","August","September","October","November","December"] ,"minDaysInFirstWeek":1,"monthLabelsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] ,"firstWeekDay":0,"weekDayLabels":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] ,"weekDayLabelsShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"] } );

                                  new RichFaces.ui.Calendar("j_idt6:j_idt13", "en", {"currentDate":new Date(2011,0,28),"style":"z\u002Dindex: 3"} ).load();

                                  -->

                              </script>

                          </span>

                      </span>

              {code}

               

              so there are two things to observe:

               

              1. there is a stray closing comment tag in the rich:calendar inline javascript. I don't think though that this is the cause of the problem

               

              2. PrimeFaces loads jquery.js. when using rich:calendar, RichFaces loads another copy of this library. as was suggested before, the two versions of JQuery used might be incompatible, and this might be the cause of the problem.

               

              let me know if you need any further information to track down the issue.

              • 4. PrimeFaces and RichFaces compatibility issue
                Nick Belaevski Master

                Hi Patrick,

                 

                As a workaround try loading RichFaces version of jQuery before PrimeFaces one, using h:outputScript tag.

                • 5. Re: PrimeFaces and RichFaces compatibility issue
                  Patrick Meidl Newbie

                  Nick Belaevski wrote:

                   

                  As a workaround try loading RichFaces version of jQuery before PrimeFaces one, using h:outputScript tag.

                   

                  how would I do this? I tried this:

                   

                  {code:xml}

                  <h:outputScript value="jquery.js.jsf" />

                  {code}

                   

                  in the <h:head> section but the script still doesn't show up before the Primefaces version.

                  • 6. Re: PrimeFaces and RichFaces compatibility issue
                    Nick Belaevski Master

                    Well, try this:

                     

                    <h:outputScript value="jquery.js" />

                    <h:outputScript value="jquery/jquery.js" library="primefaces" />

                    • 7. PrimeFaces and RichFaces compatibility issue
                      Jérôme Jadoulle Newbie

                      Hello,

                       

                      my two cents on this since I have been working on a JSF2 proof of concept using:

                       

                      • Mojarra 2.0.3
                      • Richfaces 4 M5 and snapshot (20110204);
                      • Primefaces v2.2 (20110206).

                       

                      The 2 technologies are not working correctly when both used together in a page.

                      Just having the jars in the classpath does not make anything go wrong (obviously) but as soon as

                      xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:rich="http://richfaces.org/rich"

                      lines are added to the page, the Primefaces controls do not all work as expected anymore.  Some of them work up to some point while some others do not work at all.

                       

                      I tested your 2 lines so as to load richfaces jquery before the primefaces version but it did not do the trick.

                       

                      That's it.

                      Hope it will be solvable.

                      • 8. PrimeFaces and RichFaces compatibility issue
                        Nick Belaevski Master

                        So here is the updated code to fix the issue:

                         

                        <h:head>

                            <title>PrimeFaces / RichFaces test</title>

                                  <h:outputScript name="jquery.js" target="head" />

                        </h:head>

                        • 9. PrimeFaces and RichFaces compatibility issue
                          stephane_ Newbie

                          Same experience as Jerome

                           

                          RichFaces 4 M5 , PrimeFaces 2.2

                           

                          The fix above from nick breaks primefaces

                           

                          I am using primefaces's menubar and rich calendars, without the fix the menubar is broken , with the fix it works until the first submit then it is broken.

                           

                          The 'fix' also breaks primefaces's menubar when used without calendar ...

                          • 10. PrimeFaces and RichFaces compatibility issue
                            Nick Belaevski Master

                            Stephane,

                             

                            Can you please provide more details: i.e. page code?

                            • 11. Re: PrimeFaces and RichFaces compatibility issue
                              Patrick Meidl Newbie

                              Nick Belaevski wrote:

                               

                              So here is the updated code to fix the issue:

                               

                              <h:head>

                                  <title>PrimeFaces / RichFaces test</title>

                                        <h:outputScript name="jquery.js" target="head" />

                              </h:head>

                               

                              this fixes the issue for me. I tried it on a slightly more complex page, and all tested PrimeFaces components work (skinning, tooltip, panel, file upload, progressbar, datatable).

                               

                              one thing I observed is that if the first component found in the page is a RichFaces component, then the fix is not required. it seems that in this case, the RichFaces version of jquery.js is loaded first anyway.

                               

                              could you explain what's the reason for this issue, so that I can report back to PrimeFaces? when looking at the javascript, it looks like both RF and PF use jquery v1.4.4, so I don't understand what's the problem.

                              • 12. Re: PrimeFaces and RichFaces compatibility issue
                                Nick Belaevski Master

                                Patrick,

                                 

                                The reason is obvious - there are two different resource names for the same script, so it's being loaded twice. The second instance of jQuery script effectively overwrites global 'jQuery' variable together with all registered extensions. RichFaces components in the most are not represented as these extensions, so they are not sensitive to the instance of jQuery being used.

                                 

                                BTW, we have upgraded to jQuery 1.5, so another types of conflicts are likely to occur then.

                                • 13. Re: PrimeFaces and RichFaces compatibility issue
                                  Nick Belaevski Master

                                  Stephane,

                                   

                                  Any update on this? Page code will be very helpful in reproducing the problem.

                                  • 14. Re: PrimeFaces and RichFaces compatibility issue
                                    Patrick Meidl Newbie

                                    hi Nick,

                                     

                                    thanks for the explanation.

                                     

                                    Nick Belaevski wrote:

                                     

                                    BTW, we have upgraded to jQuery 1.5, so another types of conflicts are likely to occur then.

                                     

                                    that's a shame while the feature set of RF and PF are similar, I like some components better in one and some in the other framework, so it would be great to mix and match. I'm pretty sure that this is of high priority for many developers.

                                     

                                    this means that for now, I will stick to PrimeFaces because they have full JSF2 support in their stable release...

                                    1 2 Previous Next