How to get access to file css in JSF 2.0

java css jsf jsf-2

15,151

Based on the comments, your concrete problem ultimately boils down to:

The <h:outputStylesheet> doesn't render anything into the HTML output.

Considering the fact that you do have a <h:head>, the only cause could be a mistake in the template composition. This can for example happen when you have placed the <h:outputStylesheet> outside the <ui:define> of an <ui:composition> with template. Without seeing your actual compositions, it's hard to pinpoint the real cause of your problem, but the following kickoff example should give new insights and work out for you.

The master template, /WEB-INF/template.xhtml:

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title><ui:insert name="title">Default title</ui:insert></title>
        <h:outputStylesheet name="style/template.css" />
    </h:head>
    <h:body>
        <div id="header">Header</div>
        <div id="menu">Menu</div>
        <div id="content"><ui:insert name="content">Default content</ui:insert></div>
        <div id="footer">Footer</div>
    </h:body>
</html>

Note that it refers /resources/style/template.css inside the <h:head> which thus applies to all template clients using this master template.

The template client, /page.xhtml:

<ui:composition template="/WEB-INF/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:define name="title">
        New page title here
    </ui:define>
    <ui:define name="content">
        <h:outputStylesheet name="style/page.css" />
        <h1>New content here</h1>
        <p>Blah blah</p>
    </ui:define>
</ui:composition>

Note that it refers /resources/style/page.css inside <ui:define> which will automatically end up in generated <head> anyway. You shouldn't have a <h:head> in the template client.

(Yes, I used different names for CSS files, but that is just to show where exactly you should have placed the <h:outputStylesheet> components. Yes, I removed the library attribute because that should actually represent a "theme", not just the content type like "css", "js", etc, the above examples assume the "default" library/theme)

Update: as guessed, you're indeed using the template composition incorrectly. Your problem is caused by having an <ui:composition> in the <body> of the master template. You need to remove it. The <ui:composition> definies the root component of a template composition. Anything outside the <ui:composition> will be ignored in the output.

KarzhouAndrew

Updated on June 09, 2022

Comments

KarzhouAndrew almost 2 years

I have troubles with getting access to file css. My directory structure:

/resources/style/style.css
/resources/faces/template/baseLayout.xhtml
/WEB-INF/web.xml
/WEB-INF/faces-config.xml

I tried 2 ways to getting access from template page baseLayout.xhtml:

<link
href="#{facesContext.externalContext.requestContextPath}/resources/style/style.css"
rel="stylesheet" type="text/css" />

2)<h:outputStylesheet library="style" name="style.css" />

But both variants doesn't work. Servlet-mapping in Web.xml

<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>

baseLayout.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!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:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="style" name="style.css"></h:outputStylesheet>
    </h:head>

<body id="newsManagement">
    <ui:composition>
        <div id="allContent">
            <div id="header">
                <ui:insert name="header">
                    <ui:include src="header.xhtml"></ui:include>
                </ui:insert>
            </div>
            <div id="menu">
                <ui:insert name="menu">
                    <ui:include src="menu.xhtml"></ui:include>
                </ui:insert>
            </div>
            <div id="body">
                <span id="newsLoc"> 
                    <span id="newsLocWord">
                        <h:outputText value="#{msg['body.news']}"> </h:outputText>          
                    </span>
                    <h:outputText value="#{msg['body.signs']}"> </h:outputText> 
                </span>
                <ui:insert name="body" />
            </div>
        </div>
    </ui:composition>
</body>
</html>

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
    <head>

    </head>
    <body>
        <ui:composition template="/resources/faces/template/baseLayout.xhtml"> </ui:composition>

    </body>
</html>

Could somebody help me?