How to customize h:head when using ui:composition template?

Question

I am using JSF to render an HTML page. I design the page like it :

<f:view xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="language" content="fr" />
    <title><ui:insert name="title">My app</ui:insert></title>
</h:head>

<h:body>
    <div id="top">
        <ui:include src="/header.xhtml"/>
    </div>

    <h:panelGroup id="center" layout="block" >
        <ui:insert name="center"/>
    </h:panelGroup>

    <div id="bottom">
        <ui:include src="/footer.xhtml"/>
    </div>
</h:body>

This template has some "client" pages, like this one :

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"                
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:p="http://primefaces.org/ui"
            template="/layouts/master.xhtml">

<ui:define name="center">
    <ui:define name="title"><h:outputText value="#{myBean.description}"/></ui:define>
    <ui:include src="#{myBean.url}"/>
</ui:define>

In the client, i have to add meta information in the header. It would be great if we have tag like outputScript or outputStylesheet which can be set everywhere in the document and rendered in the html "head" tag.

I have found nothing to do this. Is there a way to add tag in the header when i am in this situation ? Thank you !

Answer 1

The <h:outputStylesheet> is always automatically relocated to <h:head>, so you don't need to worry about this. For <h:outputScript>, which is by default rendered at the same line as where it's been declared, you can just set the target attribute to head, this way it will automatically be relocated to the <h:head> as well.

<ui:define name="center">
    <h:outputStylesheet name="css/style.css" />
    <h:outputScript name="js/script.js" target="head" />
    ...
</ui:define>

For other HTML head meta information, whenever necessary for some reason, you could just declare another <ui:insert>.

<h:head>
    <ui:insert name="htmlhead" />
</h:head>

which you can use as follows

<ui:define name="htmlhead">
    <meta ... />
</ui:define>

See also:

• How to reference CSS / JS / image resource in Facelets template?