Josel Toro: 11. Crear una aplicación Web Java en Eclipse con Servlets y JSPs (Parte 11

¡Bienvenidos a todos! Esta publicación formará parte de una serie de 13 publicaciones que estaré desarrollando para aprender a desarrollar una aplicación web pura en Java bajo la plataforma JEE usando Servlets y JSPs. Este será un curso en forma de guía para aquellas personas que recién estén empezando en el mundo de la programación web y que todavía no hacen uso de ningún framework.

Haciendo uso de JSPs y Servlets construiremos nuestras aplicaciones webs los cuales se ejecutarán en Apahe Tomcat (Contenedor de Servlets), el cual lo usaremos como servidor de aplicaciones para ejecutar nuestro proyecto. Asimismo, usaremos Eclipse como herramienta IDE (Entorno de Desarrollo Integrado) para la edición y compilación de nuestro código.

Clase 07b

En el post anterior aprendimos a crear nuestras propias etiquetas personalizadas (Custom Tags), Creamos nuestro primer taglib y habíamos dicho que servía para realizar una ampliación de las etiquetas posible en html desde java y finalmente mostramos la salida del tag en un JSP; y de extra les dejé los pasos para trabajar con la librería Jmesa. Pues bien, ahora les dejaré los pasos para trabajar con otra librería muy similar llamada DisplayTag para terminar con este tema de etiquetas personalizadas (Custom Tags).

Clic aquí para descarga el proyecto anterior

DisplayTag

1. Importamos el siguiente proyecto a nuestro workspace y lo ejecutamos para verificar que no exista ningún error. Clic aquí para descargar.

2. Copiamos los recursos de DisplayTag (css, js) en /WebContent/. Clic aquí para descargar.

3. Copiamos las librerías necesarias para trabajar con displaytag en /WebContent/WEB-INF/lib/

4. Listamos los productos usando DisplayTag

<!-- Referenciamos los recursos para trabajar con displaytag -->
<%@taglib prefix="display" uri="http://displaytag.sf.net"%>
<link href="css/displaytag.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/screen.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $("#formProducto").validate();
 });
</script>

<!--Configurar el display tag con los datos de la sesión -->
<display:table name="${sessionScope.productos}" pagesize="3" export="true">
 <display:column title="IdProducto" property="idProducto" sortable="true" />
 <display:column title="Nombre" property="nombre" sortable="true" />
 <display:column title="Precio" property="precio" sortable="true" />
 <display:column title="Stock" property="stock" sortable="true" />
 <display:column title="Categoría" property="idCategoria" sortable="true" />
 <display:column title="Fecha" property="fecha" sortable="true" />
</display:table>

Resultado

5. Validar los campos de entrada

registraProducto.jsp

<!-- Referenciamos los recursos para trabajar con displaytag -->
<link href="css/screen.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $("#formProducto").validate();
 });
</script>

<body>
 <h1>
Registra Producto</h1>
<form action="producto" id="formProducto">
  <input type="hidden" name="metodo" value="inserta">
  <table cellspacing="0" cellpadding="4">
<tr>
    <td>Nombre</td>
    <td><input type="text" name="txtNombre" class="required"
     size="30"></td>
   </tr>
<tr>
    <td>Precio</td>
    <td><input type="text" name="txtPrecio" size="30"
     class="{required:true,number:true}"></td>
   </tr>
<tr>
    <td>Stock</td>
    <td><input type="text" name="txtStock" size="30"
     class="{required:true,digits:true}"></td>
   </tr>
<tr>
    <td>Categoria</td>
    <td><select name="cboCategoria" class="required">
      <option value="">[Seleccione]</option>
      <option value="1">Oficina</option>
      <option value="2">Informatica</option>
      <option value="3">Laboratorio</option>
    </select>
    </td>
   </tr>
<tr>
    <td>Fecha</td>
    <td><input type="text" name="txtFecha" size="30"
     class="{required:true,dateISO:true}"></td>
   </tr>
<tr>
    <td><input type="reset" value="limpiar"></td>
    <td><input type="submit" value="enviar"></td>
   </tr>
</table>
</form>
</body>

ModificaProducto.jsp

<!-- Referenciamos los recursos para trabajar con displaytag -->
<link href="css/screen.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $("#formProducto").validate();
 });
</script>

<body>
 <!-- Recuperamos los datos que han sido cargados en el request -->
 <%@page import="www.google.intranet.matricula.entidad.ProductoDTO"%>
 <%
  ProductoDTO p = (ProductoDTO) request.getAttribute("producto");
 %>
 <h1>
Actualiza Producto</h1>
<form action="producto" id="formProducto">
  <input type="hidden" name="metodo" value="actualiza"> <input
   type="hidden" name="codigo" value="<%=p.getIdProducto()%>">
  <table cellspacing="0" cellpadding="4">
<tr>
    <td>Nombre</td>
    <td><input type="text" name="txtNombre" size="30"
     value="<%=p.getNombre()%>" class="required">
    </td>
   </tr>
<tr>
    <td>Precio</td>
    <td><input type="text" name="txtPrecio" size="30"
     value="<%=p.getPrecio()%>" class="{required:true,number:true}">
    </td>
   </tr>
<tr>
    <td>Stock</td>
    <td><input type="text" name="txtStock" size="30"
     value="<%=p.getStock()%>" class="{required:true,digits:true}">
    </td>
   </tr>
<tr>
    <td>Categoria</td>
    <td><select name="cboCategoria" class="required">
      <option value="">[Seleccione]</option>
      <option value="1">Oficina</option>
      <option value="2">Informatica</option>
      <option value="3">Laboratorio</option>
    </select>
    </td>
   </tr>
<tr>
    <td>Fecha</td>
    <td><input type="text" name="txtFecha" size="30"
     value="<%=p.getFecha()%>" class="{required:true,dateISO:true}">
    </td>
   </tr>
<tr>
    <td><input type="reset" value="limpiar"></td>
    <td><input type="submit" value="enviar"></td>
   </tr>
</table>
</form>
</body>