universidad don bosco facultad de ingenieria escuela de ... · tal como lo muestra la imagen, este...

1

UNIVERSIDAD DON BOSCO

FACULTAD DE INGENIERIA

ESCUELA DE COMPUTACION

CICLO I

GUIA DE LABORATORIO #11

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.

2

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.

http://jquery.com/

3

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:

"arrastrar y soltar", define los elementos que se pueden arrastrar y las zonas en las que se pueden soltar

elementos;

"autocompletar", 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.


http://script.aculo.us/

4

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"/>

5

<!DOCTYPE html>

<html>

<head>

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

<title>Empleados</title>



<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>


src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>


src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>


src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>


src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>


src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>


src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>


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" />


href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" />


href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />


src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>

6



</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>

7

<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.

8

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.

http://www.displaytag.org/1.2/download.html

9

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"/>

10

</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"/>

11

<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:

12

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.

13

Creando un link con parámetro

21. Crear una nueva JSP llamada displayparametro.jsp y en ella digitar el siguiente código:



<%@ 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>

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

14

<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.

15

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>

16

<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


<html>

<head>


<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


<html>

<head>


17

<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


<html>

<head>


<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:




http://script.aculo.us/

18

<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>


src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"> </script>


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"

19

placeholder="Nombre">

</div>


<label for="apellido1">Ingrese su primer apellido:</label>

<input type="text" class="form-control" id="apellido1" name="apellido1"

placeholder="Primer apellido">

</div>


<label for="apellido2">Ingrese su segundo apellido:</label>

<input type="text" class="form-control" id="apellido2" name="apellido2"

placeholder="Segundo apellido">

</div>


<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();">

<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



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

<html>

<head>


<title>Resultado</title>

20

</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>

<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>

21

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>


<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>

22

</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;

}

23

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.

24

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.apellido1=Ingrese su primer apellido

label.apellido2=Ingrese su segundo apellido

label.edad=Ingrese su edad

label.ingresar=Ingresar

label.datos=Datos personales

label.nombre= Enter your name

label.apellido1= Enter your first surname

label.apellido2= Enter your second surname

label.edad= Enter your age

label.ingresar= Enter

label.datos= Personal Information

25

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

26

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

27

HOJA DE EVALUACIÓN

Actividad a

evaluar Criterio a evaluar

Cumplió Puntaje

SI NO

Desarrollo

40%

Realizó los ejemplos de guía de práctica (40%)

Presentó todos los problemas resueltos (20%)

Funcionan todos correctamente y sin errores (30%)

Envió la carpeta comprimida y organizada adecuadamente en

subcarpetas de acuerdo al tipo de recurso (10%)

PROMEDIO:

Investigación

complementaria

60%

Entregó la investigación complementaria en la fecha indicada

(20%)

Resolvió todos los ejercicios planteados en la investigación

(40%)

Funcionaron correctamente y sin ningún mensaje de error a

nivel de consola o ejecución (40%)

PROMEDIO:

Alumno: Carnet:

Docente: Fecha:

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

Hoja de cotejo.

universidad don bosco facultad de ingenieria escuela de ... · tal como lo muestra la imagen, este...

Documents