TEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSP

Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
Jaaaaaaaaaaaa

TEMA Nº 4: GENERACIÓN DE CONTENIDO
DINÁMICO CON JSP
1. Creación de una página JSP
<%@ page import="java.io.*" %>
<%
// creando e inicializando los campos del registro
// observar que se debe usar clases numericas apropiadas
int clave=0;
String nombre="";
intedad=0;
if(request.getParameter("CREAR") != null)
{
// abriendo archivo, capturando y grabando datos
try {
//* Creando y grabando a un archivo*/
File arch=new File("c:archivo2.dat");
RandomAccessFilearchivo=new RandomAccessFile(arch,"rw");
archivo.close();
} catch(FileNotFoundExceptionfnfe) { /* Archivo no encontrado */ }
catch (IOExceptionioe) { /* Error al escribir */ }
// avisando
out.println("ARCHIVO DIRECTO CREADO");

};
// construyendo forma dinamica
out.println("<FORM ACTION=prog25.jsp METHOD=post>");
out.println("<INPUT TYPE=SUBMIT NAME=CREAR VALUE="CREACION ARCHIVO" ><BR>");
out.println("</FORM>");
%>
corrida:
Recordar que la estructura que se usó para crear el archivo se deberá usar siempre y con el mismo orden
cuando se acceda al archivo con los procesos u operaciones anteriormente mencionados.
Observar que es parecido a la creación de archivos secuenciales.
Lo primero que se crea es un objeto de tipo FILE que se usa como parámetro para crear el archivo de tipo
RANDOMACCESSFILE.
Respetar las dos diagonales en el path del disco duro donde quedara el archivo directo.
Observar el doble diagonal () en el parámetro. Como segundo paso se crea el archivo con la instrucción:
RandomAccessFile archivo=new RandomAccessFile (arch,”rw”); El primer parámetro o argumento en esta
función es la unidad de disco y el nombre del archivo. El segundo parámetro o argumento es llamado modo y
es una de los varios modos que podemos usar. “r” → Lectura. “w” → Escritura. “rw” → Crea para lectura y
escritura y si ya existe, sobrescribe. Cuando se ha finalizado de escribir al archivo se debe cerrar y esto se
hace con la instrucción: Archivo.close (); Recordar estudiar todos los métodos de la clase
RANDOMACCESFILE. TAREAS PROGRAMACION JAVA JSP Crear archivos directos de alumnos, proveedores,
libros, productos, películas.

2. Procesamiento de formularios
INTRODUCCIÓN
Los formularios son un componente a veces esencial en una página web, ya que permiten la interacción con el usuario, pudiendo
conseguir mediante ellos recoger información particular sobre sus gustos, opiniones, datos personales, etc, información que luego
deberemos procesar en el servidor web para su correcta interpretación y uso.
Este proceso de datos se puede llevar a cabo mediante diferentes tecnologías: CGI, ASP, JSP, etc.
Pero si nos limitamos al proceso de datos y elementos de formulario en el lado del cliente, la herramienta más poderosa con la que
contamos es sin duda alguna el lenguaje JavaScript (o JScript, como gustan llamarlo los sres. de Microsoft).
Mediante JavaScript podemos no sólo validar los datos de cada uno de los campos que formen el formulario, para así poder estar
seguros de su validez antes de ser enviados al servidor, si no que también podemos acceder a todos los elementos que forman el
formulario y a sus propiedades, con lo que podemos diseñar formularios realmente atractivos y dinámicos, que convertirán nuestras
páginas en verdaderas "obras de arte". Y todo esto es posible porque en la propia definición de JavaScript existe un objeto
formulario.
Para aquellas personas que aún no estén muy familiarizados con los formularios les remito al Manual de formularios en HTML de este
mismo sitio web.
Este artículo - manual no pretende explicar todos los posibles casos de trabajo con formularios en JavaScript, ni mostrar ejemplos
complicados en exceso, que más que enseñar algo crearían confusión, si no mostrar las bases de cómo podemos manejar formularios
con este lenguaje de programación, dejando al empeño del lector el profundizar más en casos concretos.
EL OBJETO FORM
El objeto form se considera en JavaScript como un subobjeto del objeto document, que a su vez forma parte del objeto
predefinido window, por lo que inicialmente la sintaxis para acceder a una cualquiera de sus propiedades o métodos es:
window.document.forms.[nombre_formulario].[nonbre_campo].propiedad
en la que podemos prescindir de las cadenas forms y window, ya que el navegador considera al formulario particular un objeto por sí
mismo.
Además, el objeto forms dentro del objeto documents posee dos subpropiedades:
* index, array que contiene todos los formularios de una página, de sintaxis:
document.forms[index]
y donde debemos tener en cuenta que el primer formulario viene indentificado por el índice 0, por lo que para acceder al primer
formulario de una página deberemos usar la expresión:
document.forms[0]...
* length , que contiene el número de formularios que hay en la página, y cuya sintaxis es:
document.forms.length

Recordemos que en un formulario HTML un formulario se crea mediante un código del tipo:
<FORM NAME="clientes" ACTION="/cgi/clientes:cgi" METHOD="POST" TARGET="cuerpo">
...campos del formulariio
</FORM>
Como he dicho antes, un formulario es para JavaScript un objeto por sí mismo, y como tal posee unas propiedades, unos métodos y
unos eventos propios, que nos van a permitir acceder a cada uno de los elementos que lo forman y poder modificar su diseño y
comportamiento dinámicamente, sin necesidad de hacer nuevas peticiones al servidor, ya que todo se va a ejecutar en el lado
cliente, estando todo el código necesario dentro de la propia página web.
LAS PRINCIPALES PROPIEDADES DEL OBJETO FORM SON:
NAME : es la propiedad más importante del objeto form, ya que nos va a permitir identificar cada formulario
con un nombre identificador único, identificador que vamos a usar luego para poder referirnos sin
ambiguedades a un formulario de nuestra página en concreto y acceder a sus propiedades y métodos. Por
esto, TODA ETIQUETA FORM DEBE TENER SU PROPIEDAD NAME Y NO PUEDE HABER DOS FORMULARIOS CON
EL MISMO NOMBRE EN UNA MISMA PÁGINA.
ACTION : esta propiedad define la URL o URI a donde se van a mandar los datos del formulario; es decir, su
valor va a ser una cadena que va a definir la ruta relativa o absoluta en dónde se encuentra el programa o
página activa que va a procesar los datos contenidos en los diferentes campos del formulario. Sin el uso de
JavaScript esta propiedad sería estática, por lo que una vez incluida en el código inicial de la página
permanecería inmutable. Pero mediante JavaScript podemos cambiarla, simplemente refiriéndonos a ella
mediante la escritura:
document.[nombre_formulario].action="/ruta/programa.cgi"
esto es especialmente útil cuando por ejemplo debemos mandar los datos del formulario a diferentes páginas
JSP dependiendo de uno de los datos introducido en un campo. Como ejemplo, supongamos que en el
formulario de nuestra página hay dos checkbox, y que dependiendo de cual marque el usuario debemos enviar
los datos bien a la página a.jsp o a la página b.jsp. El código necesario para ello sería:
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "Javascript">
<--
function enviar( ){
if ((document.forms.datos.sistema1.checked = = true) &&
(document.forms.datos.sistema2.checked = = true){
alert('debe hacer una sóla selección)
{
elseif (document.forms.datos.sistema1.checked = = true)
document.forms.datos.action = "/jsp/pag_1.jsp"

y con esto los datos serían enviados a una u otro página para su proceso, y en caso de que no se hubiera
seleccionado ninguna casilla aparecería un mensaje de error. Podemos ver este ejemplo en acción, sólo que en
vez de asignar un action en el servidos he asignado a cada casilla como action una página HTML diferente.
METHOD: este parámetro establece el método de envío de los datos del formulario. Su valor puede ser POST,
conveniente cuando queremos enviar una gran cantidad de datos como una cadena continua, y que es el más
usado, o GET, que se emplea cuando queremos pasar unos datos concretos a una página ASP o JSP (para más
información ir al manual de formularios HTML).
También podemos acceder a cambiar esta propiedad dinámicamente, pero no se suele hacer nunca, ya que el
método de envío suele estar definido con toda exactitud. No obstante, la sintaxis para acceder a esta
propiedad sería:
document.forms.[nombre_formulario].method="metodo_elegido".
TARGET: la propiedad target define el nombre de la ventana o frame en la que se van a cargar los resultados de
procesar el formulario; es decir, cuando el usuario pincha el botón submit se envían los datos del formulario al
servidor, en el que un programa o página activa procesa los datos, generando de nuevo otra página que se envía al
navegador cliente. En la ventana o frame definido por el atributo target se va a cargar esta página de respuesta.
Nos puede interesar que dependiendo de la clase de resultado que obtengamos al procesar los datos cambie la
ventana en la que se va a mostrar la página de respuesta, e incluso definir las posibles ventanas dinámicamente.
Como ejemplo, supongamos que tenemos una página inicial con dos frames: uno superior, en dónde inicialmente
existe un mensaje orientativo, y otro central, en el que inicialmente se encuentra el formulario que debe completar
el usuario. Nos interesa que si marca el primer radio botón de un grupo de dos la página de respuesta sea otra
página que se carge en la ventana central, pero que si el radio botón marcado es el segundo la respuesta sea un
mensaje determinado que se muestre en el frame superior. Para ello debemos definir primero una página con dos
frames, en la que se cargan la página del mensaje inicial arriba y el formulario abajo. El código de la página del

formularios es el que sigue:
y aquí podemos ver el ejemplo en acción.
ELEMENTS: esta propiedad es un array o vector que contiene todos los elementos que forman un formulario,
sean cuales sean, y mediante ella podemos conocer el número de campos diferentes que tiene el formulario,
su tipo, etc, teniendo en cuenta que el primer índice del vector es el 0, como ocurría con el vector forms. Posee
dos subpropiedades:
* INDEX, que define mediante un índice los diferentes campos que forman el formulario, empezando los
índices por el 0, y cuya sintaxis es:
<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
functionenvia( ){
if ((document.forms.datos.sistema1.checked==true)
&&(document.forms.datos.sistema2.checked==true)) alert('debe
seleccionar una sóla casilla')
elseif (document.forms.datos.sistema1.checked==true) {
document.forms.datos.target="inf";
document.forms.datos.action="pagina1.html";
}
elseif (document.forms.datos.sistema2.checked==true) {
document.forms.datos.action="mensaje2.html";
document.forms.datos.target="sup";
}
elsealert('debe seleccionar un checkbox');
document.forms.datos.submit()
}
</SCRIPT>
</HEAD>
<BODY ONLOAD= "document.forms.datos.reset()"><BR><FORM
NAME="datos">
<INPUT TYPE="Checkbox" NAME="sistema1">sitema 1
<INPUT TYPE="Checkbox" NAME="sistema2" >sitema 2<BR>
<INPUT TYPE="button" VALUE="envía" ONCLICK= "envia( )">
</FORM>
</BODY>
</HTML>

document.forms.nombre_formulario.elements[index]
* LENGTH, que contiene el número de elementos que forman el formulario, y cuya sintaxis es:
document.forms.nombre_formulario.elements.length
El uso general de la subpropiedad índex puede ser del tipo:
EJEMPLO EN ACCIÓN.
Como vemos en este ejemplo, también podemos referirnos a un formulario de nuestra página por medio de su índice en el
arrayforms que posee cada objeto window.document, teniendo en cuenta que el primer índice es 0 . Mediante esta forma de
expresarnos podemos acceder a cualquier formulario de la página sin necesidad de conocer su nombre, y podemos obtener el
número de formularios que hay en una página en concreto. La sintaxis para acceder a un formulario mediante este camino es del
tipo:
document.forms[indice].propiedad
Y para conocer el nº de formularios en la página deberemos escribir:

function cantidad ( ) {
var f = document.forms.length;
alert( ' el número de formularios de la página es ' + f );
document.forms[2].texto.value='cambiamos el valor del campo';
}
y esto en acción, en una página con 3 formularios en la que mostramos el número de ellos y cambiamos el valor del campo de texto
del segundo formulario, podemos verlo en este ejemplo.
ENCODING :que es un string o cadena que contiene el tipo MIME utilizado para codificar el
contenido del formulario a enviar al servidor, y que refleja el atributo ENCTYPE de la etiqueta FORM
de HTML, que se utiliza para codificar los datos remitidos desde el formulario hacia el servidor,
pudiendo mediante esta propiedad cambiar dinámicamente lel tipo de codificación.
LOS MÉTODOS DEL OBJETO FORM SON DOS:
SUBMIT ( ) :para enviar los datos de un formulario es necesario siempre utilizar este método, que por defecto
está asociado al elemento de formulario <INPUT TYPE = " submit " >, que es un botón que al ser pulsado llama
al método submit. Ahora bien, a veces nos interesa que antes de que se produzca el envío de datos al servidor
se ejecuten una serie de acciones del lado del cliente, como pueden ser validación de datos, mensajes de alerta
y/o confirmación, etc. Para lograr esto podemos sustituir el botón tipo submit por un botón tipo button que al
ser pulsado llame a una función JavaScript que ejecute las acciones previas al envío y una vez cumplimentadas
envíe los datos. Esto se consigue llamando en la función al método submit ( ), y el código necesario tiene el
aspecto siguiente:
function previa ( ) {
...
...acciones a realizar...
...
document.forms.nombre_formulario.submit ( );
}
RESET ( ) : este método pone a cero los campos del formulario, es decir, vuelve a situar el formulario en su
estado inicial, y al igual que ocurre con el método submit existe por defecto un botón <INPUT TYPE = " reset " >
que se encarga de realizar esta operación, útil por ejemplo cuando el usuario se ha equivocado al rellenar los
campos y desea comenzar de nuevo el proceso. Pero también nos puede interesar a veces poner a cero los
campos del formulario sin que intervenga el usuario. Esto lo conseguimos llamando diréctamente al método
submit ( ) o llamando a una función que ejecute el método, siendo el código de llamada en ambos casos del
tipo:
document.forms.nombre_formulario.reset ( )
POR ÚLTIMO, VAMOS A VER LOS EVENTOS QUE ADMITE EL OBJETO FORM, ALGUNOS DE LOS
CUALES SON ESTÁNDARES Y OTROS SIN SERLO SÍ LOS ADMITE, Y QUE SON:
ONSUBMIT : es el principal evento del objeto y el único estandar, y se produce al enviar los datos del
formulario mediante el botón submit o mediante el método submit ( ). Un ejemplo de llamada al método sería:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONSUBMIT = " alert ( ' se envían los datos ' ) " >

ONRESET : mediante este evento podemos ejecutar una acción dada cuando el usuario pincha el botón de
borrado o cuando mediante una función se ha llamado al método reset. Lo podemos usar por ejemplo para
lanzar un mensaje de aviso al usuario de que se van a borrar los datos. Su uso pasa por usar una sintaxis del
tipo:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONRESET = " alert ( ' se van a borrar los datos' ) " >
ONCLICK : este no es un evento típico del objeto form, pero se puede usar con én, y mediante él podemos
ejecutar una acción concreta cuando el usuario hace click en cualquier parte del formulario, sin necesidad de
que se pulse en un campo; sólo es necesario pinchar en algún lugar del espacio ocupado por el formulario en
su totalidad.. Su escritura se debe parecer a:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONCLICK = " alert ( ' ha pulsado un campo' ) " >
además de estos eventos, y al igual que ocurre con onClick, el objeto form también admite los eventos
generales ondblClick, onmouseOver, onmouseOut, onkeyPress , etc, pero su uso acarrea más problemas que
beneficios, por lo que no se utilizan. Sólo saber que estás ahí y que se pueden usar en casos muy específicos.
3. Acceso a las cabeceras de petición

TEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSP

Más contenido relacionado

La actualidad más candente

Similar a TEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSP

Más de Anyeni Garay

Último

TEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSP