ResourceHttpRequestHandler
Este clase es la utilizar spring, para trabajar con los recursos estáticos, en el siguiente diagrama vamos a ver como funciona.Esta implementación sigue las directivas (page Speed, Yslow). Para lo cual gestiona la cache del navegador.
Como podemos ver, en el ciclo de vida se diferencia, en dos operaciones:
- Resolver la operación (Encontrar el recurso segun un path, u otros criterios).
- Transformar el recurso.
Esta clase ademas se encarga de gestionar la cache del navegador, y actualizar los recursos cuando sea necesario, para lo cual gestionara el (expire y control-cache), de esta manera evitaremos la sobrecarga de la red, con el código 304 y asi no sobrecargar el sevidor.
Para mas información podéis mirar el javadoc de la clase: http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/servlet/resource/ResourceHttpRequestHandler.htmlPara configurar esta clase utilizaremos ResourceHandlerRegistry, Usaremos los siguientes métodos:
- addResourceHandler: Indicamos como vamos a localizar el recursos desde la petición de http.
- addResourceLocations: Indicamos donde se van a encontrar los recursos, para un mismo recurso podemos tener varios sitios donde buscarlo. (Nota: También puede buscar dentro de los classpath).
- setCachePeriod: Establecemos el valor max-age en segundos, en la cabecera de Http destinada para las caches. http://tools.ietf.org/html/draft-ietf-httpbis-p6-cache-12
- resourceChain: Los usaremos para establecer una cadena de resolute y transformadores. Se recomienda establecerlo solo en producción. (Por defecto si no establecemos, nada se configurara PathResourceResolver)
- addResolver: Le indicamos el resolver que nos interesa entre (PathResourceResolver ,GzipResourceResolver...)
- addTransformer: Le podemos indicar los transformadores que nos interesan.
Configurar los recursos estáticos:
Ahora que hemos visto un poco, como funciona en spring, la gestión de los recursos estáticos vamos a ver como podemos configurar los en nuestro proyecto. En nuestro caso en cuestión vamos a marcar que los contenidos estáticos, se van a encontrar en el path /resources/ y físicamente lo vamos a dejar en la carpeta resources (Coincide en mi caso para facilitar la búsqueda de los recursos). Entonces que ventaja nos da el utilizar este mecanismo, pues la gestión que hace de la cache spring de esos recursos. Vamos a crear una cadena de resolver y transformer, aunque va a ser igual a que utiliza por defecto (me gusta dejar estas configuraciones declarativas, ya que no todo el mundo se tiene que acordar de la configuración por defecto).
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/resources/**")
.addResourceLocations("/resources/")
.setCachePeriod(3600)
.resourceChain(true)
.addResolver(new PathResourceResolver());
}
Bootstrap
Ya que tenemos configurados en spring los recursos estáticos, vamos a empezar por configurar la librería bootstrap, copiaremos en resources la carpeta de bootstrap.
Lo siguiente sera crear la hoja de estilo del proyecto css/app.css
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
Maquetamos la pagina de inicio
Aquí vamos a crear una plantilla básica con bootstrap (He adaptado uno de las plantillas que nos propone).
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<c:url value="/" var="contexto" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Proyecto de ejemplo">
<meta name="author" content="Arquitectura de ejemplo">
<title>Inicio</title>
<!-- Bootstrap core CSS -->
<link href="${contexto}resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="${contexto}resources/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="${contexto}resources/css/app.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Spring estatico</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Inicio</a></li>
<li><a href="#about">Acerca de</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Inicio</h1>
<p class="lead">
Proyecto de ejemplo de los contenidos estaticos.
</p>
</div>
</div>
</body>
</html>
Se tiene que ver algo tal que así:
No hay comentarios:
Publicar un comentario