I have searched for this but didn't get the solution for the same. I got information i.e. we have to use <mvc:resources location="/resources/" mapping="/resources/**"/> and place all the static member like css/img/js inside resources folder
src
|--main
| |
| |--java
| |--resources
| |--webapp
And then we have to use either jstl or spring tags to map the resources as below:
<head>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<spring:url value="/resources/LoginForm.css" var="loginCss" />
<link rel="stylesheet" href="${loginCss}" type="text/css" />
</head>
I have developed some code by keeping all the points in mind but getting 404 error for static resources.
click here for project structure
code for dispatcher 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:p="http://www.springframework.org/schema/p"
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.anand" />
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/views/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basename" value="/WEB-INF/messages" />
</bean>
<mvc:resources location="/resources/" mapping="/resources/**"/>
<mvc:default-servlet-handler />
</beans>
Code for loginform.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home-Login</title>
<spring:url value="/resources/LoginForm.css" var="loginCss" />
<spring:url value="/resources/logo1.PNG" var="logo1" />
<spring:url value="/resources/img1.png" var="img1" />
<spring:url value="/resources/img2.png" var="img2" />
<spring:url value="/resources/img3.png" var="img3" />
<link rel="stylesheet" href="${loginCss}" type="text/css" />
</head>
<body class="login">
<!-- header starts here -->
<div id="facebook-Bar">
<div id="facebook-Frame">
<div id="logo"> <a href="#"><img src="${logo1}" /></a></div>
<div id="header-main-right">
<div id="header-main-right-nav">
<form:form action="loginform.html" method="post" commandName="loginform">
<table border="0" style="border:none">
<tr>
<td ><form:input type="text" tabindex="1" path="userName" placeholder="UserName" class="inputtext radius1" value="" /></td>
<td ><form:input type="password" tabindex="2" path="password" placeholder="Password" class="inputtext radius1" /></td>
<td ><input type="submit" class="fbbutton" name="login" value="Login" /></td>
</tr>
<tr>
<td><label>
<input id="persist_box" type="checkbox" name="persistent" />
<span style="color:#ccc;">Keep me logged in</span></label></td>
<td><label><a href="" style="color:#ccc; text-decoration:none">forgot your password?</a></label></td>
</tr>
</table>
</form:form>
</div>
</div>
</div>
</div>
<div class="slideshow-container" style="width:100%;height:80%; min-width:1000px;">
<div class="mySlides fade" style="width:100%;height:100%">
<div class="numbertext">1 / 3</div>
<img src="${img1}" style="width:100%;height:100%" />
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade" style="width:100%;height:100%">
<div class="numbertext">2 / 3</div>
<img src="${img2}" style="width:100%;height:100%" />
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade" style="width:100%;height:100%">
<div class="numbertext">3 / 3</div>
<img src="${img3}" style="width:100%;height:100%" />
<div class="text">Caption Three</div>
</div>
</div>
<br/>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
When it redirects me to loginform.jsp and i do F12-->network analysis, it shows me 404 for static resources like ,img1,img2,img3,logo1 and for .css file. Click Here for F12 debug and chrome view of page without css
