Programación Web-Dinámico: Laboratorio 3

UEA: Programación de Web-Dinámico
Dr. Carlos Roberto Jaimez González

Introducción

Este laboratorio requiere que hayas completado el Laboratorio 4, y muestra cómo usar el redireccionamiento de página (page forwarding), y la inclusión de páginas (page inclusion). En particular veremos como pasar datos entre páginas usando Java Beans con alcance de tipo request.

Es posible crear aplicaciones web poderosas con diseños limpios y simples si utilizamos la inclusión de páginas con páginas genéricas de ayuda.

Comenzaremos el laboratorio con algunos ejemplos sencillos para redireccionar e incluir páginas; y después trabajaremos con un ejemplo más complejo que involucra una tabla. Esto iniciará con un método de construcción de tablas específico, y después estudiaremos como esto puede ser manejado con una página JSP genérica creadora de tablas, tal como se discutió durante la clase.

En este momento debes estar familizarizado con el uso de NetBeans para crear y editar archivos. Para este laboratorio puedes iniciar un proyecto nuevo, o continuar utilizando el proyecto anterior, y solamente añadir nuevos archivos conforme lo vayas requiriendo. Las instrucciones en este laboratorio pueden decir cosas como: Crea un nuevo archivo llamado tabla.jsp, o Crea un paquete llamado miTabla; para lo cual esperaría que sepas como realizarlo. Si tienes alguna duda o pregunta de como hacer algo sólo dime.

Redireccionamiento (Page Forwarding)

En este ejemplo crearemos algunos datos en la página solicitada (la llamaré forwardJavaBean.jsp), la cual será pasada a otra página utilizando el mecanismo <jsp:forward>, para redireccionamiento. Abajo se muestra el código para la página redireccionadora.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="myBean" class="beans.TestJavaBean" scope="request"/>
<jsp:setProperty name="myBean" property="x" value="12"/>

<html>
   <head><title>JSP con direccionamiento</title></head>
   <body>Algo de contenido aquí
      <jsp:forward page="despliegaJavaBean.jsp" />
   </body>
</html>

Observa que esta página hace referencia a otros dos archivos: TestJavaBean, el cual es una clase Java que está dentro del paquete beans; y el otro archivo es despliegaJavaBean.jsp, el cual es la página JSP que usará el Java Bean para extraer algunos datos que desplegará (en este caso desplegará el valor de x). El código para estos dos archivos es proporcionado abajo.

El archivo TestJavaBean.java

package beans;

public class TestJavaBean {
   int x = 99;
   public String a = "Carlos";

   public TestJavaBean() {  }

   public TestJavaBean(int x) {
      this.x = x;
   }

   public int getX() {
      return x;
   }

   public void setX(int x) {
      this.x = x;
   }

   public String toString() {
      return "Java Bean: x=" + x + ", a=" + a;
   }
}

Ahora el archivo despliegaJavaBean.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="myBean" class="beans.TestJavaBean" scope="request"/>

<html>
   <head><title>Despliega Java Bean</title></head>
   <body>
      <h2>Contenido del Java Bean. <br>
          <%=myBean%>
      </h2>
   </body>
</html>

Inclusión (Page Inclusion)

En este ejemplo crearemos algunos datos en la página solicitada, y usaremos el mecanismo <jsp:include> para incluir otra página. Después de que la página ha sido incluida, el control es regresado a la página inicial (la llamadora).

Los otros archivos (despliegaJavaBean.jsp y TestJavaBean.java) son los mismos que los del ejercicio anterior.

El JSP para incluir otra página es proporcionado abajo. Observa como damos un valor a un campo del objeto que no es realmente una propiedad del Java Bean (recuerda que las propiedades de los Java Bean tienen definidos métodos get y set). El archivo includeJavaBean.jsp quedaría como sigue:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="myBean" class="beans.TestJavaBean" scope="request"/>
<jsp:setProperty name="myBean" property="x" value="11"/>

<html>
   <head><title>JSP con inclusión de página</title></head>
   <body>Valor del Java Bean. <br>
      <%=myBean %>
      <%
      //escribe en un campo que no es una propiedad del Java Bean
      myBean.a = "Esta no es una propiedad del Bean";
      %>
      <h2> El archivo incluido está abajo. </h2>
      <jsp:include page="despliegaJavaBean.jsp" />
   </body>
</html>

Experimento: Modifica el alcance del Java Bean a page (en ambos archivos jsp, o en alguno de ellos), y observa los efectos de esto. ¿Qué diferencias observas?

Tabla de Productos

El objetivo de este ejercicio es crear una página JSP que genere una tabla con productos de una tienda virtual. En este ejercicio se utilizarán algunas clases de ayuda para la creación de la tabla.

Las clases que necesitarás crear son las siguientes:

  • DBInterface.java: Esta será una interface que especifica los métodos de acceso requeridos para recuperar los productos de la base de datos. Para nuestro objetivo, esta interface solamente contendrá un solo método llamado getAllProducts().
  • TestDB.java: esta es a dummy implementation of this that creates a Collection of products (Collection<Product>) directly in the Java code, and simply returns that collection when the getAllProducts() method is called.
  • Product.java - this should contain for each product a title, a price, and a relative path to a thumbnail image.

<%@ page import="java.util.Collection,
java.util.Iterator,
shop.Product"%>

<jsp:useBean id='db'
scope='application'
class='shop.DummyDB' />

<html>
<head>
<title>My Shop</title>
</head>
<body>
<jsp:include page="header.jsp" flush="true"/>
<table>
<tr style="{color:red}">
<th> Title </th> <th> Price </th> <th> Picture </th>
</tr>
<%
Collection c = db.getAllProducts();
for (Iterator i = c.iterator(); i.hasNext() ; ) {
  Product product = (Product) i.next();
  // now use HTML literals to create the table
  // with JSP expressions to include the live data
  %>
  <tr style="{color:blue}">
  <td> <%= product.title %> </td>
  <td> <%= product.price %> </td>
  <td> <img src="<%= product.thumbnail %>" /> </td>
  </tr>
  <%
}
%>
</table>
</body>