Externalize Static resourses

[victorio2008]

Hi guys,

I'm working on a web application with Richfaces 4.3.1 and jsf 2.1.21.

I try to load static resources (Css, JS and images) from external location (Content Delivery Network).On richfaces documentation, it mentioned that resource mapping is controlled by two configurations:

- mapped resources location (indicated by the red color)

- resource mapping configuration file (indicated by the blue color)

on the web.xml i added the following lines:

web.xml

<servlet>         <servlet-name>Resource Servlet</servlet-name>         <servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class>         <load-on-startup>1</load-on-startup>     </servlet>     <servlet-mapping>         <servlet-name>Resource Servlet</servlet-name>         <url-pattern>/org.richfaces.resources/*</url-pattern>     </servlet-mapping>                     <context-param>                         <param-name>org.richfaces.resourceMapping.location</param-name>                         <param-value>#{facesContext.externalContext.requestContextPath}/rfRes/#{resourceLocation}</param-value>                     </context-param>           <!-- <context-param>         <param-name>org.richfaces.staticResourceLocation</param-name>         <param-value>META-INF/richfaces/static-resource-mappings.properties</param-value>     </context-param> -->     <context-param>      <param-name>org.richfaces.resourceMapping.mappingFile</param-name>      <param-value>META-INF/richfaces/static-resource-mappings.properties</param-value> </context-param>     <!-- Enabling resource Optimization -->     <context-param>     <param-name>org.richfaces.resourceOptimization.enabled</param-name>     <param-value>true</param-value>             </context-param>

On the mapper file static-resource-mappings.properties, i tried to map an image resource like a-down.gif  :

static-resource-mappings.properties
imageStatic=/image/a-down.gif

finally i referenced my resource on myPage.xhtml as following :

myPage.xhtml
<h:graphicImage id="showToolbarImg" value="imageStatic" rendered="#{iconBar.hideButton}"

Unfortunately, it's not working .

I hope somone can help me on this one becasuse it is really puzzeling me.

My packaged directory structure should like following :

Thanks.

[lfryc]

Hey zied,

as you can see, h:graphicImage expects an URL in a @value attribute:

http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_graphicImage.html

The URL of a JSF resource can be determined this way:

#{resource['imageStatic']}

[victorio2008]

Hey Lukas,

Thank you for the quick response, it was helpful for me.

In fact my goal is to externalize a set of rsources, identified as static resources, on a CDN like akamai.

These resources are present as css files, js files and images.The structure of these resources is as follows:

/staticResources

      -->/cssFiles

      -->/jsFiles

      -->/img

I try to host the staticResources directory on the akamai server as a jar or a zip file. Then to declare these resources from the mapping used for static resources with richfaces.

To implement that i need to clarify some points :

(1) It is possible to reference the root image directory from my CDN as following ? :

static-resource-mappings.properties
externalImageDirectory=http://akamai/xxx/staticResources/img

(2) To use an external image,we must mapped it like an element or we must mapped the root directory of this image only  ? in the second case, how i can reference the url of selected image from the relative path of root directory in our page xhtml ?

(3) In your previous answer :

Lukáš Fryč a écrit:

Hey zied,

as you can see, h:graphicImage expects an URL in a @value attribute:

http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_graphicImage.html

The URL of a JSF resource can be determined this way:

#{resource['imageStatic']}

I inspected the returned value of this expression #{resource['imageStatic']}, it returned /appliTest/v210/s1/resources/image/a-down.gif. This url is based on the context application (appliTest), so how will retun a path of external resource from another server ? in fact, when i used the atribute @value with this expression it didn't work. Otherwise when i used the attribute @name=imageStatic the image was displayed correctly.

(4) Finally, it is possible to access an external static resources from a servlet. because i have a servlet which return a single response's output stream for all css / javascript files ?

Thank you again Lukas

[lfryc]

zied aloui wrote:

I try to host the staticResources directory on the akamai server as a jar or a zip file. Then to declare these resources from the mapping used for static resources with richfaces.

To implement that i need to clarify some points :

(1) It is possible to reference the root image directory from my CDN as following ? :

static-resource-mappings.properties
externalImageDirectory=http://akamai/xxx/staticResources/img

This is something what web.xml configuration parameter org.richfaces.resourceMapping.location serves for.

It is basically an EL expression which determines where is a root for all resources referenced by mapping.

This is little bit downside, since you can either move all or nothing ;-)

If you look at the implementation, you can see that default value is:

#{facesContext.externalContext.requestContextPath}/org.richfaces.resources/javax.faces.resource/#{resourceLocation}

[lfryc]

zied aloui wrote:

(3) In your previous answer :

Lukáš Fryč a écrit:

Hey zied,

as you can see, h:graphicImage expects an URL in a @value attribute:

http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_graphicImage.html

The URL of a JSF resource can be determined this way:

#{resource['imageStatic']}

I inspected the returned value of this expression #{resource['imageStatic']}, it returned /appliTest/v210/s1/resources/image/a-down.gif. This url is based on the context application (appliTest), so how will retun a path of external resource from another server ? in fact, when i used the atribute @value with this expression it didn't work. Otherwise when i used the attribute @name=imageStatic the image was displayed correctly.

You can reference any http/https URL directly. Just use imageStatic=http://xyz/a-down.gif

That's actually second option to reference resources in CDN (and the only option when you need to combine some resources from CDN with re-mapped resources generated locally).

(4) Finally, it is possible to access an external static resources from a servlet. because i have a servlet which return a single response's output stream for all css / javascript files ?

The external resources can be referenced as you want, but in order to get their URL generated, you have to be in a context of JSF (FacesContext must be available, which is mostly in FacesServlet-processed requests).

So you can reference those resources from a servlet, but you have to be sure where they resides.

[lfryc]

Might be useful to read: Re-routing JSF resource requests with RichFaces Resource Mapping