-
Book Overview & Buying
-
Table Of Contents
PrimeFaces Cookbook
By :
PrimeFaces 3.x provides improved resource ordering to support customization. This ability could be used when Internet Explorer demands special meta tags that are expected to be placed at first or for scenarios where styling for PrimeFaces components needs to be overridden by custom styling.
Make sure you have at least the 3.x version of PrimeFaces in your classpath.
Just define <h:head> by 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>
The <h:head> tag is used by the JSF components for adding their resources into pages, thus it's a must-have tag throughout your JSF-based applications. One of the commonly made mistakes among developers is to forget putting in the head tag.
For instance, if a stylesheet gets declared in multiple CSS files, which would be linked in the middle and last facet respectively, the stylesheet definition referred to in the middle facet will be overridden by the one defined in the last facet.
With PrimeFaces' own HeadRenderer implementation, the resources are handled in the following order:
First facet, if defined
PF-JSF registered CSS
Theme CSS
Middle facet, if defined
PF-JSF registered JS
Head content
Last facet, if defined
Internet Explorer introduced a special tag named meta, which can be used as <meta http-equiv="X-UA-Compatible" content="..." />. The content of the X-UA-Compatible <meta> tag helps to control document compatibility such as specifying the rendering engine. 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 the resource ordering with the usage of the first facet.
This recipe is available in the PrimeFaces Cookbook Showcase application on GitHub at https://github.com/ova2/primefaces-cookbook. You can find the details there for running the project. When the server is running, the showcase for the improved resource ordering is available at http://localhost:8080/primefaces-cookbook/views/chapter1/resourceOrdering.jsf.
Change the font size
Change margin width
Change background colour