Desarrollo de Aplicaciones Web con J2EE

Jaaaaaaaaaaaa

Desarrollo de Aplicaciones Web con

J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

TEMA N 4: GENERACIN DE
CONTENIDO DINMICO CON JSP
1. Creacin de una pgina 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="";
int edad=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");
RandomAccessFile archivo=new RandomAccessFile(arch,"rw");
archivo.close();
} catch(FileNotFoundException fnfe) { /* Archivo no encontrado */ }
catch (IOException ioe) { /* Error al escribir */ }
// avisando
out.println("ARCHIVO DIRECTO CREADO");
};

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

// 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 creacin de archivos secuenciales.
Lo primero que se crea es un objeto de tipo FILE que se usa como parmetro 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 parmetro. Como segundo paso se crea el archivo
con la instruccin: RandomAccessFile archivo=new RandomAccessFile (arch,rw); El
primer parmetro o argumento en esta funcin es la unidad de disco y el nombre del
archivo. El segundo parmetro 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 instruccin: Archivo.close (); Recordar estudiar todos
los mtodos de la clase RANDOMACCESFILE. TAREAS PROGRAMACION JAVA JSP Crear
archivos directos de alumnos, proveedores, libros, productos, pelculas.

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

2. Procesamiento de formularios
INTRODUCCIN
Los formularios son un componente a veces esencial en una pgina web, ya que permiten la interaccin
con el usuario, pudiendo conseguir mediante ellos recoger informacin particular sobre sus gustos,
opiniones, datos personales, etc, informacin que luego deberemos procesar en el servidor web para su
correcta interpretacin y uso.
Este proceso de datos se puede llevar a cabo mediante diferentes tecnologas: CGI, ASP, JSP, etc.
Pero si nos limitamos al proceso de datos y elementos de formulario en el lado del cliente, la herramienta
ms 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 slo 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 tambin
podemos acceder a todos los elementos que forman el formulario y a sus propiedades, con lo que podemos
disear formularios realmente atractivos y dinmicos, que convertirn nuestras pginas en verdaderas
"obras de arte". Y todo esto es posible porque en la propia definicin de JavaScript existe un objeto
formulario.
Para aquellas personas que an no estn muy familiarizados con los formularios les remito al Manual de
formularios en HTML de este mismo sitio web.
Este artculo - manual no pretende explicar todos los posibles casos de trabajo con formularios en
JavaScript, ni mostrar ejemplos complicados en exceso, que ms que ensear algo crearan confusin, si no
mostrar las bases de cmo podemos manejar formularios con este lenguaje de programacin, dejando al
empeo del lector el profundizar ms 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 mtodos 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.
Adems, el objeto forms dentro del objeto documents posee dos subpropiedades:
* index, array que contiene todos los formularios de una pgina, 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 pgina deberemos usar la expresin:
document.forms[0]...
* length , que contiene el nmero de formularios que hay en la pgina, y cuya sintaxis es:
document.forms.length

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

Recordemos que en un formulario HTML un formulario se crea mediante un cdigo 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 mtodos y unos eventos propios, que nos van a permitir acceder a cada uno de los
elementos que lo forman y poder modificar su diseo y comportamiento dinmicamente, sin necesidad de
hacer nuevas peticiones al servidor, ya que todo se va a ejecutar en el lado cliente, estando todo el cdigo
necesario dentro de la propia pgina web.

LAS PRINCIPALES PROPIEDADES DEL OBJETO FORM SON:

NAME : es la propiedad ms 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 pgina en
concreto y acceder a sus propiedades y mtodos. Por esto, TODA ETIQUETA FORM DEBE
TENER SU PROPIEDAD NAME Y NO PUEDE HABER DOS FORMULARIOS CON EL MISMO
NOMBRE EN UNA MISMA PGINA.

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 dnde se encuentra el programa o pgina activa que va a procesar los datos
contenidos en los diferentes campos del formulario. Sin el uso de JavaScript esta
propiedad sera esttica, por lo que una vez incluida en el cdigo inicial de la pgina
permanecera inmutable. Pero mediante JavaScript podemos cambiarla, simplemente
<HTML>
refirindonos a ella mediante la escritura:
<HEAD>
document.[nombre_formulario].action="/ruta/programa.cgi"
<SCRIPT
LANGUAGE= "Javascript">
<-esto esenviar(
especialmente
til cuando por ejemplo debemos mandar los datos del formulario
function
){
a diferentes pginas JSP dependiendo de uno de los datos introducido en un campo.
if ((document.forms.datos.sistema1.checked
= = de
true)
&& pgina hay dos checkbox, y
Como
ejemplo, supongamos que en el formulario
nuestra
(document.forms.datos.sistema2.checked
=
=
true){
que dependiendo de cual marque el usuario debemos enviar los datos bien a la pgina
a.jspalert('debe
o a la pgina
hacer
b.jsp.
una
Elsla
cdigo
seleccin)
necesario para ello sera:
{
else if (document.forms.datos.sistema1.checked = = true)
document.forms.datos.action = "/jsp/pag_1.jsp"
else if (document.forms.datos.sistema2.checked = = true)
document.forms.datos.action="/jsp/pag_2.jsp"
else alert ('debe hacer una seleccin')
document.forms.datos.submit()
}
</HEAD>
<BODY>
<FORM NAME="datos" ACTION="/jsp/pag_3.jsp" METHOD= "post">
<INPUT TYPE="checkbox" NAME="sistema1">Sistema 1
<INPUT TYPE="checkbox" NAME="sistema2">Sistema 2
<INPUT TYPE="button" VALUE="enviar" ONCLICK="envia( )">
</FORM>
Ing. Pablo Cesar Ttito C.
</BODY>
InfomixUnitek@gmail.com
</HTML>

Desarrollo de Aplicaciones Web con J2EE

y con esto los datos seran enviados a una u otro pgina para su proceso, y en caso de
que no se hubiera seleccionado ninguna casilla aparecera un mensaje de error. Podemos
ver este ejemplo en accin, slo que en vez de asignar un action en el servidos he
asignado a cada casilla como action una pgina HTML diferente.

METHOD: este parmetro establece el mtodo de envo 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 ms usado, o GET, que se emplea cuando
queremos pasar unos datos concretos a una pgina ASP o JSP (para ms informacin ir
al manual de formularios HTML).
Tambin podemos acceder a cambiar esta propiedad dinmicamente, pero no se suele
hacer nunca, ya que el mtodo de envo suele estar definido con toda exactitud. No
obstante, la sintaxis para acceder a esta propiedad sera:
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 botn
submit se envan los datos del formulario al servidor, en el que un programa o pgina activa
procesa los datos, generando de nuevo otra pgina que se enva al navegador cliente. En la
ventana o frame definido por el atributo target se va a cargar esta pgina 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 pgina de respuesta, e incluso
definir las posibles ventanas dinmicamente. Como ejemplo, supongamos que tenemos una
pgina inicial con dos frames: uno superior, en dnde inicialmente existe un mensaje

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

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 botn de un grupo de dos la
pgina de respuesta sea otra pgina que se carge en la ventana central, pero que si el radio
botn marcado es el segundo la respuesta sea un mensaje determinado que se muestre en
el frame superior. Para ello debemos definir primero una pgina con dos frames, en la que se
cargan la pgina del mensaje inicial arriba y el formulario abajo. El cdigo de la pgina del
formularios es el que sigue:

<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
function envia( ){
if ((document.forms.datos.sistema1.checked==true)
&&(document.forms.datos.sistema2.checked==true)) alert('debe seleccionar
una sla casilla')
else if (document.forms.datos.sistema1.checked==true) {
document.forms.datos.target="inf";
document.forms.datos.action="pagina1.html";
}
else if (document.forms.datos.sistema2.checked==true) {
document.forms.datos.action="mensaje2.html";
document.forms.datos.target="sup";
}
else alert('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="enva" ONCLICK= "envia( )">
</FORM>
</BODY>
</HTML>

y aqu podemos ver el ejemplo en accin.

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 nmero de
campos diferentes que tiene el formulario, su tipo, etc, teniendo en cuenta que el primer

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

ndice del vector es el 0, como ocurra 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:
document.forms.nombre_formulario.elements[index]
* LENGTH, que contiene el nmero 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:

<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
function campo( ) {
var f = document.forms.primero.elements[0].name;
alert('el nombre del primer campo del primer formulario es '+f);
}
function texto( ) {
var g = document.forms.segundo.elements[1].value;
alert('el texto del segundo campo del segundo formulario es '+g);
}
function cambia( ) {
document.forms[2].elements[0].value='cambiamos el texto';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="primero">
<INPUT TYPE="text" NAME="texto1" VALUE="formulario 1" SIZE="30">
</form>
<form name="segundo">
<INPUT TYPE="radio" NAME="radio2">
<INPUT TYPE="text" NAME="texto2" VALUE="formulario 2" SIZE="30">
</form>
<form name="tercero">
<INPUT TYPE="text" NAME="texto3" VALUE="formulario 3" SIZE="30"><br><br>
<INPUT TYPE="button" VALUE="nombre campo" ONCLICK="campo()">
<INPUT TYPE="button" VALUE="texto campo" ONCLICK="texto()">
<INPUT TYPE="button" VALUE="cambia texto" ONCLICK="cambia()">
</FORM>
</BODY>
EJEMPLO
EN ACCIN.
</HTML>
Como vemos en este ejemplo, tambin podemos referirnos a un formulario de nuestra pgina por medio de
su ndice en el array forms 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 pgina sin
necesidad de conocer su nombre, y podemos obtener el nmero de formularios que hay en una pgina en
concreto. La sintaxis para acceder a un formulario mediante este camino es del tipo:

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

document.forms[indice].propiedad
Y para conocer el n de formularios en la pgina deberemos escribir:
function cantidad ( ) {
var f = document.forms.length;
alert( ' el nmero de formularios de la pgina es ' + f );
document.forms[2].texto.value='cambiamos el valor del campo';
}
y esto en accin, en una pgina con 3 formularios en la que mostramos el nmero 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 dinmicamente lel tipo de codificacin.

LOS MTODOS DEL OBJETO FORM SON DOS:

SUBMIT ( ) : para enviar los datos de un formulario es necesario siempre utilizar este
mtodo, que por defecto est asociado al elemento de formulario <INPUT TYPE = "
submit " >, que es un botn que al ser pulsado llama al mtodo submit. Ahora bien, a
veces nos interesa que antes de que se produzca el envo de datos al servidor se
ejecuten una serie de acciones del lado del cliente, como pueden ser validacin de datos,
mensajes de alerta y/o confirmacin, etc. Para lograr esto podemos sustituir el botn tipo
submit por un botn tipo button que al ser pulsado llame a una funcin JavaScript que
ejecute las acciones previas al envo y una vez cumplimentadas enve los datos. Esto se
consigue llamando en la funcin al mtodo submit ( ), y el cdigo necesario tiene el
aspecto siguiente:
function previa ( ) {
...
...acciones a realizar...
...
document.forms.nombre_formulario.submit ( );
}

RESET ( ) : este mtodo 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 mtodo submit existe por
defecto un botn <INPUT TYPE = " reset " > que se encarga de realizar esta operacin,
til por ejemplo cuando el usuario se ha equivocado al rellenar los campos y desea
comenzar de nuevo el proceso. Pero tambin nos puede interesar a veces poner a cero
los campos del formulario sin que intervenga el usuario. Esto lo conseguimos llamando
dirctamente al mtodo submit ( ) o llamando a una funcin que ejecute el mtodo,
siendo el cdigo de llamada en ambos casos del tipo:
document.forms.nombre_formulario.reset ( )

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

POR LTIMO, VAMOS A VER LOS EVENTOS QUE ADMITE EL OBJETO

FORM, ALGUNOS DE LOS CUALES SON ESTNDARES 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 botn submit o mediante el mtodo submit ( ). Un
ejemplo de llamada al mtodo sera:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONSUBMIT = " alert ( ' se envan
los datos ' ) " >

ONRESET : mediante este evento podemos ejecutar una accin dada cuando el usuario
pincha el botn de borrado o cuando mediante una funcin se ha llamado al mtodo
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 tpico del objeto form, pero se puede usar con n, y
mediante l podemos ejecutar una accin concreta cuando el usuario hace click en
cualquier parte del formulario, sin necesidad de que se pulse en un campo; slo es
necesario pinchar en algn 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' ) " >

adems de estos eventos, y al igual que ocurre con onClick, el objeto form tambin
admite los eventos generales ondblClick, onmouseOver, onmouseOut, onkeyPress ,
etc, pero su uso acarrea ms problemas que beneficios, por lo que no se utilizan. Slo
saber que ests ah y que se pueden usar en casos muy especficos.

3. Acceso a las cabeceras de peticin

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com

Desarrollo de Aplicaciones Web con J2EE

Ing. Pablo Cesar Ttito C.

InfomixUnitek@gmail.com