UnmappedResourceHandler cannot convert URL in CSS to JSF 's valid URL - jsf

Here is my setup:
Web app 's folder structure and file names are exactly the same as the UnmappedResourceHandler 's javadoc
UnmappedResourceHandler is already registered in faces-config.xml
/javax.faces.resource/* is already mapped to facesServlet in web.xml
The style.css is :
body {
background: url("image/background.png");
}
body .test{
background-image: url("#{resource['css:image/background.png']}");
}
Then I request http://localhost:8080/app/javax.faces.resource/style.css?ln=css and the respond is :
body {
background: url("image/background.png");
}
body .test{
background-image: url("/app/javax.faces.resource/image/background.png?ln=css");
}
I expect that all the relative URLs in CSS will be converted to the JSF 's valid URL like what #{resource} does such that I do not have to use #{resource} to refer to the relative URLs in CSS anymore , but the background 's relative URL of the body selector still remains unchanged .
Update to BalusC 's reply:
If resource library is used , adding ?ln=libraryname to all CSS images will work!
But if resource library is not used , <h:outputStylesheet name="css/style.css" /> generates <link rel="stylesheet" media="screen" type="text/css" href="/app/javax.faces.resource/css/style.css.xhtml">
If I understand correctly from this , using UnmappedResourceHandler and mapping
/javax.faces.resource/* to the facesServlet in web.xml should cause JSF generates the link of the style.css without xhtml extension.

You're using css as a resource library as in:
<h:outputStylesheet library="css" name="style.css" />
This is not right. It's just a folder:
<h:outputStylesheet name="css/style.css" />
This will produce /javax.faces.resource/css/style.css URL instead of /javax.faces.resource/style.css?ln=css. You've otherwise to specify it in the image URL as well:
background: url("image/background.png?ln=css");
I will update the javadoc to clarify that more.
See also:
What is the JSF resource library for and how should it be used?

Related

Image inside h:outputtext Primefaces [duplicate]

I often, change the images of my buttons using the image attribute, but someone told me that it is a good practice to do it using .css
I tried but i cant, what i am doing wrong? This is what i did:
1-The resources of my project are stored like this:
2-This is how i created the style.css for accessing the image
.c2 {
background: url(/resources/images/smiley.jpg);
}
3-This is how i access the css from the body of my page(Im sure this is correct because other classes in the same document works in other tags in this page)
<h:outputStylesheet library="css" name="style.css" />
4-This is how create a sample commandButton that uses the appropiated css class
<h:commandButton styleClass="c2"/>
I think the problem is in the .css, i tried a few combinations but none worked:
background-image: url(/resources/images/smiley.jpg);
background: url(resources/images/smiley.jpg);
background: url(smiley.jpg);
background: url(../smiley.jpg);
Where is the mistake?
update
I managed to make it work by the following code:
.c2 {
background: url("#{resource['images:smiley.jpg']}");
}
Notice the difference when i use css(right) and when i use image attribute(left)
How could i solve this so the hold image is shown?
When importing CSS stylesheets by <h:outputStylesheet>, the stylesheet is imported and processed by the FacesServlet through /javax.faces.resource/*. Look at the generated <link> element pointing to the stylesheet in question and you'll understand.
You have to change all url() dependencies to use #{resource['library:location']} instead. JSF will then auto-substitute it with the right path. Given your folder structure, you need to replace
.c2 {
background: url("/resources/images/smiley.jpg");
}
by
.c2 {
background: url("#{resource['images/smiley.jpg']}");
}
Assuming that your webapp context name is playground and that your FacesServlet is mapped on *.xhtml, then the above should end up in the returned CSS file as follows
.c2 {
background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}
Noted should be that the JSF implementation will for determine only during the first request on the CSS file if it contains EL expressions. If it doesn't then it will for efficiency not anymore attempt to EL-evaluate the CSS file content. So if you add an EL expression to a CSS file for the first time, then you'd need to restart the whole application in order to get JSF to re-check the CSS file.
In case you wanted to reference a resource from a component library such as PrimeFaces, then prefix the library name, separated with :. E.g. when you're using PrimeFaces "Start" theme which is identified by primefaces-start
.c2 {
background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");
}
This will be generated as
.c2 {
background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}
See also:
How to reference CSS / JS / image resource in Facelets template?
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
Unrelated to the concrete problem, the way how you use the library is not entirely right. It's meant to be the common identifier/subfolder of all related CSS/JS/image resources. The key idea is to be able to change the entire look'n'feel by just changing the library (which can be done by EL). You seem however to be relying on the default library. In that case, you could just omit the library from your <h:outputStylesheet> and #{resource}.
<h:outputStylesheet name="css/style.css" />
See also:
What is the JSF resource library for and how should it be used?
Since I struggled with this a little bit and while BalusC has already answered the question but might be able to comment as to why this is happening. I have 5 EAR projects consisting of a bundled WAR and EJB projects. I then have one standalone WAR project deployed on its own. The following code worked perfect with all the EAR's:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.
Where the "img" folder was within the WEB-INF folder but for the EAR project, it would not work and it wouldnt even load the picture in the browser by manually typing in the URL. I verified the resulting html was 100% accurate. So all the talk of "resources" got me thinking that maybe it was a ?security? issue of some sort which doesnt seem to make sense between the WAR and EAR deployments so I created a "resources" folderin the root of the web application, e.g. in Eclipse its parent would be WebContent, then added a subfolder to resources called "img", placed my image in there.
The code now looks like this:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.
And now the image is displayed. Again not trying to hijack balusc's thorough answer, I just wanted to bring it up in case anyone ran into a similar issue. If someone wants me to open a separate Q and A I will!
Ahh yes, this was on JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.
Edit #Basil-Bourque answer What is WEB-INF used for in a Java EE web application seems fairly relevant
But its still a little confusing in that how can a WAR within an EAR access that location but not a standalone WAR?

JSF Shared Facelets

I have a project in jsf that is shared by multiple projects. The structure of the project is the same as that mentioned in the answer to the question Structure for multiple JSF projects with shared code
The someTemplate.xhtml mentioned in that structure has a outputStyleSheet statement immediately after the opening
<h:body>
tag :
<h:outputStylesheet name="css/some.css" library="common"></h:outputStylesheet>
The shared project is packaged into shared.jar and is placed into the WEB-INF/lib directory of a client project.
When I make a client file (as part of a client project) that uses the someTemplate.xhtml as a template using
<ui:composition template="/common/someTemplate.xhtml">
the file some.css is not recognized. None of the styles mentioned in some.css take effect.
When I look into the source of the page that is generated, I see these two lines:
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/some.css.jsf" />
<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
I have tried many different combinations of file names and locations for the css file, and the template file as well. But the problem remains the same. In all cases, the styles in some.css were not recognized. I am also curious as to why it says 'RES_NOT_FOUND' in the href. Any help will be highly appreciated.
Thanks
Mahendra

PrettyFaces using mapped urls and actions, i lose all my stylings

I have been using pretty faces for urls without issue until i started using mapped URLs feature (Section 3.6). http://ocpsoft.org/docs/prettyfaces/3.3.3/en-US/html/Configuration.html#config.actions
I'm getting the output and the actions i want to happen working fine. The problem though is i can't get to to any of my assets under assets folder. i'm getting a 404. The weird thing is that for every other config there hasn't been a problem. And isn't a problem when I run them together. The app is using a template so the links to css's, js's, etc.. are exactly the same. When I go to a plain ol' (e.g. /home) mapping they work fine, go to the other page with the action, they don't work. The template rendering does though. In fact the parameter injection and the action work as well.
PRETTY CONFIG:
<url-mapping id="home"> <!-- assets work -->
<pattern value="/home" />
<view-id value="/home.jsf" />
</url-mapping>
<url-mapping id="validate-token"> <!-- assets don't work -->
<pattern value="/validate-token/type/#{id:validateByTokenController.tokenType}/token/#{validateByTokenController.token}" />
<view-id value="/validate-token.jsf" />
<action>#{validateByTokenController.init}</action>
</url-mapping>
BEAN:
#RequestScoped
#Named
public class ValidateByTokenController {
private String tokenType;
private String token;
public void init() {
token = "J" + token;
tokenType = "J" + tokenType;
}
XHTML SAMPLE CSS LINKS: (same links for "home" config, but not for "validate-token")
<link rel="stylesheet"
href="assets/plugins/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
Thanks in advance.
The problem is that you are using relative URLs for your CSS files.
With an URL like /validate-token/type/foo/token/bar the browser thinks that /validate-token/type/foo/token/ is the current directory. So he tries to load the CSS file from /validate-token/type/foo/token/assets/css/style.css.
Try using absolute URLs for your CSS instead:
<link rel="stylesheet" href="#{request.contextPath}/assets/css/style.css" />

JSF doesn't read external css file

i have an external CSS file in the resources folder under WebContent folder, and i included it at the page header as follows:
<h:head>
<h:outputStylesheet name="css/style.css" library="css" />
</h:head>
i tried a simple selector to test the if the file is working like body {background-color:#b0c4de;} but unfortunately the file isn't linked
for more clarity i included here a screenshot for the exact location of the resources folder
First of all, this is not an external CSS file at all. It's internal to your web application. A real external CSS file would be served from a different domain and is not importable via <h:outputStylesheet>, but only via <link>.
Your concrete problem is caused because you unnecessarily repeated the CSS file folder into the library attribute. Just get rid of it.
<h:outputStylesheet name="css/style.css" />
The library attribute must represent the common module/theme/library name, such as "primefaces", but you don't have any here. Using a library name of "css" makes no utter sense as "css" just represents the file/content type.
See also:
How to reference CSS / JS / image resource in Facelets template?
What is the JSF resource library for and how should it be used?
Try
h:outputStylesheet name="style.css" library="css" />
here is a ref:
http://www.mkyong.com/jsf2/how-to-include-cascading-style-sheets-css-in-jsf/

How To Override xp.css in Icefaces?

I am using Icefaces in my web application. I want to override some styles that are defined in xp.css.
Create your own css file, eg. style.css.
Put it into your web pages directory, beside the WEB-INF directory.
Reference your css file in the head tag of your xhtml file(s)
You can reference it the following way:
<link href="style.css" rel="stylesheet" type="text/css" />

Resources