Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comJaaaaaaaaaaaaDesarrollo de Aplicaci...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comTEMA Nº 4: GENERACIÓN DE CONTENIDOD...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.com};// construyendo forma dinamicaout...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.com2. Procesamiento de formulariosINTR...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comRecordemos que en un formulario HTM...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comy con esto los datos serían enviado...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comformularios es el que sigue:y aquí ...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comdocument.forms.nombre_formulario.el...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comfunction cantidad ( ) {var f = docu...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comONRESET : mediante este evento pode...
Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.com
Upcoming SlideShare
Loading in …5
×

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

2,386 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,386
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comJaaaaaaaaaaaaDesarrollo de Aplicaciones Web con J2EE
  2. 2. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comTEMA Nº 4: GENERACIÓN DE CONTENIDODINÁMICO CON JSP1. 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 apropiadasint clave=0;String nombre="";intedad=0;if(request.getParameter("CREAR") != null){// abriendo archivo, capturando y grabando datostry {//* 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 */ }// avisandoout.println("ARCHIVO DIRECTO CREADO");
  3. 3. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.com};// construyendo forma dinamicaout.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 ordencuando 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 tipoRANDOMACCESSFILE.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 estafunción es la unidad de disco y el nombre del archivo. El segundo parámetro o argumento es llamado modo yes una de los varios modos que podemos usar. “r” → Lectura. “w” → Escritura. “rw” → Crea para lectura yescritura y si ya existe, sobrescribe. Cuando se ha finalizado de escribir al archivo se debe cerrar y esto sehace con la instrucción: Archivo.close (); Recordar estudiar todos los métodos de la claseRANDOMACCESFILE. TAREAS PROGRAMACION JAVA JSP Crear archivos directos de alumnos, proveedores,libros, productos, películas.
  4. 4. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.com2. Procesamiento de formulariosINTRODUCCIÓNLos formularios son un componente a veces esencial en una página web, ya que permiten la interacción con el usuario, pudiendoconseguir mediante ellos recoger información particular sobre sus gustos, opiniones, datos personales, etc, información que luegodeberemos 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 quecontamos 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 estarseguros de su validez antes de ser enviados al servidor, si no que también podemos acceder a todos los elementos que forman elformulario y a sus propiedades, con lo que podemos diseñar formularios realmente atractivos y dinámicos, que convertirán nuestraspáginas en verdaderas "obras de arte". Y todo esto es posible porque en la propia definición de JavaScript existe un objetoformulario.Para aquellas personas que aún no estén muy familiarizados con los formularios les remito al Manual de formularios en HTML de estemismo sitio web.Este artículo - manual no pretende explicar todos los posibles casos de trabajo con formularios en JavaScript, ni mostrar ejemploscomplicados en exceso, que más que enseñar algo crearían confusión, si no mostrar las bases de cómo podemos manejar formularioscon este lenguaje de programación, dejando al empeño del lector el profundizar más en casos concretos.EL OBJETO FORMEl objeto form se considera en JavaScript como un subobjeto del objeto document, que a su vez forma parte del objetopredefinido 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].propiedaden 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 primerformulario 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
  5. 5. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comRecordemos 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 yunos eventos propios, que nos van a permitir acceder a cada uno de los elementos que lo forman y poder modificar su diseño ycomportamiento dinámicamente, sin necesidad de hacer nuevas peticiones al servidor, ya que todo se va a ejecutar en el ladocliente, 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 formulariocon un nombre identificador único, identificador que vamos a usar luego para poder referirnos sinambiguedades a un formulario de nuestra página en concreto y acceder a sus propiedades y métodos. Poresto, TODA ETIQUETA FORM DEBE TENER SU PROPIEDAD NAME Y NO PUEDE HABER DOS FORMULARIOS CONEL 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, suvalor va a ser una cadena que va a definir la ruta relativa o absoluta en dónde se encuentra el programa opágina activa que va a procesar los datos contenidos en los diferentes campos del formulario. Sin el uso deJavaScript esta propiedad sería estática, por lo que una vez incluida en el código inicial de la páginapermanecería inmutable. Pero mediante JavaScript podemos cambiarla, simplemente refiriéndonos a ellamediante 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áginasJSP dependiendo de uno de los datos introducido en un campo. Como ejemplo, supongamos que en elformulario de nuestra página hay dos checkbox, y que dependiendo de cual marque el usuario debemos enviarlos 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"
  6. 6. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comy con esto los datos serían enviados a una u otro página para su proceso, y en caso de que no se hubieraseleccionado ninguna casilla aparecería un mensaje de error. Podemos ver este ejemplo en acción, sólo que envez 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ásusado, o GET, que se emplea cuando queremos pasar unos datos concretos a una página ASP o JSP (para másinformació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 elmétodo de envío suele estar definido con toda exactitud. No obstante, la sintaxis para acceder a estapropiedad 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 deprocesar el formulario; es decir, cuando el usuario pincha el botón submit se envían los datos del formulario alservidor, en el que un programa o página activa procesa los datos, generando de nuevo otra página que se envía alnavegador 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 laventana 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 inicialmenteexiste un mensaje orientativo, y otro central, en el que inicialmente se encuentra el formulario que debe completarel usuario. Nos interesa que si marca el primer radio botón de un grupo de dos la página de respuesta sea otrapágina que se carge en la ventana central, pero que si el radio botón marcado es el segundo la respuesta sea unmensaje determinado que se muestre en el frame superior. Para ello debemos definir primero una página con dosframes, en la que se cargan la página del mensaje inicial arriba y el formulario abajo. El código de la página del
  7. 7. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comformularios 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. Poseedos 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(debeseleccionar 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><FORMNAME="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>
  8. 8. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comdocument.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.lengthEl 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 elarrayforms que posee cada objeto window.document, teniendo en cuenta que el primer índice es 0 . Mediante esta forma deexpresarnos podemos acceder a cualquier formulario de la página sin necesidad de conocer su nombre, y podemos obtener elnúmero de formularios que hay en una página en concreto. La sintaxis para acceder a un formulario mediante este camino es deltipo:document.forms[indice].propiedadY para conocer el nº de formularios en la página deberemos escribir:
  9. 9. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comfunction 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 textodel segundo formulario, podemos verlo en este ejemplo.ENCODING :que es un string o cadena que contiene el tipo MIME utilizado para codificar elcontenido del formulario a enviar al servidor, y que refleja el atributo ENCTYPE de la etiqueta FORMde 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 defectoestá asociado al elemento de formulario <INPUT TYPE = " submit " >, que es un botón que al ser pulsado llamaal método submit. Ahora bien, a veces nos interesa que antes de que se produzca el envío de datos al servidorse ejecuten una serie de acciones del lado del cliente, como pueden ser validación de datos, mensajes de alertay/o confirmación, etc. Para lograr esto podemos sustituir el botón tipo submit por un botón tipo button que alser pulsado llame a una función JavaScript que ejecute las acciones previas al envío y una vez cumplimentadasenvíe los datos. Esto se consigue llamando en la función al método submit ( ), y el código necesario tiene elaspecto 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 suestado 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 loscampos y desea comenzar de nuevo el proceso. Pero también nos puede interesar a veces poner a cero loscampos del formulario sin que intervenga el usuario. Esto lo conseguimos llamando diréctamente al métodosubmit ( ) o llamando a una función que ejecute el método, siendo el código de llamada en ambos casos deltipo:document.forms.nombre_formulario.reset ( )POR ÚLTIMO, VAMOS A VER LOS EVENTOS QUE ADMITE EL OBJETO FORM, ALGUNOS DE LOSCUALES 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 delformulario 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 ) " >
  10. 10. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.comONRESET : mediante este evento podemos ejecutar una acción dada cuando el usuario pincha el botón deborrado o cuando mediante una función se ha llamado al método reset. Lo podemos usar por ejemplo paralanzar un mensaje de aviso al usuario de que se van a borrar los datos. Su uso pasa por usar una sintaxis deltipo:<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 podemosejecutar una acción concreta cuando el usuario hace click en cualquier parte del formulario, sin necesidad deque se pulse en un campo; sólo es necesario pinchar en algún lugar del espacio ocupado por el formulario ensu 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 eventosgenerales ondblClick, onmouseOver, onmouseOut, onkeyPress , etc, pero su uso acarrea más problemas quebeneficios, 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
  11. 11. Desarrollo de Aplicaciones Web con J2EEIng. Pablo Cesar Ttito C.InfomixUnitek@gmail.com

×