在不更改图像路径的情况下使用 jQuery UI 和 OpenLayers JS/CSS 文件

Question

我正在为我的新项目使用 openlayers、查询、查询 ui。我已经使用 :

包含了 js 文件

<ui:define name="content">

    <h:outputScript   name="/js/openlayers/OpenLayers.js"/>

    <h:outputStylesheet name="/css/jquery-ui-1.8.22.custom.css" ></h:outputStylesheet> 

    <h:outputStylesheet name="/js/jquery/css/jquery_table.css" ></h:outputStylesheet>

    <h:outputStylesheet name="/js/jquery/css/modal.css" ></h:outputStylesheet>      

    <h:outputScript   name="/js/jquery/jquery.js"/>

    <h:outputScript   name="/js/jquery/jquery-ui-1.8.22.custom.min.js"/>   

</ui:define name="content">

这是正文中的代码：

<h:body>
   <ui:insert name="content">Content</ui:insert>
</h:body>

虽然 Openlayers 和 jquery 在呈现的 html 中显示：

已加载所有样式未加载，并且在firebug控制台中弹出以下错误消息：

"NetworkError: 404  - http://localhost:8282/ProjectX/GISPages/Alarms/theme/default/style.css"

style.css

"NetworkError: 404  - http://localhost:8282/ProjectX/GISPages/Alarms/img/west-mini.png"

west-mini.png

"NetworkError: 404  - http://localhost:8282/ProjectX/GISPages/Alarms/img/east-mini.png"

east-mini.png

"NetworkError: 404  - http://localhost:8282/ProjectX/GISPages/Alarms/img/north-mini.png"

north-mini.png

"NetworkError: 404  - http://localhost:8282/ProjectX/GISPages/Alarms/img/zoom-plus-mini.png"

zoom-p...ini.png

"NetworkError: 404  - http://localhost:8282/ProjectX/GISPages/Alarms/img/south-mini.png"

同样无法加载 jquery 图片：

"NetworkError: 404  - http://localhost:8282/ProjectX/javax.faces.resource/css/images/ui-bg_glass_75_e6e6e6_1x400.png"

ui-bg_...400.png

"NetworkError: 404  - http://localhost:8282/ProjectX/javax.faces.resource/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png"

ui-bg_...100.png

"NetworkError: 404  - http://localhost:8282/ProjectX/javax.faces.resource/css/images/ui-icons_888888_256x240.png"

我可以使用以下方式加载 png 图像：

http://localhost:8282/ProjectX/javax.faces.resource/css/images/ui-bg_glass_75_e6e6e6_1x400.png.xhtml

另外，我可以使用以下方式查看样式：

http://localhost:8282/ProjectX/javax.faces.resource/js/openlayers/theme/default/style.css.xhtml

当我使用 openlayers 手动包含此样式（style.css）时，尝试再次加载呈现错误。 如何在不改变路径的情况下存储 openlayer、jquery 图像和 css、图像等额外文件？

fig: my resource folder structure

编辑：

添加 URL 模式和全方位后：

<servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
        <url-pattern>/javax.faces.resource/*</url-pattern>
        <url-pattern>/rfRes/*</url-pattern>
    </servlet-mapping> 

我得到错误：

"NetworkError: 404  - http://localhost:8282/ProjectX/GISPages/Alarms/RES_NOT_FOUND"

RES_NOT_FOUND

"NetworkError: 500  - http://localhost:8282/ProjectX/rfRes/datatable.ecss?db=eAG7mShzEgAFjAIg&ln=org.richfaces"

Answer 1

如何在不改变路径的情况下存储 openlayer、jquery 图像和 css、图像等额外文件？

您可以为此使用OmniFaces UnmappedResourceHandler。有关使用说明，另请参阅 showcase。

安装

要让它运行，这个处理程序需要在 faces-config.xml 中注册如下：

<application>
    <resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
</application>

而FacesServlet 需要在web.xml 中的/javax.faces.resource/* 上有一个额外的映射。例如，假设您已经在*.xhtml 上进行了映射：

<servlet-mapping>
    <servlet-name>facesServlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
    <url-pattern>/javax.faces.resource/*</url-pattern>
</servlet-mapping>

如果这不是一个选项，那么您真的无法通过 #{resource} 引用替换 CSS 背景图像 URL。

另见：

• Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
• Linking Images in CSS of a JSF Component