CURSO CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB SESIÓN 5: INTRODUCCIÓN A LAS JAVA SERVER PAGES CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

(1)

Técnica Profesional en Programación de Sistemas de Información

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

CURSO CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

SESIÓN 5: INTRODUCCIÓN A LAS JAVA SERVER PAGES

(2)

Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Indicadores de Logro

1) Comprender como funcionan las Páginas Web Dinámicas en el Servidor

2) Comprender la tecnología JSP para aplicaciones que funcionan en servidores Web

(3)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Conceptos 1) Java Server Page: Tecnología que combina

HTML

con el lenguaje

Java

mediante un conjunto especial de tags, para ser ejecutadas en servidores Web

2) Java EE :

Java Enterprise Edition (Edición Empresarial de

Java)

Es una plataforma de

Java

para desarrollar y ejecutar aplicaciones empresariales las cuales se soportan en servidores

3) Java Servlet: es una clase especial de

Java

que se utiliza para ampliar las capacidades de un servidor

4) JDBC:

Java Database Connectivity (Conectividad a Bases de

Datos de Java)

Es un API de

Java

que permite acceder a bases de datos

(4)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Conceptos

4) JNDI:

Java Naming and Directory Interface (Interface de

Nombrado y Directorio Java)

API de

Java

que permite localizar en una red objetos y datos a través de un nombre

5) EJB :

Enterprise JavaBeans (JavaBeans Empresarial)

Es un API de

Java

que hace parte de la

J2EE

6) JAXP:

Java API for XML Processing (API de Java para

Procesamiento XML)

Es un API de

Java

que permite el manejo de información en formato XML

(5)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

TEMA 1: La Tecnología JSP

¿Qué son las Java Server Pages?

Es una tecnología para desarrollar páginas web que soportan contenido dinámico mediante la inserción de código Java en el HTML haciendo uso especial de los tags JSP.

Entre los objetivos principales de las páginas JSP están: • Permitir recoger información mediante formularios • Mostrar información almacenada en bases de datos • Agregar dinamismo a las páginas web

(6)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

¿Qué son las Java Server Pages?

Entre las características de las páginas JSP se tiene:

• El contenido HTML se puede manipular dinámicamente • Compilación antes de procesar la solicitud

• Acceso a toda la API Empresarial de Java (Java EE) la cual incluye JDBC, JNDI, EJB, JAXP

• Al utilizar Java, se puede utilizar en diferentes sistemas operativos

• Sólo funcionan en servidores Web mediante un servicio de publicación como Tomcat o GlassFish

(7)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

¿Cómo funcionan las Java Server Pages?

Para que puedan funcionar las JSP se necesita un servidor web con el Motor JSP que atienda las solicitudes a las páginas JSP. Dicho motor incluye tanto el ambiente de ejecución como otros servicios que requieren las JSP, como lo ilustra la siguiente gráfica:

(8)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

¿Cómo funcionan las Java Server Pages?

El servidor web procesa la página de la siguiente manera: 1) El navegador de la computadora cliente realiza una

(9)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

¿Cómo funcionan las Java Server Pages?

2) El servidor reconoce la solicitud y la reenvía al motor JSP

3) El motor JSP lee la página JSP y la convierte en contenido

Servlet donde todos los elementos JSP son convertidos en código Java

(10)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

¿Cómo funcionan las Java Server Pages?

4) Se compila el código Java generado para obtener un ejecutable .class que se envía al motor de Servlets

5) El motor de Servlets ejecuta el código compilado para generar código HTML que será enviado al cliente

(11)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

TEMA 2: Aplicación Web en Netbeans

(12)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Para crear una aplicación web en la IDE Netbeans se debe elegir el tipo de proyecto «Web Application» en la carpeta

(13)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Seguido se deben especificar el nombre del proyecto y la carpeta donde quedará alojado:

(14)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Ahora se deben especificar los parámetros del servicio de publicación Web:

• Software Servidor • Versión de Java EE

(15)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Se tendría entonces un proyecto de aplicación web con una página HTML vacía

(16)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Un aspecto fundamental que se debe tener en cuenta para poder ejecutar una aplicación web JSP

es tener disponible el servicio de publicación web. En este caso se utilizará Apache Tomcat.

Para configurarlo y administrarlo, este debe estar disponible en la ventana «Services» en el nodo

(17)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Se debe verificar si el servicio funciona. Para ello se verificarán las propiedades, haciendo clic derecho sobre el servicio y eligiendo la respectiva opción:

Permite ocultar o desocultar la clave Ubicación del programa servidor Puerto HTTP del servidor

(18)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Uno de los problemas más comunes es el puerto que utiliza el servicio de publicación.

Se debe proceder a verificar que el servicio inicia, eligiendo

Start en el menú emergente que sale al hacer clic derecho (aparece un pequeño reloj de arena al lado del servicio mientras carga)

(19)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Cuando el servicio termina de cargarse aparece el símbolo

Play al lado del nombre del servicio y se despliega una carpeta que incluye las aplicaciones Web disponibles

Proceso de la carga del servicio Aplicaciones Web

(20)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

En algunas ocasiones es necesario iniciar la IDE Netbeans con privilegios de administrador para poder ejecutar la aplicación:

(21)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Ahora para probar el funcionamiento de la aplicación web, se agregará una página JSP que nos permita dar un saludo dependiendo de la hora del sistema.

Esto también servirá de introducción a la edición de las páginas JSP.

(22)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

En primer lugar se debe agregar un elemento JSP al proyecto, más concretamente en la carpeta «Web Pages»

(23)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

(24)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Aparece una ventana para la edición del código en JSP. Nótese que inicialmente es HTML puro

(25)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Se comenzará por agregar las instrucciones que referencien los paquetes java.util y java.text necesarios para la aplicación.

Para ello, en primer lugar se debe tener en cuenta que las instrucciones se deben escribir en medio los tags JSP los cuales se definen mediante los símbolos <% … %>

Las referencias a paquetes se hacen mediante la directiva

@page y el atributo import

Incluye las clases Date y Calendar para manejar fechas

Incluye la clase DateFormat para dar formato a las fechas

(26)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Se agregarán ahora las instrucciones para declarar las variables que permitirán manipular la fecha y hora actual (la del sistema). Se utilizará un objeto de la clase Date para obtener la fecha y otro de la clase Calendar para obtener la hora a partir de la fecha.

(27)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Se obtiene el valor de la hora del día mediante el método get()

(28)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

A continuación sigue la parte que definirá el contenido dinámico de la página. Se trata de mostrar un saludo que dependerá de la hora del día:

• Desde las 0 horas hasta el mediodía (12 horas), se saludará

«Buenos Días»

• Desde las 12 horas hasta las 18, se saludará «Buenas Tardes»

• Desde las 18 horas y hasta las 24, se saludará «Buenas Noches»

Se inicia una instrucción condicional que verifica si son horas de la mañana. Se termina el tag JSP y se escribe el respectivo texto

(29)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Después se inicia otro tag JSP para finalizar el bloque afirmativo del condicional y continuar con la lógica del problema, en este caso otro condicional anidado que verifica si son las horas de la tarde.

Se cierra de nuevo el tag JSP para colocar el texto HTML

(30)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Después se inicia otro tag JSP para finalizar el bloque afirmativo del segundo condicional e iniciar el bloque negativo, el cual corresponde a las horas de la noche (las horas que le restan al día). Se cierra de nuevo el tag JSP para colocar el texto HTML respectivo. Después de este, irá otra tag JSP cerrando la instrucción condicional.

(31)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Aplicaciones Web en la IDE Netbeans

Ahora se puede ver funcionar la página ejecutándola desde el servidor web mediante el navegador

(32)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios TEMA 3: Configurando el

proyecto Web

Configurando el proyecto Web

Un proyecto Web básico lo componen las siguientes clases de archivos: • Páginas HTML • Imágenes • Hojas de Estilos CSS • Scripts de Javascript • Imágenes • Páginas de Servidor JSP

(33)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios TEMA 3: Configurando el

proyecto Web

¿Cómo se agregan carpetas?

Es aconsejable crear carpetas como mínimo para los siguientes tipos de archivos:

• Hojas de estilos CSS

• Imágenes

(34)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios TEMA 3: Configurando la

aplicación

¿Cómo se agrega una imagen?

Para agregar una imagen al proyecto basta con copiarla mediante el

Explorador de Windows y luego pegarla en la carpeta respectiva

(35)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

¿Cómo se agrega una hoja de estilos CSS?

Buscando que las páginas del proyecto tengan uniformidad, se deben crear hojas de estilos CSS. Para ello se hace clic derecho en la carpeta respectiva y se eligen las opciones

(36)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Luego en la carpeta Other del cuadro de diálogo que aparece se elige la opción «Cascading Style Sheet»

(37)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Por último se debe especificar el nombre del archivo y finalizar

(38)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

El primer estilo que se editará será aplicar una imagen de fondo a la ventana que la cubra toda

(39)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Para poder aplicar el estilo a la página «index.html» se debe agregar el respectivo tag

(40)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

(41)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Identificando visualmente la aplicación

Se agregará un elemento al formulario que visualmente identificará la aplicación (a especie de título).

Para ello se agregará en el cuerpo de la página una etiqueta

<div>...</div> con el respectivo texto.

Se debe observar la manera como se especifican las tildes (

(42)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Identificando visualmente la aplicación

Y para lograr el efecto visual, se agregará un estilo con el nombre del elemento <DIV>…</DIV> #Aviso

(43)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Cuya ejecución luciría así:

(44)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Un menú para la aplicación

Para cargar las diferentes páginas JSP que compondrán la aplicación se creará un menú utilizando los siguientes tags: • <nav>…</nav> que define una sección de la página que

contiene vínculos a otras páginas • <ul>…</ul> que define una lista

• <il>…</il> que define un elemento de lista • <a>…</a> que define un vínculo

(45)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

(46)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Se debe agregar un nuevo archivo de estilos para darle un mejor aspecto al diseño que se denominará “Estilos Menu.css”

(47)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Se definirán los estilos para los elementos <nav>…</nav> y

(48)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Y también para los elementos <li>…</li> y <a>…</a>

incluso cuando el puntero del ratón paso por encima de los vínculos

(49)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Cuya ejecución luciría así:

(50)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

aplicación

Ahora se debe establecer cual es la página inicial del proyecto. Esto se realiza mediante la ventana de propiedades del proyecto en el nodo «Run» en el ítem «Relative URL»

(51)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

TEMA 4: Accediendo datos

Se implementará a continuación la página JSP que permitirá administrar los datos de la tabla Continente y que corresponden a la página que se denominará

“Continentes.jsp”:

(52)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Para poder acceder a la información almacenada en una base de datos desde una página JSP, es necesario primero comprender la tecnología que el lenguaje Java tiene para este propósito.

Java ofrece la API JDBC (Java Database Connectivity) especializada en acceder bases de datos relacionales a través de las siguientes clases de operaciones:

1. Conectarse a fuentes de datos como lo son las bases de datos (Una hoja de cálculo o un archivo XML también puede ser fuente de datos)

(53)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

2. Enviar consultas y actualizaciones a las fuentes de datos

(54)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

3. Recuperar y procesar los resultados obtenidos tras la ejecución de una consulta (instrucción SELECT)

(55)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

El modelo de objetos típico para realizar una consulta

SQL a una base de datos relacional en Java se ilustra a continuación, donde se observa una estrecha relación entre ellos, y que se verá reflejada en el código

(56)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Los siguientes serían los pasos típicos para una aplicación JSP

que accede bases de datos:

1) Se debe referenciar el paquete correspondiente a la API Modelo de objetos para acceder datos en Java

(57)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

2) Cargar el Driver (Controlador) respectivo del motor de base de datos (en este caso Oracle) mediante la clase

DriverManager (Administrador de Controladores)

(58)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Para el siguiente paso es importante tener en cuenta que se debió haber configurado con anterioridad la conexión a la base de datos:

(59)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

3) Establecer la conexión con la base de datos. Para ello se instancia un objeto de la clase Connection a partir del

DriverManager. Se deben especificar la cadena de conexión

y las credenciales de seguridad (usuario y clave)

(60)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

4) Instanciar el objeto para realizar consultas a la base de datos. Este es de la clase Statement y se crea a partir del objeto Connection creado en el paso anterior

(61)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

5) Definir la cadena de consulta, un texto con la instrucción

SQL que se va a ejecutar en la base de datos. Generalmente se guarda en una variable de tipo String

(62)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

6) Ahora se solicita al servidor ejecutar la consulta mediante el método executeQuery() del objeto de la clase Statement. Se le pasa como parámetro la cadena de consulta. Como la instrucción es un SELECT de SQL se debe esperar como resultado una lista de registros. Para ello se utiliza un objeto de la clase ResultSet

(63)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Con los resultados de la consulta SQL Select en memoria (almacenados en el objeto ResulSet) se debe proceder a realizar algún proceso con ellos.

En este caso se construirá un formulario que permita seleccionar algún elemento de la lista.

Esta acción de seleccionar permitirá luego poder modificar o eliminar el registro.

(64)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Una configuración adicional que debe hacerse en el proyecto es cargar la librería del controlador de Oracle.

Para ello se debe hacer clic derecho en el nombre del proyecto y seleccionar «Properties» en el menú emergente que se despliega.

(65)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

En el cuadro de diálogo que sale se elige el nodo

«Libraries» y se hace clic en botón «Add JAR/Folder»

para seleccionar el archivo que contiene el driver

(66)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Una vez encontrado el archivo .jar correspondiente al controlador del motor de base de datos, se hace clic en el botón «Open» para agregarlo al proyecto

(67)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

TEMA 5: Formularios

Un formulario JSP es la agrupación de objetos de entrada de datos (Generalmente codificados mediante tags <input>) que permiten enviar información al servidor.

Se definen mediante las etiquetas <form></form> dentro de las cuales debe ir como mínimo una etiqueta <input type="submit"> la cual corresponde a un botón que activa el envío de la información al servidor

(68)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Un formulario establece una interacción entre el cliente y el servidor a través del envío de la información contenida en los elementos contenidos

(69)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Para comprender dicho funcionamiento y continuando con el ejercicio, se procederá a construir un formulario con el resultado de la consulta obtenido en el proceso anterior.

El formulario consistirá en una lista formada por los registros obtenidos, en la cual se podrá seleccionar sólo uno de ellas, para permitir al usuario modificarlo o eliminarlo. También se permitirá agregar un nuevo elemento a la lista.

(70)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

El formulario tendría una apariencia como la siguiente:

(71)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

El código del formulario irá después de haber obtenido el resultado de la consulta. Para efectos de su presentación, el formulario irá en medio de una etiqueta <DIV>…</DIV> a la cual se le aplicará un estilo CSS.

Es importante observar los siguientes parámetros de la etiqueta <FORM>:

• action corresponde a la página JSP que responderá en el servidor (ContinentesResponse.jsp)

• method="POST" significa que la información será enviada en el cuerpo del mensaje (no en el URL)

Formularios en JSP

Código HTML para el formulario

(72)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Seguido se pondrá el título del formulario.

A continuación, se pondrá una tabla que mostrará los datos almacenados en los registros, siempre y cuando la consulta arroje resultados (el ResultSet no puede ser nulo). La tabla tendrá 2 columnas, una para el elemento seleccionador (botones de radio) y otra para la información.

Código HTML para la tabla Código HTML para

(73)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Las filas de la tabla de la tabla serán llenadas con los registros de la consulta. Para efectos de una mejor visualización, se aplicarán estilos alternos a las filas.

El contenido de los registros se obtiene con el método

getString() el cual pide como parámetro el nombre del campo.

Código JSP que recorre el ResultSet

Código HTML que define una fila de la

tabla

Código JSP que lee el valor de un campo

(74)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Los siguientes serían los estilos necesarios para el área de despliegue del formulario:

(75)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Y estos serían los estilos para la tabla donde se mostrarán los datos:

(76)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Este sería el aspecto que tendría el formulario hasta el momento Formularios en JSP Información contenida en los registros Estilos alternos de las filas

(77)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Ahora se agregarán los elementos del formulario que permitirán manipular la información y ejecutar las operaciones. En primer lugar se pondrán botones de radio en la columna que aun esta vacía en la tabla, los cuales permitirán seleccionar un registro ha actualizar

Código JSP que obtiene la clave primaria del registro

Código HTML que define el botón de

(78)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Ahora el aspecto que tendría el formulario sería el siguiente:

Botones de radio que permiten seleccionar un

(79)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Ahora se deben agregar los botones de comando que activarán las operaciones del CRUD y uno adicional para retornar al menú principal. Todos estarán bajo el mismo grupo «operación» y todos son «submit», lo cual significa que hacen solicitud al servidor.

Se definen estilos CSS para cada botón (atributo class).

Código HTML que define los botones

(80)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Estos serían los estilos para cada uno de los botones (Obsérvese que cada uno carga una imagen desde la carpeta de imágenes)

(81)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

El nuevo aspecto que tendría el formulario sería el siguiente:

Botones de comando que permiten activar una operación en el

(82)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Ahora se debe editar la página

JSP que responde al formulario, la cual se denominará

ContinentesResponse.jsp Formularios en JSP

(83)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Esta nueva página JSP responderá a todos los botones del anterior formulario, y su vez creará nuevos formularios que permitirán editar un registro nuevo o uno existente.

(84)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

En primer lugar se cambiará el título de página, se agregará el vínculo a la página de estilos y los delimitadores de código JSP. Dentro de este código se preguntará por el parámetro que defina la operación a efectuarse:

Instrucción que pregunta por el parámetro

(85)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

De momento se diseñará el formulario que permita editar el registro de un continente, ya sea que se esté agregando o modificando. A este formulario le responderá la página

«ContinentesActualizar.jsp».

(86)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Como se pudo observar en el código anterior, será una tabla con un encabezado, una fila donde se lee el único dato del registro y una fila con 2 botones para aceptar o cancelar la operación

(87)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Los estilos que se aplican a la tabla serían los siguientes:

(88)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Y los de los botones:

(89)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Para poder editar un registro existente (operación de

modificar), se hacen los siguientes cambios: • Agregar referencia al paquete java.sql

• Declarar las variables para almacenar los valores de los campos a editar (si se esta agregando, sus valores son vacíos)

• Guardar en una variable session la clave primaria del registro a modificar (si se esta agregando su valor es -1) • Declarar e iniciar los objetos para acceder y consultar la

base de datos

• Declarar la cadena de consulta y ejecutarla. Con su resultado iniciar los valores de los campos

• Asignar los valores de los campos a los respectivos elementos de la interface de usuario mediante los cuales serán leídos (cajas de texto)

(90)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Este sería el código respectivo, con los cambios propuestos:

Variable session que almacenará la clave

(91)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Iniciar el valor del campo cuando se está

modificando

Consulta del registro que se está modificando

(92)

CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB

TEMA 5: Formularios

Valor del campo editado Captura de posibles

errores en la consulta a la base de datos