Since PrimeFaces 3.0, it provides a very customizable resource ordering. See following order :
1. “first” facet if defined.
<f:facet name="first">
<!-- load css, js or others -->
</f:facet>
2. PrimeFaces – JSF registered CSS.
3. PrimeFaces – Theme CSS.
4. “middle” facet if defined.
<f:facet name="middle">
<!-- load css, js or others -->
</f:facet>
5. PrimeFaces – JSF registered JS.
6. h:head content.
<h:head>
<!-- load css, js or others -->
</h:head>
7. “last” facet if defined.
<f:facet name="last">
<!-- load css, js or others -->
</f:facet>
1. Example
A common use case is add “meta” tag via “first” facet and override “css” via “last” facet. The “middle” facet is rarely use.
demo.xhtml
<!DOCTYPE html>
<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:p="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet library="default" name="css/bootstrap.css" />
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<f:facet name="first">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Resource ordering in PrimeFaces</title>
</f:facet>
</h:head>
<h:body>
<f:facet name="last">
<h:outputStylesheet library="default" name="css/style.css" />
</f:facet>
</h:body>
2. Result
Above JSF tags will generate following HTML output :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- comment : "first" faces -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Resource ordering in PrimeFaces</title>
<!-- comment : PF-JSF registered CSS or Theme CSS -->
<link type="text/css" rel="stylesheet"
href="/mkyong/javax.faces.resource/css/bootstrap.css.jsf?ln=default&v=1_0" />
<link type="text/css" rel="stylesheet"
href="/mkyong/javax.faces.resource/primefaces.css.jsf?ln=primefaces" />
<!-- comment : "last" faces -->
<link type="text/css" rel="stylesheet"
href="/mkyong/javax.faces.resource/css/style.css.jsf?ln=default&v=1_0" />
<script type="text/javascript"
src="/mkyong/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces">
</script>
<script type="text/javascript"
src="/mkyong/javax.faces.resource/primefaces.js.jsf?ln=primefaces">
</script>
</head>
<body>
...
</body>
...
Hi , I am trying to integrate PrimeFaces in websphere portal 8 .The problem is that the PF resources are not loaded (js, css, images). Any idea?
With primefaces 3.5 and using facet “first”, the load order seems to be
1. primefaces theme.css
2. css declared in facet “first”
…