I have a spring-boot app using that uses spring-mvc with html. No Thymeleaf, no JSP. I would like to be able to apply themes to my app, much the way CMS's such as Joomla and Wordpress do. The problem is that every Spring-MVC Template article/posting talks about either using a single css file, or using something like Tiles. If I have 15 themes, each in their own folder (they typically seem to have many css, js, and html files), I am not sure how I can apply that theme to my app dynamically (selecting via drop down for example).
Has anyone done anything like this? Conceptually I don't see the problem, but short of manually moving each template related file under /template, I don't know how to best accomplish this.
Using Velocity as viewResolver is possible to do it.
I'm using this configuration:
<bean id="velocityConfig" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<property name="resourceLoaderPath" value="/WEB-INF/views/"/>
<property name="velocityProperties">
<props>
<prop key="input.encoding">UTF-8</prop>
<prop key="output.encoding">UTF-8</prop>
</props>
</property>
</bean>
<!-- #Velocity -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">
<property name="cache" value="true" />
<property name="prefix" value="" />
<property name="suffix" value=".vm" />
<property name="layoutUrl" value="layout1.vm" />
<property name="contentType" value="text/html;charset=UTF-8" />
</bean>
The property layoutUrl there is your DEFAULT template, that is a HTML file inside your webapp/WEB-INF/views/ folder:
layout1.vm:
<html>
<body>
<h1>Hello world 1!</h1>
$screen_content
</body>
</html>
The velocity View Resolver will replace $screen_content with the view contents of your controller response:
MyController.java
...
#RequestMapping("/mycontroller")
public String myController() {
return "myView1";
}
...
So, if the view myView1.vm inside webapp/WEB-INF/views/ is something like:
<h2> Foo Bar! </h2>
The result of a request to /myApp/mycontroller would be like:
<html>
<body>
<h1>Hello world 1!</h1>
<h2> Foo Bar! </h2>
</body>
</html>
And if you want to use another TEMPLATE, you can set it dynamically on your controller, setting the value on your Model var:
...
#RequestMapping("/mycontrollerWithADifferentLayout")
public String myController2(Model m) {
m.addAttribute("layout", "layout2");
return "myView1";
}
...
When setting "layout" attribute on model, Velocity will use the provided view as the template.
Found this on Spring Reference:
17.9.2 Defining themes
To use themes in your web application, you must set up an
implementation of the org.springframework.ui.context.ThemeSource
interface. The WebApplicationContext interface extends ThemeSource but
delegates its responsibilities to a dedicated implementation. By
default the delegate will be an
org.springframework.ui.context.support.ResourceBundleThemeSource
implementation that loads properties files from the root of the
classpath. To use a custom ThemeSource implementation or to configure
the base name prefix of the ResourceBundleThemeSource, you can
register a bean in the application context with the reserved name
themeSource. The web application context automatically detects a bean
with that name and uses it.
When using the ResourceBundleThemeSource, a theme is defined in a
simple properties file. The properties file lists the resources that
make up the theme. Here is an example:
styleSheet=/themes/cool/style.css
background=/themes/cool/img/coolBg.jpg The keys of the properties are
the names that refer to the themed elements from view code. For a JSP,
you typically do this using the spring:theme custom tag, which is very
similar to the spring:message tag. The following JSP fragment uses the
theme defined in the previous example to customize the look and feel:
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<link rel="stylesheet" href="<spring:theme code='styleSheet'/>" type="text/css"/>
</head>
<body style="background=<spring:theme code='background'/>">
...
</body> </html>
By default, the ResourceBundleThemeSource uses an empty base name prefix. As a > result, the properties files are loaded
from the root of the classpath. Thus you would put the cool.properties
theme definition in a directory at the root of the classpath, for
example, in /WEB-INF/classes. The ResourceBundleThemeSource uses the
standard Java resource bundle loading mechanism, allowing for full
internationalization of themes. For example, we could have a
/WEB-INF/classes/cool_nl.properties that references a special
background image with Dutch text on it.
http://docs.spring.io/spring/docs/4.1.x/spring-framework-reference/html/mvc.html#mvc-themeresolver-defining
Related
I'm having trouble with loading CSS and images and creating links to other pages when I have a servlet forward to a JSP. Specifically, when I set my <welcome-file> to index.jsp, the CSS is being loaded and my images are being displayed. However, if I set my <welcome-file> to HomeServlet which forwards control to index.jsp, the CSS is not being applied and my images are not being displayed.
My CSS file is in web/styles/default.css.
My images are in web/images/.
I'm linking to my CSS like so:
<link href="styles/default.css" rel="stylesheet" type="text/css" />
I'm displaying my images as follows:
<img src="images/image1.png" alt="Image1" />
How is this problem caused and how can I solve it?
Update 1: I've added the structure of the application, as well as some other information that might help.
The header.jsp file is the file that contains the link tag for the CSS. The HomeServlet is set as my welcome-file in web.xml:
<welcome-file-list>
<welcome-file>HomeServlet</welcome-file>
</welcome-file-list>
The servlet is declared and mapped as followes in the web.xml:
<servlet>
<servlet-name>HomeServlet</servlet-name>
<servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
Update 2: I found the problem finally - my servlet was mapped incorrectly. Apparently when setting a Servlet as your <welcome-file> it can't have a URL pattern of /, which I find sort of weird, because wouldn't that stand for the root directory of the site?
The new mapping is as follows:
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>
All relative URLs in the HTML page generated by the JSP file are relative to the current request URL (the URL as you see in the browser address bar) and not to the location of the JSP file in the server side as you seem to expect. It's namely the webbrowser who has to download those resources individually by URL, not the webserver who has to include them from disk somehow.
Apart from changing the relative URLs to make them relative to the URL of the servlet instead of the location of the JSP file, another way to fix this problem is to make them relative to the domain root (i.e. start with a /). This way you don't need to worry about changing the relative paths once again when you change the URL of the servlet.
<head>
<link rel="stylesheet" href="/context/css/default.css" />
<script src="/context/js/default.js"></script>
</head>
<body>
<img src="/context/img/logo.png" />
link
<form action="/context/servlet"><input type="submit" /></form>
</body>
However, you would probably like not to hardcode the context path. Very reasonable. You can obtain the context path in EL by ${pageContext.request.contextPath}.
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
<script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
<img src="${pageContext.request.contextPath}/img/logo.png" />
link
<form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>
(which can easily be shortened by <c:set var="root" value="${pageContext.request.contextPath}" /> and used as ${root} elsewhere)
Or, if you don't fear unreadable XML and broken XML syntax highlighting, use JSTL <c:url>:
<head>
<link rel="stylesheet" href="<c:url value="/css/default.css" />" />
<script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
<img src="<c:url value="/img/logo.png" />" />
link
<form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>
Either way, this is in turn pretty cumbersome if you have a lot of relative URLs. For that you can use the <base> tag. All relative URL's will instantly become relative to it. It has however to start with the scheme (http://, https://, etc). There's no neat way to obtain the base context path in plain EL, so we need a little help of JSTL here.
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<link rel="stylesheet" href="css/default.css" />
<script src="js/default.js"></script>
</head>
<body>
<img src="img/logo.png" />
link
<form action="servlet"><input type="submit" /></form>
</body>
This has in turn (again) some caveats. Anchors (the #identifier URL's) will become relative to the base path as well! You would like to make it relative to the request URL (URI) instead. So, change like
jump
to
jump
Each way has its own pros and cons. It's up to you which to choose. At least, you should now understand how this problem is caused and how to solve it :)
See also:
Is it recommended to use the <base> html tag?
I faced similar issue with Spring MVC application. I used < mvc:resources > tag to resolve this issue.
Please find the following link having more details.
http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/
You must analyse the actual HTML output, for the hint.
By giving the path like this means "from current location", on the other hand if you start with a / that would mean "from the context".
Your welcome page is set as That Servlet . So all css , images path should be given relative to that servlet DIR . which is a bad idea ! why do you need the servlet as a home page ? set .jsp as index page and redirect to any page from there ?
are you trying to populate any fields from db is that why you are using servlet ?
If you are using Spring MVC, then you need to declare default action servlet for static contents. Add the following entries in spring-action-servlet.xml. It worked for me.
NOTE: keep all the static contents outside WEB-INF.
<!-- Enable annotation-based controllers using #Controller annotations -->
<bean id="annotationUrlMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
<property name="order" value="0" />
</bean>
<bean id="controllerClassNameHandlerMapping" class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping">
<property name="order" value="1" />
</bean>
<bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
As for your update, I was confused for the reasoning behind in. Dug a little deeper and found this gem:
yoursite.com becomes yoursite.com/
yoursite.com/ is a directory, so the welcome-file-list is scanned
yoursite.com/CMS is the first welcome-file ("CMS" in the welcome-file-list), and there is a mapping of /CMS to the MyCMS servlet, so that servlet is accessed.
Source: http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage
So, the mapping then does make sense.
And one can now freely use ${pageContext.request.contextPath}/path/ as src/href for relative links!
short answer - add following line in the jsp which will define the base
base href="/{root of your application}/"
Below code worked for me.
instead of
use
<%# include file="styles/default.css"%>
You can try out this one as well as. Because this worked for me and it's simple.
<style>
<%# include file="/css/style.css" %>
</style>
<bean id="viewResolver" class="org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">
<property name="prefix" value="" />
<property name="suffix" value=".vm"></property>
<property name="contentType" value="text/html;charset=UTF-8" />
<property name="layoutUrl" value="layout/default.vm" />
</bean>
how the key word "layoutUrl" work in VelocityLayoutViewResolver?
Its very common to have a dynamic web page divided into a layout part and a content part. The layout part might consist of a header, a footer, a sidebar, a navigation and so on. Elements meant to look more or less the same on every response, that is. But the content part differs, because that's where the action goes on, right?
Layout and content should be kept apart in different .vm files, so that the layout has to be designed (and changed) only once and the content part doesn't have to repeat anything.
The question is how to put those two parts together on each response. One approach is to parse the layout file in every content file. But as the layout usually wraps the content this very likely leads to more than one parsed layout file per content file.
A better way is to reverse that and to merge the content into the layout. This is way easier to handle. All you have to do is to declare a .vm file to work as the general layout file. In this file you put a var named $screen_content and magically the view you returned in your controller at a certain request is blended in at that spot.
Your layoutUrl property tells path and file name of your layout file relative to the resourceLoaderPath you have declared in this bean
<bean
id="velocityConfig"
class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<beans:property name="resourceLoaderPath" value="/WEB-INF/templates/" />
</bean>
Following your example...
<bean
id="viewResolver"
class="org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">
...
<property name="layoutUrl" value="layout/default.vm" />
</bean>
...your layout file has to be /WEB-INF/templates/layout/default.vm
I'm having trouble with loading CSS and images and creating links to other pages when I have a servlet forward to a JSP. Specifically, when I set my <welcome-file> to index.jsp, the CSS is being loaded and my images are being displayed. However, if I set my <welcome-file> to HomeServlet which forwards control to index.jsp, the CSS is not being applied and my images are not being displayed.
My CSS file is in web/styles/default.css.
My images are in web/images/.
I'm linking to my CSS like so:
<link href="styles/default.css" rel="stylesheet" type="text/css" />
I'm displaying my images as follows:
<img src="images/image1.png" alt="Image1" />
How is this problem caused and how can I solve it?
Update 1: I've added the structure of the application, as well as some other information that might help.
The header.jsp file is the file that contains the link tag for the CSS. The HomeServlet is set as my welcome-file in web.xml:
<welcome-file-list>
<welcome-file>HomeServlet</welcome-file>
</welcome-file-list>
The servlet is declared and mapped as followes in the web.xml:
<servlet>
<servlet-name>HomeServlet</servlet-name>
<servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
Update 2: I found the problem finally - my servlet was mapped incorrectly. Apparently when setting a Servlet as your <welcome-file> it can't have a URL pattern of /, which I find sort of weird, because wouldn't that stand for the root directory of the site?
The new mapping is as follows:
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>
All relative URLs in the HTML page generated by the JSP file are relative to the current request URL (the URL as you see in the browser address bar) and not to the location of the JSP file in the server side as you seem to expect. It's namely the webbrowser who has to download those resources individually by URL, not the webserver who has to include them from disk somehow.
Apart from changing the relative URLs to make them relative to the URL of the servlet instead of the location of the JSP file, another way to fix this problem is to make them relative to the domain root (i.e. start with a /). This way you don't need to worry about changing the relative paths once again when you change the URL of the servlet.
<head>
<link rel="stylesheet" href="/context/css/default.css" />
<script src="/context/js/default.js"></script>
</head>
<body>
<img src="/context/img/logo.png" />
link
<form action="/context/servlet"><input type="submit" /></form>
</body>
However, you would probably like not to hardcode the context path. Very reasonable. You can obtain the context path in EL by ${pageContext.request.contextPath}.
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
<script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
<img src="${pageContext.request.contextPath}/img/logo.png" />
link
<form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>
(which can easily be shortened by <c:set var="root" value="${pageContext.request.contextPath}" /> and used as ${root} elsewhere)
Or, if you don't fear unreadable XML and broken XML syntax highlighting, use JSTL <c:url>:
<head>
<link rel="stylesheet" href="<c:url value="/css/default.css" />" />
<script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
<img src="<c:url value="/img/logo.png" />" />
link
<form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>
Either way, this is in turn pretty cumbersome if you have a lot of relative URLs. For that you can use the <base> tag. All relative URL's will instantly become relative to it. It has however to start with the scheme (http://, https://, etc). There's no neat way to obtain the base context path in plain EL, so we need a little help of JSTL here.
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<link rel="stylesheet" href="css/default.css" />
<script src="js/default.js"></script>
</head>
<body>
<img src="img/logo.png" />
link
<form action="servlet"><input type="submit" /></form>
</body>
This has in turn (again) some caveats. Anchors (the #identifier URL's) will become relative to the base path as well! You would like to make it relative to the request URL (URI) instead. So, change like
jump
to
jump
Each way has its own pros and cons. It's up to you which to choose. At least, you should now understand how this problem is caused and how to solve it :)
See also:
Is it recommended to use the <base> html tag?
I faced similar issue with Spring MVC application. I used < mvc:resources > tag to resolve this issue.
Please find the following link having more details.
http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/
You must analyse the actual HTML output, for the hint.
By giving the path like this means "from current location", on the other hand if you start with a / that would mean "from the context".
Your welcome page is set as That Servlet . So all css , images path should be given relative to that servlet DIR . which is a bad idea ! why do you need the servlet as a home page ? set .jsp as index page and redirect to any page from there ?
are you trying to populate any fields from db is that why you are using servlet ?
If you are using Spring MVC, then you need to declare default action servlet for static contents. Add the following entries in spring-action-servlet.xml. It worked for me.
NOTE: keep all the static contents outside WEB-INF.
<!-- Enable annotation-based controllers using #Controller annotations -->
<bean id="annotationUrlMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
<property name="order" value="0" />
</bean>
<bean id="controllerClassNameHandlerMapping" class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping">
<property name="order" value="1" />
</bean>
<bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
As for your update, I was confused for the reasoning behind in. Dug a little deeper and found this gem:
yoursite.com becomes yoursite.com/
yoursite.com/ is a directory, so the welcome-file-list is scanned
yoursite.com/CMS is the first welcome-file ("CMS" in the welcome-file-list), and there is a mapping of /CMS to the MyCMS servlet, so that servlet is accessed.
Source: http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage
So, the mapping then does make sense.
And one can now freely use ${pageContext.request.contextPath}/path/ as src/href for relative links!
short answer - add following line in the jsp which will define the base
base href="/{root of your application}/"
Below code worked for me.
instead of
use
<%# include file="styles/default.css"%>
You can try out this one as well as. Because this worked for me and it's simple.
<style>
<%# include file="/css/style.css" %>
</style>
I've come to spring from jsf, and I'm new in this,,, I want to have a converter for my IdField class,,, I did some research and wrote my own property editor,,,
public class IdFieldPropertyEditor extends PropertyEditorSupport {
and I registered it in dispatcher-servlet.xml
<bean class="org.springframework.beans.factory.config.CustomEditorConfigurer">
<property name="customEditors">
<map>
<entry key="com.example.IdField">
<bean class="com.example.IdFieldPropertyEditor" />
</entry>
</map>
</property>
</bean>
so , as I understood these steps are enough, but I still get an error like cannon convert from String to IdField,,,
can anyone help to understand what steps I missed? Thanks,,,
CustomEditorConfigurer has nothing to do with Spring MVC, it configures property editors for interpreting values in XML config files.
To configure property editors for specific controller, use #InitBinder-annotated method. To do it globally for all controllers, use custom WebBindingInitializer. See 15.3.2.12 Customizing WebDataBinder initialization.
I'm having trouble with loading CSS and images and creating links to other pages when I have a servlet forward to a JSP. Specifically, when I set my <welcome-file> to index.jsp, the CSS is being loaded and my images are being displayed. However, if I set my <welcome-file> to HomeServlet which forwards control to index.jsp, the CSS is not being applied and my images are not being displayed.
My CSS file is in web/styles/default.css.
My images are in web/images/.
I'm linking to my CSS like so:
<link href="styles/default.css" rel="stylesheet" type="text/css" />
I'm displaying my images as follows:
<img src="images/image1.png" alt="Image1" />
How is this problem caused and how can I solve it?
Update 1: I've added the structure of the application, as well as some other information that might help.
The header.jsp file is the file that contains the link tag for the CSS. The HomeServlet is set as my welcome-file in web.xml:
<welcome-file-list>
<welcome-file>HomeServlet</welcome-file>
</welcome-file-list>
The servlet is declared and mapped as followes in the web.xml:
<servlet>
<servlet-name>HomeServlet</servlet-name>
<servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
Update 2: I found the problem finally - my servlet was mapped incorrectly. Apparently when setting a Servlet as your <welcome-file> it can't have a URL pattern of /, which I find sort of weird, because wouldn't that stand for the root directory of the site?
The new mapping is as follows:
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>
All relative URLs in the HTML page generated by the JSP file are relative to the current request URL (the URL as you see in the browser address bar) and not to the location of the JSP file in the server side as you seem to expect. It's namely the webbrowser who has to download those resources individually by URL, not the webserver who has to include them from disk somehow.
Apart from changing the relative URLs to make them relative to the URL of the servlet instead of the location of the JSP file, another way to fix this problem is to make them relative to the domain root (i.e. start with a /). This way you don't need to worry about changing the relative paths once again when you change the URL of the servlet.
<head>
<link rel="stylesheet" href="/context/css/default.css" />
<script src="/context/js/default.js"></script>
</head>
<body>
<img src="/context/img/logo.png" />
link
<form action="/context/servlet"><input type="submit" /></form>
</body>
However, you would probably like not to hardcode the context path. Very reasonable. You can obtain the context path in EL by ${pageContext.request.contextPath}.
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
<script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
<img src="${pageContext.request.contextPath}/img/logo.png" />
link
<form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>
(which can easily be shortened by <c:set var="root" value="${pageContext.request.contextPath}" /> and used as ${root} elsewhere)
Or, if you don't fear unreadable XML and broken XML syntax highlighting, use JSTL <c:url>:
<head>
<link rel="stylesheet" href="<c:url value="/css/default.css" />" />
<script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
<img src="<c:url value="/img/logo.png" />" />
link
<form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>
Either way, this is in turn pretty cumbersome if you have a lot of relative URLs. For that you can use the <base> tag. All relative URL's will instantly become relative to it. It has however to start with the scheme (http://, https://, etc). There's no neat way to obtain the base context path in plain EL, so we need a little help of JSTL here.
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<link rel="stylesheet" href="css/default.css" />
<script src="js/default.js"></script>
</head>
<body>
<img src="img/logo.png" />
link
<form action="servlet"><input type="submit" /></form>
</body>
This has in turn (again) some caveats. Anchors (the #identifier URL's) will become relative to the base path as well! You would like to make it relative to the request URL (URI) instead. So, change like
jump
to
jump
Each way has its own pros and cons. It's up to you which to choose. At least, you should now understand how this problem is caused and how to solve it :)
See also:
Is it recommended to use the <base> html tag?
I faced similar issue with Spring MVC application. I used < mvc:resources > tag to resolve this issue.
Please find the following link having more details.
http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/
You must analyse the actual HTML output, for the hint.
By giving the path like this means "from current location", on the other hand if you start with a / that would mean "from the context".
Your welcome page is set as That Servlet . So all css , images path should be given relative to that servlet DIR . which is a bad idea ! why do you need the servlet as a home page ? set .jsp as index page and redirect to any page from there ?
are you trying to populate any fields from db is that why you are using servlet ?
If you are using Spring MVC, then you need to declare default action servlet for static contents. Add the following entries in spring-action-servlet.xml. It worked for me.
NOTE: keep all the static contents outside WEB-INF.
<!-- Enable annotation-based controllers using #Controller annotations -->
<bean id="annotationUrlMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
<property name="order" value="0" />
</bean>
<bean id="controllerClassNameHandlerMapping" class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping">
<property name="order" value="1" />
</bean>
<bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
As for your update, I was confused for the reasoning behind in. Dug a little deeper and found this gem:
yoursite.com becomes yoursite.com/
yoursite.com/ is a directory, so the welcome-file-list is scanned
yoursite.com/CMS is the first welcome-file ("CMS" in the welcome-file-list), and there is a mapping of /CMS to the MyCMS servlet, so that servlet is accessed.
Source: http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage
So, the mapping then does make sense.
And one can now freely use ${pageContext.request.contextPath}/path/ as src/href for relative links!
short answer - add following line in the jsp which will define the base
base href="/{root of your application}/"
Below code worked for me.
instead of
use
<%# include file="styles/default.css"%>
You can try out this one as well as. Because this worked for me and it's simple.
<style>
<%# include file="/css/style.css" %>
</style>