Linking Images in CSS of a JSF Component

Question

I implemented a jsf 2.0 component which should display jQuery's Datepicker. It works just fine but the images referenced in the css are not found. The *.js and the *.css are found but the links to images are not.

Here's the code of my component

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:c="http://java.sun.com/jsp/jstl/core"
        xmlns:cc="http://java.sun.com/jsf/composite">
<head>
    <title>jQuery - Datepicker</title>

</head>
<body>
<cc:interface>
    <cc:editableValueHolder name="input"/>
</cc:interface>

<cc:implementation>
    <h:outputStylesheet library="stats" name="jquery/css/jquery-ui-1.8.16.custom.css" />
    <h:outputScript library="stats" name="jquery/js/jquery-1.7.1.min.js" target="head"/>
    <h:outputScript library="stats" name="jquery/js/jquery-ui-1.8.17.custom.min.js" target="head"/>


    <script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(document).ready(function() {
        jq("[id$=#{cc.clientId}]").datepicker({
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dayNamesMin : ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            currentText : 'Heute',
            dateFormat : 'dd-mm-yy',
            yearRange : '-3:+3',
            showButtonPanel : true,
            closeText : 'Schliessen',
        });
    });
  </script>


     <h:panelGroup>
        <h:inputText id="#{cc.clientId}" value="#{cc.attrs.value}" style="width:80px;"/>
     </h:panelGroup>
</cc:implementation>
</body>
</html>

in the css the images are references like this (jQuery css):

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url('/stats-webapp/images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url('/stats-webapp/images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_f6cf3b_256x240.png); }

My Filepath is following

datepicker.xhtml -> src/main/webapp/resources/stats/datepicker.xhtml

javascript files -> src/main/webapp/resources/stats/jquery/js/jquery*.js

css files -> src/main/webapp/resources/stats/jquery/css/jquery*.css

images -> src/main/webapp/resources/stats/jquery/css/images/.

Even if i reference those images inside the css path with absolute paths my browser won't find it (when i start the chrome developer tools, i cannot find the files either)

Thanks for the help

BalusC · Answer 1 · 2014-06-05T07:32:53.083

9

You're serving the CSS file as a JSF resource. It will be served from /javax.faces.resource folder in URL and it will also get the FacesServlet mapping like /faces/* or *.xhtml in URL. It would make the path-relative CSS background image URLs invalid. You'd need to alter the CSS backgorund image URLs accordingly to be served as JSF resources as well. The canonical approach is to make use of the resource mapper in EL #{resource}:

.some { 
    background-image: url(#{resource['stats:jquery/css/images/foo.png']});
}

An alternative is to use OmniFaces UnmappedResourceHandler so that you don't need to modify the CSS files.

Again another alternative is to grab a JSF UI component library which has already a jQuery based date picker based component in its assortiment, such as PrimeFaces <p:calendar>.

edited Jun 05 '14 at 07:32

answered Jan 20 '12 at 20:25

BalusC

1,082,665
372
3,610
3,555

Your suggested solution (omitting the library attribute) doesn't work in my case. I have to use plain HTML (` – Theo Aug 27 '13 at 17:15
@Theo: It depends on faces servlet mapping either. It works with prefix but not with suffix patterns. I've revised the answer. In the meanwhile, here's a better Q&A: http://stackoverflow.com/questions/14963756/prevent-suffix-from-being-added-to-resources-when-page-loads/15000857#15000857 – BalusC Aug 27 '13 at 17:23

score 0 · Answer 2 · answered Jan 20 '12 at 19:47

0

We can't know how your server's folder structure is set up, but try adding a leading a leading slash to your file paths "/images etc."

answered Jan 20 '12 at 19:47

Diodeus - James MacFarlane

112,730
33
157
176

Linking Images in CSS of a JSF Component

2 Answers2

Linked