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 !

Stonefly

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?

Leftwards

I am using JSF 2.1 and "target" is not an attribute of h:outputStylesheet or h:outputScript. So the first solution doesn't work. – Scarificator

@Johnny: you're right as to h:outputStylesheet, but you apparently didn't test h:outputScript. I updated the answer. – Leftwards

is something like this possible for composite components, so that we can define them in ui:composition but they would be part of header which is in the main template? – Proximity

@hocikto: 1st paragraph of the above answer also applies to composites. See also e.g. https://mcmap.net/q/17641/-integrate-javascript-in-jsf-composite-component-the-clean-way – Leftwards

@Leftwards I need to basically render some html (not css, not js) in header, but only in some parts of site, wondering how to approach that – Proximity