JAVA III

JAVA III
 PRESENTACIÓN

Las aplicaciones web son muy útiles en la vida moderna. Se

utilizan constantemente en las computadoras y en los dispositivos
móviles para llevar a cabo diversos tipos de negocios y para
acceder a una gran variedad de servicios. Es por esto que la
industria del software necesita desarrolladores web y ofrece
empleos relativamente bien remunerados.
La elaboración, análisis, diseño y codificación de una aplicación
informática con acceso a base de datos, conlleva un gran
esfuerzo por parte del estudiante, porque debe poner en práctica
distintos conocimientos, y también adquirir nuevos. Tomando en
cuenta esto una aplicación web se puede construir en diversos
lenguajes y tecnologías, que para los principiantes es difícil llevar
la secuencia de que temas deben ir aprendiendo primero.
En este módulo de aprendizaje se ha seleccionado el lenguaje
Java, juntos con las tecnologías JSP – SERVLETS y una parte
introductoria al framework JavaServer Faces. Se ha seleccionado
esta secuencia para lograr un mejor proceso de aprendizaje
Además, se ha considerado a JavaServer Faces por ser uno de
los framework más utilizados en el desarrollo de software
actualmente.
En la primera parte de este curso veremos temas iniciales, como
java y html, luego veremos las estructuras de implementación de
un patrón de diseño Modelo – Vista – Controlador mediante JSP,
Servlet y clases Java.
Luego mediante un ejemplo veremos una implementación del
modelo MVC, para luego finalmente llegar a hacer una
introducción al Framework JavaServer Faces.
 CONTENIDO

1. Aplicación WEB ................................ ................................ ................................ ................... 6

1.1. ¿Qué es una Aplicación WEB? ................................ ................................ ..................... 6
1.2. ¿Qué es una JSP? ................................ ................................ ................................ .......... 6
1.3. ¿Qué es un Servlet? ................................ ................................ ................................ ....... 6
1.4. Arquitectura MVC (Modelo Vista Controlador) ................................ ........................... 8
1.5. Frameworks ................................ ................................ ................................ ...................... 8
1.6. Configuración de Entorno de Trabajo ................................ ................................ .......... 9
1.6 Lenguaje JAVA Y NETBEANS ................................ ................................ .................... 11
1.6.1. ¿Qué es NetBeans? ................................ ................................ ................................ .11
1.6.2. Instalación de NetBeans ................................ ................................ .......................... 11
1.6.3. Requisi tos de Instalación ................................ ................................ ......................... 11
1.7. Modos de Uso de NetBeans ................................ ................................ ........................ 11
1.7.1. Vistas y Paneles ................................ ................................ ................................ ........11
1.8. Atajos: ................................ ................................ ................................ ............................. 16
2. Estructura de una Página HTML ................................ ................................ ..................... 20
2.1. Desplegando una página web HTML. ................................ ................................ ........20
2.2. Principales Tags de HTML ................................ ................................ ........................... 21
2.2.1. Etiquetas para Campo Texto ................................ ................................ ................... 22
2.2.2. Etiquetas para hacer una tabla ................................ ................................ ............... 23
2.2.3. Etiquetas para incluir imágenes ................................ ................................ .............. 25
2.3. Formularios ................................ ................................ ................................ ..................... 26
2.3.1. Etiqueta input usado en formularios ................................ ................................ .......26
2.3.2. Los controles del formulario ................................ ................................ ..................... 27
2.3.2.1. Botones ................................ ................................ ................................ ................... 27
2.3.2.2. Radio-botón (radio button) ................................ ................................ ................... 28
2.3.2.3. Lista de Opciones. ................................ ................................ ................................ .29
3. Paso de parámetros entre páginas web. ................................ ................................ .......31
3.1. Transición de una página a otra (Enlace) ................................ ................................ ..31
3.2. Petición de una JSP con el método GET ................................ ................................ ..32
3.2 La petición de una JSP con el método POST ................................ .......................... 32
3.3 Scriptlets y expresiones en un JSP ................................ ................................ ............ 32
3.4 Etiquetas de una Página JSP ................................ ................................ ...................... 34
3.5 Recepción de los valores de radio -button y checkbox ................................ ............ 35
 CONTENIDO

3.6 Recepción de Combo -box, List -box ................................ ................................ ........... 37

4 Conceptos Básicos ................................ ................................ ................................ ........... 40
4.2.1 Los hilos (t hreads) en una página JSP ................................ ................................ ..40
4.2.2 Ruta real para acceder a archivos ................................ ................................ ..........41
4.3. Procesamiento de los datos de JSP con una clase Java ................................ .......42
4.3.1. Cálculos con una clase Java ................................ ................................ ................... 42
5. Modelo Vista Controlador con JSP, SERVLET Y CLASE JAVA ............................... 46
5.1. Servlets y métodos ................................ ................................ ................................ ........46
5.2. Paso de información de una JSP a un Servlet ................................ ......................... 46
5.3. Paso de información de un Servlet a una JSP ................................ ......................... 48
5.3.1. Transferencia de control con el object request ................................ ..................... 48
5.4. Comunicación entre Servlet y Clase Java. ................................ ................................ 50
6. Conexión a una Base de Datos ................................ ................................ ...................... 56
6.1. Archivo Conector ................................ ................................ ................................ ........... 56
6.2. Configurand o el ambiente de trabajo ................................ ................................ .........56
6.3. Código de conector ................................ ................................ ................................ .......58
6.4. Acceso a Archivos Texto ................................ ................................ .............................. 58
6.5. Escribiendo Datos en una tabla ................................ ................................ .................. 59
6.6. Acceso a Procedimientos Almacenados ................................ ................................ ...61
7. Aplicación Web Login con MVC. ................................ ................................ ..................... 65
7.1. Lógica del proyecto ................................ ................................ ................................ .......65
7.1.1. Index ................................ ................................ ................................ ............................ 66
7.1.2. Clase Usuario ................................ ................................ ................................ ............. 66
7.1.3. El acceso a base de datos ................................ ................................ ....................... 67
7.1.4. Realizando el Registro ................................ ................................ ............................. 67
7.1.5. Servlet Registro Java ................................ ................................ ................................ 68
7.1.6. Clase Java para Gestor de Base de Datos GestorBD.java ................................ 69
7.1.7. La página RegistroGuardado.jsp ................................ ................................ ............ 70
7.1.8. La entrada al sistema; servlet Login.java ................................ .............................. 71
7.1.9. Página Llenar Registro. ................................ ................................ ............................ 71
7.1.10. Borrar un Registro ................................ ................................ ................................ .72
7.1.11. Mostrar todos los usuarios registrados ................................ .............................. 74
8. Datos Adi cionales de Páginas Web con JSP ................................ ............................... 77
 CONTENIDO

8.1. Sesiones ................................ ................................ ................................ ......................... 77

8.2. Validaciones ................................ ................................ ................................ ................... 78
8.3. Introducción a JavaBeans ................................ ................................ ............................ 79
8.4. Secuencias de Escape ................................ ................................ ................................ .80
9. JavaServer Faces. ................................ ................................ ................................ ............ 82
9.1. Etiqueta Libraries ................................ ................................ ................................ ........... 83
9.2. Modelo – Vista – Controlador con Java Server Faces ................................ ............. 83
9.3. Java y la tecnología XML ................................ ................................ ............................. 84
9.4. XHTML ................................ ................................ ................................ ............................ 85
9.5. JavaBeans Administrado ................................ ................................ ............................. 85
9.6. Objetos JavaBeans ................................ ................................ ................................ .......85
9.7. Etiquetas JavaServerFaces ................................ ................................ ......................... 86
9.8. Enlace de Páginas Web ................................ ................................ ............................... 87
9.9. Navegación de JSF: Estática y Dinámic a................................ ................................ ..89
9.10. Flujo de una Página Web hacia un Bean ................................ .............................. 89
9.11. Flujo desde una clase Java hacia una página Web ................................ ............ 89
9.12. Elementos básicos de una interfaces en JSF ................................ ....................... 89
9.13. Enlaces, campos de captura, y texto ................................ ................................ .....90
9.14. Objet os para hacer una selección ................................ ................................ .......... 90
9.15. Primer Proyecto en JSF ................................ ................................ ........................... 92
9.16. Organización de proyectos implementando MVC ................................ ................ 93
9.17. Ejecutando Página de Inicio ................................ ................................ .................... 94
9.18. Aplicación con Manager Bean ................................ ................................ ................. 95
9.19. Página index.xhtml ................................ ................................ ................................ ....96
9.20. Desplegando Elementos de interfaz de usuario ................................ ................... 96
9.21. Desplegando muestraElementosInterfaz.xhtml ................................ .................... 97
9.22. Desplegando muestraElementosInterfaz.xhtml ................................ .................... 98
9.23. Captura de Datos de Usuario ................................ ................................ .................. 99
9.24. Estructura de u n proyecto MVC ............................................................................... 100
 APLICACIÓN WEB
1. Aplicación WEB

1.1. ¿Qué es una Aplicación WEB?

Una aplicación Web es un grupo de páginas que funcionan en internet, estas
páginas son las que el usuario visualiza a través de un navegador de internet
(Internet Explorer, Chrome, Firefox, etc.) y están programadas en un lenguaje
especial. Existen diferentes tipos de páginas Web: HTML, JSPs, XML… En
este manual trabajaremos con las JavaServer Pages (JSPs). Las páginas
JSP se ejecutan en máquina virtual de Java, el resultado de la ejecución es
código HTML listo para correr en el navegador. Las JSP constituyen la interfaz
de la aplicación con el usuario.
Las aplicaciones Web se guardan en un servidor, el cual es una computadora
que se encarga de que éstas sean accesibles a través de internet. Una
aplicación Web corre en un servidor sobre un software especial, al cual se le
llama también servidor. Para evitar confusiones es importante aclarar que el
software servidor corre en una computadora servidor.

1.2. ¿Qué es una JSP?

Una página JSP por su acrónimo en inglés JavaServer Page es una página
HTML a la que se le inserta código Java. El código Java se incrusta entre los
siguientes indicadores <% y %>.
JSP es similar a PHP, pero usa el lenguaje de programación Java. Para
desplegar y correr JavaServer Pages, se requiere un servidor web compatible
con contenedores servlet como Apache Tomcat o Jetty.

1.3. ¿Qué es un Servlet?

Un servlet es una clase Java (hija de la clase HttpServlet) y corre en el
servidor. Su nombre proviene de la palabra applet. Antes se utilizaban los

CORPORACIÓN EDUCATIVA ISAG |7

 applets, que eran pequeños programas, escritos en Java, que corrían en
el contexto del navegador del cliente, pero, desde que Internet Explorer
suspendió su soporte, los servlets han substituido a los applets, sólo que
los servlets no contienen una interfaz gráfica específica.

Un servlet da servicio a las peticiones de un navegador, es decir, recibe la

petición, la procesa y devuelve la respuesta al navegador. Un servlet es
una clase Java en la que se puede incrustar código HTML. Como los
servlets están codificados en Java, son tan portables como una aplicación
Java, por lo cual pueden funcionar sin necesidad de cambios en
diferentes servidores.

public class PrimerServlet extends HttpServlet {

// Escribe una página Web simple
public void doGet (HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
PrintWriter out;
String title = "Este es un servlet";
response.setContentType("text/html"); // Regresa texto y html
out = response.getWriter();
// Este código se escriben los datos de la respuesta
out.println("<HTML><HEAD><TITLE>");
out.println(title);
out.println("</TITLE></HEAD><BODY>");
out.println("<H1>" + title + "</H1>");
out.println("<P>Este es un servlet sencillo.");
out.println("</BODY></HTML>");
out.close();
}

}Como ejemplo, se presenta un código de un servlet sencillo, el cual genera

como respuesta una página HTML que despliega un breve mensaje.
El objeto request se utiliza para leer datos que están en los formularios que se
envían en el navegador. El objeto response especifica los códigos y
contenidos de la respuesta.
Un servlet puede generar su resultado consultando a una base de datos,
invocando a otra aplicación o computando directamente la respuesta.
También se emplea para dar formato al resultado generando una página
HTML, y enviar al cliente un código ejecutable.

8 | CORPORACIÓN EDUCATIVA ISAG

1.1. Arquitectura MVC (Modelo Vista Controlador)
La arquitectura Modelo-Vista-Controlador (MVC), es un patrón que organiza
la aplicación
en tres partes independientes:
- La vista: Son los módulos SW involucrados en la interfaz con el
usuario, por ejemplo, las páginas de internet que se despliegan en la
computadora del usuario.
- El controlador: Es el software que procesa las peticiones del usuario.
Decide qué modulo tendrá el control para que ejecute la siguiente
tarea.
- El modelo: Contiene el núcleo de la funcionalidad, es decir, ejecuta la
“lógica del negocio”. Se le llama lógica del negocio a la forma en la que
se procesa la información para generar los resultados esperados. El
modelo se conecta a la base de datos para guardar y recuperar
información.

En este manual, se separarán la vista (mediante páginas JSP) y el

procesamiento de los datos (mediante los servlets), sin embargo, en
aplicaciones Web de mayor procesamiento de datos se utilizará el patrón
MVC, la vista la implementaremos con páginas JSP, el controlador con
servlets y el modelo con clases Java.

1.2. Frameworks
Un framework se traduce al español como marco de trabajo, y es como un
esqueleto para el desarrollo de una página web. Los frameworks definen la
estructura de la aplicación, es decir, la manera en la que se organizan los
archivos e, inclusive, los nombres de algunos de los archivos y las
convenciones de programación.
Como el framework proporciona el esqueleto que hay que rellenar, con lo cual
el programador ya no se preocupa de diseñar la estructura global de la
aplicación.

CORPORACIÓN EDUCATIVA ISAG |9

La mayoría de los framework para el Desarrollo Web, implementan el patron
MVC, con algunas variants, entre los principals frameworks temenos:
- JavaServer Faces
- Struts
- Spring Web MVC
- Struts
- Spring Web MVC

1.3. Configuración de Entorno de Trabajo

Haremos uso del entorno de desarrollo NetBeans, con el cual los
programadores pueden escribir, compilar, depurar y ejecutar programas, para
ello entraremos al siguiente enlace para descargar el instalador:
https://netbeans.org/downloads/8.2/
Para poder instalar NetBeans es necesario tener instalado previamente el
JDK (JavaDevelopment Kit), ya que sin este no se logra la ejecución de
NetBeans.
Cuando se ejecuta NetBeans, se recomienda seleccionar los dos servidores
Apache Tomcat y Glassfish, que son con los que trabaja NetBeans, en el
botón customize.

10 | CORPORACIÓN EDUCATIVA ISAG

Finalizamos la instalación.

CORPORACIÓN EDUCATIVA ISAG | 11

1.6 Lenguaje JAVA Y NETBEANS

1.6.1. ¿Qué es NetBeans?

NetBeans en un IDE de desarrollo que se utiliza para programar en diferentes
lenguajes de programación, como son Java, PHP, C y C++, además nos
brinda una importante cantidad de herramientas extras, destinados a
aumentar sus funcionalidades y así ampliar las posibilidades que nos da este
gran entorno de desarrollo.
NetBeans IDE es un software libre y gratuito, lo cual permite utilizarlo sin
ninguna restricción, además de ello lo podemos adaptar de acuerdo a
nuestras necesidades.

1.6.2. Instalación de NetBeans

Actualmente se cuenta con la versión 8.2 la cual nos ofrece novedades frente
a las anteriores versiones, sobre todo en la facilidad de uso y la introducción
de servicios en la nube, repositorios nuevos.

1.6.3. Requisitos de Instalación

NetBeans posee un instalador y sencillo de seguir, lo que tenemos que tener
preinstalado antes de comenzar nuestra instalación es el JDK y JRE (Java
Develpor Kit, y Java Runtime Environment) preferible en sus últimas
versiones.
Los requisitos de instalación son los siguientes:
· Procesador 2.6 Ghz Intel Pentium o mayor
· Memoria de 2GB
· Espacio en el disco duro de 1 GB

1.7. Modos de Uso de NetBeans

Veamos las principales partes del entorno de desarrollo NetBeans:

1.7.1. Vistas y Paneles

En NetBeans se cuenta con varias vistas y paneles que nos proporciona
un entorno amigable y completo, que podemos personalizar de acuerdo a
nuestras necesidades

12 | CORPORACIÓN EDUCATIVA ISAG

Panel de Proyectos:
Panel donde se muestran la
lista de proyectos
desarrollados.

-P a n e l d e A r c h i v o s :
Panel donde nos muestra
la ubicación en el disco
duro del proyecto.

Panel de Servicios:
Panel que muestra servicios
de apoyo para el desarrollo
de nuestros proyectos
informáticos.

CORPORACIÓN EDUCATIVA ISAG | 13

 Menú Archivo (File):
Tiene las opciones
que permiten crear,
a b r i r, i m p o r t a r y
exportar proyectos.

· Menú Editar (Edit):

Permite realizar
funciones de
edición o búsqueda
dentro del código

14 | CORPORACIÓN EDUCATIVA ISAG

 · Menú Ver (View):
Contiene las
opciones que
permiten modificar
el entorno de
trabajo.

· Menú Navegar
(Navigate): Este
menpu nos
permite navegar
en el código para
buscar alguna
parte de lo
escrito.

CORPORACIÓN EDUCATIVA ISAG | 15

 · Menú Source:
Nos permite a
modificar o
agregar código
de forma simple,
como es el
alienamiento de
código, o enlazar
referencias
automáticas de
paquetes.

Menú Reestructurara
(Refactor): Nos permite
realizar funciones como
cambiar de nombre, mover
carpetas, eliminar, etc.

16 | CORPORACIÓN EDUCATIVA ISAG

 · Menú Ejecutar (Run):
En este menú se
maneja el modo
normal o debug, para
la ejecución de la
aplicación, también
posee opciones para
la reconstrucción del
código en caso sea
necesario.

· M e n ú
Herramienta
s ( To o l s ) :
Encontramos
m u c h o s
servicios que
pueden ser
utilizados en
n u e s t r o
código.

CORPORACIÓN EDUCATIVA ISAG | 17

1.8. Atajos:
NetBeans nos ofrece la capacidad de ingresar código mediante
atajos, que sirven de alguna manera para escribir nuestro código,
generando así líneas de código ya conocidas en Java.

A continuación, se muestra una lista de atajos que pueden ser

utilizados, estas se ingresan escribiendo el atajo y presionando la
tecla Tab <tab>.

18 | CORPORACIÓN EDUCATIVA ISAG

 CUESTIONARIO

1. ¿Qué software se emplea para la realización de paginas web?

_________________________________________________
_________________________________________________
_________________________________________________

2. ¿Cuáles son los requisitos para la instalación de Netbeans?

_________________________________________________
_________________________________________________
_________________________________________________

3. ¿Mencione los principales atajos en java?

_________________________________________________
_________________________________________________
_________________________________________________

4. ¿Defina la arquitectura MVC ?

_________________________________________________
_________________________________________________
_________________________________________________

5. ¿Defina que es un SERVLET?

_________________________________________________
_________________________________________________
_________________________________________________

6. ¿Defina que es un JSP?

_________________________________________________
_________________________________________________
_________________________________________________

CORPORACIÓN EDUCATIVA ISAG | 19

 CUESTIONARIO

7. ¿Qué es un FRAMEWOR?

________________________________________________
________________________________________________
________________________________________________

8. ¿Cuáles son los principales Frameworks utilizados?

________________________________________________
________________________________________________
________________________________________________

9. ¿Qué es una aplicación Web?

________________________________________________
________________________________________________
________________________________________________

10. Investigue acerca de las variables de entorno globales.

___________________________________________________
________________________________________________
________________________________________________

20 | CORPORACIÓN EDUCATIVA ISAG

 HTML
2. Estructura de una Página HTML
HTML es el acrónimo de las siglas del inglés: HyperText Markup Language
(lenguaje de marcas de hipertexto). Los navegadores de internet están
preparados para poder interpretar los comandos de HTML y desplegar la
información en forma de una página de internet con texto e imágenes.
El HTML esta definido por TAGS, que son los comandos, estos comienzan
con el carácter < y terminan con el carácter >, La información del tag va en
medio de los dos caracteres. Los navegadores se encargan de interpretar y
dar forma a las paginas de internet. A continuación, se muestra la estructura
general de HTML.

1.1. Desplegando una página web HTML.

Las paginas HTML se pueden escribir en cualquier editor de documentos de
textos, ya sea NotePad, Word, etc.), pero también existen software
especializado para la elaboración de aplicativos Web, en este curso vamos a
utilizar el software NETBEANS (IDE: Integrated Development Enviroment).
Para crear un nuevo proyecto se debe dar clic en Archivo > Nuevo Proyecto >
Java Web

CORPORACIÓN EDUCATIVA ISAG | 21

Para hacer que la pagina HTML se ejecute en el navegador es necesario
elegir la opción “EJECUTAR MAIN PROJECT”, en la barre de
herramientas del menú o con el icono verde de Play

1.1. Principales Tags de HTML

Los tags son los comandos en HTML, a continuación, se hace un listado de la
mayoría de los tags de las páginas web.

22 | CORPORACIÓN EDUCATIVA ISAG

1.1.1. Etiquetas para Campo Texto
Las etiquetas de texto se emplean para poder capturar información del usuario. Estos
campos están definidos por la etiqueta <input>, la cual posee atributos, dentro de los
cuales tenemos a type. Cuando escribimos el atributo type = “text” indica que los
caracteres que va a introducir el usuaro se muestra dentro del campo, por el contrario,
si indicamos el atributo type = “password”, en lugar de los caracteres se va a
mostrar puntos o asteriscos. Ademas también podemos asignarle a type = “hidden”,
que permite guardar un campo que no se despliega en la página. Así tenemos el
siguiente ejemplo:

Con lo cual se nos mostraría:

Con el atributo value indicamos el valor predeterminado del campo de texto,

con el siguiente código de ejemplo veamos lo que se mostraría cuando
asignamos el atributo un valor predeterminado:

CORPORACIÓN EDUCATIVA ISAG | 23

 Se mostraría lo siguiente:

2.2.2. Etiquetas para hacer una tabla

Las etiquetas para construir tablas la resumiremos en la siguiente tabla,
recuerde que cada etiqueta tiene uno o varios atributos, en la tabla también se
van a mostrar sus propiedades:

En el siguiente ejemplo se va a mostrar el código de una tabla con tres

columnas y cuatro filas, del cual la primera fila será el encabezado de la tabla:

24 | CORPORACIÓN EDUCATIVA ISAG

Con lo cual quedaría de la siguiente manera:

1.1.1. Etiquetas para incluir imágenes

Las imágenes son elementos que se pueden incluir dentro de las páginas
web, en la siguiente tabla se especifican los principales atributos de la
etiqueta <img>:

CORPORACIÓN EDUCATIVA ISAG | 25

La siguiente imagen se muestra como quedaría una página html con inserción
de una imagen:

Para el navegador pueda mostrar la anterior imagen, se utilizará el siguiente

código:

2.3. Formularios
Los formularios web, se utilizan para cifrar los datos del usuario, así pueden
viajar del cliente al servidor de manera más segura. Un formulario puede
contener por lo menos un botón, el cual se emplea de control, ya que cuando
el usuario pulsa el botón se realiza el envío de datos hacia una página
indicada.
En la siguiente tabla se resumen las principales etiquetas que componen un
formulario:

26 | CORPORACIÓN EDUCATIVA ISAG

2.3.1. Etiqueta input usado en formularios
Dentro del formulario la etiqueta <input>, se usa para definir los campos que
se van a obtener, es decir que información capturamos, también se emplea
para definir los controles del formulario, en la siguiente tabla se muestra los
atributos de la etiqueta mencionada:

2.3.2. Los controles del formulario

Los controles sirven para recolectar información proporcionada por el
usuario, y así enviarla al destino indicado por el atributo action. Existen
distinto tipos de controles, en esta sección detallaremos a controles: botones,
check-box, combo-box, list-box y áreas de texto.

2.3.2.1. Botones
El funcionamiento de un formulario se da mediante este elemento, si el botón
no se podrían enviar los datos capturados. Dentro de estos tenemos los
siguientes tipos:

- Botón de envío (submit)

- Botón de reinicialización (reset): reinicializa todos los controles a sus
valores inciales.
- Botón pulsador (button): Llama a un método para que se ejecute.

En el siguiente ejemplo se ve la codificación de html con formularios y

botontes.

CORPORACIÓN EDUCATIVA ISAG | 27

Lo cual daría de resultado lo siguiente:

2.3.2.2. Radio-botón (radio button)

Los radio-botones o también conocidos como radio-button sirven para
seleccionar una o varias alternativas de opción, aunque también nos ofrecen
la opción de configuración de poder elegir dos o más opciones, En el siguiente
ejemplo se muestra el código necesario para crearlos:

28 | CORPORACIÓN EDUCATIVA ISAG

Puede verse que el primer conjunto de radio-button se despliega en una
misma línea, mientras que el segundo se despliega cada opción en una línea
distinta. También que el primer grupo los tres tienen el mismo name =
“transporte”, por lo que se le da la opción al usuario de escoger una opción.
El estado checked, significa que ése es el radio-botón seleccionado por
defecto. Cuando se selecciona una opción, las demás automáticamente
queda deshabilitadas.
Mientras que en el segundo grupo se observa que tienen un name diferente, y
cada uno tiene su valor. Por lo tanto, un usuario puede seleccionar varias
opciones, pero ya no puede deseleccionar alguna. Para cuando se requiere
que el usuario seleccione varias opciones, se debe utilizar el type =
“checkbox” para lograr dicha funcionalidad.

CORPORACIÓN EDUCATIVA ISAG | 29

2.3.2.3. Lista de Opciones.
Con este atributo damos la opción al usuario de seleccionar alguna alternativa
de una lista de ítems, también es posible seleccionar varias opciones y a este
caso se le llama “list box”. Con el atributo múltiple asignamos la opción de
múltiple selección

30 | CORPORACIÓN EDUCATIVA ISAG

 CUESTIONARIO

1. ¿Defina que es HTML?

_________________________________________________
_________________________________________________
_________________________________________________

2. ¿Qué son las etiquetas?

_________________________________________________
_________________________________________________
_________________________________________________

3. ¿Qué Etiquetas se emplean para crear una tabla?

_________________________________________________
_________________________________________________
_________________________________________________

4. ¿Qué diferencia existe entre etiquetas Radio-Button y Check

Box?
_________________________________________________
_________________________________________________
_________________________________________________

5. ¿Qué etiquetas se emplean para crear una Radio-Button?

_________________________________________________
_________________________________________________
_________________________________________________

6. ¿Qué herramientas se emplean para crear un Check-Box?

_________________________________________________
_________________________________________________
_________________________________________________

7. Diferencie una Lista de opciones de un Radio-Buttom

_________________________________________________
_________________________________________________
_________________________________________________

CORPORACIÓN EDUCATIVA ISAG | 31

 CUESTIONARIO

8. ¿Cómo se crean los formularios?

_________________________________________________
_________________________________________________
_________________________________________________

9. ¿Cuáles son los principales controles de los formularios?

_________________________________________________
_________________________________________________
_________________________________________________

32 | CORPORACIÓN EDUCATIVA ISAG

 Comunicación de Paginas Web
3. Paso de parámetros entre páginas web.

3.1. Transición de una página a otra (Enlace)

Una aplicación web, esta compuesta por un conjunto de páginas de internet
que se relacionan entre si por links. Un link contiene una dirección URL de la
nueva página que se va a desplegar. Una URL es una cadena de caracteres
con la dirección en donde se encuentra una página web. Cuando queremos
pasar de una pagina a otra sin enviar información, utilizamos un link. La
etiqueta HTML llamado “href”, permite pasar de una página1.jspa otra
pagina2.jsp. Para lograr esto es necesario el siguiente código:
<a href=”URL de la pagina2.jsp”> Texto del enlace </a>
Así se muestra en el siguiente ejemplo:

CORPORACIÓN EDUCATIVA ISAG | 33

3.2. Petición de una JSP con el método GET
La comunicación entre cliente y el servidor se lleva a cabo mediante el
protocolo de comunicación HTTP el cual consta de peticiones (request) y
respuestas (response). Los tipos de peticiones HTTP más conocidos
tenemos a GET y POST, las cuales sirven para el paso de parámetros
(información) del cliente al servidor.Las peticiones GET se usan para solicitar
datos que están en el servidor, por ejemplo, una página web.
Las peticiones GET se pueden guardar en historial de navegación, se pueden
indexar en los buscadores, o agregar a enlaces favoritos. La información que
se envía en el GET normalmente tiene un link. GET contiene mucho menos
información que el método POST.

3.2. La petición de una JSP con el método POST

La petición POST sirve para enviar información al servidor para sea
procesada. Una vez procesada, se retorna la respuesta al navegador con
alguna página con información. En el método POST puede viajar mucha más
información que el método GET. El valor de los parámetros que proporcionó el
usuario de una petición POST, se encuentran dentro de un objeto llamado
request.
En el siguiente capítulo utilizaremos el método POST para enviar información
de una página JSP a otra.

3.3 Scriptlets y expresiones en un JSP

Un scriptlet es un fragmento de código Java que se incrusta en una página
JSP. Para introducir un scriptlet en una JSP, se necesita el siguiente código.
<% código en Java %>
En el próximo código se muestra como un scriptlet sirve para recuperar
parámetros que recibe la JSP en el objeto request y guardarlas en variables
String.

34 | CORPORACIÓN EDUCATIVA ISAG

Ahora vamos a crear una página index.jsp para enviar datos dentro de un
objeto request, a la página de destino nombrada paginaDest.jsp. La
paginaDest.jsp va a desplegar los datos recibidos. Con el botón regresar nos
servirá para volver a la página index.jsp

Index.jps paginaDest.jsp
El código de las anteriores páginas sería el siguiente:

Página: index.jsp

CORPORACIÓN EDUCATIVA ISAG | 35

 Página: paginaDest.jsp

3.2 Etiquetas de una Página JSP

Existen distintas etiquetas que se pueden emplear dentro de una JSP, a
continuación, se muestra un cuadro con las principales etiquetas y su uso.

36 | CORPORACIÓN EDUCATIVA ISAG

3.2 Recepción de los valores de radio-button y checkbox
Vamos a ver mediante un ejemplo como se captura los datos de un usuario
por medio de radio-button y casillas de verificación, el código sería el
siguiente:

Página: index.jsp
Los datos son capturados mediante la página index.jsp, y se envían a
paginaDestino.jsp, la cual muestra la información recibida, el código de dicha
página sería el siguiente.

CORPORACIÓN EDUCATIVA ISAG | 37

 Página: paginaDestino.jsp

El resultado del anterior código sería el siguiente:

Index.jsp paginaDestino.jsp

3.2 Recepción de Combo-box, List-box

Cuando tenemos un combo-box solamente se puede seleccionar una opción,
la pagina de destino obtiene el valor seleccionado con el valor de su atributo,
se va a manejar de la misma forma que un campo de texto, pero cuando
hablamos de listas multiples o opciones, como list-box seria necesario hacer
otro tipo de ejecuciones:

38 | CORPORACIÓN EDUCATIVA ISAG

 Página: index.jsp

Ahora el código correspondiente a la página de destino:

CORPORACIÓN EDUCATIVA ISAG | 39

 Página: paginaDestino.jsp

Así en el código paginaDestino.jsp podemos observar que, para lograr

obtener todas las opciones que seleccione el usuario para el atributo
“leguajes”, el scriptlet del inicio de la captura, que hace referencia al arreglo de
String que contiene las opciones seleccionadas.

40 | CORPORACIÓN EDUCATIVA ISAG

 CUESTIONARIO

1. ¿Cómo se realizan las transiciones entre páginas Web?

__________________________________________________
__________________________________________________
__________________________________________________

2. ¿Cómo se realizan las Peticiones de JSP a Páginas Web?

__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________

3. ¿Qué es un Scriptlet y en qué casos se emplea?

__________________________________________________
__________________________________________________
__________________________________________________

4. ¿Cuáles son las etiquetas más empleadas en JSP?

__________________________________________________
__________________________________________________
__________________________________________________

5. ¿Cómo se recepcionan los datos en un radio-buttom?

__________________________________________________
__________________________________________________
__________________________________________________

6. ¿Cómo se recepcionan los datos de un checkbok?

__________________________________________________
__________________________________________________
__________________________________________________

7. ¿Cómo se recepcionan los datos de una lista en JSP?

__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________

CORPORACIÓN EDUCATIVA ISAG | 41

 CUESTIONARIO

8. Elabore un ejemplo aplicando los conceptos empleados en

este capítulo donde haga uso de chekbox, radio-button

9. Realice en un ejemplo el enlace de dos páginas JSP a través

de la etiqueta <a href>

42 | CORPORACIÓN EDUCATIVA ISAG

 Comunicación entre JSP
y Clases Java
3 Conceptos Básicos
Es posible incluir código Java en las JSP, para procesar datos, pero esto no es
una buena práctica. Lo que se estila usar algún patrón que organice la
aplicación en partes independientes. Cuando se trata de aplicaciones
sencillos, utilizamos páginas JSP para capturar y mostrar información, para
implementarla a la vista. Este procesamiento se hace con clases normales de
Java. Sin embargo, para aplicaciones de la vida real, que poseen mayor
complejidad, es mejor utilizar un patrón de diseño, como el MODELO – VISTA
– CONTROLADOR (MVC).

3.2.1 Los hilos (threads) en una página JSP

Para solicitar una página JSP, por primera vez, el motor genera un servlet
correspondiente a la página. La instancia de la JSP se guarda en la memoria
del servidor. Si la página JSP contiende código Java, también se inicia lo que
se llama un hilo o thread. Cada que hay otra petición de una página, se utiliza
la instancia de la JSP y crea otro hilo por cada petición nueva de la página JSP.
Se distinguen dos elementos importantes en el manejo de eventos en Java:

CORPORACIÓN EDUCATIVA ISAG | 43

Las variables globales se guardan en una instancia de la JSP, y son
declaradas dentro del tag <%! %>. Cada variable local se crea para cada
thread, y se declaran dentro del scriptlet. En el código de ejemplo vemos
como se va a declarar una variable global que lleva la cuenta de las peticiones
que se han hecho de las páginas.

Página: Conteo de peticiones

Entonces ejecutando el código quedaría de la siguiente manera:

44 | CORPORACIÓN EDUCATIVA ISAG

4.2.4 Ruta real para acceder a archivos
Cuando se programan JSP y servlet, se usan las rutas relativas para hacer
referencia a los archivos, así tenemos, por ejemplo: “/WEB-
INF/Promedios.txt”. Sin embargo, para poder leer o guardar datos en un
archivo, es necesario tener la ruta completa. El servlet context (Contexto del
servlet) maneja la información a nivel de toda la aplicación Web. La clase
ServletContext contiene métodos que nos proveen métodos para la
comunicación con su contenedor, Todos los servlet poseen un
ServletContext.

4.3. Procesamiento de los datos de JSP con una clase Java

4.3.1. Cálculos con una clase Java

Se debe seguir una estructura para llevar una buena práctica separar las
funcionalidades de forma que las JSP realicen las funciones de la vista y
delegar el procesamiento de los datos a la clase Java. Para una aplicación
pequeña no es necesario utilizar servlets, por ello emplearemos una clase
java normal. Así tenemos el siguiente código:

Página: index.jsp

CORPORACIÓN EDUCATIVA ISAG | 45

Como vemos en el código se hace una llamada a la clase Calcula.java es la
encargada de llevar cálculos sobre los datos proporcionados por el usuario.
Por ello es importante que agrupemos funcionalidades en paquetes. La
realización de los cálculos se llama lógica de negocio. Por eso es
recomendable que creemos un paquete llamado negocios dentro del source
packages.

46 | CORPORACIÓN EDUCATIVA ISAG

 Página: Clase Java Calcula.java

Finalmente codificamos a la paginaDestino.jsp de la siguiente manera:

Página: paginaDestino.jsp

CORPORACIÓN EDUCATIVA ISAG | 47

 CUESTIONARIO

1. ¿Defina en sus propias palabras lo que significa un Hilo?

_________________________________________________
_________________________________________________

2. ¿Qué métodos manejan los hilos?

_________________________________________________
_________________________________________________

3. ¿Cómo se encuentra la ruta real de un archivo en JSP?

_________________________________________________
_________________________________________________

4. Para que vamos a emplear las clases Java en la estructura de

un proyecto Java Web
_________________________________________________
_________________________________________________

5. ¿Cómo creamos los paquetes en NetBeans?

_________________________________________________
_________________________________________________

6. Cree una clase java que calcule la raíz cuadrada de un numero y

se muestre en una página JSP
_________________________________________________
_________________________________________________

7. Crear una clase java que procese el ingreso de 3 números y

muestre su promedio
_________________________________________________
_________________________________________________

8. Crear una clase java que procese el ingreso de un numero y

mediante JSP muestre si el numero ingresado es par o impar.
_________________________________________________
_________________________________________________

48 | CORPORACIÓN EDUCATIVA ISAG

 Modelo Vista Controlador
5. Modelo Vista Controlador con JSP, SERVLET Y CLASE JAVA

5.1. Servlets y métodos

Para aplicar el modelo vista controlador, tomaremos a las paginas JSP para
realizar la vista, a los servlets para construir el control de datos, y las clases
java para conformar el modelo de una aplicación Web. En esta parte del
módulo estudiaremos a los servlet y sus diferentes métodos los cuales se van
a convertir en nuestros controladores de nuestra aplicación. Un controlador
recibe la información de la vista, pide a las clases del modelo que procesen la
información para luego mandar a desplegar los resultados a la vista que
corresponda.
Un servlet es una clase Java que hereda de la clase HttpServlet. Los cinco
métodos más utilizados son:
- public void init() throws ServletException{ }
- public void service (HttpServletRequest request,
HttpServletResponse response)
- public void doGet (HttpServletRequest request, HttpServletResponse
response)
- public void doPost (HttpServletRequest request,
HttpServletResponse response)
- public void destroy() { }
-

5.2. Paso de información de una JSP a un Servlet

Cuando se codifica en un servlet, lo aconsejable es sobre-escribir los
métodos doPost() para atender a una petición POST y doGet() para atender a
una petición GET, no se considera buena práctica sobre-escribir el service().

CORPORACIÓN EDUCATIVA ISAG | 49

En NetBeans se genera automáticamente el método processRequest() y los
métodos doGet() y doPost() se sobre-escriben automáticamente para
que se invoque a process-Request() así, para doGet():
Entonces vamos a realizar la codificación de un ejemplo, primero veamos la
página principal:

Página: index.jsp
La página index.jsp va a invocar al servlet muestraRegistro.Java por medio de
action, ahora pasemos a la codificación del servlet muestraRegistro.java, el
cual va a recibir los datos de index.jsp y construye un objeto de la clase
Alumno, y se construye una página HTML, cual mostrará los nombres
ingresados en la aplicación.

50 | CORPORACIÓN EDUCATIVA ISAG

5.3. Paso de información de un Servlet a una JSP
Aunque es posible desplegar una página HTML desde un servlet, como se
ilustró en el ejemplo de la sección anterior, esto no es una buena práctica. Los
servlets deben enviar la información a una JSP, quien se encargará de
mostrar la vista, es decir, de desplegar la página para el usuario.

5.3.1. Transferencia de control con el object request

Para entender mejor este apartado vamos a verlo mediante un ejemplo, lo
que queremos lograr es lo siguiente.

CORPORACIÓN EDUCATIVA ISAG | 51

El código de index.jsp es el mismo que el de la sección anterior, sólo cambia el
nombre del servlet al cual se envía la petición POST: action = recibeDatos.
Las dos instrucciones que se usan para enviar datos de un servlet a una JSP
son:
request.setAttribute(“nombreAtributo”,objetoAEnviar);
request.getRequestDispatcher(“nombre.jsp”).forward(request, response);
En el código del servlet recibeDatos.Java tenemos un ejemplo de su uso:

52 | CORPORACIÓN EDUCATIVA ISAG

Páginas: RecibeDatos.java
El objeto request tiene los siguientes métodos para enviar información:
- setAttribute(String nombre, Object o) → Sirve para guardar un objeto
en un
- atributo al que se le da un nombre.
- getAttribute(String nombre) → Sirve recuperar el objeto guardado en
el atributo nombre.
- getRequestDispatcher( String ruta) → regresa un objeto
RequestDispatcher para la ruta especificada.
- forward(request, response) → re-envia los objetos request y response
a otro recurso en el servidor, que normalmente es una JSP o un
servlet.
Finalmente, muestraDatos.jsp recibe la información que le envía el servlet
recibeDatos.
java, por medio de un scriptlet, como se muestra en el siguiente código:

CORPORACIÓN EDUCATIVA ISAG | 53

 Página: muestraDatos.jsp

5.1. Comunicación entre Servlet y Clase Java.

Los servlets constituyen el controlador de la aplicación, éstos utilizan las
clases Java para procesar la información. Estas clases conforman el modelo.
Una vez procesada la información, los servlets la mandan desplegar a la vista.
El intercambio de información entre servlets y clases Javaes es trivial. Sólo es
necesario importar en el servlet, la o las clases con las que trabaja. Para
enviar información a una clase, se instancia un objeto en el servlet y se envían
los parámetros en el método constructor. El resultado del procesamiento se
obtiene con los métodos de la clase diseñados para proporcionar datos y
resultados.
En el ejemplo de esta sección, modificaremos el proyecto anterior de tal forma
que los datos que introduce el usuario se guarden en un archivo llamado
promedios.txt, cuando el usuario haga clic en el botón “Registrar”. Después
de que los datos se guardan en el archivo, se despliega la página
muestraDatos.jsp

54 | CORPORACIÓN EDUCATIVA ISAG

Para procesar el registro, codificaremos el servlet recibeDatos.java, el cual recibe los
datos proporcionados por index.jsp y encarga a la clase EscribeArchivo.Java
que los guarde en el archivo. Los datos que se guardaron se despliegan en
muestraDatos.jsp. El código de recibeDatos.Java es el siguiente:

Página: RecibeDatos.java
Ahora codificaremos la sección mostrarDatos.jsp

CORPORACIÓN EDUCATIVA ISAG | 55

Ahora agregaremos funcionalidad al botón “Ver alumnos”, de index.jsp, con el
cual se mostrarán todos los alumnos registrados en promedios.txt. Con este
botón se invoca al servlet muestraRegistro.java, el cual pide a la clase
LeeArchivo.Java que lea los datos del archivo solicitado y los capture en un
ArrayList. Posteriormente pasa esta información a alumnosRegistrados.jsp,
la cual despliega todos los registros recibidos:

Página: alumnosRegistrados.jsp

56 | CORPORACIÓN EDUCATIVA ISAG

El código del servlet muestraRegistro.Java se muestra a continuación. Cabe
observar que la clase LeeArchivo es estática, por lo que no se instancia. Se
llama al método clear-Cont() para reinicializar el contador a 0. Como la
variable cont es estática, conserva el valor que tenía cuando se ejecutó el
servlet con anterioridad. La primera vez que se ejecuta la aplicación: cont = 0,
pero una vez que ya se leyó el archivo, cont tiene el número de registros que
hay en el archivo. Si cont no se reinicializa a cero, cuando solicitamos leer el
archivo una vez más, el número de registros se sumará al valor que ya tenía
cont anteriormente.

Página: MuestraRegistro.jsp

CORPORACIÓN EDUCATIVA ISAG | 57

Y finalmente se muestra la codificación de la clase java que permite el
almacenamiento de los datos en un archivo de texto:

Clase: leeAlumno.java

58 | CORPORACIÓN EDUCATIVA ISAG

La aplicación Web de este ejemplo está organizada con el modelo de tres
capas MVC (Modelo Vista Controlador). Las páginas JSP forman la vista de la
aplicación ya que son la interfaz con el usuario, éstas se encargan de capturar
y mostrar datos. Los servlets: recibeDatos.Java y muestraRegistro.Java
funcionan como controladores.
Éstos hacen uso de las clases que están en el modelo para procesar los datos
recibidos. y transferir el control a una JSP. Y el modelo está formado por las
clases EscribeArchivo.java, Alumno.Javay LeeArchivo.java.

Modelo – Vista – Controlador

Por lo tanto, la
estructura de
nuestro proyecto
quedaría de la
s i g u i e n t e
manera.

CORPORACIÓN EDUCATIVA ISAG | 59

 CUESTIONARIO

1. ¿Qué es un Servlet?
_________________________________________________
_________________________________________________
_________________________________________________

2. ¿Cómo se pasa información de una JSP a un Servlet?

_________________________________________________
_________________________________________________
_________________________________________________

3. ¿Cómo se pasa información de un Servlet a un JSP?

_________________________________________________
_________________________________________________

4. ¿Cuáles son los métodos principales de los Servlets?

_________________________________________________
_________________________________________________
_________________________________________________

5. ¿Qué función realiza el método doPost?

_________________________________________________
_________________________________________________
_________________________________________________

6. ¿Qué función realiza el método doGet?

_________________________________________________
_________________________________________________

7. ¿Qué es una clase Java?

_________________________________________________
_________________________________________________
_________________________________________________

8. ¿Cómo se realiza la comunicación entre la clase Java y Servlet?

_________________________________________________
_________________________________________________

60 | CORPORACIÓN EDUCATIVA ISAG

 Base de Datos
6. Conexión a una Base de Datos

6.1. Archivo Conector

La conexión de una aplicación Web con una base de datos es importante, ya
que en la mayoría de los sistemas, cuando se requiere manipular información
de una base de datos. Para lograr la conexión es necesario:
a. Como prepara el ambiente en la computadora (instalar
conector)
b. Codificar la conexión
c. Como operar la base de datos desde Java.

6.2. Configurando el ambiente de trabajo

El primer paso para establecer una conexión desde NetBeans con el gestor
de bases de datos MySQL es instalar el conector “mysql-connector-java”, la
última versión se puede descargar del sitio:
http://dev.mysql.com/downloads/connector/j/
La carpeta con el conector contiene varios archivos y subcarpetas, el archivo
más importante es el jar, en este caso: mysql-connector-java-5.1.25-bin.jar.
En NetBeans, seleccionamos Herramientas/Bibliotecas, y agregamos una
nueva biblioteca

con el botón “Nueva Biblioteca” en la Biblioteca de clases. La llamamos:

ConectorMySQL. Proporcionamos la ruta en donde se encuentra mysql-
connector-java-5.1.25-bin.jar y damos clic en “Aceptar”.
Los archivos se pueden clasificar de acuerdo a su contenido, que puede ser
binario y de texto, pero también podemos clasificarlo de acuerdo al modo que
se hace acceso al archivo, así tenemos secuenciales y archivos aleatorios.

CORPORACIÓN EDUCATIVA ISAG | 61

 Instalando el Conector a las librerías
Una vez instalado el ConectorMySQL, hay que ligarlo al proyecto en donde
los vamos a utilizar. Por ejemplo, una aplicación con tres capas llamada
PruebaContectBD tiene una index.jsp que captura los datos, y un servlet
registro.Java que usa la clase GuardaEnBD.Java para guardar la información
capturada en la tabla “productos” de una base de datos llamada “tienda”.
Para incorporar el conector de la base de datos al proyecto, hay que agregar
el Conector- MySQL en la carpeta de librerías (con clic-derecho-> agregar
biblioteca).

62 | CORPORACIÓN EDUCATIVA ISAG

6.3. Código de conector
Para obtener la conexión a una base de datos se utiliza el método
getConnection() de la clase DriverManager, este método regresa un objeto de
la clase Connection, y requiere tres parámetros: la URL donde se encuentra la
base de datos, el nombre del usuario y el password.
La clase Class.forName(“com.mysql.jdbc.Driver”)sirve para que se cargue el
driver, en este caso es el driver para conectar con MySQL. A continuación,
presentamos la clase ConectaBD. Su método abrir() regresa el objeto
Connection. Su método cerrar() se asegura de que la conexión quede
cerrada.

CORPORACIÓN EDUCATIVA ISAG | 63

6.4. Acceso a Archivos Texto
Aquí se mantienen datos de caracteres alfanuméricos, en un formato
estándar (ASCII, UNICODE, UTF8, etc.) Pueden ser leídos por aplicaciones
como editores de texto, como Notepad, word, etc.

6.5. Escribiendo Datos en una tabla

Vamos a ver el acceso a datos de una base de datos mediante el siguiente
ejemplo:
La clase Producto en el paquete model es la misma que la que usamos en el
ejemplo anterior, la captura de datos en index.jsp también es igual al ejemplo
anterior.
Por lo tanto, creamos la clase GestorBD.Java en la cual incluiremos métodos
para trabajar con la base de datos. El primero que crearemos sirve para
registrar productos en la base de datos.

El servlet registro.Java usa el método registrar() de la clase GestorBD.Java

para guardar la información capturada en la tabla “productos” de la base de
datos “tienda”. Si el método registrar() regresa verdadero significa que los
datos se guardaron exitosamente, de lo contrario se redirecciona a una
página que muestra un mensaje de error.

Los datos del producto (clave, nombre, precio, cantidad) están dentro del
objeto request que el servlet recibió de index.jsp. Para desplegarlos en
registroGuardado.jsp no es necesario incluir un atributo con el objeto
producto, basta con el reenvío del objeto request
(forward(request,response)).

Estos parámetros se obtienen en registroGuardado.jsp con el método

request.getParameter().

El código del servlet registro quedaría de la siguiente manera:

64 | CORPORACIÓN EDUCATIVA ISAG

Ahora creaos la clase en nuestro paquete model, la clase Java GestorBD que
tendría el siguiente código.

CORPORACIÓN EDUCATIVA ISAG | 65

 Clase Java: GestorBD.java

Por ultimo las paginas quedarían así:

5.1. Acceso a Procedimientos Almacenados

Los procedimientos almacenados con sintaxis SQL se llaman mediante la
clase CallableStatement.
La sintaxis de invocación SQL soporta dos formas de procedimientos
almacenados; la primera forma de llamar incluye un parámetro de resultad,
conocido como parámetros OUT y la segunda forma no se utiliza OUT, pero
también cada una puede usar el parámetro IN.
La forma tradicional de llamar a los procedimientos almacenados es:
- Procedure sin parámetros
{ call procedure_name }
- Procedure con parámetros de entrada
{ call procedure_name(?,?,…) }

66 | CORPORACIÓN EDUCATIVA ISAG

- Procedure con parámetros de salida
{ ? = call procedure_name(?,?,…) }
CallableStatement statemente = connection.prepareCall { “ { call procedure (
?, ?) } “};
Los objetos de este tipo, son creados con la finalidad de invocar a los
procedimientos almacenados, para ello se usa el método prepareCall de la
Interfaz Connection:
Connection conn = DriveManager.getConnection ( ) ;
CallableStatement sp = conn.prepareCall ( { call sp (?,?) } )
A continuación se muestra el siguiente ejemplo de procedimientos
almacendos en Java:

CORPORACIÓN EDUCATIVA ISAG | 67

68 | CORPORACIÓN EDUCATIVA ISAG
 CUESTIONARIO

1. ¿Qué es una Base de datos?

________________________________________________
________________________________________________
________________________________________________

2. ¿Qué conector empleamos para la conexión de una Base de

Datos con JSP?
________________________________________________
________________________________________________
________________________________________________

3. ¿Qué código se emplea para escribir los datos de una tabla

mediante Servlets?
________________________________________________
________________________________________________
________________________________________________

4. ¿Para qué empleamos el método request.getParameter()?

________________________________________________
________________________________________________
________________________________________________

5. Cuando se emplea el formato estándar (ASCII, UNICODE,

UTF8)
________________________________________________
________________________________________________
________________________________________________

6. Elabore un ejercicio para el paso de datos entre una JSP y un

Servlet
________________________________________________
________________________________________________
________________________________________________

CORPORACIÓN EDUCATIVA ISAG | 69

 CUESTIONARIO

7. Elabore un ejercicio para el paso de parámetros entre una

Servlet y una clase Java
________________________________________________
________________________________________________
________________________________________________

8. Elabore un ejercicio empleando Servlet, Clases Java y JSP

________________________________________________
________________________________________________
________________________________________________

70 | CORPORACIÓN EDUCATIVA ISAG

 Proyecto MVC con JSP,
SERLVET Y JAVA
7. Aplicación Web Login con MVC.
La siguiente aplicación web consistirá en un Login mediante el cual
emplearemos todos los conocimientos que hemos estudiado en los capítulos
anteriores. Es por ello que haremos uso del patrón MVC para lograr un orden
y una estructura adecuada.

7.1. Lógica del proyecto

En la página de inicio, el usuario va a poder proporcionar su cuenta y su
contraseña para ingresar a la página del sistema. La página inicial del sistema
debe saludar utilizando el nombre asociado a la cuenta y contraseña, así
como mostrar. En caso de que el usuario no esté registrado, se enviará un
mensaje de error.
Para registrar un nuevo usuario se debe hacer con los siguientes datos:
nombre, cuenta, contraseña, mail. Al elegir el botón “Registrar” debe salir una
página para capturar los datos del usuario. Cuando el registro se hizo con
éxito se despliega una página.
En la página del sistema hay un mensaje de bienvenida y tres botones:
- El botón “Ver usuarios” se despliegan todos los usuarios registrados
- El botón “Borrar usuario” se podrá eliminar a un usuario registrado
proporcionando
su cuenta y su clave. Al elegir el botón “Borrar un usuario” el cuál despliega
una página para capturar la cuenta y la contraseña del usuario que se quiere
borrar.
Al dar clic en “Borrar un usuario” se despliega una página con el mensaje
apropiado (se borró con éxito o no).

CORPORACIÓN EDUCATIVA ISAG | 71

Entonces vamos a desarrollar el código que se va a necesitar para el
proyecto.

7.1.1. Index
El siguiente código es para la página index.jsp

Página: index.jsp
7.1.2.Clase Usuario
El siguiente código representa la funcionalidad de la clase Java para Usuario.

72 | CORPORACIÓN EDUCATIVA ISAG

7.1.3. El acceso a base de datos
Creamos la conexión y desconexión a la base de datos, con la Clase
ConectaBD.java:

7.1.4.Realizando el Registro

CORPORACIÓN EDUCATIVA ISAG | 73

7.1.5.Servlet Registro Java

74 | CORPORACIÓN EDUCATIVA ISAG

7.1.6.Clase Java para Gestor de Base de Datos GestorBD.java

5.1.1.La página RegistroGuardado.jsp

CORPORACIÓN EDUCATIVA ISAG | 75

7.1.7.La entrada al sistema; servlet Login.java

76 | CORPORACIÓN EDUCATIVA ISAG

7.1.9.Página Llenar Registro.

CORPORACIÓN EDUCATIVA ISAG | 77

7.1.10.Borrar un Registro

Página: capturaBorrado.jsp

Servlet: borraUsuario.jsp

78 | CORPORACIÓN EDUCATIVA ISAG

 Página: RegistroBorrado.jsp

Página: noRorroRegistro.jsp

7.1.11.Mostrar todos los usuarios registrados

Servlet: muestraUsuarios.java

CORPORACIÓN EDUCATIVA ISAG | 79

 Página: ListaUsuario.jsp

Finalmente, la estructura del proyecto quedaría de la siguiente manera:

80 | CORPORACIÓN EDUCATIVA ISAG

CORPORACIÓN EDUCATIVA ISAG | 81
 CUESTIONARIO

1. Del proyecto anterior realice el complemento,

mediante servlet, jsp, y clases Java, que agregue las
siguientes funcionalidades:

o Agregar notas a usuarios

o Actualizar notas a usuarios
o Borrar notas a usuarios
o Agregar registro de Asistencia
o Actualizar Asistencia de Alumnos
o Borrar Asistencias de alumnos
o Listar las asistencias totales por fechas
o Listar las notas de los usuarios

82 | CORPORACIÓN EDUCATIVA ISAG

 Datos Adicionales con JSP
8. Datos Adicionales de Páginas Web con JSP

8.1. Sesiones
En determinados momentos es útil que se guarden datos para que estén
disponibles para todas las páginas y servlets de una sesión; con esto
logramos evitar pasar constantemente la información de un lado a otro.
Así pues, si queremos lograr captar las sesiones de la página de los ejemplos
anteriores tendríamos que hacer las siguientes modificaciones en los
códigos:

Ahora para poder tener acceso a las sesiones en las otras páginas
tendríamos que introducir el siguiente código:

CORPORACIÓN EDUCATIVA ISAG | 83

8.2. Validaciones
En las aplicaciones desarrolladas, frecuentemente se utilizan formularios, los
cuales necesitan ser llenados de manera correcta y tratando de evitar la
mayor cantidad de errores. Para esto es necesario que se haga la validación
de los datos de entrada, esto evita que el sistema falle; en todas las
validaciones haremos el uso de JavaScript para lograr esta validación.
JavaScript es un lenguaje que se usa para extender las capacidades del
HTML. JavaScript funciona del lado del cliente (lo interpreta el navegador) y
se incluye adentro del código de una página Web. JavaScript está orientado a
documento, es decir, se usa principalmente para hacer algunas adiciones en
las páginas Web.
Los JavaScripts pueden ir en cualquier parte del código de la página Web,
nosotros lo escribiremos en el <body> antes de iniciar con el código HTML.
Para accesar los campos del formulario en JavaScript, es necesario dar
nombre al formulario. En nuestro ejemplo, le llamaremos forma:

Y para accesar a cada uno de los campos del formulario se utiliza la siguiente
sintaxis:
document.nombreFormulario.nombreCampo.value
El siguiente código es el de la página index.jsp del Sistema Gestor de
Productos visto en el capítulo anterior. Le hemos agregado un JavaScript que
verifica que todos los campos del formulario estén llenos. Los navegadores ya
tienen implementada la ventana de alerta de JavaScript, para lanzarla sólo es
necesario invocarla con:
Así quedaría un formulario incluyendo javascript para la validación de dato:

84 | CORPORACIÓN EDUCATIVA ISAG

5.1. Introducción a JavaBeans
Los JavaBeans son clases Java con las siguientes reglas establecidas:
· Tienen un constructor que no contiene argumentos (parámetros).
· Todos los atributos de la clase son privados.
· La clase contiene métodos getters y setters para acceder y modificar los
atributos.
· La clase debe implementar a la interfaz serializable.
Los JavaBeans son componentes reutilizables que ofrecen un determinado
servicio. El programador que los implementa hace públicos los métodos que
sirven para utilizarlo, y privados los que contienen el “cómo lo hace”, es decir, la
lógica interna. Existen tags especializados para trabajar con JavaBeans, éstos
abrevian el código de los scriptles y las expresiones de las JSP.
Para hacer uso del Bean en una JSP existen los siguientes tags:
· jsp:useBean
Este tag sirve para construir un nuevo Bean, y su sintaxis es la siguiente:
<jsp:useBean id=”nombreDelBean” class=”paquete.Clase” />
Ejemplo:
<jsp:useBean id=”producto” class=”negocios.Producto” />

· jsp:getProperty
Este tag sirve para leer el atributo (propiedad) de un Bean. El valor leido
se guarda en el nombre del atributo (property name). La sintaxis es la
siguiente:
<jsp:getProperty name=”nombreDelBean” property=”nombreAtributo” />
Ejemplo:
<jsp:getProperty name=”producto” property=”precio” />
· jsp:setProperty
Este tag sirve para modificar un atributo (property) de un Bean, y su
sintaxis es la siguiente:
<jsp:setProperty name=”nombreDelBean” property=”nombreAtributo”
value=”valorAtributo” />
Ejemplo:
<jsp:setProperty name=”producto” property=”cantidad” value=”7” />Una
secuencia de escape es la forma en la que se desactiva el efecto de uno o
5.2. Secuencias de Escape.
Una secuencia de escape es la forma en la que se desactiva el efecto de uno o
varios caracteres que forman parte de un comando. Cuando se usa la secuencia
de escape, se escribe literalmente el o los caracteres. Por ejemplo, si en una
página HTLM queremos que se despliege “<html>” literalmente en la página, en
lugar de que se interprete como un tag entonces ponemos:
<code>&lt;html&gt;</code>

CORPORACIÓN EDUCATIVA ISAG | 85

 CUESTIONARIO

1. ¿Cómo podemos mantener datos entre páginas web?

_______________________________________________
_______________________________________________

2. ¿Cómo se utilizan las variables de sesión para evitar la

pérdida de datos?
_______________________________________________
_______________________________________________

3. ¿Qué tecnologías utilizamos para validar datos?

_______________________________________________
_______________________________________________

4. ¿Qué es JavaScript?
_______________________________________________
_______________________________________________

5. ¿Cuál es el tag para iniciar JavaScript?

_______________________________________________
_______________________________________________
_______________________________________________

6. ¿Para qué se utiliza JavaBeans?

_______________________________________________
_______________________________________________

7. ¿Qué reglas se utilizan para realizar JavaBeans?

_______________________________________________
______________________________________________

8. ¿Qué es un JavaBeans?
_____________________________________________________
_____________________________________________________
__________________________

86 | CORPORACIÓN EDUCATIVA ISAG

 JavaServer Faces
9. JavaServer Faces.
JavaServer Faces (JSF) es otro entorno de desarrollo de aplicaciones Web en
Java, diferente al de los Servlets que hemos visto hasta ahora. Esta
tecnología está diseñada para simplificar el desarrollo Web con Java, y
fomenta la separación de la presentación de las interfaces de usuario con la
lógica de la aplicación. JSF utilizaba JSPs, añadiendo librerías que contienen
componentes de alto nivel (menús, paneles, campos de texto,…), cada uno
de estos componentes puede interactuar con el servidor de forma
independiente. En la actualidad, se utilizan “Facelets” que son páginas con
extensión xhtml que sirven para lo mismo que las JSF pero son una forma
más sencilla de trabajar. Como JavaServer Faces es un “ framework” (marco
de referencia), simplifica el diseño de la estructura de la aplicación y también
proporciona librerías que hacen más facil el desarrollo de la aplicación.
Con JavaServer Faces es posible utilizar Ajax (Asynchronous JavaScript and
XML). Ajax es un enfoque en el que las diferentes acciones que solicita el
usuario se realizan dentro de una misma página, de tal manera que el servidor
no genera una nueva página sino sólo los datos.
En las aplicaciones tradicionales, cada petición al servidor hace que éste
genere una nueva página HTML/XHTML. Las aplicaciones RIA (Rich Internet
Applications), como lo es JSF, intentan simular las aplicaciones de escritorio y,
cuando usan Ajax, son más rápidas que las aplicaciones tradicionales.
- Un conjunto de componentes de Interfaz de Usuario predefinidos
(botones, menús, campos de texto,…), listos para agregarse a una
página Web. Estos componentes se representan como objetos con un
estad.
- Oyentes y manejadores de eventos (pulsación de un botón, cambio en
el valor de un campo,…), los cuales permiten conectar fácilmente los
eventos generados del lado del cliente con código de la aplicación en
el servidor.

CORPORACIÓN EDUCATIVA ISAG | 87

- Validador y convertidor de datos en el lado del servidor. Validar los
datos de los componentes individuales permite informar de cualquier
error antes de que éstos se envíen a procesar al servidor. El convertidor
permite al usuario trabajar con datos en diferentes unidades.

9.1. Etiqueta Libraries

Los Facelets son páginas .xhtml con librerías adicionales llamadas Tag
libraries. Las librerías de etiquetas (etiqueta libraries) son componentes
especiales de software que encapsulan funcionalidad dinámica y compleja.
Estas librerías las construyen especialistas en ciertos servicios, como, por
ejemplo: el acceso a la base de datos, o el manejo de botones, menús,
desplegado de listas, etc. La idea principal es que el diseñador de las vistas
pueda incorporar poderoso contenido dinámico en sus páginas sin necesidad
de saber cómo se codifican los detalles.
JSTL (JavaServer pages Standard Tag Library) es una librería que contiene la
funcionalidad más común de las aplicaciones Web. Los diseñadores de
páginas Web sólo deben saber cómo incluir los tags. JSF proporciona
componentes para construir una aplicación con GUIs (Graphical User
Interfaces: Interfaces de Usuario Gráficas). El desarrollador personaliza
objetos como menús, check box, botones, etc. manipulando los atributos de
los tags de cada uno de estos componentes.

9.2. Modelo – Vista – Controlador con JavaServer Faces

La forma de modelar la arquitectura Model-View-Controller con JSF

88 | CORPORACIÓN EDUCATIVA ISAG

 · Vistas: Se implementan con páginas .xhtml a las que se les llama
facelets. Los Managed Beans también pueden usarse como parte de
la vista. Incluso, si una clase Java organiza las páginas Web y sus
correspondientes Managed Beans (de la vista) entonces la clase Java
también es parte de la vista.
· Controladores: Los controladores se pueden implementar con los
JavaBeans administrados (managed JavaBeans) o con clases Java.
Recordar que un controlador realiza las siguientes funciones:
recepción/validación de peticiones, selección de la lógica a ejecutar y
selección de la vista a en la que se presentará el resultado.
· Modelo: Las clases con la lógica de la aplicación se construyen con
clases Java.

9.3. Java y la tecnología XML

XML (Extensible Markup Language) es un lenguaje de marcado de texto, que
permite definir etiquetas personalizadas que describen y organizan datos. Se
dice que es un lenguaje de etiquetas, porque cada paquete de información
está delimitado por dos etiquetas como se hace en HTML, con la diferencia de
que las etiquetas XML describen el significado de la información que contiene
cada etiqueta, mientras que las etiquetas HTML se ocupan de la presentación
del contenido y no de su significado.
El siguiente es un ejemplo de XML. Al igual que en HTML, el fin de la etiqueta
se indica con el caracter “/”. Nótese que las etiquetas se anidan para que el
código sea más claro:
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
Con la etiqueta <session-config> sabemos que los datos que ésta encierra se
refieren a la configuración de la sesión. Con la etiqueta anidada: </session-
timeout> podemos intuir que el dato se refiere al tiempo que una sesión puede

CORPORACIÓN EDUCATIVA ISAG | 89

 permanecer inactiva. Los archivos escritos en este XML son archivos de
texto con la extensión XML. Estos archivos .XML siempre están
presentes en las aplicaciones Javaweb, ya que sirven para indicar su
config un proyecto Web (en NetBeans, eclipse, etc…) y, aunque
algunas dependencias se generan automáticamente, es necesario
agregar las dependencias que no son autogeneradas en este archivo.

Se les llama dependencias a todos aquellos elementos sw que el sistema

requiere para funcionar (librerías Java, librerías JSF, conector a base
de datos, etc.). Escribir directamente las dependencias en los
archivos XML, da pié a que se cometan errores, ya que hay que
escribir mucho código repetitivo. Las anotaciones en el contexto de
las aplicaciones Web, surgieron como una forma de simplificar la
codificación, reducir los errores y facilitar el mantenimiento de los
sistemas Web.
Las anotaciones Java permiten indicar en el código fuente cómo debe
comportarse el software.
También sirven para añadir metadatos al código fuente. Los metadatos son
“información acerca de la información”. Por eso se dice que con las
anotaciones se asocia la meta-información.

9.4. XHTML
El lenguaje XHTML (Extensible HyperText Markup Languaje) es otro lenguaje
de marcado de texto que se caracteriza por la separación de la estructura de
la información con la presentación de la página. XHTML se basa en HTML,
pero utiliza un archivo adicional con extensión CSS (Cascading Style Sheets)
para definir la presentación de la página. La presentación es la especificación
del lugar en donde el navegador presenta cada elemento de la página Web,
del font, y de los colores de cada uno de los elementos a desplegar.

9.5. JavaBeans Administrado

Un Bean administrado (Managed Bean) es un JavaBean que puede ser
accedido desde una página Web. El managed Bean se inventó para que el
usuario remoto pueda comunicarse con un programa en Java que está en el
servidor. A diferencia de los JavaBeans, los managed Beans no están
obligados a implementar la interfaz serializable.

90 | CORPORACIÓN EDUCATIVA ISAG

9.6. Objetos JavaBeans
Toda aplicación Web hecha con JavaServer Faces tiene tres objetos que se
instancian automáticamente:
1. RequestBean: Es un objeto que persiste sólo durante la petición del
usuario (@ RequestScoped).
2. SessionBean: Es un objeto que existe durante toda la sesión del
usuario. Sólo hay un sessionBean por cada usuario.
3. ApplicationBean: Es un objeto que existe mientras la aplicación se
esté ejecutando en el servidor. Este objeto lo comparten todas las
instancias de la aplicación.

9.7. Etiquetas JavaServerFaces

En JavaServer Faces todo se maneja con etiquetas <h: …. /> y <f: …./>.
Como JSF se basa en la filosofía de componentes que interactúan con el
servidor de forma independiente, no se manejan las etiquetas HTLM, como
<form>, <input>, <select>, sino etiquetas para los componentes de JSF, como
son por ejemplo <h:form>, <h:inputText>, <h:-selectOneListBox>. Los
componentes JSF brindan funcionalidad del lado del servidor, como
conversiones de tipo, formateo, la posibilidad de definir campos de texto
obligatorios, entre otras.
En cualquier etiqueta se pueden accesar los métodos y los atributos de un
Bean con la siguiente
sintaxis:
#{nombreBean.atributoBean}
#{nombreBean.metodoBean()}
Las tres etiquetas básicas son:
<h: inputText …. /> para campos de texto. En el siguiente ejemplo, junto al
campo de texto
se pone la etiqueta nombre del campo.
<h: inputtext pt:placeholder =”nombre del campo” />
<h: commandButton …. /> para botones.

CORPORACIÓN EDUCATIVA ISAG | 91

Es común utilizar los botones para la navegación implícita, es decir, en el
action se pone el nombre de la vista a la que se va a transferir el
control. No se necesita poner la extensión, como en el siguiente
ejemplo, en el que el botón con la etiqueta “ir a página 2” nos lleva a la
vista que se llama “pagina2”:
<h: commandButton value =”ir a pagina 2” action =”pagina2”>

El otro uso de commandButton es transferir el control hacia el método

de un Bean, como en el siguiente ejemplo, en el que al seleccionar el botón
“Ingresar” el control pasa al método validarUsuario() del Bean loginBean:
< h : c o m m a n d B u t t o n v a l u e = ” I n g r e s a r ”
action=”#{loginBean.validarUsuario}”/>
<h: commandLink action=”PaginaDestino” value=”Etiqueta” />
para poner ligas a otras páginas, en action se pone el nombre de la página a la
que se transfiere el control cuando se da clic en el enlace, y en value las
palabras que aparecen en el enlace.

9.8. Enlace de Páginas Web

Cuando se instancia una página web (.xhtml), se instancia también su
managed Bean asociado. Se despliega un facelet en el navegador, en ese
momento se instancian todos los managed Beans asociados con ese facelet,
lo que implica que en ese momento se ejecutan los constructores de los
managed Beans. Cada vez que el usuario modifica el dato de uno de los
campos de la página Web, automáticamente se modifica su atributo
correspondiente en el managed Bean asociado. A esto se le conoce como
ligado de datos (data binding en inglés). Es muy importante comprender lo
que sucede con la vida de los managed Beans en función de su alcance, para
poder llevar un control adecuado de la información.
@RequestScoped: El constructor del Managed Bean se ejecuta cada vez que
se hace un request desde la página asociada al Bean (desplegar, pulsar un
botón,…). Los datos del Bean se actualizan cada vez que se construye Bean y
se pierden cuando el managed Bean desaparece. A continuación se muestra
el ciclo de vida del Managed Bean Request:

92 | CORPORACIÓN EDUCATIVA ISAG

@ViewScoped: Su constructor se ejecuta cada vez que se despliega la
página asociada al Bean. Los datos están presentes mientras se despliegue
la página y se pierden cuando la página desaparece, ya que también
desaparece el managed Bean. A continuación, se muestra el ciclo de vida del
managed bean ViewScoped.

@SessionScoped: El Bean se instancia la primera vez que se despliega su

página asociada y permanece activo durante la sesión del usuario. Esto tiene
la ventaja de que los datos del Bean permanecen durante toda la sesión, pero
hay que tomar en cuenta que los datos de la página asociada no se actualizan
automáticamente cada vez que ésta se visita, y que el constructor solamente
se ejecuta una vez.

CORPORACIÓN EDUCATIVA ISAG | 93

9.9. Navegación de JSF: Estática y Dinámica
La navegación estática es la navegación más sencilla, consiste en pasar de
una página a otra. En el siguiente código de ejemplo se asocia la página
“homeSistema” a la acción del botón de comando, es decir, cuando el usuario
seleccione el botón “Entrar” se desplegará la página homeSistema.xhtml.
<h: commandButton label=”Entrar” action=”homeSistema” />
No se recomienda la navegación estática en proyectos grandes, ya que se
pierde la filosofía Modelo-Vista-Controlador. La decisión de desplegar una
página Web debe tomarse en el controlador, no en la vista.
En la navegación dinámica se ejecuta un método del Managed Bean
asociado, cuando el usuario selecciona un botón de la página Web. En este
Bean se inicia el proceso de la información, y la página destino se determina
después de que se finaliza este proceso.

9.10. Flujo de una Página Web hacia un Bean

Para enviar el control a un Bean es necesario indicar el nombre del Bean y el
método al que se enviará el control. En el siguiente ejemplo, se transfiere el
control al método registrar del Bean login. Como el método registrar no
requiere parámetros, no se usan paréntesis.
<h: commandButton label=”Registrar” action =”#{login.registrar}” />

9.11. Flujo desde una clase Java hacia una página Web
Hay dos opciones para desplegar una página desde una clase Java; la
primera es invocar al método de un managed Bean que regresa el nombre de
la página destino, y la segunda es con el comando redirect. En el primer caso,
el método toma la decisión de que vista se desplegará, pero la transferencia
se hace desde la página Web que lo invoca. En el segundo caso, la
transferencia se hace desde la clase Java con el comando redirect.

9.12. Elementos básicos de una interfaces en JSF

· Form: Encapsula un grupo de controles que envían datos de la página
Web a la aplicación, es análogo a la etiqueta </Form> de HTML. Su
sintaxis es:
<h: form id = “form”> … </h:form>

94 | CORPORACIÓN EDUCATIVA ISAG

 · CommandButton: Muestra un botón con el texto especificado en
value, la acción puede ser, ejecutar el método de un Bean, o navegar
hacia otra página:
a) ejecutar el método de un Bean
<h: commandButton value=”Registrarse”
action=”{login.registrarUsuario()}” />
b) navegar hacia otra página:
<h: commandButon value=”Ejecutar” action= “nombrePagDestino”/>
· GraphicImage: Muestra una imagen, es similar a la etiqueta <img…>
de HTML. Su sintaxis es:
<h: graphicImage url=”/imagenes/….jpg”/>

9.13. Enlaces, campos de captura, y texto

· OutputLink: despliega un enlace en la página, cuando el usuario da
clic en el enlace, el navegador despliega la página indicada en value.
Su sintaxis:
<h: outputLink value=”http://www.……/” />
· InputText: captura en el atributo de un ManagedBean lo que el
usuario intoduce en un campo de texto. Su sintaxis:
<h: inputText value=”#{nombreManagedBean.atributo}” />
· InputSecret: captura en el atributo de un ManagedBean lo que el
usuario intoduce en un campo de texto, pero no permite ver lo que el
usuario escribió. Su sintaxis
<h: inputSecret value=”#{nombreBean.password}” />
· OutputText: despliega un texto en la página. Su sintaxis:
<h: outputText value=”Este texto se despliega en la página”/>

9.14. Objetos para hacer una selección

· SelectBooleanCheckbox: Crea una casilla con dos estados:
activado y desactivado. Su sintaxis:
<h:selectBooleanCheckbox value=”#{formulario.recibirInfo}” />

CORPORACIÓN EDUCATIVA ISAG | 95

 · SelectManyCheckbox: Crea un conjunto de casillas activables. Su
sintaxis:
<h:selectManyCheckbox value=”#{formulario.idiomas}”>
<f:selectItem itemValue=”español” itemLabel= “Español”/>
<f:selectItem itemValue=”ingles” itemLabel= “Ingles”/>
<f:selectItem itemValue=”frances” itemLabel= “Frances”/>
<f:selectItem itemValue=”aleman” itemLabel= “Aleman”/>
</h:selectManyCheckbox>
· SelectManyListbox: Crea una lista que permite seleccionar múltiples
elementos. Su sintaxis:
<h:selectManyListbox value=”#{formulario.lenguajes}”>
<f:selectItem itemValue=”c” itemLabel= “C”/>
<f:selectItem itemValue=”c++” itemLabel= “C++”/>
<f:selectItem itemValue=”java” itemLabel= “Java”/>
<f:selectItem itemValue=”python” itemLabel= “Python”/>
</h:selectManyListbox>
· SelectOneRadio: Crea una lista de botones, redondos normalmente,
excluyentes. Su sintaxis:
<h:selectOneRadio value=”#{formulario.genero}”>
<f:selectItem itemValue=”masculino” itemLabel= “Masculino”/>
<f:selectItem itemValue=”femenino” itemLabel= “Femenino”/>
</h:selectOneRadio>
· SelectOneMenu: Crea una lista desplegable de selección excluyente.
Su sintaxis:
<h:selectOneMenu value=”#{formulario.sistema}”>
<f:selectItem itemValue=”windows” itemLabel= “Windows”/>
<f:selectItem itemValue=”linux” itemLabel= “Linux”/>
</h:selectOneMenu>

9.15. Primer Proyecto en JSF

Para crear un proyecto JSF con NetBeans hay que crear una aplicación Web
(Web Application) como hemos hecho hasta ahora, pero además hay que
llegar al cuarto paso, para definir el marco de trabajo JSF

96 | CORPORACIÓN EDUCATIVA ISAG

El archivo web.xml está dentro de la carpeta WEB-INF y contiene la
configuración de JSF. El proyecto se creó con el servidor Apache Tomcat,
como se puede apreciar en la carpeta de librerías.

index.xhtml es la “página-home” de la aplicación, y se genera

automáticamente. Si corremos el proyecto se desplegará en el navegador el
contenido de esta página.

CORPORACIÓN EDUCATIVA ISAG | 97

5.1. Organización de proyectos implementando MVC
VISTAS: Se deben poner en la carpeta “WebPages”. El index.xhtml siempre
es la página de inicio. En este caso las vistas son archivos con extensión
xhtml, es decir, facelets. Para generar un facelet nuevo, hacer clic derecho en
WebPages, y luego seleccionar new/JSF Page. Como ya se explicó en la
sección de ligado de datos, los facelets tienen asociado un managed Bean en
el que se actualizan los datos que el usuario introduzca en la página Web.
CONTROLADORES: En la carpeta Source packages creamos un paquete al
que llamaremos “Controller”, donde se ponen los controladores. Es una
decisión de diseño incluir los managed Beans como parte de la vista (en
proyectos grandes) o como controladores. Para nuestros primeros proyectos
JSF usaremos los JavaBeans administrados como controladores. Para
generar un managed Bean, primero haremos un paquete “Controller” dentro
de “Source Packages”, luego, hacer clic derecho en “Controller”, y seleccionar
new/JSF Managed Bean. También es posible crear controladores como
JavaBeans simples.

MODELO: En la carpeta Source packages creamos un paquete al que

llamaremos “Model”, donde se ponen las clases del modelo. Todas las clases
del modelo deben ser JavaBeans. Para generar un JavaBean se selecciona
new/JavaClass. Con NetBeans se puede generar automáticamente el
constructor, los getters y los setters de los atributos de la clase (entre otros).

5.2. Ejecutando Página de Inicio

Haremos un facelet que despliegue la página de inicio de un Sistema Cada
que se hace un facelet en NetBeans, se incluyen automáticamente las
librerías JSF para trabajar con HTML.

98 | CORPORACIÓN EDUCATIVA ISAG

Para que se despliegue la imagen agregamos una nueva carpeta que
llamaremos “images”. La imagen debe estar en
/NetBeansProjects/ProyectoJSF_1/web/images.
Para desplegar una imagen utilizaremos la etiqueta:
h:graphicImage url = “ path donde se encuentra la imagen “
Cuando se comienza una ruta con la diagonal: “/”, significa que la primera
parte de la ruta será la necesaria para llegar a la carpeta “Web Pages” del
proyecto JSF.

CORPORACIÓN EDUCATIVA ISAG | 99

9.18. Aplicación con Manager Bean
Con el botón “Mostrar” se transfiere el control a la página
MostrarElementosInterfaz.xhtml,
con ejemplos de elementos para seleccionar, y con el botón “Ir a sonrisa” se
despliega una
imagen.

9.19. Página index.xhtml

100 | CORPORACIÓN EDUCATIVA ISAG

9.20. Desplegando Elementos de interfaz de usuario
Para mostrar una página con algunos elementos para seleccionar (menú,
checkbox…) comenzaremos construyendo un facelet al que llamaremos
muestraElementosInterfaz.xhtml, al que agregaremos el botón más sencillo:
el BooleanCheckbox. La página muestraElementosInterfaz.xhtml tiene
asociado un managed Bean al que llamaremos Formulario.
A continuación, presentamos el código del facelet que despliega un
BooleanCheckbox. Observa que para desplegar el checkBox hace uso del
managed Bean Formulario, específicamente el link en el checkBox al
atributo recibirInfo de este managed Bean.

El comando: <h:commandButton value=”Mostrar”

action=”muestraElementosInterfaz” /> de la página index.xhtml llama a la
vista muestraElementosInterfaz.xhtml, que hasta lo que hemos codificado
sólo desplegará el botón selectBooleanCheckbox.

9.21. Desplegando muestraElementosInterfaz.xhtml

El código del xhtml quedaría de la siguiente manera:

CORPORACIÓN EDUCATIVA ISAG | 101

102 | CORPORACIÓN EDUCATIVA ISAG
9.22. Desplegando muestraElementosInterfaz.xhtml
El código de Manage Bean quedaría de la siguiente manera:

CORPORACIÓN EDUCATIVA ISAG | 103

9.23. Captura de Datos de Usuario
los campos para capturar información en un facelet puedenser de tipo texto o
de selección. Recordemos cómo se captura desde un campo de texto:
· InputText: Lo que el usuario intoduce en el campo de texto, se captura
en el atributo de un ManagedBean. Su sintaxis es la siguiente:
<h: inputText value=”#{nombreManagedBean.atributo}” />
Veremos con un ejemplo de selección múltiple de opciones, usando
SelectManyCheckbox.
Un ejemplo de su sintaxis es:
<h:selectManyCheckbox value=”#{formulario.idiomas}”>
<f:selectItem itemValue=”ingles” itemLabel= “Ingles”/>
<f:selectItem itemValue=”frances” itemLabel=
“Frances”/>
<f:selectItem itemValue=”aleman” itemLabel=

104 | CORPORACIÓN EDUCATIVA ISAG

“Aleman”/>
</h:selectManyCheckbox><f:selectItem itemValue=”español”
itemLabel= “Español”/>
La selección del usuario se guarda en el atributo idiomas del mannaged bean
formulario, el cual debe ser un ArrayList de String, que guardar la lista de
cadenas seleccionadas.

9.24. Estructura de un proyecto MVC

Usaremos la arquitectura MVC, así que construimos un paquete llamado
Controller para guardar ahí los dos Managed beans de la aplicación: el que
lleva el control y el del formulario. También hay otro paquete llamado Model
que contiene una pequeña clase que ejecuta la lógica de la aplicación.

CORPORACIÓN EDUCATIVA ISAG | 105

 CUESTIONARIO

1. ¿Qué es JavaServer Faces?

__________________________________________________
__________________________________________________
__________________________________________________

2. ¿Cómo se implementa un Modelo – Vista – Controlador en

JavaServer Faces?
__________________________________________________
__________________________________________________
__________________________________________________

3. ¿Para qué empleamos Ajax en JavaServer Faces?

__________________________________________________
__________________________________________________
__________________________________________________

4. ¿Cuál es la estructura de un proyecto en JavaServer Faces?

__________________________________________________
__________________________________________________
__________________________________________________

5. ¿Qué son los Beans?

__________________________________________________
__________________________________________________
__________________________________________________

6. ¿Para qué se utiliza JavaBeans?

__________________________________________________
__________________________________________________
__________________________________________________

7. ¿Qué es la etiqueta Libraries?

__________________________________________________
__________________________________________________
__________________________________________________

8. ¿Qué es un JavaBeans Administrado?

__________________________________________________
__________________________________________________
__________________________________________________

106 | CORPORACIÓN EDUCATIVA ISAG

BIBLIOGRAFÍA

CORPORACIÓN EDUCATIVA ISAG | 107

108 | CORPORACIÓN EDUCATIVA ISAG