Customizable Resource Ordering

PrimeFaces 3.0 provides improved resource ordering customization options. PrimeFaces has it’s own HeadRenderer implementing the following order;

- “first” facet if defined
- Theme CSS
- “middle” facet if defined
- PF-JSF registered CSS and JS
- Head content
- “last” facet if defined

This order allows to place resources before and/or after PF-JSF registered resources. Here is a case to demonstrate;

<h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
            <title>PrimeFaces - ShowCase</title>
        </f:facet>

        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
</h:head>

Rendered output will have meta tags followed by the title tag as the initial content of head tag, followed by the JSF-PF resources and a custom overrides.css file to override JSF-PR css files.

Thanks to Oleg Varaksin and other PrimeFaces contributors to finalize this enhancement with us. Note that this is available starting with 3.0.RC1-SNAPSHOTs.

This entry was posted in PrimeFaces. Bookmark the permalink.

8 thoughts on “Customizable Resource Ordering

  1. Which release contains this feature?
    I have fresh 3.0.RC1-SNAPSHOT, but if I put anything into ‘first’ or ‘last’ facet, nothing will be rendered there.
    E.g.

  2. This is just fantastic. Without this I had to come up with hack and was just about to implement my order HeadRenderer. Done at the PF layer is the best way this could have been done. Thanks Cagatay and Oleg.

  3. I have this release:
    3.0.RC1-SNAPSHOT
    3

    20110906081251

    I use facet like this:

    ……

    But in generated HTML I can see only JS script loader tags rendered by PrimeFaces but not mine at all.
    In fact I need this feature, because I have ‘jQuery is not defined’ error without this because of race condition during loading jQuery and my JS module. I should render loader of jQuery JS BEFORE other JS scripts in head.

    • Sry – my source code cutted off, but maybe here:

      <h:head>
      <f:facet name=”last”>
      <script type=”text/javascript” src=”MY.js”></script>

      </f:facet>
      </h:head>

  4. What are the integration steps for 3.0 with JSF 2.0 project?
    Im trying to change the new Maven Repo and new taglib namespaces
    no luck!!!

  5. Nice feature!
    I am curious whether there is a possibility to optimize the page loading so that it does not load resources (css and js files) for each component separately, but to load one css file and one js file for all components on the page?