I'm having some trouble adding javascript and css files to my maven, spring webapp project.
I'm bin searching the web and here, but having issues putting it all in the right place.
What I want to do, is to have a index.html page in the root context, and from it, reference to a local javascript file in the system
.war layout
war/
index.html
js/
javascript.js
css/
default.css
WEB-INF/
classes/
*.classes
lib/
*.jar
springapp-servlet.xml
web.xml
index.html file
<html>
<head>
<link href="css/jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.mobile-1.3.0.js"></script>
</head>
<body>
<div data-role="header">
<h1>Page Title</h1>
</div>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>springTest</display-name>
<servlet>
<servlet-name>springapp</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springapp</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>
springapp-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<!-- View resolvers -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
<property name="cache" value="false" />
<property name="prefix" value="" />
<property name="suffix" value=".vm" />
</bean>
<bean id="velocityConfig"
class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
</bean>
<!-- controllers and java service beans -->
.....
<mvc:resources mapping="/**" location="/" />
</beans>
Now I thought that this would make the js and css dirs available for linking in the html file, but i just get a plain text and no query-mobile view.
Running it in Jboss AS 7 with Spring and Maven.
best regards
Henrik
Hmm, gotten it working, somehow, with the structure I had....
Related
I am having a major problem with paths in my Spring MVC project.
I have fixed so that I can see images/Css and so on in my jsp files, but my html files I am at a loss, I have tried all kinds of paths I can think of, but nothing seems to work... I hope anyone of you can help me find what I am doing wrong.
My spring config file:
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:component-scan base-package="controller" />
<mvc:annotation-driven/>
<mvc:resources mapping="/resources/**" location="resources/"></mvc:resources>
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
</beans>
My web xml file:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID"
version="3.0">
<display-name>Project By Robin Ejderholt</display-name>
<servlet>
<servlet-name>spring-dispatcher</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>spring-dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
The css code im trying to fix:
<link href="/resources/css/menucss.css" rel="Stylesheet" type="text/css" />
The current structure of my project:
Hope anyone can help because I got no clue why it doesn't work.
PS: I am using jstl on the jsp and that works, but what I am aware it is not possible on static html files.
Thanks
EDIT UPDATE:
I solved it, the solution for people with the same problem was to use the relative path; "../map/filename" instead of "/map/filename".
I have read most of the related posts I have found on this problem but I could not find any working solution for my situation.
Basicly my jsp file can't seem to find the css file.
Here are my files:
The jsp page:
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Search for flight</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="${pageContext.request.contextPath}/WEB-INF/pages/theme.css" rel="stylesheet" type="text/css" >
</head>
the css page:
#title
{
font-family: "Times New Roman";
color: aqua;
}
mvc-dispatcher-servlet.xml:
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<context:component-scan base-package="com.mkyong.common.controller" />
<mvc:annotation-driven />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/pages/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
</beans>
web.xml:
<web-app id="WebApp_ID" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Spring Web MVC Application</display-name>
<servlet>
<servlet-name>mvc-dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>mvc-dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/mvc-dispatcher-servlet.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
</web-app>
And the controller works fine so I wouldn't find any real use in posting it.
The jsp file is visible from the browser but the styling is totally absent.
Thank you in advance!
you need to declare your resources in dispatcher-servlet file
<mvc:resources mapping="/resources/**" location="/resources/css/" />
Any request with url mapping /resources/** will directly look for /resources/css/
Now in jsp file you need to include your css file like this :
<link href="<c:url value="/resources/css/your file.css" />" rel="stylesheet">
complete example https://github.com/abdotalaat/SpringMVCCSS
I would suggest to add below lines in your spring configuration file(mvc-dispatcher-servlet.xml).
<mvc:resources mapping="/pages/*.css" location="/pages/"/>
<mvc:default-servlet-handler />
So I have resolved my problem.
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
After adding this dependency the rest was pretty much flawless.
Thank you for your explanations! I have a much better understanding of how stuff works now.
I have the same problem:
- Check you add JSTL in pom.xml and declare in the jsp file
- Check with resources folders inside the webapp folder
- Check the href for your link css correct
I am working on a spring MVC project in which I am trying to use css style sheets by referencing it to design my JSP page. But somehow my css files are not being picked up once I hit my method in the controller..
Below is my JSP file -
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>
</body>
</html>
And below is my test.css file -
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
And below is my method in controller class -
#RequestMapping(value = "testing", method = RequestMethod.GET)
public Map<String, String> testing() {
final Map<String, String> model = new LinkedHashMap<String, String>();
return model;
}
Directory structure is like this -
webapp/
|-- resources/
| +-- css/
| test.css
+- WEB-INF/
+-- views/
testing.jsp
But somehow it's not working for me.. Is there anything wrong I am doing here?
UPDATE:-
Here is my web.xml file-
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>testweb</display-name>
<listener>
<listener-class>com.host.webres.resource.env.EbayResourceRuntimeListener</listener-class>
</listener>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
<welcome-file>index</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>appServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/context.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>/testweb/*</url-pattern>
</servlet-mapping>
</web-app>
And below is my context.xml file -
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:task="http://www.springframework.org/schema/task"
xsi:schemaLocation="
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.1.xsd
http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-3.1.xsd">
<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
<!-- Allow proxys -->
<aop:aspectj-autoproxy />
<!-- Enables the Spring MVC #Controller programming model -->
<mvc:annotation-driven>
<mvc:message-converters>
<!-- Support AJAX processing with progressive rendering. Overrides HttpOutputMessage with RaptorResponseWriter -->
<beans:bean class="com.host.terr.kernel.filter.RaptorJacksonHttpMessageConverter"/>
</mvc:message-converters>
</mvc:annotation-driven>
<context:component-scan base-package="com.host.terr.config" />
<context:component-scan base-package="com.host.personalization.bullseye.zookeeper.p13nzook.controller" />
<!-- Handles HTTP GET requests by efficiently serving up static resources
in the corresponding directory -->
<resources mapping="/js/**" location="/js/" />
<resources mapping="/css/**" location="/css/" />
<!-- Resolves views selected for rendering by #Controllers to .jsp resources in the /WEB-INF/views directory -->
<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="prefix" value="/WEB-INF/views/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
</beans:beans>
This is exception I am getting on my console but browser shows the data without any css -
404 /testweb/test.css Not Found /testweb/test.css Not Found }, Correlations : {} }
In your servlet-context.xml file,you have setting about your directory of resources.In your case,with changing
<resources mapping="/resources/**" location="/resources/"/>
and in your jsp page like below,
<link rel="stylesheet" type="text/css" href="
<c:url value="/resources/css/test.css"/> "/>
I hope it will work
You need to provide the context path.
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/test.css" />
What does this expression language ${pageContext.request.contextPath} exactly do in JSP EL?
You need to set <base/> as following...
<c:set var="req" value="${pageContext.request}" />
<c:set var="url"> ${req.requestURL} </c:set>
<c:set var="uri" value="${req.requestURI}" />
<head>
<title></title>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
Then You can Import any JS or CSS like below..
<script src="assets/js/angular/angular.js"></script>
Maybe by adding your .css file in a specific folder inside the WEB-Content then, you could use the attribute href = "yourFolder/yourFile.css
Indeed all "web" ressources like the view should be there (i.e. jsp, css.).
You can also precise that your link (in the .jsp file) is a stylesheet one by adding: rel="stylesheet"
you will have a link looking like this :
this css resource issue
please try below
<link rel="stylesheet" type="text/css" href="css/test.css" />
and you can see this resource if be load by bowaser.
I have a problem with providing static content using SpringMVC 3.2.1. (Tomcat 7)
So please have a look at the following configurations:
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>CrimeMapping IP5</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>FirstController</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FirstController</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
FirstController-servlet.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<context:component-scan
base-package="ch.fhnw.ip5.cm.controller" />
<mvc:annotation-driven />
<mvc:resources location="/WEB-INF/, classpath:/META-INF/web-resources/" mapping="/resources/**"/>
<!-- Allows for mapping the DispatcherServlet to "/" by forwarding
static resource requests to the container's default Servlet -->
<mvc:default-servlet-handler/>
<bean id="viewResolver"
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
MapController.java:
package ch.fhnw.ip5.cm.controller;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
#Controller
public class MapController {
#RequestMapping(value="/show/map/lat/{lat}/lng/{lng}/zoom/{zoom}", method=RequestMethod.GET)
public ModelAndView showMapDetail(#PathVariable("lat") double lat,
#PathVariable("lng") double lng, #PathVariable("zoom") double zoom, HttpServletRequest request ) {
request.getPathInfo();
double[] message = {lat,lng,zoom};
return new ModelAndView("map", "message", message);
}
So, I am able to show static content like images oder .js files.
But the path I use in .jsp files looks like:
<link rel="stylesheet" type="text/css" href="../../../../../../../../../CM/resources/javascript/leaflet/leaflet.css" />
<script type="text/javascript" src="../../../../../../../../../CM/resources/javascript/leaflet/leaflet.js"></script>
I would like to use
according to my
<mvc:resources location="/WEB-INF/, classpath:/META-INF/web-resources/" mapping="/resources/**"/>
entry in FirstController-servlet.java file.
Thank you for your help.
Best regards.
There are a few issues that I see here:
.1. The contents of WEB-INF should not be exposed using <mvc:resources tag, the content should be protected. Instead create a resources subfolder under WEB-INF resources or directly under the webapp and expose that alone for static content:
<mvc:resources location="/WEB-INF/resources/, /resources/, classpath:META-INF/resources/" mapping="/resources/**"/>
.2. Now, in order to refer to the resources, it is better to refer to them in an absolute way, this is typically using <spring:url/> or using jstl <c:url tags, for eg.
<%# taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<spring:url value="/resources/image.png" var="myImage" />
<img src="${myImage}"/>
Hello I have an application with Spring MVC with Hibernate, but the problem is that I have not configured quite right because for routing, for the import of libraries .js and .css, I have to use pageContext.request.contextPath, I show my settings:
• web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<display-name>extjs_commerceapp-solution</display-name>
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/commerceapp-servlet.xml
</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>commerceapp</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>commerceapp</servlet-name>
<url-pattern>/mvc/*</url-pattern>
</servlet-mapping>
</web-app>
• commerceapp-servlet.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
">
<mvc:annotation-driven />
<context:component-scan base-package="com.limati.commerceapp" />
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/com/limati/commerceapp/" />
<property name="suffix" value=".jsp" />
</bean>
<!-- Configures Hibernate - Database Config -->
<import resource="commerceapp-dao-hibernate.xml" />
<import resource="commerceapp-service.xml" />
</beans>
Through commerceapp-servlet.xml, I import the other two of my settings Hibernate XML.
The problem is that my main page which loads my RIA interface, I have to put this routing (pageContext.request.contextPath):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CommerceApp</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext4/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/app.css"/>
</head>
<body style="background-color: #95B0CD" >
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
paths:{
"app": "${pageContext.request.contextPath}/app"
}
});
var CONTEXT_PATH = "${pageContext.request.contextPath}";
var USER = "${sessionScope.user.userName}";
app=Ext.create('Ext.app.Application',{
name:'LTI',
appFolder: 'app/base/user',
//controllers:['UserController'], //si se quiere inicializar un controlador en la creación
launch: function(){
Ext.create("app.principal.view.Desktop",{
});
}
});
</script>
</body>
</html>
Someone can help me with this problem.
i think you have to add this tag
<mvc:resources mapping="/resources/**" location="/resources/" />
to handle the static resource.means put your all static resource in resource folder or you can change the location according to your requirement.