Resource ordering in PrimeFaces

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&amp;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&amp;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>
...

References

  1. PrimeFaces blog – Customizable Resource Ordering

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
AnisjplHow to override PrimeFaces CSS? Recent comment authors
newest oldest most voted
trackback
How to override PrimeFaces CSS?

[…] is more “official” way. First, understand the resource ordering in PrimeFaces, then, define your own style in ‘last‘ facet. demo.xhtml <!DOCTYPE html> <html […]

jpl
Guest
jpl

With primefaces 3.5 and using facet “first”, the load order seems to be
1. primefaces theme.css
2. css declared in facet “first”

Anis
Guest
Anis

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?