Capítulo 4. Desarrollando la Interface Web

Ésta es la Parte 4 del tutorial paso a paso para desarrollar una aplicación web desde cero usando Spring Framework. En la Parte 1 hemos configurado el entorno y montado la aplicación básica. En la Parte 2 hemos mejorado la aplicación que habíamos construido hasta entonces. La Parte 3 añade toda la lógica de negocio y los tests unitarios. Ahora es el momento de construir la interface web para la aplicación.

4.1. Añadir una referencia a la lógica de negocio en el controlador

Para empezar, renombramos el controlador HelloController a algo más descriptivo, como por ejemplo InventoryController, puesto que estamos construyendo un sistema de inventario. Aquí es donde un IDE con opción de refactorizar es de valor incalculable. Renombramos HelloController a InventoryController así como HelloControllerTests a InventoryControllerTests. A continuación, modificamos InventoryController para que almacene una referencia a la clase ProductManager. Anotaremos la referencia con @Autowired para que Spring la pueda inyectar automáticamente cuando detecte el componente. También añadimos código para permitir al controlador pasar la información sobre los productos a la vista. El método getModelAndView() ahora devuelve tanto un Map con la fecha y hora como una lista de productos.

'springapp/src/main/java/com/companyname/springapp/web/controllers/InventoryController.java':

package com.companyname.springapp.web.controllers;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.companyname.springapp.business.services.ProductManager;

@Controller
public class InventoryController {

    protected final Log logger = LogFactory.getLog(getClass());

    @Autowired
    private ProductManager productManager;
    
    @RequestMapping(value="/hello.htm")
    public ModelAndView handleRequest() {
        String now = (new Date()).toString();
        logger.info("Returning hello view with " + now);

        Map<String, Object> myModel = new HashMap<String, Object>();
        myModel.put("now", now);
        myModel.put("products", this.productManager.getProducts());

        return new ModelAndView("hello", "model", myModel);
    }
}

Antes de que los test puedan ser pasados de nuevo, también necesitaremos modificar InventoryControllerTest para que proporcione un ProductManager y extraiga el valor de 'now' desde el modelo Map.

'springapp/src/test/java/com/companyname/springapp/web/controllers/InventoryControllerTests.java':


package com.companyname.springapp.web.controllers;

import static org.junit.Assert.*;

import java.util.Map;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringRunner;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.web.servlet.ModelAndView;

import com.companyname.springapp.business.SpringappBusinessConfig;
import com.companyname.springapp.web.SpringappWebConfig;

@RunWith(SpringRunner.class)
@ContextConfiguration(classes = {SpringappBusinessConfig.class, SpringappWebConfig.class})
@WebAppConfiguration
public class InventoryControllerTests {

    @Autowired
    private InventoryController controller;

    @Test
    public void testHandleRequestView() {	
        ModelAndView modelAndView = controller.handleRequest();		
        assertEquals("hello", modelAndView.getViewName());
        assertNotNull(modelAndView.getModel());
        @SuppressWarnings("unchecked")
        Map<String, Object> modelMap = (Map<String, Object>) modelAndView.getModel().get("model");
        String nowValue = (String) modelMap.get("now");
        assertNotNull(nowValue);
    }
}

4.2. Modificar la vista para mostrar datos de negocio y añadir soporte para archivos de mensajes

Usando la etiqueta JSTL <c:forEach/>, añadimos una sección que muestra información de cada producto. También vamos a reemplazar el título, la cabecera y el texto de bienvenida con una etiqueta JSTL <fmt:message/> que extrae el texto a mostrar desde una ubicación 'message' – veremos esta ubicación un poco más adelante.

'springapp/src/main/webapp/WEB-INF/views/hello.jsp':

<%@ include file="/WEB-INF/views/include.jsp" %>

<html>
  <head><title><fmt:message key="title"/></title></head>
  <body>
    <h1><fmt:message key="heading"/></h1>
    <p><fmt:message key="greeting"/> <c:out value="${model.now}"/></p>
    <h3>Products</h3>
    <c:forEach items="${model.products}" var="prod">
      <c:out value="${prod.description}"/> <i>$<c:out value="${prod.price}"/></i><br><br>
    </c:forEach>
  </body>
</html>

4.3. Añadir datos de prueba para rellenar algunos objetos de negocio

Es el momento de añadir un SimpleProductManager a nuestra clase de configuración del negocio, el cual se inyectará automáticamente en el InventoryController. Todavía no vamos a añadir ningun código para cargar los objetos de negocio desde una base de datos. En su lugar, podemos reemplazarlos con un bean en el fichero de configuració de la aplicación 'SpringappBusinessConfig'.

'springapp/src/main/java/com/companyname/springapp/business/SpringappBusinessConfig.java':

package com.companyname.springapp.business;

import java.util.ArrayList;
import java.util.List;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;

import com.companyname.springapp.business.entities.Product;
import com.companyname.springapp.business.services.ProductManager;
import com.companyname.springapp.business.services.SimpleProductManager;

@Configuration
@ComponentScan
public class SpringappBusinessConfig {

    private static Double CHAIR_PRICE = new Double(20.50);
    private static String CHAIR_DESCRIPTION = "Chair";

    private static String TABLE_DESCRIPTION = "Table";
    private static Double TABLE_PRICE = new Double(150.10);

    @Bean
    public ProductManager loadProductManager() {
        SimpleProductManager simpleProductManager = new SimpleProductManager();
        
        List<Product> products = new ArrayList<Product>();
        Product product = new Product();
        product.setDescription(CHAIR_DESCRIPTION);
        product.setPrice(CHAIR_PRICE);
        products.add(product);
        product = new Product();
        product.setDescription(TABLE_DESCRIPTION);
        product.setPrice(TABLE_PRICE);
        products.add(product);

        simpleProductManager.setProducts(products);
        return simpleProductManager;
    }
}

También añadiremos el bean 'messageSource' que nos permitirá recuperar mensajes desde la ubicación 'Messages.properties', que crearemos en el próximo paso.

'springapp/src/main/java/com/companyname/springapp/web/SpringappWebConfig.java':

package com.companyname.springapp.web;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ResourceBundleMessageSource;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@ComponentScan
@EnableWebMvc
public class SpringappWebConfig {

    @Bean
    public ResourceBundleMessageSource messageSource() {
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
        messageSource.setBasename("Messages");
        return messageSource;
    }
    
    @Bean
    public ViewResolver internalResourceViewResolver() {
        InternalResourceViewResolver internalResourceViewResolver = new InternalResourceViewResolver();
        internalResourceViewResolver.setPrefix("/WEB-INF/views/");
        internalResourceViewResolver.setSuffix(".jsp");
        return internalResourceViewResolver;
    }
}

4.4. Añadir una ubicación para los mensajes

Creamos un archivo llamado 'Messages.properties' en el directorio 'src/main/resources'. Este archivo de propiedades contiene tres entradas que coinciden con las claves especificadas en las etiquetas <fmt:message/> que hemos añadido a 'hello.jsp'.

'springapp/src/main/resources/Messages.properties':

title=SpringApp
heading=Hello :: SpringApp
greeting=Greetings, it is now

Ahora todos los tests deben funcionar y si desplegamos de nuevo la aplicación en el servidor, deberíamos ver lo siguiente en el navegador:

La aplicación actualizada

4.5. Añadir un formulario

Para proveer de una interface a la aplicación web que muestre la funcionalidad para incrementar los precios, vamos a añadir un formulario que permitirá al usuario introducir un valor de porcentaje. Para ello, creamos el archivo JSP 'priceincrease.jsp' en el directorio 'src/main/webapp/WEB-INF/views'.

'springapp/src/main/webapp/WEB-INF/views/priceincrease.jsp':

<%@ include file="/WEB-INF/views/include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html>
<head>
  <title><fmt:message key="title"/></title>
  <style>
    .error { color: red; }
  </style>  
</head>
<body>
<h1><fmt:message key="priceincrease.heading"/></h1>
<form:form method="post" modelAttribute="priceIncrease">
  <table >
    <tr>
      <td align="right" width="20%">Increase (%):</td>
        <td width="20%">
          <form:input path="percentage"/>
        </td>
        <td width="60%">
          <form:errors path="percentage" cssClass="error"/>
        </td>
    </tr>
  </table>
  <br>
  <input type="submit" value="Execute">
</form:form>
<a href="<c:url value="hello.htm"/>">Home</a>
</body>
</html>

A continuación, debemos incluir las siguientes dependencias en el fichero 'pom.xml':

Group Id Artifact Id Version
javax.validation validation-api 2.0.1.Final
org.hibernate.validator hibernate-validator 6.0.9.Final

La siguiente clase que crearemos es un JavaBean muy sencillo que solamente contiene una propiedad, con sus correspondientes métodos getter y setter. Éste es el objeto que el formulario rellenará y desde el que nuestra lógica de negocio extraerá el porcentaje de incremento que queremos aplicar a los precios. La clase PriceIncrease utiliza las anotaciones @Min y @Max para definir el intervalo de valores válido para el incremento de precios del stock.

'springapp/src/main/java/com/companyname/springapp/business/services/PriceIncrease.java':

package com.companyname.springapp.business.services;

import javax.validation.constraints.Max;
import javax.validation.constraints.Min;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

public class PriceIncrease {

    /** Logger for this class and subclasses */
    protected final Log logger = LogFactory.getLog(getClass());

    @Min(0)
    @Max(50)
    private int percentage;

    public void setPercentage(int i) {
        percentage = i;
        logger.info("Percentage set to " + i);
    }

    public int getPercentage() {
        return percentage;
    }
}

4.6. Añadir un controlador de formulario

A continuación, creamos la clase PriceIncreaseFormController que actuará como controlador de las peticiones de incremento de precio realizadas desde el formulario. Spring inyectará automáticamente al controlador del formulario la referencia al servicio ProductManager gracias a la anotació @Autowired. El método formBackingObject(..) será invocado antes de que el formulario se muestre al usuario (petición GET) y rellenará el campo con un incremento por defecto de un 15%. El método onSubmit(..) será invocado cuando el usuario envíe del formulario a través del método POST. El uso de la anotación @Valid permitirá validar el incremento introducido y volverá a mostrar el formulario en caso de que éste no sea válido.

'springapp/src/main/java/com/companyname/springapp/web/controllers/PriceIncreaseFormController.java':

package com.companyname.springapp.web.controllers;

import javax.validation.Valid;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.companyname.springapp.business.services.PriceIncrease;
import com.companyname.springapp.business.services.ProductManager;

@Controller
@RequestMapping(value="/priceincrease.htm")
public class PriceIncreaseFormController {

    /** Logger for this class and subclasses */
    protected final Log logger = LogFactory.getLog(getClass());

    @Autowired
    private ProductManager productManager;

    @RequestMapping(method = RequestMethod.POST)
    public String onSubmit(@Valid PriceIncrease priceIncrease, BindingResult result)
    {
        if (result.hasErrors()) {
            return "priceincrease";
        }
		
        int increase = priceIncrease.getPercentage();
        logger.info("Increasing prices by " + increase + "%.");

        productManager.increasePrice(increase);

        return "redirect:/hello.htm";
    }

    @RequestMapping(method = RequestMethod.GET)
    protected PriceIncrease formBackingObject() {
        PriceIncrease priceIncrease = new PriceIncrease();
        priceIncrease.setPercentage(15);
        return priceIncrease;
    }

}

Para mostrar los distintos mensajes de error, vamos a añadir también algunos mensajes al archivo de mensajes 'Messages.properties'.

'springapp/src/main/resources/Messages.properties':

title=SpringApp
heading=Hello :: SpringApp
greeting=Greetings, it is now
priceincrease.heading=Price Increase :: SpringApp
error.not-specified=Percentage not specified!!!
error.too-low=You have to specify a percentage higher than {0}!
error.too-high=Don''t be greedy - you can''t raise prices by more than {0}%!
required=Entry required.
typeMismatch=Invalid data.
typeMismatch.percentage=That is not a number!!!

Finalmente, vamos a añadir un enlace a la página de incremento de precio desde 'hello.jsp'.

<%@ include file="/WEB-INF/views/include.jsp" %>

<html>
  <head><title><fmt:message key="title"/></title></head>
  <body>
    <h1><fmt:message key="heading"/></h1>
    <p><fmt:message key="greeting"/> <c:out value="${model.now}"/></p>
    <h3>Products</h3>
    <c:forEach items="${model.products}" var="prod">
      <c:out value="${prod.description}"/> <i>$<c:out value="${prod.price}"/></i><br><br>
    </c:forEach>
    <br>
    <a href="<c:url value="priceincrease.htm"/>">Increase Prices</a>
    <br>
  </body>
</html>

Compila, despliega y después de recargar la aplicación podemos probarla. El formulario mostrará los errores siempre que no se introduzca un valor válido de porcentaje.

La aplicación actualizada

4.7. Resumen

Vamos a ver lo que hemos hecho en la Parte 4.

  1. Hemos renombrado nuestro controlador a InventoryController y le hemos dado una referencia a ProductManager por lo que ahora podemos recuperar una lista de productos para mostrar.

  2. Entonces hemos definido algunos datos de prueba para rellenar objetos de negocio.

  3. A continuación hemos modificado la página JSP para usar una ubicación de mensajes y hemos añadido un loop forEach para mostrar una lista dinámica de productos.

  4. Después hemos creado un formulario para disponer de la capacidad de incrementar los precios.

  5. Finalmente hemos creado un controlador de formulario que valida los datos introducidos, hemos desplegado y probado las nuevas características.

A continuación puedes ver una captura de pantalla que muestra el aspecto que debería tener la estructura de directorios del proyecto después de seguir todas las instrucciones anteriores.

La estructura de directorios del proyecto al final de la parte 4

Anterior  Inicio  Siguiente
Capítulo 3. Desarrollando la Lógica de Negocio  Autor: Francisco Grimaldo Moreno  Capítulo 5. Implementando la Persistencia en Base de Datos