Geek Answers Handbook

Embed additional style sheets (or scripts) in the Facelets client

I have the following main 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 chapter section, we have stylesheet.css . This style sheet contains all of my global styles that are common to all pages.

In the template client, I would like to add a stylesheet for specific pages. So, I tried adding the following line to my client page of the template:

 <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 to the generated section of the HTML header.

I am using Mojarra 2.1.2. Does it support the target attribute? I don’t see it being listed as one of the autosuggest options available in my Eclipse options.

If this is not the case, how can I add extra CSS to the page when using templates?

+7
source share
2 answers

Add new template content specifically for css files to the main template file inside the head section:

 <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 the client page of the template, add a special page style sheet as follows:

 <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, use <link rel="stylesheet" type="text/css" href="relative path to css file"> . It is important that ui:insert for css in the main template be inside h:head .

+7
source

I just had a familiar problem, and a friend helped me. The solution was to import css into the ui: composition subheading

 <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui" template="/template.xhtml" > <ui:define name="subheader"> <h:outputStylesheet library="css" name="my-style.css" /> </ui:define> <ui:define name="content"> </ui:define> </ui:composition>
0
source

More articles:


All Articles