We're working on mixing PrimeFaces with RichFaces in a JBOSS/Seam environment. Wonder what anyone's thoughts were on best practice for skinning so that we can get the components from PF and RF looking consistent.
Specifically we were just looking at layout component and wanted to update the CSS in that and dad thought of an additional CSS file to be included in the template as in:
Page.xhtml:
Code: Select all
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="/layout/template.xhtml">
<ui:define name="head">
.
.
</ui:define>
<ui:define name="body">
.
.
</ui:define>
</ui:composition>
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://richfaces.org/a4j"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:p="http://primefaces.prime.com.tr/ui"
contentType="text/html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>mbw_ui</title>
<link rel="shortcut icon" href="#{request.contextPath}/favicon.ico"/>
<a:loadStyle src="resource:///stylesheet/theme.xcss"/>
<a:loadStyle src="/stylesheet/theme.css"/>
<a:loadStyle src="/stylesheet/fullcalendar.css"/>
<a:loadScript src="/js/fullcalendar.min.js" />
<a:loadStyle src="/stylesheet/pf-rf-central.css"/>
<p:resources />
<ui:insert name="head"/>
</head>
<body>
<p:layout fullPage="true">
<p:layoutUnit position="north">
</p:layoutUnit>
<p:layoutUnit position="south">
</p:layoutUnit>
<p:layoutUnit position="west">
<h:outputText value="West unit content" />
</p:layoutUnit>
<p:layoutUnit position="east">
<h:outputText value="East unit content" />
</p:layoutUnit>
<p:layoutUnit position="center">
</p:layoutUnit>
</p:layout>
</body>
</html>
</f:view>Code: Select all
/* Rich Faces - Prime Faces Consistency CSS */
body {
margin: 0 0 0 0;
width: 990px;
}
/**** Layout ****/
.pf-layout-resizer{background:#f68f1d;border:none;}
.pf-layout-toggler{background:#AAA;}
.pf-layout-pane{padding:10px;background:#FFF;border:1px solid #BBB;overflow:auto;}
/***** END Layout ****
Interestingly, this doesn't work. While the body CSS (width 990px etc) does work the .pf-layout-* CSS does not. If the .pf-layout-* css is put in the <head> of page.xhtml it does work.
So a couple of questions:
1) What are we doing wrong here such that it doesn't work
2) Is this the right approach to attempting to skin PrimeFaces or can folks recommend better alternatives?
Many thanks
Martin
). Thanks again Cagatay.