0

I am using openlayers, query ,query ui for my new project. I have included the js file using :

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

This is the code in body:

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

Although Openlayers and jquery as showin in rendered html:

is loaded all the style is not loaded and the following error message pops up in firebug console:

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

Also not able to load jquery images:

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

I am able to load images the png using:

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

Also, I can see style using:

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

When I include this style(style.css) manually using openlayers tries to load again rendering error. How is it possible to store openlayer, jquery images and extra files like css,images without altering path?

enter image description here

fig: my resource folder structure

Edit:

After Adding URL pattern and 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>

I get error :

"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"
kinkajou
  • 3,664
  • 25
  • 75
  • 128

1 Answers1

1

How is it possible to store openlayer, jquery images and extra files like css,images without altering path?

You can use the OmniFaces UnmappedResourceHandler for that. See also the showcase for usage instructions.

Installation

To get it to run, this handler needs be registered as follows in faces-config.xml:

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

And the FacesServlet needs to have an additional mapping on /javax.faces.resource/* in web.xml. For example, assuming that you've already a mapping on *.xhtml:

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

If this is not an option, then you really can't go around by replacing the CSS background image URLs by #{resource} references.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • NetworkError: 404 Not Found - localhost:8282/ProjectX/rfRes/skinning.ecss?db=eAG7mShzEgAFjAIg. I think it's unable to load richfaces skinning. Any suggestion? – kinkajou Sep 05 '13 at 02:18
  • You didn't mention in your question that you're using RichFaces, so I couldn't take this into account in the answer. It's by the way also strange to see you manually including jQuery while RichFaces already bundles jQuery. This would only end up in jQuery version conflicts and JS errors in all colors. In any case ... Try adding URL pattern `/rfRes/*` to the mapping. I've admittedly never tested that on RichFaces, but that should theoretically work. – BalusC Sep 05 '13 at 11:02
  • Look like it's not compatible with RichFaces. Well, if you want to stick to RichFaces (although it is doing many things differently from the standard for some reason), then you'd need to fall back to `#{resource}` references in CSS files. – BalusC Sep 06 '13 at 12:36