Manejar Formularios HTML
¿Qué le sucede a los datos del Formulario?
La información que el usuario introduce en el formulario se almacena en el objeto request, que se envía desde el cliente al motor JSP. ¿Qué sucede luego?La siguiente figura representa como fluyen los datos entre el cliente y el servidor (al menos cuando usamos la implementación JSP de Sun, otros motores JSP podrían trabajar de forma diferente.
¿Cómo se pasan los datos entre el cliente y el servidor?
El motor JSP envía el objeto solicitado a cualquier componente del lado del servidor (JavaBeansTM , servlet, o bean enterprise) que especifica el JSP. El componente maneja la solicitud, posiblemente recuperando datos desde una base de datos u otros datos almacenados, y pasa un objeto respuesta de vuelta la motor JSP, donde los datos se formatean de acuerdo al diseño de la página HTML. El motor JSP y el servidor Web entonces envían la página JSP revisada de vuelta al cliente, donde el usuario puede ver el resultado, en el navegador Web. Los protocolos de comunicación usados entre el cliente y el servidor pueden ser HTTP, o cualquier otro protocolo.
Los objetos request y response están siempre implícitamente disponibles para nosotros como autores de ficheros fuentes JSP. El objeto request se explica con más detalle más adelante en este tutorial.
¿Cómo Crear un Formulario?
Normalmente se define un formulario HTML en un fichero fuente JSP, usando etiquetas JSP para pasar los datos entre el formulario y algun tipo de objeto del lado del servidor (usualmente un Bean). En general, haremos las siguientes cosas en nuestra aplicación JSP:- Empezaremos a escribir un fichero fuente JSP, creando un formulario HTML y dándole un nombre a cada elemento.
- Escribimos el Bean en un fichero .java, definiendo las propiedades, los métodos get y set para los nombres de los elementos del formulario (a menos que querramos seleccionar explícitametne un valor propiedad).
- Devolvemos el fichero fuente JSP. Añadimos una etiqueta <jsp:useBean> para crear y asignar un ejemplar del Bean.
- Añadimos una etiqueta <jsp:setProperty> para seleccionar propiedades del Bean desde el formulario HTML (el Bean necesita un método set correspondiente).
- Añadimos una etiqueta <jsp:getProperty> para recuperar los datos desde el Bean (el Bean necesita un método get correspondiente).
- Si necesitamos realizar más procesos sobre los datos del usuario, usamos el objeto request desde dentro de un scriptlet.
El ejemplo Hello, User hará estos pasos más claros.
Una sencilla aplicación "Hello"
El usuario introduce un nombre, y Duke dice Hello!
Código de Ejemplo
El Banner Duke (dukebanner.html)
<table border="0" width="400" cellspacing="0"
cellpadding="0">
<tr>
<td height="150" width="150"> </td>
<td width="250"> </td>
</tr>
<tr>
<td width="150"> </td>
<td align="right" width="250">
<img src="duke.waving.gif"> </td>
</tr>
</table>
<br>
El fichero principal JSP (hellouser.jsp)
<%@ page import="hello.NameHandler" %>
<jsp:useBean id="mybean" scope="page"
class="hello.NameHandler" />
<jsp:setProperty name="mybean" property="*" />
<html>
<head><title>Hello, User</title></head>
<body bgcolor="#ffffff" background="background.gif">
<%@ include file="dukebanner.html" %>
<table border="0" width="700">
<tr>
<td width="150"> </td>
<td width="550">
<h1>My name is Duke. What's yours?</h1>
</td>
</tr>
<tr>
<td width="150" </td>
<td width="550">
<form method="get">
<input type="text" name="username" size="25">
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</form>
</table>
<%
if ( request.getParameter("username") != null ) {
%>
<%@ include file="response.jsp" %>
<%
}
%>
</body>
</html>
<table border="0" width="700">
<tr>
<td width="150"> </td>
<td width="550">
<h1>Hello, <jsp:getProperty name="mybean"
property="username" />!
</h1>
</td>
</tr>
</table>
El Bean que Maneja los Datos del Formulario (namehandler.java)
package hello;
public class NameHandler {
private String username;
public NameHandler() {
username = null;
}
public void setUsername( String name ) {
username = name;
}
public String getUsername() {
return username;
}
}
Construir el Formulario HTML
Un formulario HTML tiene tres partes principales: las etiquetas de apertura y cierre <form>, los elementos de entrada, y el botón Submit que envía los datos al servidor. En una página normal HTML, la etiqueta de apertura <form> normalmente se parecerá a algo como esto:En otras aplicaciones web, el atributo action especifica un script CGI u otro programa que procese los datos del usuario. En un fichero JSP, podemos omitir el atributo action si queremos que los datos se envíen al Bean especificado en la etiqueta <jsp:useBean> o especificar otro fichero JSP.<form method=get action=someURL>
El resto del formulario se construye igual que un formulario estándard HTML, con elementos de entrada, un botón Submit, y quizás un botón Reset. Debemos asegurarnos de dar a cada elemento un nombre, como este:
<input type="text" name="username">
Usar los Métodos GET y POST
Los métodos HTTP GET y POST envían datos al servidor. En una Aplicación JSP, GET y POST envían los datos a un Bean, servlet, u otro componente del lado del servidor que está manejando los datos del formulario.En teoría, GET es para obtener datos desde el servidor y POST es para envíar datos. Sin embargo, GET añade los datos del formulario (llamada una query string (string de solicitud)) a una URL, en la forma de parejas clave/valor desde el formulario HTML, por ejemplo, name=john. En el String de solicitud las parejas de clave/valor se separán por caracterres &, los espacios se convierten en caracteres +, y los caracteres especiales se convierten a sus correspondientes hexadecimales. Como el String de solicitud está en la URL,la página puede ser añadida a los bookmarks o envíada por e-mail con el string de solicitud. Este string normalmente está limitado a un número relativamente pequeño de caracteres.
Sin embargo, el método POST, pasa los datos de una longitud ilimitada como un cuerpo de solicitud de cabecera HTTP hacia el servidor. El usuario que trabaja en el navegador cliente no puede ver los datos que están siendo enviados, por eso la solicitud POST es ideal para enviar datos confidenciales (como el número de una tarjeta de crédito) o grandes cantidades de datos al servidor.
Escribir el Bean
Si nuestra aplicación usa un Bean, podemos escribir el Bean de acuerdo a los patrones de diseño explicados en la Especificación del API de JavaBeans, recordamos estos puntos generales:- Si usamos una etiqueta <jsp:getProperty> en nuestro fichero fuente JSP, necesitamos el correspondiente método get en el Bean.
- Si usamos una etiqueta <jsp:setProperty> en nuestro fichero fuente JSP, necesitamos uno o más metodos set correspondientes.
Seleccionar las propiedades en unas propiedades obtenidas desde un Bean se explica un poco más en la siguiente sección:
Obtener los Datos desde el Fomulario hacia el Bean
Seleccionar las propiedades en un Bean desde un formulario HTML es una tarea en dos partes:- Crear o localizar el ejemplar del Bean con lt;jsp:useBean>
- Seleccionar los valores de la propiedad en el Bean con <jsp:setProperty>
El primer paso es ejemplarizar o localizar un Bean con una etiqueta <jsp:useBean> antes de seleccionar los valores de las propiedades en el bean. En un fichero fuente JSP, la etiqueta <jsp:useBean> debe aparecer sobre la etiqueta <jsp:setProperty>. La etiqueta <jsp:useBean> primero busca un ejemplar de Bean con unnombre que especifiquemos, pero si no encuentra el Bean, lo ejemplariza. Esto nos permite crear el Bean en un fichero JSP y usarlo en otro, siempre que el Bean tenga un ámbito suficientemente grande.
El segundo paso es seleccionar el valor de la propiedad en el Bean con una etiqueta <jsp:setProperty>. La forma más fácil de usar <jsp:setProperty> es definir propiedades en el Bean que correspondan con los nombres de los elementos del formulario. También deberíamos definir los correspondientes métodos set para cada propiedad. Por ejemplo, si el elemento del formulario se llama username, deberíamos definir una propiedad username u los métodos getUsername y setUsername en el Bean.
Si usamos nombres diferentes para el elemento del formulario y la propiedad del Bean, todavía podríamos seleccioanr el valor de la propiedad con <jsp:setProperty>, pero sólo podemos seleccionar una valor a la vez.
Chequear el Objeto Request
Los datos que el usuario introduce se almacenan en un objeto request, que usualmente implementa javax.servlet.HttpServletRequest (o si nuestra implementación usa un protocolo diferente, otro interface que sea una subclase de javax.servlet.ServletRequest).Podemos acceder al objeto request directamente desde dentro de un scriptlet. Los scriptlet son fragmentos de código escritos en un lenguaje de scripts y situado dentro de los caracteres <% y %>. En JSP 1.0, debemos usar el lenguaje de programación Java como lenguaje de Script.
Podríamos encontrar útiles algunos de estos métodos para trabajar con objetos request:
| Método | Definido en | Trabajo Realizado |
|---|---|---|
| getRequest | javax.servlet.jsp. PageContext | Devuelve el Objeto request actual |
| getParameterNames | javax.servlet. ServletRequest | Devuelve los nombres de los parámetros contenidos actualmente en request |
| getParameterValues | javax.servlet. ServletRequest | Devuelve los valores de los parámetros contenidos actualmente en request |
| getParameter | javax.servlet. ServletRequest | Devuelve el valor de un parámetro su proporcionamos el nombre |
También podemos encontrar otros métodos definidos en ServletRequest, HttpServletRequest, o cualquier otra sobclase de ServletRequest que implemente nustra aplicación
El motor JSP siempre usa el objeto request detrás de la escena, incluso si no la llamamos explícitamente desde el fichero JSP.
Obtener Datos desde el Bean a la Página JSP
Una vez que los datos del usuario han siso enviados al Bean, podriamos querer recuperar los datos y mostrarlos en la página JSP. Para hacer esto, usamos la etiqueta <jsp:getProperty>, dándole el nombre del Bean y el nombre de la propiedad:Los nombres de Beans que usemos en las etiquetas <jsp:useBean>, <jsp:setProperty>, y <jsp:getProperty> deben ser iguales, por ejemplo:<h1>Hello, <jsp:getProperty name="mybean" property="username"/>!
En este ejemplo, las etiquetas están en dos ficheros, pero los nombres de los Bean son iguales. Si no fuera así, la implementación de referencia del JSP lanzará un error.hellouser.jsp: <jsp:useBean id="mybean" scope="session" class="hello.NameHandler" /> <jsp:setProperty name="mybean" property="*" /> response.jsp: <h1>Hello, <jsp:getProperty name="mybean" property="username"/>!
Las respuesta que el motor JSP devuelve al cliente está encapsulada en el objeto response implícito, que crea el motor JSP.
¿Cómo Ejecutar el Ejemplo
Las instrucciones dadas unsan un path al estilo de Unix, si trabajamos vbajo Windows, usaremos el mismo path pero con el separador apropiado:- Creamos el directorio (o carpeta) ../jswdk-1.0/examples/jsp/tutorial/hellouser.
- Situamos los siguientes ficheros en el directorio (o carpeta)../tutorial/hellouser: background.gif, duke.waving.gif, dukebanner.html, hellouser.jsp, y response.jsp.
- Creamos el directorio (o carpeta) ../jswdk-1.0/examples/WEB-INF/jsp/beans/hello. Observa que el directorio se lla hello y no hellouser.
- Situamos los ficheros NameHandler.java y NameHandler.class en el directorio ../beans/hello.
- Arrancamos la implementación de referencia de JSP: cd ../jswdk-1.0 startserver
- Abrimos un navegador Web y vamos a http://yourMachineName:8080/examples/jsp/ tutorial/hellouser/hellouser.jsp