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

jsf jsf-2 facelets composition head

17,431

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>

le2tbomi

Updated on July 13, 2022

Comments

le2tbomi almost 2 years

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 !

Johnny almost 11 years

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.
BalusC almost 11 years

@Johnny: you're right as to h:outputStylesheet, but you apparently didn't test h:outputScript. I updated the answer.
hocikto about 3 years

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?
BalusC about 3 years

@hocikto: 1st paragraph of the above answer also applies to composites. See also e.g. stackoverflow.com/q/12615556
hocikto about 3 years

@BalusC 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