How to get access to file css in JSF 2.0


Tags: java,css,jsf,jsf-2

Problem :

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?



Solution :

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:


    CSS Howto..

    How to insert variables in inline CSS rules with pure JavaScript?

    How to ignore comments in sass partial files?

    How do I center a Bootstrap div with a 'spanX' class?

    how to set primefaces datatable columns padding with CSS padding

    Android Layout, how to make a radius and border like css

    How to make permanent changes to a website's CSS from within the browser?

    How to organize CSS Sheets [closed]

    how to make the postion close X in css file in top instead of bottom

    How to specify a path to be followed while animating an object in HTML using CSS, JQuery

    How do I make text text when you hover the mouse over it?

    How to use Vendor Properties in Multiple Backgrounds?

    how to print no blur content over a blurred div

    how to align button radio in css

    Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    How to create a tag using css

    CSS (Fixed width right, fluid left, left is first in html) How do I keep left div from collapsing?

    How to make css two borders?

    How to get the “text-justify:kashida” css property effect on to the arabic text excluding IE browsers

    How to fix this CSS 3 code to make it working properly on the server?

    How to achieve video-play navigation like khan academy in bootstrap? [closed]

    How does one make one table column header taller than the rest?

    How do I wrap a long string in a fixed-width container with CSS?

    How to use :before for the third
  • element?
  • CSS accordion menu - How to expand and hyperlink

    OOCSS & BEM - inline list - How to handle scaffolding, how to add skin?

    How can I eliminate the space above my list?

    How to make existing javascript/css files be compitable in Google Chrome?

    How to get a heading to scale with a image and keep spacing ratio html/css

    How to hide submenu until it is hovered over by mouse