1 2 Previous Next 24 Replies Latest reply on Dec 4, 2011 6:25 PM by paul.dijou

PrimeFaces and RichFaces compatibility issue

pmeidl Jan 27, 2011 5:49 AM

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

jbalunas Jan 27, 2011 10:01 AM (in response to pmeidl)

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?
Actions
2. PrimeFaces and RichFaces compatibility issue

pmeidl Jan 27, 2011 10:45 AM (in response to jbalunas)

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.
Actions

3. Re: PrimeFaces and RichFaces compatibility issue

pmeidl Jan 28, 2011 4:45 AM (in response to jbalunas)

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

nbelaevski Jan 30, 2011 5:13 PM (in response to pmeidl)

Hi Patrick,

As a workaround try loading RichFaces version of jQuery before PrimeFaces one, using h:outputScript tag.
Actions
5. Re: PrimeFaces and RichFaces compatibility issue

pmeidl Feb 1, 2011 3:28 AM (in response to nbelaevski)
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.
Actions
6. Re: PrimeFaces and RichFaces compatibility issue

nbelaevski Feb 1, 2011 5:49 AM (in response to pmeidl)

Well, try this:

<h:outputScript value="jquery.js" />
<h:outputScript value="jquery/jquery.js" library="primefaces" />
Actions
7. PrimeFaces and RichFaces compatibility issue

jerarckill Feb 8, 2011 11:52 AM (in response to nbelaevski)
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.
Actions
8. PrimeFaces and RichFaces compatibility issue

nbelaevski Feb 8, 2011 1:20 PM (in response to jerarckill)

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>
Actions
9. PrimeFaces and RichFaces compatibility issue

stephane_ Feb 10, 2011 2:01 PM (in response to pmeidl)

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 ...
Actions
10. PrimeFaces and RichFaces compatibility issue

nbelaevski Feb 10, 2011 2:11 PM (in response to stephane_)

Stephane,

Can you please provide more details: i.e. page code?
Actions
11. Re: PrimeFaces and RichFaces compatibility issue

pmeidl Feb 15, 2011 4:23 AM (in response to nbelaevski)

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.
Actions
12. Re: PrimeFaces and RichFaces compatibility issue

nbelaevski Feb 15, 2011 4:51 AM (in response to pmeidl)

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.
Actions
13. Re: PrimeFaces and RichFaces compatibility issue

nbelaevski Feb 15, 2011 4:53 AM (in response to stephane_)

Stephane,

Any update on this? Page code will be very helpful in reproducing the problem.
Actions
14. Re: PrimeFaces and RichFaces compatibility issue

pmeidl Feb 15, 2011 7:38 AM (in response to nbelaevski)

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...
Actions

1 2 Previous Next

Go to original post