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

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, or befriend him on Facebook or Google Plus. 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
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?

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”

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 […]