How to get access to file css in JSF 2.0

Question

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:

1)

<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?

The paths looks fine. Your problem is caused elsewhere. Apparently the CSS is not deployed at all. First try to open the CSS file by its direct URL in webbrowser. — BalusC, Nov 27 '11 at 16:28
I can open CSS file by its direct URL in webbrowser without problem — KarzhouAndrew, Nov 27 '11 at 17:57
"http://localhost:8082/SecondProject/resources/style/style.css". generated nothing.Tag empty — KarzhouAndrew, Nov 27 '11 at 19:52
What is the generated HTML output of ``? What do you get when you invoke `http://localhost:8082/SecondProject/javax.faces.resource/style.css.xhtml?ln=style`? Edit: ah, the `` is empty. Are you using `` in the template? (that wouldn't explain that `` didn't work though, perhaps that has in turn another cause). — BalusC, Nov 27 '11 at 19:54
When I invoke http://localhost:8082/SecondProject/javax.faces.resource/style.css.xhtml?ln=sty‌le I got error 404 — KarzhouAndrew, Nov 27 '11 at 19:57
Do you have any `Filter`s in `web.xml` which matches `/javax.faces.resource/*` or `*.xhtml` requests? What JSF version is your `faces-config.xml` declared to? By the way, the `` variant should have worked for you; is its generated HTML also correct? — BalusC, Nov 27 '11 at 19:58
When I tried again with I got access to css file '/SecondProject/javax.faces.resource/style.css.xhtml?ln=sty‌le' by this url.Yes I use .No I don't have filters.Version 2.0 — KarzhouAndrew, Nov 27 '11 at 20:06
So your problem is now solved by magic? Well that appears then just be a simple build/deploy glitch or perhaps actually a typo in the URL/filename. — BalusC, Nov 27 '11 at 20:11
variant doesn't work.I can't get access to css file /SecondProject/javax.faces.resource/style.css.xhtml?ln=sty‌le' by this url. — KarzhouAndrew, Nov 27 '11 at 20:12
Then I am confused. What exactly did work? You said that you got access to the CSS file by the JSF resource URL when using ``. — BalusC, Nov 27 '11 at 20:15
Ok I try explain again.Rigth now both variant's doesn't work.But when I use and write direct url /SecondProject/javax.faces.resource/style.css.xhtml?ln=sty‌le I open css file. — KarzhouAndrew, Nov 27 '11 at 20:21
Clear. Okay, you're using template compositions, right? What if you put (just for test) the `` straight inside the `` of the master template? — BalusC, Nov 27 '11 at 20:26
Yes I use template.I am sorry I don't understand what does it mean "master template"? — KarzhouAndrew, Nov 27 '11 at 20:28
Is that inside the master template or inside the ``? I have more and more the impression that your compositions aren't done right. I posted an answer with an example. — BalusC, Nov 27 '11 at 20:29

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

How to get access to file css in JSF 2.0

1 Answers1

See also: