Inject additional stylesheets (or scripts) in Facelets template client

jsf-2

Solution

Add to your master template file inside `head` section new template content specially for css files linking:

<h:head>
   <title><ui:insert name="title">MyApp</ui:insert></title>
   <h:outputStylesheet name="stylesheet.css" library="styles"/>
   <ui:insert name="css"/>
</h:head>

In template client page add page specific stylesheet like this:

<ui:composition template="/pages/templates/template.xhtml">
   <ui:define name="css">
      <h:outputStylesheet name="indexPage.css" library="styles"/>
   </ui:define>
   ...
</ui:composition>

Instead of `h:outputStylesheet` coud be used `<link rel="stylesheet" type="text/css" href="relative path to css file">`. Important that `ui:insert` for css in master template should be inside `h:head`.

Problem

I have the following master template file for my JSF based pages : ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html 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"> <h:head> <title><ui:insert name="title">MyApp</ui:insert></title> <h:outputStylesheet name="stylesheet.css" library="styles"/> </h:head> <h:body> <div id="container"> <div id="header"> <ui:insert name="header"> // header content </ui:insert> </div> <div id="content"> <ui:insert name="content"> </ui:insert> </div> <div id="footer"> <ui:insert name="footer"> </ui:insert> </div> </div> </h:body> </html> ``` In the head section, we have `stylesheet.css`. This stylesheet contains all my global styles which are common to all pages. In the template client, I would like to add page specific stylesheet. So, I tried adding the following line in my template client page: ``` <ui:composition template="/pages/templates/template.xhtml"> <ui:define name="content"> <h:outputStylesheet name="indexPage.css" library="styles" target="head"/> // body content </ui:composition> ``` This, however, does not seem to add `indexPage.css` in the generated HTML's head section. I am using Mojarra 2.1.2. Does it support the `target` attribute? I don't see it listed as one of the available in my autosuggest options in Eclipse. In case it doesn't, how do I inject the additional page specific CSS while still using templates?

Original source