jquery-ui - 使用 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 模式和omnifaces 后：

<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。另请参阅展示柜以获取使用说明。

安装

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

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

并且FacesServlet需要在/javax.faces.resource/*in上有一个额外的映射web.xml。例如，假设您已经在 上进行了映射*.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。

也可以看看：

• 将 JSF 前缀更改为后缀映射迫使我在 CSS 背景图像上重新应用映射
• 在 JSF 组件的 CSS 中链接图像