UNIVERSIDAD DON BOSCO

FACULTAD DE INGENIERIA
ESCUELA DE COMPUTACION
GUIA DE LABORATORIO #11
CICLO I Programación Orientada a Objetos
Datatables, librerías AJAX, internacionalización

I. OBJETIVOS

Que el estudiante:
 Manipule las librerías de Datatables para crear reportes con paginado, formatos de exportación y
ordenamiento de los campos.
 Valide los errores por medio del archivo web.xml.
 Utilice librerías AJAX para dar vistosidad y una mejor funcionalidad a sus proyectos web.
 Utilice el etiquetado displaytag y sus diferentes opciones para presentar tablas a usuarios.

II. INTRODUCCIÓN

Las aplicaciones web son cada vez más complejas, ya que incluyen efectos e interacciones que antes eran
exclusivas de las aplicaciones de escritorio.
Algunos motivos que complican la programación de estas aplicaciones web avanzadas son:
 Las aplicaciones deben funcionar correctamente en al menos cinco navegadores diferentes: Internet
Explorer 6 y 7, Firefox, Opera y Safari.
 La necesidad continua de incluir novedades en las aplicaciones web comerciales, requiere que se haga en
el menor tiempo posible antes que otros sitios web de la competencia.
Por ello, han surgido librerías y frameworks específicos para el desarrollo de aplicaciones, creados con JavaScript.
Con el uso de estas librerías, se reduce el tiempo de desarrollo y se tiene la seguridad de que las aplicaciones
funcionan igual de bien en cualquiera de los navegadores más utilizados.
Aunque se han publicado decenas de librerías y frameworks, se van a mostrar las dos más populares: Prototype
(junto con script.aculo.us) y jQuery.

1
 Displaytags
Es una librería de tags Open-Source de JSP, que es de gran utilidad a la hora
de trabajar con una arquitectura MVC en páginas JSP.
Muestra tablas dentro de los jsp sin la necesidad de recurrir al Scriplet o la
utilización de varios tags de JSTL.

¿Qué me permite hacer?

Esta librería de tags es de gran utilidad cuando se quiere mostrar una colección de datos (listas o array) en una
tabla, permitiendo, además, entre otras funcionalidades, agregarle estilos, decoraciones a los datos mostrados,
exportar datos a distintos formatos (pdf, csv), utilizar paginación y ordenamiento mediante la librería o de manera
externa.
Las funcionalidades se pueden resumir en:
 Paginar los datos mostrados.
 Ordenar los datos por columnas.
 Exportar los datos a otros formatos (Excel, XML, CSV, PDF).
 Agrupar los datos.
Ademas, esta librería tiene la gran ventaja de obtener los datos desde diferentes scopes (page, request (por defecto),
session y application) de manera simple.
Algo que no se encuentra en el codigo para no hacerlo tan largo es que en la parte superior del JSP se debe añadir
la declaración para poder usar los tags de la librería el cual es:
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

JQuery
Es una biblioteca de JavaScript, pequeña y con muchas funciones, creada inicialmente por John Resig. Su sitio
web oficial es http://jquery.com/
JQuery permite simplificar la manera de interactuar con
los documentos HTML, manipular el árbol DOM,
manejar eventos, desarrollar animaciones y agregar
interacción con la técnica AJAX a páginas web.
jQuery es software libre y de código abierto, funciona en una gran cantidad de navegadores, posee un doble
licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos
libres y privados.
jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera
requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados
en menos tiempo y espacio.
Con una combinación de versatilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas
escriben JavaScript.

Prototype.js
Prototype es un framework, es decir un conjunto de funcionalidades que facilitan la vida del desarrollador de
JavaScript.

2
Posee numerosas funciones que permiten utilizar AJAX en una sola línea de código o invocar a cualquier elemento
de la página utilizando la notación $('id_del_elemento'), para que el elemento HTML tenga un atributo “id” único.
Es una biblioteca sobre la cual se apoyan muchas otras bibliotecas JavaScript. Su sitio web es
http://prototypejs.org/

Script.aculo.us
Scriptaculous es una biblioteca que permite utilizar efectos visuales espectaculares en una página Web.
Está basada en la biblioteca prototype y es una de las
biblioteca más utilizadas en Internet.
Su sitio web es http://script.aculo.us/
La librería está dividida en varios módulos:
 Efectos: permite añadir de forma muy sencilla efectos especiales a cualquier elemento de la página,
construidos con la combinación de efectos básicos. Entre los efectos prediseñados se encuentran el
parpadeo, movimiento rápido, aparecer/desaparecer, aumentar/disminuir de tamaño, desplegarse, etc.
 Controles: define varios controles que se pueden añadir directamente a cualquier aplicación web. Los
tres controles que forman este módulo son:
 a" rrastrar y soltar", define los elementos que se pueden arrastrar y las zonas en las que se pueden soltar
elementos;
 a" utocompletar", define un cuadro de texto en el que los valores que se escriben se autocompletan con
ayuda del servidor; un editor de contenidos, que permite modificar los contenidos de cualquier página
web añadiendo un sencillo editor AJAX en cada elemento.
 Utilidades: la utilidad principal que incluye se llama builder, que se utiliza para crear fácilmente nodos
y fragmentos complejos de DOM.

DataTables
jQuery Datatables es un plugin del framework jQuery, el cual permite añadir funcionalidades avanzadas a
cualquier tabla HTML, como por ejemplo al filtrado, ordenamiento y edicion. Estas se obtienen añadiendo
controles para realizar estas operaciones avanzadas.
Se puede utilizar tanto en tablas generadas con html o con cualquier lenguaje de programación como Java, php o
asp.net, debido a que JQuery es un framework programado en Javascript, es multiplataforma y compatible con la
mayoría de los navegadores.
Algunas de las funcionalidades que implementa este plugin son las siguientes
 Ordenamiento alfabético o numérico por columnas de datos de la tabla html
 Paginacion de resultados masivos, agrupando filas por números de paginas
 Filtrar cada columna por algún criterio especifico.

3
 III. PROCEDIMIENTO

PARTE 1: Creacion de proyecto web

1. Cree un proyecto web denominado Guia11POO1. Elija el servidor Apache Tomcat para ser utilizado en
el mismo. Marque la casilla “Use Dedicated Folder for Storing Libraries”.
Importe a las librerías para los drivers de MySql JDBC y luego para las librerias JSTL.

2. Confirme que en mysql existe la base de datos Empleados (la cual fue creada en la practica
anterior). Luego, agregue mas de 10 registros en la única tabla que esta posee.
3. Cree un origen de datos (datasource) denominado jdbc/mysql, que se conecte a la base de datos
Empleados.
Para realizarlo, expanda la carpeta META-INF del proyecto y abra el archivo context.xml. Edite su
contenido para que quede de la siguiente manera:
<?xml version="1.0" encoding="UTF-8"?>
<Context crossContext="true" debug="5" path="/guia11poo1" reloadable="true">
<Logger className="org.apache.catalina.logger.FileLogger" prefix="localhost_."
suffix=".txt" timestamp="true"/>
<Resource auth="Container" driverClassName="com.mysql.jdbc.Driver"
name="jdbc/mysql" password="" type="javax.sql.DataSource"
url="jdbc:mysql://localhost:3306/empleados" username="root"/>
</Context>

4. Cree el paquete sv.edu.udb.guia11. Luego, almacene en su interior a una copia del archivo de clase
Beans (CodigoBean.java) creado en la practica anterior.
Cuide que el nombre del paquete al cual pertenece la nueva copia del Beans sea: sv.edu.udb.guia11.

Parte 2: Uso de datatables

5. Crear fichero VerEmpleados.jsp y digite el siguiente código:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>

<jsp:useBean id="cod" scope="page" class="sv.edu.udb.guia11.CodigoBean"/>

4
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Empleados</title>
<!-- cdn de librerías -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

<link rel="stylesheet" type="text/css"

href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" />

<link rel="stylesheet" type="text/css"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<script type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>

5
 <!-- fin librerías -->
</head>
<body>
<sql:query var="q1" dataSource="jdbc/mysql">
SELECT * from empleados
</sql:query>

<div class="page-header">
<h1>Listado de empleados</h1>
</div>
<div class="container">
<table class="table table-striped table-bordered" id="empleadostable">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<c:forEach var="name" items="${q1.rows}">
<tr>
<td><c:out value="${name.id}"/></td>
<td><c:out value="${name.nombres}"/></td>
<td><c:out value="${name.apellido1} ${name.apellido2}"/></td>
<td><c:out value="${name.edad}"/></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>

6
 <script>
//Le indicamos a datatables que usaremos nuestra tabla
$(document).ready(function() {
$('#empleadostable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
</body>
</html>

Importante:
 Observe que los componentes (javascript y css) de la libreria Datatables y de Bootstrap se
agregan a la pag. JSP por medio de los CDN (Content Delivery Networks). Tome en cuenta que
necesitará internet para que funcionen.
 Si no desea implementarlo de esa manera, deberá descargar a cada uno de los ficheros, importarlos
manualmente a su proyecto y cuidar de cumplir las dependencias entre ellos.

6. Ejecute el archivo VerEmpleados.jsp. Obtendrá un resultado similar al siguiente:

7. Examine y pruebe cuidadosamente a las diferentes opciones proporcionadas por DataTable.

Entre ellas el ordenamiento del contenido, filtrado de búsqueda y exportación de datos a otros
archivos.

7
 Parte 3: Librería de Etiquetas displaytags
8. Descargue el conjunto de librerías displaytags desde su sitio web:
http://www.displaytag.org/1.2/download.html
9. Descomprima el archivo descargado (displaytag-1.2-bin.zip) y explore el contenido de la carpeta
resultante. Localice y abra el archivo comprimido displaytag-examples-1.2.war.
Tal como lo muestra la imagen, este contiene la estructura de carpetas y archivos de un proyecto en Java
que demuestra el uso de las etiquetas displaytags.

En las librerias de esta aplicación de ejemplo, encontrara las dependencias y recursos (imágenes, hojas
de estilo) necesarios para el uso de displaytags.

10. Descomprima el archivo presentado en el paso anterior.

Del contenido, elija a las Subcarpetas (css, images, img) y copielas a la carpeta Web Pages de su
proyecto web.
11. Dentro de su proyecto web, de clic secundario en la carpeta Libraries y elija opción Add JAR/Folder…
En el asistente, ubique a la opción Buscar en: y seleccione a la subcarpeta (WEB-INF/lib) del contenido
descomprimido de la demostración. Aca se listaran los Archivos (.jar) de las librerias de displaytags que
se importaran a su proyecto web.

8
 Seleccione a todos los archivos listados y de clic en botón Abrir. Espere unos segundos y luego confirme
que se agregaron los archivos .jar a la carpeta Libraries de su proyecto web.
12. Retorne al contenido de la carpeta descomprimida y ubique a la subcarpeta (WEB-INF/classes).
Copie esta subcarpeta classes hacia la carpeta WEB-INF de su proyecto web.

Utilizando displaytags
13. Crear una página JSP llamada primerdisplaytag.jsp y agregar ahí el siguiente código.
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style media="all" type="text/css">
@import url("${ctx}/css/screen.css");
</style>
<title>Uso de displaytag</title>
</head>
<body>
<h1>Utilizando Displaytag</h1>
<h2><c:out value="${ctx}"/></h2>
<sql:query var="q1" dataSource="jdbc/mysql">
SELECT * from empleados
</sql:query>

<display:table id="persona" name="${q1.rows}">

<display:column title="Codigo" property="id" sortable="true"/>
<display:column title="Nombre" property="nombres" sortable="false"/>
<display:column title="apellido1" property="apellido1" sortable="true"/>
<display:column title="edad" property="edad" sortable="false"/>

9
 </display:table>
</body>
</html>

Importante:
 El campo sortable indica si la columna sera usada como criterio para ordenar a las filas del contenido.
 Una forma equivalente de utilizar displaytag es la siguiente.
<display:table id="persona" name="${q1.rows}">
<display:column title="Codigo" >
<c:out value="${persona.id}"/>
</display:column>
<display:column title="Nombre" >
<c:out value="${persona.nombres}"/>
</display:column>
</display:table>

14. Ejecute la pagina anterior. El resultado deberá verse de la siguiente manera.

En este ejemplo, solo se podrá ordenar por el campo id o también por apellido 1

Paginado
Como puede observar, ahora tenemos nuestro diplaytag para mostrar la información, pero el problema surgirá
cuando existan alrededor de 30 registros o más, ya que es anti-estético mostrar el total de registros en un espacio
reducido. Para resolver este problema se utiliza el paginado.
Para crear el paginado solamente debe agregar la propiedad llamada pagesize en la etiqueta display:table.
15. Modifica a etiqueta display:table, para agregar la propiedad pagesize, de la siguiente manera:
<display:table id="persona" pagesize="3" name="${q1.rows}" >
<display:column title="Codigo" property="id" sortable="true"/>
<display:column title="Nombre" property="nombres" sortable="false"/>

10
 <display:column title="apellido1" property="apellido1" sortable="true"/>
<display:column title="edad" property="edad" sortable="false"/>

</display:table>

La propiedad fue establecida con un valor de 3. Esto permitirá que los registros se muestren de tres en
tres. Observe el resultado después de refrescar la página desde el navegador donde la muestra
actualmente.

Ahora el contenido ha sido paginado, permitiéndole desplazarse entre las páginas que contienen
los registros. Ahora ya se ve mucho más estético.

Exportación de datos
Hay momentos en los cuales se necesitará exportar los datos mostrados por displaytag a otros formatos diferentes.
Esto representa un dolor de cabeza para cualquier programador al realizarlo desde cero, pero displaytag es una
gran ayuda para ejecutar esta tarea.
16. Modifique a la etiqueta display:table, agregando a la propiedad export con el valor true, tal como
muestra el siguiente código:
<display:table id="persona" pagesize="3" name="${q1.rows}" export="true" >
<display:column title="Codigo" property="id" sortable="true"/>
<display:column title="Nombre" property="nombres" sortable="false"/>
<display:column title="apellido1" property="apellido1" sortable="true"/>
<display:column title="edad" property="edad" sortable="false"/>
</display:table>

17. Actualice la ventana del navegador. La página quedara de la siguiente manera:

11
Importante:
 Los formatos para exportación que mostrara el displaytag dependerán del valor del archivo
“displaytag.properties”, (alojado en la subcarpeta WEB-INF/classes de su proyecto).

18. Para personalizar la exportación de los datos a otros formatos, modificaremos el archivo
displaytag.properties,
Ubiquelo en su proyecto y ábralo. Observe su contenido predeterminado:

19. Modifique el contenido anterior, agregando las siguientes líneas al final del contenido actual:

Importante:
 Ya que esta modificación se hizo en un archivo de propiedades, debe reiniciar el
Tomcat/Glassfish. O también, puede dar clic secundario sobre nombre de su proyecto,
seleccionar la opción “Clean and Build” y posteriormente “Deploy”.

20. Vuelva a ejecutar la pagina primerdisplaytag.jsp. Pruebe la exportación, dando clic en opción a
Excel. Se muestra una ventana de aviso de descarga del archivo udb.xls, generado por displaytag.
Abra el archivo y observe el contenido retornado.

12
Creando un link con parámetro
21. Crear una nueva JSP llamada displayparametro.jsp y en ella digitar el siguiente código:
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<style media="all" type="text/css">
@import url("${ctx}/css/screen.css");
#center {
position: relative;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
background: #83C24A;
height: 50px;
width: 250px;
box-shadow: 0 0 4px rgba(0,0,0,.3);
}
html {background: #DBDBDB}
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<title>Parametros displaytag</title>
</head>
<body>
<h1>Utilizando Displaytag</h1>
<h2><c:out value="${ctx}"/></h2>

<sql:query var="q1" dataSource="jdbc/mysql">

SELECT * from empleados
</sql:query>

<display:table id="persona" name="${q1.rows}" pagesize="3" export="true">

13
 <display:column title="Codigo" property="id" sortable="true" />
<display:column title="Nombre" sortable="true" property="nombres" />
<display:column title="Apellidos" >
${persona.apellido1}
${persona.apellido2}
</display:column>
<display:column title="" href="displayparametro.jsp" paramId="idM"
paramProperty="id" value="<img src=${ctx}/img/actualizar.png>Modificar"/>
<display:column title="" href="displayparametro.jsp" paramId="idD"
paramProperty="id" value="<img src=${ctx}/img/eliminar.png>Eliminar"/>
</display:table>

<div id="center">
<c:if test="${not empty param.idD}">
<p style="font-weight: bold; color: #d00; font-size: 16px;">Eliminar
a : <c:out value="${param.idD}"/> </p>
</c:if>

<c:if test="${not empty param.idM}">

<p style="font-weight: bold; color: #003585; font-size:
16px;a">Actualizar a : <c:out value="${param.idM}"/> </p>
</c:if>
</div>
</body>
</html>

Se puede observar que acá existen nuevos parámetros en las etiquetas display:column, y son:
 paramId: Nombre del parámetro en la URL.
 paramProperty: Propiedad que se deseas pasar de parámetro.
 href: Utilizado para crear un link en esa columna.

22. Ejecute la pagina jsp creada en paso anterior. Elija al enlace de modificar de una de las filas.
Al realizar click sobre cualquiera de los link que se han creado, es posible obtener el id del registro
seleccionado, tal como lo señalan los recuadros rojos en la siguiente imagen.

14
 Parte 4: Manejo de Errores
Para esta parte manejaremos los errores en tiempo de ejecución a partir de la modificación del archivo web.xml.
23. Ubique el archivo web.xml dentro de la carpeta WEB-INF de su proyecto.
Si este no existe, haga clic secundario sobre esta carpeta WEB-INF, elija opción New y seleccione la
opción XML Document. Asigne el nombre web al nuevo archivo, y haga clic en botones
Siguiente->Finalizar.
24. Reemplace el contenido del archivo web.xml con las siguientes líneas:

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-
app_2_5.xsd">
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<error-page>
<error-code>404</error-code>
<location>/error404.jsp</location>
</error-page>

15
 <error-page>
<error-code>500</error-code>
<location>/error500.jsp</location>
</error-page>

<error-page>
<exception-type>java.sql.SQLException</exception-type>
<location>/errorsql.jsp</location>
</error-page>
</web-app>

 Las definiciones anteriores permiten un manejo gráfico para cualquier error que pueda surgir
dentro de la aplicación (WAR-"Web-Archive").
 Las primeras dos declaraciones indican una página de redirección mediante el elemento
<location>. Esta redirección sería llevada a cabo cada vez que el "Servlet Engine"/"Application
Server" encuentre un error HTTP 404 (Página no Encontrada) y/o HTTP 500 (Error Interno).
 La tercera declaración indica una redirección en base a un error por Clase. Se define que en
caso de surgir un error de tipo java.sql.SQLException, se redireccione al usuario a la página
errorsql.jsp.
 Las definiciones anteriores permiten que el usuario final nunca observe un Stack de errores y le
sea presentada una página más amigable, con instrucciones o indicaciones acerca del error.

25. Para continuar, cree las siguientes 3 páginas JSP:

error404.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pagina no encontrada</title>
</head>
<body>
<center>
<h2>Error 404 (Pagina no encontrada)</h2>
<img src="img/error404.png" width="693" height="544" alt="error 404"/>
</center>
</body>
</html>

error500.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

16
 <title>Error interno</title>
</head>
<body>
<center>
<h2>Error 500 (Error Interno)</h2>
<img src="img/error500.JPG" width="693" height="544" alt="error 500"/>
</center>
</body>
</html>

errorsql.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Error sql</title>
</head>
<body>
<center>
<h2>Error con la Base de Datos</h2>
<img src="img/errorsql.jpg" width="693" height="544" alt="error sql"/>
</center>
</body>
</html>

26. Ahora, cuando se produzca algún error del tipo establecido en el web.xml, la ejecución será
redireccionada a la página indicada, para que el usuario no visualice la típica pantalla de error con la
traza del mismo.

Parte 5: Librerías Ajax (Prototype y Scriptaculous)

Para esta sección utilizaremos estas 2 librerías para poder realizar una inserción de datos sin la necesidad de
refrescar toda la página.
27. Descargue los archivos Javascript de las librerias Prototype y Scriptaculous, desde sus sitios web
oficiales http://prototypejs.org/ y luego http://script.aculo.us/, respectivamente.

28. Dentro de carpeta Web Pages, cree una carpeta denominada js. Luego agregue en su interior a las
librerías prototype.js, scriptaculous.js y a effects.js. (o puede también referenciarlos por sus cdns).
Agregar la imagen llamada cargando.gif dentro de la carpeta img.

29. Crear la página Informacion.jsp y redacte ahí al siguiente código:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

17
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datos</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"> </script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/effects.js"></script>
<script language="Javascript">
function ingresar(){
$('datos').innerHTML = "";
$('Resultado').innerHTML="";
Element.show('Resultado');
$('cargando').innerHTML = "<img src='img/cargando.gif'>Cargando";
alert("Espere un momento");
var params= Form.serialize($("persona"));
var url="ProcesarInfo.jsp";
var ajx = new Ajax.Updater('datos',url,{parameters:params,method:"post",
onComplete:muestraMensaje});
}

function muestraMensaje(){
$('cargando').innerHTML = "";
$('Resultado').innerHTML = "<b>Datos ingresados correctamente</b>";
new Effect.Fade('Resultado', {duration: 5});
}
</script>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="row">
<h3>Datos personales</h3>
</div>
<form role="form" name="persona" id="persona" action="ProcesarInfo.jsp"
method="POST">
<div class="form-group">
<label for="nombre">Ingrese su nombre:</label>
<input type="text" class="form-control" name="nombre" id="nombre"

18
placeholder="Nombre">
</div>
<div class="form-group">
<label for="apellido1">Ingrese su primer apellido:</label>
<input type="text" class="form-control" id="apellido1" name="apellido1"
placeholder="Primer apellido">
</div>
<div class="form-group">
<label for="apellido2">Ingrese su segundo apellido:</label>
<input type="text" class="form-control" id="apellido2" name="apellido2"
placeholder="Segundo apellido">
</div>
<div class="form-group">
<label for="edad">Ingrese su edad:</label>
<input type="text" class="form-control" name="edad" id="edad"
placeholder="Edad">
</div>
<input type="button" class="btn btn-info" value="Ingresar" onclick="ingresar();">
&nbsp;<input type="reset" class="btn btn-info" value="Limpiar"/>
</form><br/>
<div class="panel panel-primary">
<div class="panel-heading">Datos</div>
<div class="panel-body" id="datos">
Datos
</div>
</div>
<div id="cargando">Aqui va a cargar el gif</div>
<div id="Resultado" class="alert alert-info">Resultado</div>
</div>
</div>

</div>
</body>
</html>

30. Ahora crearemos la página donde se realizará la captura e inserción de datos, esta será llamada
ProcesarInfo.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<jsp:useBean id="generarCodigo" scope="page" class="sv.edu.udb.guia11.CodigoBean"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Resultado</title>

19
 </head>
<body>
<c:set var="nombre" value="${param.nombre}"/>
<c:set var="apellido1" value="${param.apellido1}"/>
<c:set var="apellido2" value="${param.apellido2}"/>
<c:set var="edad" value="${param.edad}"/>
<sql:query var="q1" dataSource="jdbc/mysql">
SELECT * from empleados
</sql:query>
<c:set var="nreg" value="${q1.rowCount}"/>
<c:set target="${generarCodigo}" property="apellido1" value="${apellido1}"/>
<c:set target="${generarCodigo}" property="apellido2" value="${apellido2}"/>
<c:set target="${generarCodigo}" property="nombre" value="${nombre}"/>
<c:set target="${generarCodigo}" property="cantidadRegistros" value="${nreg}"/>
<c:set var="codigoUsu" value="${generarCodigo.cod}"/>

Nombre: <c:out value="${nombre} " /><br>

Apellido1: <c:out value="${apellido1} " /><br>
Apellido2: <c:out value="${apellido2} " /><br>
edad: <c:out value="${edad} " /><br>
Codigo: <c:out value="${codigoUsu} " /><br>

<sql:update var="insertar" dataSource="jdbc/mysql">

insert into empleados (id,nombres,apellido1,apellido2,edad) values (?,?,?,?,?)
<sql:param value="${codigoUsu}"/>
<sql:param value="${nombre}"/>
<sql:param value="${apellido1}"/>
<sql:param value="${apellido2}"/>
<sql:param value="${edad}"/>
</sql:update>
</body>
</html>

20
 31. Ejecute la página “Informacion.jsp”. Compruebe que sucede si presiona directamente botón Ingresar
(sin haber escrito valor a ningún campo del form).
Luego, ingrese datos válidos y presione nuevamente al botón Ingresar. Confirme que la interface indica
que los datos fueron agregados correctamente.

Parte 6: Internacionalización con JSTL

La internacionalización es el proceso de diseño de un producto para que el mismo pueda adaptarse a varios idiomas
y regiones sin cambios de diseño. Ello asegura que el producto funcione en más de un idioma.
32. Para esta parte, cree una página llamada internacionalizacion.jsp y agregue el siguiente código:

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link href="css/tabla1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2><fmt:message key="label.datos"/></h2>
<form name="persona" action="ProcesarInfo.jsp" method="post">
<table border="0">
<tbody>
<tr>
<td><fmt:message key="label.nombre"/></td>
<td><input type="text" name="nombre" value="" /></td>
</tr>
<tr class="odd">
<td><fmt:message key="label.apellido1"/></td>
<td><input type="text" name="apellido1" value="" /></td>
</tr>
<tr>
<td><fmt:message key="label.apellido2"/></td>
<td><input type="text" name="apellido2" value="" /></td>
</tr>
<tr class="odd">
<td><fmt:message key="label.edad"/></td>
<td><input type="text" name="edad" value="" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="<fmt:message
key="label.ingresar"/>"></td>
</tr>
</tbody>

21
 </table>
</form>
<br/>
<center>
<jsp:useBean id="now" class="java.util.Date" />
<fmt:formatDate value="${now}" pattern="dd 'de' MMMM 'de' yyyy, hh:mm a." />
</center>
</body>
</html>

33. Para dar una buena presentación a la tabla que contiene el formulario de la pagina
internacionalización.jsp, debera crear un archivo de hoja de estilo en cascada (css) dentro del proyecto.
Para ello, haga clic sobre la carpeta css del proyecto y presione la combinación de teclas Crtl + N.
Dentro del asistente, elija categoría HTML5 y en Tipo de archivo: Cascading Style Sheet.
34. Llame a su archivo tabla1.css y luego agregue ahí al siguiente contenido:

table {
width: 650px;
border-collapse:collapse;
border:1px solid #FFCA5E;
}
caption {
font: 1.8em/1.8em Arial, Helvetica, sans-serif;
text-align: left;
text-indent: 10px;
background: url(bg_caption.jpg) right top;
height: 45px;
color: #FFAA00;
}
thead th {
background: url(bg_th.jpg) no-repeat right;
height: 47px;
color: #FFFFFF;
font-size: 0.8em;
font-weight: bold;
padding: 0px 7px;
margin: 20px 0px 0px;
text-align: left;
border-right: 1px solid #FCF1D4;
}
tbody tr {
background: url(bg_td1.jpg) repeat-x top;
}
tbody tr.odd {
background: #FFF8E8 url(bg_td2.jpg) repeat-x;
}

22
tbody th,td {
font-size: 0.8em;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
padding: 10px 7px;
border-top: 1px solid #FFCA5E;
border-right: 1px solid #DDDDDD;
text-align: left;
}
a{
color: #777777;
font-weight: bold;
text-decoration: underline;
}
a:hover {
color: #F8A704;
text-decoration: underline;
}
tfoot th {
background: url(bg_total.jpg) repeat-x bottom;
color: #FFFFFF;
height: 30px;
}
tfoot td {
background: url(bg_total.jpg) repeat-x bottom;
color: #FFFFFF;
height: 30px;
}

35. Para comenzar el proceso de internacionalización de la pagina JSP anterior, creara 2 archivos con
extensión (.properties), los cuales se llamaran:
 AplicationResource_en.properties
 AplicationResource_es.properties

36. Para crear el primer archivo de propiedades solicitado en el paso anterior, de click secundario sobre la
carpeta de paquetes fuentes (Source Packages) de su proyecto web, seleccione opción New, y elija
opción Other.
37. En la ventana del Asistente de nuevo archivo, seleccione la categoría Other y elija tipo de archivo
Properties File, como lo muestra la siguiente imagen.

23
 De clic en botón Siguiente para crear el archivo de propiedades llamado AplicationResource_en.

38. Repita el paso anterior para crear el otro archivo de propiedades (AplicationResource_es) solicitado.
La pareja de archivos de propiedades agregados a su proyecto, se ubicaran en la carpeta de paquetes
fuentes de clases (Source Packages), tal como muestra la imagen siguiente.

39. Ingrese el siguiente contenido de código a los archivos de propiedades correspondientes.

AplicationResource_es.properties AplicationResource_en.properties
label.nombre=Ingrese su nombre label.nombre= Enter your name
label.apellido1=Ingrese su primer apellido label.apellido1= Enter your first surname
label.apellido2=Ingrese su segundo apellido label.apellido2= Enter your second surname
label.edad=Ingrese su edad label.edad= Enter your age
label.ingresar=Ingresar label.ingresar= Enter
label.datos=Datos personales label.datos= Personal Information

24
De esta forma, en ambos archivos de propiedades, se agrega a cada uno de los identificadores html usados en la
página internacionalizacion.jsp, pero sus valores asignados se definirán en un lenguaje humano diferente.

40. Localice y abra el archivo web.xml. Luego, en su contenido, ubique la etiqueta de cierre del elemento
<web-app>. Antes del cierre, inserte ahí al siguiente parámetro de contexto.

<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>AplicationResource</param-value>
</context-param>
Aqui se define que buscara los archivos de propiedades (.properties) que comiencen con el nombre
AplicationResource, guardados en la carpeta raíz de clases (Source Packages) del proyecto web.

41. Proceda a ejecutar el archivo internacionalizacion.jsp. El idioma de los elementos HTML serán
tomados de uno de los archivos de propiedades (.properties), que será elegido de acuerdo al idioma
configurado en el navegador web del cliente.

Idioma: español

Idioma: inglés

25
 42. Investigue la manera de cambiar el lenguaje utilizado por el navegador web que ha usado durante esta
practica.
Luego, modifique el lenguaje del navegador al ingles y actualice la pagina internacionalización.jsp.

VI. ANALISIS DE RESULTADOS

 Implementar Datatables e internacionalización en 2 de las paginas con formularios (y sus mensajes de

aviso complementarios) de su proyecto de catedra.
La primer pagina tendrá capacidad de lenguajes español y portugués; la otra interface con lenguaje
español e ingles.

 Diseñar al menos dos mantenimientos completos (CRUD) con displaytag dirigidos a dos tablas
diferentes de su proyecto de catedra con la tecnología anteriormente mencionada.

V. REFERENCIA BIBLIOGRAFICA

http://www.ribosomatic.com/ejemplos/script.aculo.us/efectos.php

http://www.miguelmanchego.com/2009/validar-formularios-ajax-jquery/

http://javaweb.osmosislatina.com/curso/wars.htm

26
 Hoja de cotejo.

HOJA DE EVALUACIÓN

Carnet: Alumno:

Fecha: Docente:
No.: Título de la guía:

Actividad a Cumplió
Criterio a evaluar Puntaje
evaluar SI NO
Realizó los ejemplos de guía de práctica (40%)
Presentó todos los problemas resueltos (20%)
Desarrollo Funcionan todos correctamente y sin errores (30%)
40% Envió la carpeta comprimida y organizada adecuadamente en
subcarpetas de acuerdo al tipo de recurso (10%)
PROMEDIO:
Entregó la investigación complementaria en la fecha indicada
(20%)
Resolvió todos los ejercicios planteados en la investigación
Investigación
(40%)
complementaria
Funcionaron correctamente y sin ningún mensaje de error a
60%
nivel de consola o ejecución (40%)
PROMEDIO:

27