在JSF组件的CSS中链接图像 [英] Linking Images in CSS of a JSF Component
问题描述
我实现了一个jsf 2.0组件，应该显示jQuery的Datepicker。它工作正常，但在css中引用的图像未找到。
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.
这里是我的组件的代码
<?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）：
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); }
我的文件路径在以下
datepicker .xhtml - > src / main / webapp / resources / stats / datepicker.xhtml
datepicker.xhtml -> src/main/webapp/resources/stats/datepicker.xhtml
javascript文件 - > src / main / webapp / resources / stats / jquery / jquery * .js
javascript files -> src/main/webapp/resources/stats/jquery/js/jquery*.js
css files - > src / main / webapp / resources / stats / jquery / css / jquery * .css
css files -> src/main/webapp/resources/stats/jquery/css/jquery*.css
图片 - > src / main / webapp / resources / stats / jquery / css / images / 。
images -> src/main/webapp/resources/stats/jquery/css/images/.
我引用这些图像在css路径中的绝对路径我的浏览器将无法找到它（当我开始chrome开发工具，我找不到这些文件）
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)
谢谢帮助
推荐答案
您正在将CSS文件作为JSF资源提供。它将从URL中的 /javax.faces.resource 文件夹提供，并且还将获取FacesServlet映射，如 / faces / * 或 *。xhtml 。这会使相对路径的CSS背景图片网址无效。您需要相应地更改CSS backgorund图像URL，以便作为JSF资源。规范的方法是利用EL中的资源映射器＃{resource} ：
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']});
}
另一种方法是使用 OmniFaces UnmappedResourceHandler ，以便您不需要修改CSS文件。
An alternative is to use OmniFaces UnmappedResourceHandler so that you don't need to modify the CSS files.
又一个替代方法是抓取一个JSF UI组件库，它已经有一个jQuery基于日期选择器的组件，例如 PrimeFaces < p：calendar> 。
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>.
这篇关于在JSF组件的CSS中链接图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
