Improved resource ordering

PrimeFaces provides improved resource ordering to support customization of content. This ability could be used when Internet Explorer demands special meta tags to be placed first or for scenarios where the styling for PrimeFaces components needs to be overridden by custom styling.

How to do it…

Define <h:head> using facet definitions where necessary:

<h:head title="PrimeFaces Cookbook - ShowCase">
<f:facet name="first">
</f:facet>
...
<f:facet name="middle">
</f:facet>
...
<f:facet name="last">
</f:facet>
...
</h:head>

Note

The <h:head> tag is used by JSF components to add their resources to pages; thus, it's a must-have tag throughout your JSF-based applications. One of the commonly made mistakes among developers is forgetting to put in the head tag.

For instance, if a stylesheet gets declared in multiple CSS files, which would be linked in the middle and last facets respectively, the stylesheet definition referred to in the middle facet will be overridden by the one defined in the last facet.

How it works…

With PrimeFaces' own HeadRenderer implementation, the resources are handled in the following order:

1. If defined, first facet.
2. PF-JSF registered CSS.
3. Theme CSS.
4. If defined, middle facet.
5. PF-JSF registered JS.
6. Head content.
7. If defined, last facet.

There's more…

Internet Explorer introduced a special tag named meta, which can be used as <meta http-equiv="X-UA-Compatible" content="..." />. The <meta> tag is X-UA-Compatible and its content helps to control document compatibility, such as specifying the rendering engine to render the related pages in the browser. For example, inserting the following statement into the head of a document would force IE 8 to render the page using the new standards mode:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

X-UA-Compatible must be the first child of the head component. Internet Explorer won't accept this <meta> tag if it's placed after the <link> or <script> tag. Therefore, it needs to be placed within the first facet. This is a good demonstration of resource ordering with the use of the first facet.

The PrimeFaces Cookbook Showcase application

This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.

The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter1/resourceOrdering.jsf.