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/
Related
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?
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
The JS file extra.js is included as follows:
<h:outputScript library="js" name="extra.js" />
I am facing issue of browser caching. Many times, I will not get the updated copy.
In plain HTML, we used to append version number or random number with JS URL like:
<script type="text/javascript" src="http://yyy.zzzz.net/js/tryjs?v=1234"></script>
where v is the version number.
Is there any way to add some version number to the generated resource URL in h:outputScript?
You can do one of the following
Manage the version number in one of you beans #{myBean.myVersion} and append it to you js file in h:outputScript
Like this:
<h:outputScript library="js" name="extra.js?#{myBean.myVersion}/>
or rename your js file to include the #{myBean.myVersion} as a part of its name like this
<h:outputScript library="js" name="extra.#{myBean.myVersion}.js/>
Also you can take a look at this : Resources (Library) In JSF 2.0
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?
Say I have a resources/ folder in the webroot. In it, I have a css/ folder and in it there is a theme.css file.
But I want to set an Expires: header. Therefore I want to use a version for resource libraries, say
<h:outputStylesheet library="css" name="theme.css"/>
would turn into
<link rel="stylesheet" src="javax.faces.resources/theme.css.xhtml?ln=css"/>
But I want to specify something like
<h:outputStylesheet library="css" name="theme.css" version="1.2"/>
And get
<link rel="stylesheet" src="javax.faces.resources/theme.css.xhtml?ln=css&v=1_2"/>
or similar. I have read that JSF2 has support for resource versioning, but how do I specify which version to load, and where do I put the files?
If you suppose to have the css library, you should use this directories naming scheme:
resources/css/1_1
resources/css/1_2
where resources in the jsf standard resource directory