我可以将EL用于JSF的外部CSS文件吗？

Question

在我当前的JSF项目的外部样式表中,有外部资源的硬编码链接

.someId { background-image:url(/context/resources/images/example.jpg); }

在JSF xhtml文档中,我可以使用像$ {request.contextPath}这样的EL表达式,但是如何将EL处理应用于CSS文件？

(相关:如何在JSF中嵌入CSS背景图像链接？)

---

上下文路径的硬编码有一个缺点:/contextWeb应用程序的上下文路径(在示例中)可以在部署时通过修改web.xml来更改(或者如果在Web中未指定上下文,则通过重命名Web应用程序归档文件.xml),但链接到CSS文件中的资源仍然指向未更改的硬编码上下文,并导致资源未找到错误.

Answer 1

也许我误解了你的问题,但是如果通过外部css你只是意味着你自己的css不是内联的,那么使用JSF 2.0你可以在你的css中使用EL,只要你用它包含它<h:outputStylesheet>.例如,我有一个具有这种结构的项目:

war
|__ WEB-INF
|   |__ *standardStuff*
|__ resources
|   |__ css
|   |   |__ style.css
|   |__ images
|       |__ image1.png
|__ xhtml
|   |__ index.xhtml

这显然不是完整的文件列表,但应足以说明问题.然后我在index.xhtml中有这个:

<f:view xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets">
  <h:head/>
  <h:body>
    <h:outputStylesheet library="css" name="style.css" target="head"/>
    <ui:include src="content.xhtml"/>
  </h:body>
</f:view>

在我的CSS中我有这样的事情:

.someClass {
    background-image: url('#{resource['images/image1.png']}');
}

Answer 2

我把CSS图像总是放在CSS文件夹的子文件夹中.例如

• /resources/css/style.css
• /resources/css/images/example.jpg

这样你最终会喜欢

.someId { background-image:url(images/example.jpg); }

是的,它们是相对于CSS文件本身的URL而不是主JSF/HTML页面解析的.

Answer 3

您可以使用表达式语言(EL)FacesContext来解决问题.我经常使用这种技术.

background-image: url('#{facesContext.externalContext.requestContextPath}/resources/images/background.gif');

这允许您利用JSF根据应用程序输入或更改提供动态内容.

这种技术适用于JSF 1.2和JSF 2.0