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?
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
|-- resources
| |-- css
| | |-- other.css
| | `-- style.css
| |-- js
| | `-- script.js
| `-- images
| |-- background.png
| |-- favicon.ico
| `-- logo.png
|-- META-INF
| `-- MANIFEST.MF
|-- WEB-INF
| |-- faces-config.xml
| `-- web.xml
|-- 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']}" />
In case you're using a SCSS compiler (e.g. Sass Compiler Plugin for Maven), keep in mind that the SCSS processor might interpret # as a special character. In that case you would need to escape it with \.
.some {
background-image: url("\#{resource['images/background.png']}");
}
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?
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" />
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']}");
The resourcehandlers.UnmappedResourceHandler helps to map JSF resources on an URL pattern of /javax.faces.resource/*.
For me these 2 xml configs in faces-config.xml:
org.omnifaces.resourcehandler.UnmappedResourceHandler
and in web.xml:
<servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>/javax.faces.resource/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
helped with css and images.
Related
Once deployed as a WAR into Tomcat, my customized SBA dashboard fails at showing a custom view that was first doing fine into a JAR (but it also fails now, btw)
This is where is located the extension's directory into the WAR:
/WEB-INF/classes/META-INF/spring-boot-admin-server-ui/extensions/customz/...
REM: I've also customized the login page and my picture is located at /WEB-INF/classes/META-INF/spring-boot-admin-server-ui/assets/img/ so I guess that the classpath isn't the issue.
Still, I've got an error into the web browser's console, though:
GET http://xx.xx.xx.xx:8080/extensions/customz/css/custom.fb3a4f29.css net::ERR_ABORTED 404
REM: according to my context path, the correct path should probably be that one:
http://xx.xx.xx.xx:8080/myapp/dashboard/extensions/customz/css/custom.fb3a4f29.css
server.servlet.context-path=/myapp
spring.boot.admin.context-path=/dashboard
...
<packaging>war</packaging>
<build>
<finalName>myapp</finalName>
...
</build>
But I couldn't figure out how to change the base path for my views in this case. I should just have to prefix somehow the system with my "customz/dashboard" context path (?)
Does anybody, please, know how to get out of this trap?
NB: Spring Boot 2.2.8, Spring Cloud Hoxton.SR5, SBA 2.2.3, Tomcat 9.0.36
AdminServerUiAutoConfiguration declares resource handlers for the extensions (mapping context-path/extensions/** to the above classpath, as figured out when I tried to visualize custom JS and CSS earlier.
Remember that spring.boot.admin.ui.extension-resource-locations default is classpath:/META-INF/spring-boot-admin-server-ui/extensions/ which seems fine in my case. That confirms that custom views are correctly exposed.
So that leads us to spring-boot-admin-server-ui/src/main/frontend/index.html where all paths appear to be ... absolute!
<th:block th:each="cssExtension : ${cssExtensions}">
<link rel="preload" th:href="'/extensions/' + ${cssExtension.resourcePath}" as="style">
</th:block>
<th:block th:each="jsExtension : ${jsExtensions}">
<link rel="preload" th:href="'/extensions/' + ${jsExtension.resourcePath}" as="script">
</th:block>
<th:block th:each="cssExtension : ${cssExtensions}">
<link th:href="'/extensions/' + ${cssExtension.resourcePath}" rel="stylesheet">
</th:block>
<link rel="shortcut icon" th:href="${uiSettings.favicon}" type="image/png">
<title th:text="${uiSettings.title}">Spring Boot Admin</title>
...
<script lang="javascript" src="sba-settings.js"></script>
<th:block th:each="jsExtension : ${jsExtensions}">
<script lang="javascript" th:src="'/extensions/' + ${jsExtension.resourcePath}"></script>
</th:block>
I guess these are two points where both servlet and admin ui context paths should be added in order for extensions to be held. May be tehe quickest way would be to URls relative in index.html
So I did exactly that... git cloning SBA on tag 2.2.3, doing the changes and Maven installing it, changing my server's parent to SNAPSHOT, then rebuilding the WAR into Tomcat. Et voilà.
I have a Spring Boot 2.0 application that I'm trying to deploy as a WAR file. This means that it will have a custom context path. To test as a Java application I added
server.servlet.context-path=/MyApplication
to the application.properties. In my index.html (located in src/main/resources/static) I try to include Javascript using something like this:
<script src="dist/main.js"</script>
Regardless of whether I am using the context path, this always tries to load the file from http://localhost:8080/dist/main.js completely ignoring the context path I have specified. The same is true if I try to deploy my application as a WAR. The file is really at http://localhost:8080/MyApplication/dist/main.js.
What do I need to change in my configuration to make Spring Boot use the context path when serving static content?
I just figured it out. In my index.html I had set a base href:
<base href="/">
I converted index.html to a JSP and set the base href using a JSP tag:
<base href='<c:url value="/" />'>
Modify the <base href="/"> in index.html to the following,
<base href="./">
This will try to load all the scripts from the context path that is specified and it fixed the issue for me.
I am trying to reference to my css files as shown in the image. Since my index.html is in the templates folder, i have to go back 1 level up(../), and then go into static/css/{the file that i want}. However, this fails to render my css and js files. What am i doing wrong here? I am using thymelead templating engine for this spring boot application. Please help thank you
Spring-Boot and Thymeleaf works well together. By default Spring-Boot look up for static resources in those folders.
/META-INF/resources
/resources/
/static/
/public/
So you dont need to go back to any upper level. Your reference should normally work like that:
<link rel="stylesheet" href="/css/bootstrap.min.css" th:href="#{/css/bootstrap.min.css}" />
I was only testing my spring-mvc as a root app on top of tomcat 7.0.50, now however I need to run at under a subfolder of the domain, like www.blabla.com/myapp
Unfortunately it does not work: all the resource files are missing and the application tries to redirect itself to root all the time.
How do i configure a spring mvc application to run under a subfolder?
I think it depends on your configuration of your HTTP Server (Apache, Nginx) and it has nothing to do with Spring.
The basic problem was that all references (including form actions) in jsp pages are absolute (a least with my current configuration) and I had to c:url them.
static resources:
<link href="<c:url value="/resources/css/bootstrap.css"/>" rel="stylesheet" type="text/css"/>
form actions:
<c:url var="proceedActionUri" value="/user/mainscreen"/>
<form:form method="post" action="${proceedActionUri}" commandName="user" role="form">
Sorry if this is a Newbie question, but I am trying to teach myself Spring MVC/WebFlow with JSF/Primefaces, and I've run into a snag setting it up...
If in web.xml, I set the MVC dispatcher to a catch all '/', then register #RequestMapping(value = "/{catchall}", method = RequestMethod.GET), in my controller. The page is served, but the resources files all have the {catchall} name prepended to the start of the name e.g.
If I use //127.0.0.1:8080/testpage
<link type="text/css" rel="stylesheet" href="/testpage/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&v=2.2" />
This results in every resource being NOT FOUND, and returning a 404 error?
If instead of a 'catch-all', I set the MVC dispatcher to '/a/*', the perform the same test, e.g.
//127.0.0.1:8080/a/testpage, it works fine with the resources being shown as:
<link type="text/css" rel="stylesheet" href="/a/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&v=2.2" />
I am trying to setup a system where the page is served dynamically from the datastore, and want the page to be - www.whatever.com/{pagename} - without any prefixed structure, or postfixed identifier (e.g. .jsp, .jsf, .xhtml, etc.)
I can post configs if required, but am sure I'm just missing something stupid!!!!
Please help.
Last time I tried I found that the Sun Mojarra library assumes your servlet mapping is either a prefix mapping or a servlet mapping by extension (but not the default servlet mapping "/"). Your best bet to use URLs without a servlet prefix might be to use URL rewriting techniques such as Tuckey UrlRewriteFilter or in JSF PrettyFaces is quite popular.