Spring MVC Servir recursos estáticos
Los recursos estáticos de nuestra aplicación web deben ser configurados para que podamos tener acceso a ellos, estos recursos pueden ser: imágenes, archivos CSS o JavaScript, archivos multimedia como audio o video, y todo lo que requiera nuestra aplicación para funcionar de manera correcta, en este tutorial aprenderemos a utilizar recursos estáticos ubicados en el directorio web y también utilizaremos los WebJars.
Los WebJars son archivos JAR simples que contiene recursos estáticos, como: JavaScript, CSS, etc., lo interesante es que estos archivos pueden ser manejados por sistemas de construcción de proyectos como Maven, Gradle, etc., la mayoría de la librerías populares están soportadas por estos archivos, entre ellos tenemos: JQuery, Bootstrap, y muchas más.
Primero veremos como utilizar contenido estático ubicado en el directorio web de la aplicación, para nuestra propósito dicho contenido será: un archivo CSS y una imagen.
Las dependencias requeridas son:
<!-- Spring Web MVC -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- Java Servlet y JSP -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
La configuración la haremos extendiendo la clase WebMvcConfigurerAdapter que nos facilitará el trabajo, solo debemos sobre-escribir los métodos que requerimos, para nuestro ejemplo, primero configureViewResolver(...) para configurar el ViewResolver y addResourceHandlers(...) para manejar el contenido estático.
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = {"carmelo.spring.controller"})
public class WebAppConfig extends WebMvcConfigurerAdapter{
@Override
public void configureViewResolvers(ViewResolverRegistry registry) {
registry.jsp("/WEB-INF/views/", ".jsp");
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**")
.addResourceLocations("/public/");
}
}
El método addResourceHandler("/static/**") define el patrón de las URL que se utilizaran para acceder al contenido, el patrón "/static/**" nos permitirá manejar todo tipo de URL, por otra parte el método addResourceLocations("/public/") establece la ubicación de los recursos.
De esta manera la vista JSP puede acceder a los recursos ubicados en la carpeta web llamada src/main/webapp/public/, veamos un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Contenido estatico</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="static/css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1 class="title">Tutoriales Spring Framework</h1>
<img src="static/images/spring-by-pivotal.png" alt="Spring Image"/>
</body>
</html>
Para acceder al archivo CSS usamos <link href="static/css/style.css" /> de igual modo para poder acceder a la imagen PNG y mostrarla en la página tenemos que usar la URL <img src="static/images/spring-by-pivotal.png" /> recordemos que el patrón es /static/** y que los archivos se localizarán en la carpeta /public/.
Si deseamos utilizar una librería como JQuery, por ejemplo, podemos descargar el archivo correspondiente y ubicarlo en la carpeta establecido, sin embargo utilizando los WebJars será mas fácil, lo primero que debemos hacer es agregar la dependencia correspondiente.
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.2.0</version>
</dependency>
Luego debemos indicarle a Spring MVC donde localizar los archivos, solo debemos agregar la carpeta webjars a nuestra configuración, del siguiente modo:
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**")
.addResourceLocations("/public/", "/webjars/");
}
Para finalizar podemos acceder a esta librería o cualquier otra que hayamos añadido a las dependencias usando correspondiente la URL para utilizar la biblioteca JavaScript JQuery en su versión 3.2.0 usaremos: static/jquery/3.2.0/jquery.min.css
<script src="static/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('img').fadeOut(5000);
});
</script>
Para manejar más fácilmente nuestros WebJars podemos utilizar WebJarsResourceResolver, usarlo es fácil solo debemos agregar la dependencia, cuando Spring MVC la detecte agregará automáticamente el componente.
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.31</version>
</dependency>
Con este componente no será necesario indicar la versión de la biblioteca que estemos usando, esto nos facilita el trabajo, cuando deseemos cambiar la versión, solo deberemos cambiar la dependencia y requerimos hacer cambios en la vista.
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**")
.addResourceLocations("/public/", "/webjars/")
.setCacheControl(CacheControl.maxAge(2, TimeUnit.DAYS))
.resourceChain(true);
}
Para utilizar esta funcionalidad debemos establecer resourceChain(true), opcionalmente configuramos la cache, esto nos permitirá tener una aplicación web más eficiente, es nuestro ejemplo el contenido de la cache expira en dos días.
Para el ejemplo, añadiremos los iconos Font Awesome:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>4.6.2</version>
</dependency>
En la vista podremos acceder a los WebJars del mismo modo que lo hemos venido haciendo, solo que ya no necesitamos indicar la versión de la correspondiente librería.
<!DOCTYPE html>
<html>
<head>
<title>Contenido estatico</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="static/css/style.css" type="text/css" rel="stylesheet" />
<link href="static/font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet" />
<script src="static/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('img').fadeOut(5000);
});
</script>
</head>
<body>
<h1 class="title">Tutoriales Spring Framework</h1>
<img src="static/images/spring-by-pivotal.png" alt="Spring Image"/>
<br />
<span class="fa fa-2x fa-github">Font Awesome Icon</span>
</body>
</html>
Nótese que para acceder a JQuery y Font Awesome no utilizamos el número de versión:
<link href="static/font-awesome/css/font-awesome.css" />
<script src="static/jquery/jquery.min.js"></script>
El resultado es el siguiente:
Con esto terminamos este tutorial, nos veremos en la próxima.
- Ver código: GitHub Spring MVC Contenido estático
- Más tutoriales: Cursos Spring Framework
Comentarios
Publicar un comentario