4

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?

Improve this question
15
  • 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. Commented Nov 27, 2011 at 16:28
  • I can open CSS file by its direct URL in webbrowser without problem Commented Nov 27, 2011 at 17:57
  • What is the URL? What is the generated HTML output of <h:outputStylesheet>? Commented Nov 27, 2011 at 18:02
  • "localhost:8082/SecondProject/resources/style/…> generated nothing.Tag <head> empty Commented Nov 27, 2011 at 19:52
  • What is the generated HTML output of <h:outputStylesheet>? What do you get when you invoke http://localhost:8082/SecondProject/javax.faces.resource/style.css.xhtml?ln=style? Edit: ah, the <head> is empty. Are you using <h:head> in the template? (that wouldn't explain that <link> didn't work though, perhaps that has in turn another cause). Commented Nov 27, 2011 at 19:54

1 Answer 1

Reset to default
4

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.

See also:

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

how I can throw off my pages that you can see it?
You could edit your question to include smallest possible cutdown but copy'n'paste'n'runnable snippets, but I recommend to just create a playground project with exactly the above template example. If it works for you, then port the same approach to your real project. At least, the <h:outputStylesheet> (or anything else) should not be placed outside <ui:define> or even <ui:composition>.
Ok I change decription of question
You're indeed approaching templating wrong. You need to remove <ui:composition> from the baseLayout.xhtml to get it to work. Anything outside <ui:composition> is ignored. For the proper usage, see the example in my answer. Optionally, also cleanup your template client index.xhtml to remove all HTML outside <ui:compositon> which will be ignored anyway.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.