9 Replies Latest reply on May 29, 2008 11:52 AM by ajanz

richfaces style to non richfaces components

ajanz May 28, 2008 8:32 AM

hi,

i want to add richfaces style to non richfaces components, like shown on

http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf

but i can't get it work.

my page is

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<a4j:loadStyle src="rspanel.css" />
<html>
<head>

<title>Styletest</title>
<a4j:loadStyle src="rspanel.css" />
</head>
<body>
<h:form>
 <rich:panel >
 <h:panelGrid style="padding: 15px" styleClass="rsPanel" width="250"
 columns="2">

 <h:outputText styleClass="rsLabel" value="Name:" />
 <h:inputText styleClass="rsInput" value="" />

 <h:outputText styleClass="rsLabel" value="Job:" />
 <h:inputText styleClass="rsInput" value="" />
 <h:panelGroup/>

 <h:commandButton styleClass="rsButton" value="Submit">
 <a4j:support disableDefault="true" event="onclick" reRender="out" />
 </h:commandButton>

 <f:facet name="footer">
 </f:facet>

 </h:panelGrid>

 </rich:panel>


</h:form>
</body>
</html>

the css file is located in the same directory as the jsp.

its contents is

<?xml version="1.0" encoding="UTF-8"?>
<f:template xmlns:f="http:/jsf.exadel.com/template"
 xmlns:u="http:/jsf.exadel.com/template/util"
 xmlns="http://www.w3.org/1999/xhtml" >

<f:verbatim><![CDATA[

.rsPanel {
 border-width:1px;
 border-style:solid;
 padding:10px;
 background-position : top left;
 background-repeat : repeat-x;

}
.rsInput {
 border-style:solid;
 border-width:1px;
}
.rsButton {
 border-width:2px;
 border-style:outset;
}
.rsLabel {
 font-size: 12px;
}

]]></f:verbatim>

<u:selector name=".rsPanel">
 <u:style name="border-color" skin="panelBorderColor" />
 <u:style name="background-color" skin="headerBackgroundColor" />
 <u:style name="background-image" >
 <f:resource f:key="org.richfaces.renderkit.html.GradientA"/>
 </u:style>
</u:selector>

<u:selector name=".rsInput">
 <u:style name="background-color" skin="additionalBackgroundColor" />
</u:selector>

<u:selector name=".rsButton">
 <u:style name="background-image" value="none" />
 <u:style name="background-color" skin="additionalBackgroundColor" />
 <u:style name="border-color" skin="panelBorderColor" />
</u:selector>

<u:selector name=".rsLabel">
 <u:style name="color" skin="headerTextColor" />
</u:selector>


 <u:style name="color" skin="headerTextColor" />


</f:template>

what am i doing wrong?

1. Re: richfaces style to non richfaces components

sergeysmirnov May 28, 2008 3:28 PM (in response to ajanz)

Which version of the RichFaces you use?
Actions
2. Re: richfaces style to non richfaces components

sergeysmirnov May 28, 2008 3:37 PM (in response to ajanz)

In your current code, you have ".css", but it should be ".xcss". The file itself should have a .xcss extension
Actions
3. Re: richfaces style to non richfaces components

ajanz May 29, 2008 4:27 AM (in response to ajanz)

i use richfaces 3.2

i corrected from .css to .xcss but nothing changed.
Actions
4. Re: richfaces style to non richfaces components

ilya_shaikovsky May 29, 2008 5:58 AM (in response to ajanz)

our standard skinning classes - seems just override your styles.

You have two variants:

1) Learn about our standard elements skinning mechanism. (demosite, dev guide)
2) Turn it of via context params. (also described in our resources)
Actions
5. Re: richfaces style to non richfaces components

ajanz May 29, 2008 6:13 AM (in response to ajanz)

but i got this code from

http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf

where is the difference?
Actions
6. Re: richfaces style to non richfaces components

sergeysmirnov May 29, 2008 10:48 AM (in response to ajanz)

This is not exactly about about standard skinning. This section shows how to reuse the skin parameters in general.

This is about standard component skinning and skinning non-richfaces elements:
http://livedemo.exadel.com/richfaces-demo/richfaces/standardSkinning.jsf?c=StandardSkinning
Actions

7. Re: richfaces style to non richfaces components

ajanz May 29, 2008 11:19 AM (in response to ajanz)

ok i set the context param org.richfaces.CONTROL_SKINNING to enabled.

but

<h:commandButton> was not skinned....

code is

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<html>
<head>
<title>Dokument </title>

</head>
<body>
<f:view>
 <f:loadBundle
 basename="my.resources.example_messages"
 var="example_messages" />
 <h:form id="form1" enctype="multipart/form-data">
 <h:outputText value="#{SessionBean.user}" />

 <rich:panel>
 <div id="padding" style="padding: 20px">
 <h:panelGrid style="padding: 15px" styleClass="rsPanel" columns="2">
 <h:outputText value="#{example_messages['fileupload_gimmeimage']} " />
 <t:inputFileUpload id="fileupload" accept="image/*"
 value="#{fileUploadForm.upFile}" storage="file"
 styleClass="fileUploadInput" required="true" maxlength="200000" />

 <h:commandButton value="#{example_messages['fileupload_button']}"
 action="#{fileUploadForm.upload}" /><h:commandButton value="Ok" onclick="window.close()"/>

 </h:panelGrid>
 </div>
 </rich:panel>
 <h:panelGrid columns="1" rendered="#{fileUploadForm.uploaded}">
 <h:outputText value="Die Datei wurde gespeichert unter " />
 <h:outputText value="#{fileUploadForm.name}" />
 </h:panelGrid>
 </h:form>
</f:view>
</body>
</html>

8. Re: richfaces style to non richfaces components

sergeysmirnov May 29, 2008 11:23 AM (in response to ajanz)

It is enabled by default. Are you sure, you use 3.2.0?
Do you see the button skinning on the http://livedemo.exadel.com/richfaces-demo/richfaces/standardSkinning.jsf?c=StandardSkinning with your browser?
Actions
9. Re: richfaces style to non richfaces components

ajanz May 29, 2008 11:52 AM (in response to ajanz)

yes is use 3.2.0 sr1

on the demo page the button is skinned correctly.
Actions

Go to original post