3

I'm working with JSF2.1 and RichFaces 4.1 in JBoss AS 6.1.0.Final. Right now, I'm focused in rewriting the URLs. After trying different approaches I decided to stick to PrettyFaces since it's really intuitive to use (and got it working in a couple of minutes).

There's a problem tough. The relative links to scripts/css got messed up because the URLs changed and the relative paths end up in 404. I can use absolute paths but that would force me to change many of the pages and to expose application's structure in the page's source code.

I'm thinking about a temporal workaround: Giving the backing bean the responsibility of managing the different levels of those relative links but re-using beans makes this a delicate matter.

My question is, is there defined way or best practice to manage this relative paths while rewriting the URLs?

EDIT

h:outputStylesheet and h:outputScript worked like a charm. All that remains is solving a little issue with CSSs referencing images in a relative way. Take this structure:

-------/resources
       |
       ---_img
       |
       ---_css
       |
       ---_js

A CSS file in the folder _css references the image image1.png located in the _img folder with the relative path ../_img/image1.png. The problem is that this ends up in 404 because it does not find the image in /myApp/javax.faces.resource/_img/image1.png.

Changing every ../ for #{request.contextPath}/resources inside the CSSs seems to work just fine but I wonder if there is a better way to do it. The relative path approach not working seems strange to me.

Fritz
  • 9,987
  • 4
  • 30
  • 49

2 Answers2

5

In first place, I do not understand how and why exactly they got messed up. You're not clear on that. Most likely you've hardcoded plain HTML <script> and <link> (and <img>) elements for some reason instead of using the JSF-provided <h:outputScript> and <h:outputStylesheet> (and <h:graphicImage>) components. Those JSF components can take the resource name which is relative to the /resources folder and they will automatically prefix the context path so that it ends up in a domain-relative URL (with a leading slash) instead of a request-relative URL (without a leading slash).

Given the following folder structure (the /resources folder name is predefinied; you cannot change its name):

WebContent
 |-- resources
 |    |-- css
 |    |    `-- style.css
 |    |-- img
 |    |    `-- logo.png
 |    `-- js
 |         `-- script.js
 |-- page.xhtml
 :

Then you should be able to let JSF generate the proper <script>, <link> (and <img>) elements automagically as follows:

<h:head>
    <h:outputStylesheet name="css/style.css" />
    <h:outputScript name="js/script.js" />
</h:head>
<h:body>
    <h:graphicImage name="img/logo.png" />
</h:body>

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 1
    Indeed it's weird, but I facepalmed when you mentioned the word "hardcoded". I remembered that our master page was designed as vanilla html by the design team and that we had to adapt it to xhtml and retag many parts of it. Guess what, the links and css are indeed hardcoded. I'll change that right away and comment the results. – Fritz Aug 08 '12 at 19:10
  • Damn, beaten by a minute or two :p – Lincoln Aug 08 '12 at 19:13
  • 1
    If replacing by the JSF component isn't an option for some reason, then just make sure that you're using domain-relative URLs (starting with leading slash) in HTML elements referring JS/CSS/image resources. You can use `#{request.contextPath}` to dynamically print the context path. E.g. `` and so on. However, it's ugly to repeat it for every single JS/CSS/image resource :) – BalusC Aug 08 '12 at 19:21
  • @BalusC Indeed it is :D. Your solution worked like a charm! Now I only have a problem with images referenced by CSS resulting in 404. I've updated my question with some details. – Fritz Aug 08 '12 at 20:43
  • Use `#{resource}` expressions. See also http://stackoverflow.com/questions/6925733/changing-the-image-of-a-hcommandbutton-using-css/6926193#6926193 – BalusC Aug 08 '12 at 22:09
  • @BalusC Learning something new everyday I guess, and 80% of the time is by reading one of your answers/posts. Thank you very much man! :) – Fritz Aug 09 '12 at 15:13
2

You need to use absolute URLs for your CSS files, such as:

/path/to/style.css

Instead of:

../style.css

You also want to avoid hard-coding urls if you can help it, and use the JSF2 resource relocation feature: <h:outputStylesheet> and <h:outputScript>

Here are a few links that might help:

http://ocpsoft.org/support/topic/problem-with-prettyfaces-and-primefaces

Lincoln
  • 3,151
  • 17
  • 22
  • Thanks for your answer! BTW, good job with PrettyFaces. Intuitive, easy to get started with and easy to use. Keep it up! :) – Fritz Aug 09 '12 at 15:20
  • Thank you! I'm glad you like it. We're trying to continue making it better (with http://ocpsoft.org/rewrite/ as a core for version 4.0 :) – Lincoln Aug 10 '12 at 15:31