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
Related
I use JSF 2.3 for developing web application.
As a web developer, I care about the performance of loading speed of a site.
As I was exploring on how I could make my site faster, I encountered this post on Stack Overflow. And the quote from the accepted and most up-voted answer said
stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.
I know that JavaScript performs better when it is placed at the bottom of the <body>, but I want to include reCAPTCHA and Google instructs us to place the required external JavaScript before the closing </head> tag.
So, I decided to include the required external JavaScript before the closing </head> tag and after CSS files to boost the performance.
However, my CSS files are declared in a JSF way like <h:outputStylesheet name="css/default.css"/>, and I realized that the CSS files declared this way are always placed after files that are declared in a non-JSF way, which is <script src="https://www.google.com/recaptcha/api.js"></script>. I also considered making the external JavaScript behave in a JSF way by changing <script> to <h:outputScript>, but the <h:outputScript> can only render local scripts as described in this post .
So, the result will always be as follows.
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
</head>
insted of
<head>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
Maybe I'm thinking too much, and the placement order of link and script doesn't affect the performance that much, but if the loading speed gets faster even a little, I want to follow the better way.
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
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/
I am implementing small software with JSF. I would like to show users' photos from Picasa, but I have no idea what is the best way to do it? There can be many users and everyone of them has their own Picasa albums.
What do you recommend and why? Is it the wisest to use already implemented JavaScript-softwares like JQuery plugins or Googles Picasa Web Albums Data API to fetch photos etc?
Thanks!
Sami
EDIT:
Have you or somebody else tried Fancybox, I have problems with js and css-files and I think that because of paths to those files. What is the correct way to refer to JS and CSS-files in JSF-files.
I recommend using a jQuery based solution like Picasa Webalbum Integrator. All you have to do is to add the required script files to your page and call the needed function, passing it the username of the gallery, like this:
<script type="text/javascript">
$(document).ready(function() { //-- default jQuery call, do stuff when page is loaded
$("#container").pwi({ //--specify your DIV's ID here
username: '#{user.userName}'
});
});
</script>
Where #{user.userName} is an EL expression pointing to the name of the user which gallery you want to show.
My mistake!
Two things what you have to remember when using jquery plugins with JSF.
<h:outputStylesheet library="css" name="pwi.css" />
<h:outputScript library="js" name="jquery.pwi.js" />
You have to use those tags. I used only h:outputScript for both of them and it seems to be ok, but of course not, generated html wasn't ok.
Other thing was that:
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
I am using jquery with is in Primefaces, without it there is a conflict between jquery versions or pwi doesn't find jquery at all. At least I think so :) No everything is working fine, so I am happy!
Sami
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