Question

我实现了一个jsf 2.0组件，它应该显示jQuery的Datepicker。它工作正常，但找不到css中引用的图像。找到* .js和* .css但是图像的链接不是。

这是我的组件的代码

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

在css中，图像是这样的引用（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); }

我的文件路径正在关注

datepicker.xhtml - ＆gt;的src /主/ web应用/资源/统计/ datepicker.xhtml

javascript文件 - ＆gt;的src /主/ web应用/资源/统计/ jquery的/ JS / jquery的*的.js

css文件 - ＆gt;的src /主/ web应用/资源/统计/ jquery的/ CSS / jquery的*的CSS

图片 - ＆gt;的src /主/ web应用/资源/统计/ jquery的/ CSS /图像/

即使我用绝对路径引用css路径中的那些图像，我的浏览器也找不到它（当我启动chrome开发工具时，我也找不到文件）

感谢您的帮助

Answer 1

您将CSS文件作为JSF资源提供。它将从URL中的/javax.faces.resource文件夹提供，它还将获取FacesServlet映射，如URL中的/faces/*或*.xhtml。它会使路径相关的CSS背景图像URL无效。您需要相应地更改CSS backgorund图像URL以作为JSF资源。规范方法是使用EL #{resource}中的资源映射器：

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

另一种方法是使用OmniFaces UnmappedResourceHandler，这样您就不需要修改CSS文件了。

另一个替代方法是获取一个JSF UI组件库，该库在其组合中已经有一个基于jQuery的基于日期选择器的组件，例如PrimeFaces <p:calendar>。

Answer 2

我们无法知道服务器的文件夹结构是如何设置的，但是尝试在文件路径“/ images等”中添加一个前导斜杠。

链接JSF组件的CSS中的图像

2 个答案: