PrimeFaces & RichFaces css styles compatibility problems

[kislo_metal]

PrimeFaces 2.0.2 & RichFaces 4.0.0ALPHA2 compatibility problems.
Hi!

I am using RichFaces and PrimeFaces in one project, and have strange behavior of PrimeFaces themes.
Problem: some components not applying PrimeFaces them.

I tried to decelerate them by :
web.xml :

Code: Select all

<context-param>
        <param-name>primefaces.skin</param-name>
        <param-value>sam</param-value>
    </context-param>

some.xhtml :

Code: Select all

<h:head>    
    <link type="text/css" rel="stylesheet" href="/resources/css/sam/skin.css"/>
</h:head>

Result:
This one got a valid style

Code: Select all

<p:menubar>
                        <p:submenu label="Some"> lol</p:submenu>

                        <p:submenu label="Some2"> lol2</p:submenu>
                    </p:menubar>

But this is wrong (it use RichFaces style, which is applied, as I understand to all components):

Code: Select all

<p:commandButton value="log out prime" action="#{securityBacking.logout}"/>

and disabling of RichFaces give no results :
web.xml

Code: Select all

<context-param>
        <param-name>org.richfaces.SKIN</param-name>
        <param-value>plain</param-value>
    </context-param>

Q: Any ideas for this issue ?

[cagatay.civici]

I don't know much about styles of Richfaces, can you check with firebug to find out what applies to p:commandButton? Maybe RichFaces has also styles for buttons that interfere with PrimeFaces style.

[kislo_metal]

in some.xhtml

Code: Select all

<p:commandButton value="log out prime test" />

render out:

Code: Select all

<input xmlns="http://www.w3.org/1999/xhtml" id="j_idt38:j_idt43_submit" name="j_idt38:j_idt43_submit" value="log out prime test" onclick="PrimeFaces.ajax.AjaxRequest('/hydra/faces/login.xhtml',{formId:'j_idt38',global:true},{'j_idt38:j_idt43_submit':'j_idt38:j_idt43_submit'});return false;" type="submit" />

I just made a test without richfaces at all - and them not applied to p:commandButton, but in the same time for p:menuButton and p:menubar .
So.. maybe it is specific for 2.0.2 ?

[cagatay.civici]

Well, PrimeFaces themes are not supported in 2.0.2 anyway, you need a nightly build of 2.1.RC1-SNAPSHOT to give it a try.

[kislo_metal]

Ok. I will try to use it.

I a, using http://repository.prime.com.tr as maven repository, but there is no index, could it be added? (as I understand, maven repo structure- .index present information of repository content)

[kislo_metal]

I tried it..
So i got similar what i was taking about early :
When rich faces used :
some login.xhtml

Code: Select all

<p:commandButton value="log out prime test" />

rendered

Code: Select all

<button xmlns="http://www.w3.org/1999/xhtml" id="j_idt38:j_idt43" name="j_idt38:j_idt43" onclick="PrimeFaces.ajax.AjaxRequest('/hydra/faces/login.xhtml',{formId:'j_idt38',global:true},{'j_idt38:j_idt43':'j_idt38:j_idt43'});return false;" type="submit">log out prime test</button>

I got the styles of richfaces css them .

Code: Select all

background-color: #008894;
background-image: url(http://192.168.44.48:8282/hydra/faces/rfRes/org.richfaces.renderkit.html.images.ButtonBackgroundImage?db=eAG7cLLy!5QOhv9M3AwMDAAy1gU6);
background-position: 0% 0%;
background-repeat: repeat-x;
border-color: #11808A;
border-width: 1px;
color: white;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;

without richfaces
code:

Code: Select all

<button xmlns="http://www.w3.org/1999/xhtml" id="j_idt38:j_idt43" name="j_idt38:j_idt43" onclick="PrimeFaces.ajax.AjaxRequest('/hydra/faces/login.xhtml',{formId:'j_idt38',global:true},{'j_idt38:j_idt43':'j_idt38:j_idt43'});return false;" type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover ui-state-active" role="button" aria-disabled="false"><span class="ui-button-text">log out prime test</span></button>

css: (ui-button)

Code: Select all

cursor: pointer;
display: inline-block;
margin-right: 0.1em;
overflow: visible;
padding: 0px;
position: relative;
text-align: center;
text-decoration: none !important;
zoom: 1;

any ideas?

[teknologist]

You need to deactivate Richfaces advanced skinning which skins everything, even basic html buttons.

To do that just add these to your web.xml:

<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>disable</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING_LEVEL</param-name>
<param-value>basic</param-value>
</context-param>

[kislo_metal]

thak you, I will try.

[kembljoe]

Hi,

I need to know the progress of this issue. I am getting the same problem with primefaces-2.2.RC1 and richfaces-4.0.0.M4. The p:commandButton and p:tab fields' css is getting corrupted when I use both. But without richfaces, primefaces is correctly rendering the fields.

I applied the ideas given in this topic but they did not work. Please give some more ideas if possible.

[kembljoe]

Hi,

A few more information on this issue:

the html generated for the p:commandbutton with primefaces and richfaces:

<button type="submit" onclick="PrimeFaces.ajax.AjaxRequest('/Criminor-war/faces/home.xhtml',{formId:'j_idt7:j_idt32',async:false,global:true,source:'j_idt7:j_idt32:j_idt96',process:'@all'});return false;" name="j_idt7:j_idt32:j_idt96" id="j_idt7:j_idt32:j_idt96">Search</button>

the html generated for the p:commandbutton with primefaces only:

<button type="submit" onclick="PrimeFaces.ajax.AjaxRequest('/Criminor-war/faces/home.xhtml',{formId:'j_idt7:j_idt32',async:false,global:true,source:'j_idt7:j_idt32:j_idt94',process:'@all'});return false;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" name="j_idt7:j_idt32:j_idt94" id="j_idt7:j_idt32:j_idt94" role="button" aria-disabled="false"><span class="ui-button-text">Search</span></button>

The class attribute is not applied for primefaces and richfaces used together. So somehow richfaces is preventing the the style classes from being applied. Therefore skinning problem occurs.