CODEWITHSUNDEEP
javajquerycssjsf-2
Luk
Luk

Reputation: 431

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

Upvotes: 1

Views: 4150

Answers (2)

BalusC
BalusC

Reputation: 1108722

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

Upvotes: 9

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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

Upvotes: 0

Related Questions