Pretty URLs for JSF resources (CSS, JS, images) using PrettyFaces

Question

I have a webapp running on Glassfish 3.1.2.2 which uses JSF 2.1 (Mojarra) and PrettyFaces 3.3.3 to facilitate the task of integrating "pretty" REST-style URLs with my application.

However, looking at the generated html code I see rather "ugly" long paths to my application resources. Like this:

<script type="text/javascript" src="/HelloWorld/faces/javax.faces.resource/js/jquery-1.9.1.min.js">

Specifically the faces/javax.faces.resource/ part hurts my eye. Following the main idea of PrettyFaces I'd like to have this part removed.

Is it possible to intercept the generation of these URLs and can PrettyFaces help me with that?

I'm using <h:outputScript name="js/jquery-1.9.1.min.js" />, <h:outputStylesheet name="css/app.css" /> and <h:graphicImage name="img/logo.png" /> to include resource references in my JSF-Servlet.

edit: I guess I have to do two things?

• One: Map requests like /img/* to their actual location /faces/javax.faces.resource/img/*.
• Two: Hook into the URL generation of the <h:graphicImage /> element (and others).

I would be pleased, if you could give me some pointers on where to start. I'm pretty new to JSF.

Many thanks! :)

Answer 1

Unfortunately it is very difficult to implement such an requirement with PrettyFaces. That's one of the reasons why we decided to start Rewrite, which is the successor of PrettyFaces.

With Rewrite it is very easy to do something like this. You just have to add a Join rule that translates the path you would like to see into the path that your application currently uses.

Your requirement could be implemented by something like this:

.addRule(Join.path("/js/{file}").to("/faces/javax.faces.resource/js/{file}"))

Easy, isn't it? If you want to learn more about Rewrite, have a look at the examples configurations. If you have any problems, have a look at the forums.

Rewrite 2.0.0.Final, which will be released very soon, brings some nice enhancements. Especially a backwards compatibility module for PrettyFaces, which allows you to reuse your current PrettyFaces configuration if you want to replace PrettyFaces with Rewrite.