How to best use JSF2 resources from Javascript

Question

Using resources in JSF2 is a great thing because you can store the resource at some location and then reference them using different alternatives in HTML or in JSF2. I use the resources like this in XHTML pages:

<h:graphicImage value="#{resource['image:sort_up.png']}"/>

or I use the resources from Java when I create my own taglib:

ResourceHandler resHandler = context.getApplication().getResourceHandler();
Resource minus = resHandler.createResource(IMAGES_TOGGLE_MINUS_PNG,"image");
writer.startElement("img", toComponent);
writer.writeAttribute("src", minus.getRequestPath(), "src");

The translated path in the HTML then looks something like this:

/nbfrontend/jsf2frontend/javax.faces.resource/sort_up.png.xhtml?ln=image

The question is: How do I reference those images from JavaScript?

One way would be to create a hidden element where I would store the path, and then use getElementByID to retrieve the hidden element and retrieve the value from there. But this does not scale well when a lot of images are used in the application.

Another workaround would be to pass the path to the images to the JavaScript functions, but this is not feasible for JavaScript functions that are not called directly.

Is there any other alternative to use such JSF2 resources in JavaScript?

score 1 · Answer 1 · answered Aug 18 '11 at 14:49

Use it as CSS background image instead which you serve by <h:outputStylesheet>.

.toggle {
    background-image: url(#{resource['image:sort_up.png']});
}

.toggle.up {
    background-image: url(#{resource['image:sort_down.png']});
}

in combination with this JS (jQuery flavored)

$('.toggle').click(function() {
    $(this).toggleClass('up');
    // ...
});

How to best use JSF2 resources from Javascript

1 Answers1