CSS and JS Handling in Spring
In this article, we are going to learn CSS and JavaScript file handling in the Spring framework. While creating a Web application, we need to add web technologies in our application like CSS, JavaScript, etc.
Spring provides <mvc:resource> tag to map the location of the files in our application project. This tag uses a mapping attribute to map the resource and a location attribute to locate the resource. We can simply put this tag into our servlet context file like below.
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />
And then add this taglib library to the JSP file to add tags for the CSS and JS files.
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
After adding this JSTL library add these tags into the head section of the JSP page.
<script src="<c:url value="/js/jsfile.js" />"></script>
<link href="<c:url value="/css/cssfile.css" />" rel="stylesheet"></link>
Note: Put all the CSS files into webapp/css folder and JavaScript files into webapp/js folder in the project. You can refer to our project structure to understand the file position and directory hierarchy.
Time for an Example
Let's create an example to understand the CSS and JavaScript file handling in the Spring framework. The following are the source files of our project. You can refer them to your project.
JSP File // user-form.jsp
In this file, we created an HTML form and added CSS and JS files as well.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>User Form</title>
<script src="<c:url value="/js/jsfile.js" />"></script>
<link href="<c:url value="/css/cssfile.css" />" rel="stylesheet"></link>
</head>
<body>
<h2>User Form</h2>
<form action="showdata" method="Get">
<label>Enter User Name: </label><input type="text" name="user_name"><br/><br/>
<label>Enter password : </label><input type="password" name="password"><br/><br/>
<input type="submit" onclick="save()" />
</form>
</body>
</html>
// Controller HelloController.java
This is our controller class that contains two methods for showing JSP pages.
package com.studytonight.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HelloController {
@RequestMapping("/")
public String showForm() {
return "user-form";
}
@RequestMapping("showdata")
public String userForm(@ModelAttribute("user_name") String user, Model model)
{
model.addAttribute("name", user);
return "user-data";
}
}
// spring-mvc-app-servlet.xml
In this file we used <mvc:resources> tag to configure the CSS and JS files.
<?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.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">
<!-- Step 3: Add support for component scanning -->
<context:component-scan
base-package="com.studytonight.controller" />
<!-- Step 4: Add support for conversion, formatting and validation support -->
<mvc:annotation-driven />
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />
<!-- Step 5: Define Spring MVC view resolver -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
// web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
<display-name>spring-mvc-app</display-name>
<absolute-ordering />
<!-- Spring MVC Configs -->
<!-- Step 1: Configure Spring MVC Dispatcher Servlet -->
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring-mvc-app-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Step 2: Set up URL mapping for Spring MVC Dispatcher Servlet -->
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
// user-form.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hello JSP</title>
</head>
<body>
<strong>Hello,</strong>
${name}
</body>
</html>
// cssfile.css
h2{
color:blue;
}
// jsfile.js
function save(){
alert("Data Saved.");
}
// pom.xml
This file contains all the dependencies of this project such as spring jars, servlet jars, etc. Put these dependencies into your project to run the application.
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.studytonight</groupId>
<artifactId>spring-mvc-app</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.xml.bind/jaxb-api -->
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.3.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
<properties>
<spring.version>5.2.8.RELEASE</spring.version>
</properties>
<build>
<plugins>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.3</version>
<configuration>
<warSourceDirectory>WebContent</warSourceDirectory>
</configuration>
</plugin>
</plugins>
</build>
</project>
Project Structure
Run the Application
After successfully completing the project and adding the dependencies run the application and you will get the output as below.
Notice, in the CSS file we applied CSS color property to the H2 tag which works fine and in the JS file, we created a method to show an alert message when the submit button is clicked.
