How to reference CSS / JS / image resource in Facelets template?
up vote
48
down vote
favorite
I've done tutorial about Facelets templating.
Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:
<link rel="stylesheet" href="style_resource_path.css" />
I can use absolute referencing by starting with /
:
<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />
But this will bring me troubles when I'll be moving application to a different context.
So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?
jsf resources jsf-2 facelets templating
add a comment |
up vote
48
down vote
favorite
I've done tutorial about Facelets templating.
Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:
<link rel="stylesheet" href="style_resource_path.css" />
I can use absolute referencing by starting with /
:
<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />
But this will bring me troubles when I'll be moving application to a different context.
So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?
jsf resources jsf-2 facelets templating
add a comment |
up vote
48
down vote
favorite
up vote
48
down vote
favorite
I've done tutorial about Facelets templating.
Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:
<link rel="stylesheet" href="style_resource_path.css" />
I can use absolute referencing by starting with /
:
<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />
But this will bring me troubles when I'll be moving application to a different context.
So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?
jsf resources jsf-2 facelets templating
I've done tutorial about Facelets templating.
Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:
<link rel="stylesheet" href="style_resource_path.css" />
I can use absolute referencing by starting with /
:
<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />
But this will bring me troubles when I'll be moving application to a different context.
So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?
jsf resources jsf-2 facelets templating
jsf resources jsf-2 facelets templating
edited May 29 '15 at 5:57
BalusC
836k29431003184
836k29431003184
asked Dec 3 '11 at 11:47
kravemir
4,961134582
4,961134582
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
up vote
98
down vote
accepted
Introduction
The proper JSF 2.x way is using <h:outputStylesheet>
, <h:outputScript>
and <h:graphicImage>
with a name
referring the path relative to webapp's /resources
folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?
Folder structure
Drop the CSS/JS/image files in /resources
folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF
and /META-INF
).
WebContent
|-- META-INF
|-- WEB-INF
|-- resources
| |-- css
| | |-- other.css
| | `-- style.css
| |-- js
| | `-- script.js
| `-- images
| |-- background.png
| |-- favicon.ico
| `-- logo.png
|-- page.xhtml
:
In case of Maven, it should be in /main/webapp/resources
and thus not /main/resources
(those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.
Referencing in Facelets
Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:
<h:head>
...
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
</h:head>
<h:body>
...
<h:graphicImage name="images/logo.png" />
...
</h:body>
The name
attribute must represent the full path relative to the /resources
folder. It does not need to start with /
. You do not need the library
attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.
You can reference the <h:outputStylesheet>
anywhere, also in <ui:define>
of template clients without the need for an additional <h:head>
. It will via the <h:head>
component of master template automatically end up in generated <head>
.
<ui:define name="...">
<h:outputStylesheet name="css/style.css" />
...
</ui:define>
You can reference <h:outputScript>
also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head>
via <h:head>
, then add target="head"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="head" />
...
</ui:define>
Or, if you want it to end up at the end of <body>
(right before </body>
, so that e.g. window.onload
and $(document).ready()
etc isn't necessary) via <h:body>
, then add target="body"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="body" />
...
</ui:define>
PrimeFaces HeadRenderer
In case you're using PrimeFaces, its HeadRenderer
will messup the default <h:head>
script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">
, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.
Packaging in JAR
You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.
Referencing in EL
You can in EL use the #{resource}
mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library
so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.
.some {
background-image: url("#{resource['images/background.png']}");
}
Here's the @import
example.
@import url("#{resource['css/other.css']}");
Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />
Referencing third-party CSS files
Third party CSS files loaded via <h:outputStylesheet>
which in turn reference fonts and/or images may need to be altered to use #{resource}
expressions as described in previous section, otherwise an UnmappedResourceHandler
needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.
Hiding in /WEB-INF
If you intend to hide the resources from public access by moving the whole /resources
folder into /WEB-INF
, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml
context parameter as follows:
<context-param>
<param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
<param-value>/WEB-INF/resources</param-value>
</context-param>
In older JSF versions this is not possible.
See also:
Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)- What is the JSF resource library for and how should it be used?
- How do I override default PrimeFaces CSS with custom styles?
I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notationurl("#{resource['otbofaces:date-entry/calendar.gif']}")
works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
– mrswadge
Jan 21 '16 at 18:25
@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05
Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19
What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like<ui:composition template="/templates/report.xhtml">
with my template residing inweb/resources/templates/report.xhtml
, even making use of how resources are structured in libraries. It is not working that way.
– YoYo
Feb 25 '17 at 22:13
Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14
add a comment |
up vote
7
down vote
Suppose that you are running the in the sub directories of the web application. You may try like this :
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '${facesContext.externalContext.requestContextPath}/'
link will help you to return immediately to the root of the context.
In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
1
Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58
6
This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38
add a comment |
up vote
2
down vote
These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.
I had to change (please note the "" in front of the #. Probably side effect from gulp:
<h:outputStylesheet library="my_theme" name="css/default.css"/>
background: $blue url("#{resource['my_theme/images/background-homepage-h1.png']}");
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
98
down vote
accepted
Introduction
The proper JSF 2.x way is using <h:outputStylesheet>
, <h:outputScript>
and <h:graphicImage>
with a name
referring the path relative to webapp's /resources
folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?
Folder structure
Drop the CSS/JS/image files in /resources
folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF
and /META-INF
).
WebContent
|-- META-INF
|-- WEB-INF
|-- resources
| |-- css
| | |-- other.css
| | `-- style.css
| |-- js
| | `-- script.js
| `-- images
| |-- background.png
| |-- favicon.ico
| `-- logo.png
|-- page.xhtml
:
In case of Maven, it should be in /main/webapp/resources
and thus not /main/resources
(those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.
Referencing in Facelets
Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:
<h:head>
...
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
</h:head>
<h:body>
...
<h:graphicImage name="images/logo.png" />
...
</h:body>
The name
attribute must represent the full path relative to the /resources
folder. It does not need to start with /
. You do not need the library
attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.
You can reference the <h:outputStylesheet>
anywhere, also in <ui:define>
of template clients without the need for an additional <h:head>
. It will via the <h:head>
component of master template automatically end up in generated <head>
.
<ui:define name="...">
<h:outputStylesheet name="css/style.css" />
...
</ui:define>
You can reference <h:outputScript>
also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head>
via <h:head>
, then add target="head"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="head" />
...
</ui:define>
Or, if you want it to end up at the end of <body>
(right before </body>
, so that e.g. window.onload
and $(document).ready()
etc isn't necessary) via <h:body>
, then add target="body"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="body" />
...
</ui:define>
PrimeFaces HeadRenderer
In case you're using PrimeFaces, its HeadRenderer
will messup the default <h:head>
script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">
, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.
Packaging in JAR
You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.
Referencing in EL
You can in EL use the #{resource}
mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library
so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.
.some {
background-image: url("#{resource['images/background.png']}");
}
Here's the @import
example.
@import url("#{resource['css/other.css']}");
Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />
Referencing third-party CSS files
Third party CSS files loaded via <h:outputStylesheet>
which in turn reference fonts and/or images may need to be altered to use #{resource}
expressions as described in previous section, otherwise an UnmappedResourceHandler
needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.
Hiding in /WEB-INF
If you intend to hide the resources from public access by moving the whole /resources
folder into /WEB-INF
, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml
context parameter as follows:
<context-param>
<param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
<param-value>/WEB-INF/resources</param-value>
</context-param>
In older JSF versions this is not possible.
See also:
Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)- What is the JSF resource library for and how should it be used?
- How do I override default PrimeFaces CSS with custom styles?
I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notationurl("#{resource['otbofaces:date-entry/calendar.gif']}")
works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
– mrswadge
Jan 21 '16 at 18:25
@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05
Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19
What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like<ui:composition template="/templates/report.xhtml">
with my template residing inweb/resources/templates/report.xhtml
, even making use of how resources are structured in libraries. It is not working that way.
– YoYo
Feb 25 '17 at 22:13
Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14
add a comment |
up vote
98
down vote
accepted
Introduction
The proper JSF 2.x way is using <h:outputStylesheet>
, <h:outputScript>
and <h:graphicImage>
with a name
referring the path relative to webapp's /resources
folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?
Folder structure
Drop the CSS/JS/image files in /resources
folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF
and /META-INF
).
WebContent
|-- META-INF
|-- WEB-INF
|-- resources
| |-- css
| | |-- other.css
| | `-- style.css
| |-- js
| | `-- script.js
| `-- images
| |-- background.png
| |-- favicon.ico
| `-- logo.png
|-- page.xhtml
:
In case of Maven, it should be in /main/webapp/resources
and thus not /main/resources
(those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.
Referencing in Facelets
Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:
<h:head>
...
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
</h:head>
<h:body>
...
<h:graphicImage name="images/logo.png" />
...
</h:body>
The name
attribute must represent the full path relative to the /resources
folder. It does not need to start with /
. You do not need the library
attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.
You can reference the <h:outputStylesheet>
anywhere, also in <ui:define>
of template clients without the need for an additional <h:head>
. It will via the <h:head>
component of master template automatically end up in generated <head>
.
<ui:define name="...">
<h:outputStylesheet name="css/style.css" />
...
</ui:define>
You can reference <h:outputScript>
also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head>
via <h:head>
, then add target="head"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="head" />
...
</ui:define>
Or, if you want it to end up at the end of <body>
(right before </body>
, so that e.g. window.onload
and $(document).ready()
etc isn't necessary) via <h:body>
, then add target="body"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="body" />
...
</ui:define>
PrimeFaces HeadRenderer
In case you're using PrimeFaces, its HeadRenderer
will messup the default <h:head>
script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">
, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.
Packaging in JAR
You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.
Referencing in EL
You can in EL use the #{resource}
mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library
so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.
.some {
background-image: url("#{resource['images/background.png']}");
}
Here's the @import
example.
@import url("#{resource['css/other.css']}");
Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />
Referencing third-party CSS files
Third party CSS files loaded via <h:outputStylesheet>
which in turn reference fonts and/or images may need to be altered to use #{resource}
expressions as described in previous section, otherwise an UnmappedResourceHandler
needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.
Hiding in /WEB-INF
If you intend to hide the resources from public access by moving the whole /resources
folder into /WEB-INF
, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml
context parameter as follows:
<context-param>
<param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
<param-value>/WEB-INF/resources</param-value>
</context-param>
In older JSF versions this is not possible.
See also:
Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)- What is the JSF resource library for and how should it be used?
- How do I override default PrimeFaces CSS with custom styles?
I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notationurl("#{resource['otbofaces:date-entry/calendar.gif']}")
works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
– mrswadge
Jan 21 '16 at 18:25
@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05
Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19
What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like<ui:composition template="/templates/report.xhtml">
with my template residing inweb/resources/templates/report.xhtml
, even making use of how resources are structured in libraries. It is not working that way.
– YoYo
Feb 25 '17 at 22:13
Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14
add a comment |
up vote
98
down vote
accepted
up vote
98
down vote
accepted
Introduction
The proper JSF 2.x way is using <h:outputStylesheet>
, <h:outputScript>
and <h:graphicImage>
with a name
referring the path relative to webapp's /resources
folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?
Folder structure
Drop the CSS/JS/image files in /resources
folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF
and /META-INF
).
WebContent
|-- META-INF
|-- WEB-INF
|-- resources
| |-- css
| | |-- other.css
| | `-- style.css
| |-- js
| | `-- script.js
| `-- images
| |-- background.png
| |-- favicon.ico
| `-- logo.png
|-- page.xhtml
:
In case of Maven, it should be in /main/webapp/resources
and thus not /main/resources
(those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.
Referencing in Facelets
Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:
<h:head>
...
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
</h:head>
<h:body>
...
<h:graphicImage name="images/logo.png" />
...
</h:body>
The name
attribute must represent the full path relative to the /resources
folder. It does not need to start with /
. You do not need the library
attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.
You can reference the <h:outputStylesheet>
anywhere, also in <ui:define>
of template clients without the need for an additional <h:head>
. It will via the <h:head>
component of master template automatically end up in generated <head>
.
<ui:define name="...">
<h:outputStylesheet name="css/style.css" />
...
</ui:define>
You can reference <h:outputScript>
also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head>
via <h:head>
, then add target="head"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="head" />
...
</ui:define>
Or, if you want it to end up at the end of <body>
(right before </body>
, so that e.g. window.onload
and $(document).ready()
etc isn't necessary) via <h:body>
, then add target="body"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="body" />
...
</ui:define>
PrimeFaces HeadRenderer
In case you're using PrimeFaces, its HeadRenderer
will messup the default <h:head>
script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">
, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.
Packaging in JAR
You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.
Referencing in EL
You can in EL use the #{resource}
mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library
so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.
.some {
background-image: url("#{resource['images/background.png']}");
}
Here's the @import
example.
@import url("#{resource['css/other.css']}");
Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />
Referencing third-party CSS files
Third party CSS files loaded via <h:outputStylesheet>
which in turn reference fonts and/or images may need to be altered to use #{resource}
expressions as described in previous section, otherwise an UnmappedResourceHandler
needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.
Hiding in /WEB-INF
If you intend to hide the resources from public access by moving the whole /resources
folder into /WEB-INF
, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml
context parameter as follows:
<context-param>
<param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
<param-value>/WEB-INF/resources</param-value>
</context-param>
In older JSF versions this is not possible.
See also:
Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)- What is the JSF resource library for and how should it be used?
- How do I override default PrimeFaces CSS with custom styles?
Introduction
The proper JSF 2.x way is using <h:outputStylesheet>
, <h:outputScript>
and <h:graphicImage>
with a name
referring the path relative to webapp's /resources
folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?
Folder structure
Drop the CSS/JS/image files in /resources
folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF
and /META-INF
).
WebContent
|-- META-INF
|-- WEB-INF
|-- resources
| |-- css
| | |-- other.css
| | `-- style.css
| |-- js
| | `-- script.js
| `-- images
| |-- background.png
| |-- favicon.ico
| `-- logo.png
|-- page.xhtml
:
In case of Maven, it should be in /main/webapp/resources
and thus not /main/resources
(those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.
Referencing in Facelets
Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:
<h:head>
...
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
</h:head>
<h:body>
...
<h:graphicImage name="images/logo.png" />
...
</h:body>
The name
attribute must represent the full path relative to the /resources
folder. It does not need to start with /
. You do not need the library
attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.
You can reference the <h:outputStylesheet>
anywhere, also in <ui:define>
of template clients without the need for an additional <h:head>
. It will via the <h:head>
component of master template automatically end up in generated <head>
.
<ui:define name="...">
<h:outputStylesheet name="css/style.css" />
...
</ui:define>
You can reference <h:outputScript>
also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head>
via <h:head>
, then add target="head"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="head" />
...
</ui:define>
Or, if you want it to end up at the end of <body>
(right before </body>
, so that e.g. window.onload
and $(document).ready()
etc isn't necessary) via <h:body>
, then add target="body"
attribute.
<ui:define name="...">
<h:outputScript name="js/script.js" target="body" />
...
</ui:define>
PrimeFaces HeadRenderer
In case you're using PrimeFaces, its HeadRenderer
will messup the default <h:head>
script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">
, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.
Packaging in JAR
You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.
Referencing in EL
You can in EL use the #{resource}
mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library
so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.
.some {
background-image: url("#{resource['images/background.png']}");
}
Here's the @import
example.
@import url("#{resource['css/other.css']}");
Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />
Referencing third-party CSS files
Third party CSS files loaded via <h:outputStylesheet>
which in turn reference fonts and/or images may need to be altered to use #{resource}
expressions as described in previous section, otherwise an UnmappedResourceHandler
needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.
Hiding in /WEB-INF
If you intend to hide the resources from public access by moving the whole /resources
folder into /WEB-INF
, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml
context parameter as follows:
<context-param>
<param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
<param-value>/WEB-INF/resources</param-value>
</context-param>
In older JSF versions this is not possible.
See also:
Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)- What is the JSF resource library for and how should it be used?
- How do I override default PrimeFaces CSS with custom styles?
edited May 23 '17 at 12:26
Community♦
11
11
answered Dec 3 '11 at 15:34
BalusC
836k29431003184
836k29431003184
I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notationurl("#{resource['otbofaces:date-entry/calendar.gif']}")
works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
– mrswadge
Jan 21 '16 at 18:25
@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05
Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19
What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like<ui:composition template="/templates/report.xhtml">
with my template residing inweb/resources/templates/report.xhtml
, even making use of how resources are structured in libraries. It is not working that way.
– YoYo
Feb 25 '17 at 22:13
Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14
add a comment |
I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notationurl("#{resource['otbofaces:date-entry/calendar.gif']}")
works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
– mrswadge
Jan 21 '16 at 18:25
@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05
Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19
What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like<ui:composition template="/templates/report.xhtml">
with my template residing inweb/resources/templates/report.xhtml
, even making use of how resources are structured in libraries. It is not working that way.
– YoYo
Feb 25 '17 at 22:13
Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14
I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation
url("#{resource['otbofaces:date-entry/calendar.gif']}")
works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.– mrswadge
Jan 21 '16 at 18:25
I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation
url("#{resource['otbofaces:date-entry/calendar.gif']}")
works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.– mrswadge
Jan 21 '16 at 18:25
@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05
@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05
Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19
Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19
What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like
<ui:composition template="/templates/report.xhtml">
with my template residing in web/resources/templates/report.xhtml
, even making use of how resources are structured in libraries. It is not working that way.– YoYo
Feb 25 '17 at 22:13
What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like
<ui:composition template="/templates/report.xhtml">
with my template residing in web/resources/templates/report.xhtml
, even making use of how resources are structured in libraries. It is not working that way.– YoYo
Feb 25 '17 at 22:13
Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14
Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14
add a comment |
up vote
7
down vote
Suppose that you are running the in the sub directories of the web application. You may try like this :
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '${facesContext.externalContext.requestContextPath}/'
link will help you to return immediately to the root of the context.
In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
1
Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58
6
This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38
add a comment |
up vote
7
down vote
Suppose that you are running the in the sub directories of the web application. You may try like this :
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '${facesContext.externalContext.requestContextPath}/'
link will help you to return immediately to the root of the context.
In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
1
Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58
6
This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38
add a comment |
up vote
7
down vote
up vote
7
down vote
Suppose that you are running the in the sub directories of the web application. You may try like this :
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '${facesContext.externalContext.requestContextPath}/'
link will help you to return immediately to the root of the context.
In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
Suppose that you are running the in the sub directories of the web application. You may try like this :
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '${facesContext.externalContext.requestContextPath}/'
link will help you to return immediately to the root of the context.
In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
edited Jul 12 '17 at 8:21
answered Dec 3 '11 at 11:54
Abimaran Kugathasan
20.8k85993
20.8k85993
1
Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58
6
This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38
add a comment |
1
Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58
6
This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38
1
1
Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58
Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58
6
6
This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38
This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38
add a comment |
up vote
2
down vote
These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.
I had to change (please note the "" in front of the #. Probably side effect from gulp:
<h:outputStylesheet library="my_theme" name="css/default.css"/>
background: $blue url("#{resource['my_theme/images/background-homepage-h1.png']}");
add a comment |
up vote
2
down vote
These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.
I had to change (please note the "" in front of the #. Probably side effect from gulp:
<h:outputStylesheet library="my_theme" name="css/default.css"/>
background: $blue url("#{resource['my_theme/images/background-homepage-h1.png']}");
add a comment |
up vote
2
down vote
up vote
2
down vote
These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.
I had to change (please note the "" in front of the #. Probably side effect from gulp:
<h:outputStylesheet library="my_theme" name="css/default.css"/>
background: $blue url("#{resource['my_theme/images/background-homepage-h1.png']}");
These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.
I had to change (please note the "" in front of the #. Probably side effect from gulp:
<h:outputStylesheet library="my_theme" name="css/default.css"/>
background: $blue url("#{resource['my_theme/images/background-homepage-h1.png']}");
answered Jun 25 '17 at 3:46
Mircea Stanciu
1,92522228
1,92522228
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f8367421%2fhow-to-reference-css-js-image-resource-in-facelets-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown