Linking Images in CSS of a JSF Component

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/8947011/linking-images-in-css-of-a-jsf-component

标签

java

jquery

css

jsf-2