UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLGICOS

GUIA DE LABORATORIO #11 Nombre de la D !"la#ta$ # l brer%a! A&A' Pract ca: L($ar de CENTRO DE COMPUTO E)ec(c *+: T em"o 3 HORAS CLASE E!t mado: ,ATERIA: PROGRA,ACI-N ORIENTADA A OB&ETOS I DOCENTES: RAFAEL TORRES JONATHAN ARVALOS FRANCISCO SORIANO I. OBJETIVOS. Que el estudiante:

CICLO: 01/ 2011

Logre manipular las libreras de displaytag para crear paginado, formatos de exportacin y ordenamiento de los campos. Validacin de error por medio del archivo web.xm . Utilice libreras a ax actuales para dar vistosidad y una me or funcionalidad a sus proyectos !eb. II. INTRODUCCION.

!"#e e$% "s un una librera de tags sp open source #ue es de gran utilidad a la hora de traba ar con una ar#uitectura $V%. !"#e me &e'm()e *+,e'% "sta librera de tags sirve de gran utilidad cuando se #uiere mostrar una coleccin de datos en un tabla& seg'n la p(gina oficial presentara a futuro otras funcionalidades), permiti*ndote, adem(s, entre otras cosas, agregarle estilos, decorators a los datos mostrados, exportar a distintos formatos, utili+ar paginacin y sort tanto por medio de la librera como externa. De$,'(&,(-. La librera D($& +/T+0 es un componente #ue nos permite visuali+ar tablas dentro de un modelo $V%. "sta librera nos permite aplicar una plantilla de presentacin a una lista de datos, as como reali+ar numerosas funciones sobre los mismos:

,aginar los datos mostrados -rdenar los datos por columnas "xportar los datos a otros formatos&"xcel, .$L, %/V, ,01) 2grupar los datos
III. PROCEDIMIENTO.

,ara esta gui( se necesitar crear un proyecto !eb llamada 34uia5,--56, tomar en cuenta #ue para este proyecto debe de ar chec7ear la casilla 3Use 0edicated 1older for /toring Libraries6 para poder copiar las libreras al proyecto. P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I 8

I.$)+ +,(-. 8. 2gregar a la librera todos los archivos ar proporcionados por el docente. Ver la siguiente figura.

5. 2hora deber( crear una carpeta llamada clases dentro del 9":;<=1, para ello dar clic7 derecho sobre la carpeta, buscar entre ellas la opcin de folder, sino se encuentra deber( dar clic7 en -ther, esto abrir( una nueva ventana en la cual buscamos de nuevo -thers y ah deber( a parecer la opcin folder, ver la siguiente figura.

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

>. 0ar clic7 en =ext y en la siguiente ventana deber( poner como nombre a la carpeta 4, +$$e$5.

?. %omo siguiente paso deber( agregar un archivo de propiedades llamado 42($& +/)+0.&'1&e')(e$5 proporcionado por el docente, para esto sale mas sencillo despla+arse hasta la ubicacin del proyecto por medio de un gestor de ventanas y colocar en la carpeta 4, +$$e$5 el archivo proporcionado. @. 2hora podr( ver en 4Ne)be+.$5 en su respectiva carpeta #ue el archivo esta agregado. A. %omo siguiente punto importaremos en las p(ginas B/, cada librera. CDE taglib uriFGhttp:HH ava.sun.comH spH stlHs#lG prefixFGs#lG DI CDE taglib prefixFGcG uriFGhttp:HH ava.sun.comH spH stlHcoreG DI CDE taglib uriFGhttp:HHdisplaytag.sf.netG prefixFGdisplayG DI J. %omo siguiente punto debera crear una carpeta img y una css, estas deben de #uedar al mismo nivel #ue la $"K2;<=1 y la 9":;<=1, ver la siguiente figura

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

>

L. %olocar en las carpeta css y la img los archivos proporcionados por el docente. M. 2hora ya podremos utili+ar displaytag en nuestras paginas. U)( (6+.21 2($& +/)+0. ,ara esta seccin deberemos utili+ar la base de datos empleados creada en la guia8N y a la ve+ deber( crear un conexin con un pool de conexiones visto en la guia8. %rear una pagina sp llamada 4&'(me'2($& +/)+0.3$&5 y agregar el siguiente cdigo. CDE taglib uriFGhttp:HH ava.sun.comH spH stlHs#lG prefixFGs#lG DI CDE taglib prefixFGcG uriFGhttp:HH ava.sun.comH spH stlHcoreG DI CDE taglib uriFGhttp:HHdisplaytag.sf.netG prefixFGdisplayG DI Cc:set varFGctxG valueFGOPpage%ontext.re#uest.context,athQG HI Cstyle mediaFGallG typeFGtextHcssGI Eimport url&GOPctxQHcssHscreen.cssG)R CHstyleI ChtmlI CheadI Cmeta http;e#uivFG%ontent;KypeG contentFGtextHhtmlR charsetFUK1;LGI CtitleIB/, ,ageCHtitleI CHheadI CbodyI Ch8IUtili+ando 0isplaytagCHh8I Cs#l:#uery varFG#8G data/ourceFG dbcHmys#lGI /"L"%K S from datosempleados CHs#l:#ueryI Cdisplay:table idFGpersonaG nameFGOP#8.ro!sQG I Cdisplay:column titleFG%odigoG propertyFGidG HI Cdisplay:column titleFG=ombreG propertyFGnombresG HI CHdisplay:tableI CHbodyI CHhtmlI Una forma e#uivalente de utili+ar displaytag es la siguiente. Cdisplay:table idFGpersonaG nameFGOP#8.ro!sQGI Cdisplay:column titleFG%odigoG I Cc:out valueFGOPpersona.idQGHI CHdisplay:columnI Cdisplay:column titleFG=ombreG I Cc:out valueFGOPpersona.nombresQGHI CHdisplay:columnI CHdisplay:tableI "l resultado deber( verse de la siguiente manera:

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

%omo pudo observar ahora tenemos nuestro diplaytag para mostrar la informacin pero el problema sera cuando existan unos 8NN registros seria bastante anti;est*tico mostrar los 8NN registros de un solo golpe, para resolver este problema tenemos el paginado. P+0(.+21 ,ara crear el paginado solamente deberemos agregar una propiedad en 2($& +/7)+b e esta propiedad es llamada &+0e$(6e, ahora lo modificaremos para #ue #uede de la siguiente manera. Cdisplay:table idFGpersonaG pagesi+eFG>G nameFGOP#8.ro!sQG I Cdisplay:column titleFG%odigoG propertyFGidG HI Cdisplay:column titleFG=ombreG propertyFGnombresG HI CHdisplay:tableI La propiedad fue establecida con un valor de >, esto permitir( #ue los registros se muestren de tres en tres, ver el resultado despu*s de refrescar la pagina.

2hora el contenido a sido paginado permiti*ndome despla+ar entre las paginas #ue contienen los registros, esto se ve ahora mucho mas est*tico. O'2e.+m(e.)1 2e 'e0($)'1$ &1' ,1 #m.+. "n alg'n momento necesitaremos ordenar los registros para ello utili+aremos la propiedad $1')+b e y la estableceremos como true, esto deberemos de reali+aremos en cada columna #ue necesitemos el ordenamiento, modificaremos el mismo cdigo y deber( de #uedar de la siguiente manera. Cdisplay:table idFGpersonaG pagesi+eFG>G nameFGOP#8.ro!sQG I Cdisplay:column titleFG%odigoG propertyFGidG sortableFGtrueGHI Cdisplay:column titleFG=ombreG propertyFGnombresG sortableFGtrueGHI CHdisplay:tableI

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

"l resultado despu*s de refrescar la pagina #uedara de la siguiente manera.

/i se mira con cuidado a la par del campo %digo y =ombre ahora se logra visuali+ar una imagen #ue representara #ue ordenamiento se esta reali+ando, para ver el ordenamiento nos ubicamos sobre el campo %digo o =ombre y damos clic7 ah observaremos el ordenamiento reali+ado. Ex&1')+,(-. 2e 2+)1$ Tay momentos en los cuales se necesitara exportar los datos mostrados a diferente formatos, esto es un dolor de cabe+a para cual#uier programador pero displaytag es de gran ayuda para este tipo de traba os. ,ara ello estableceremos la propiedad ex&1') con valor true, los formatos #ue de exportacin #ue se mostraran en la pagina depender( del valor del archivo 42($& +/)+0.&'1&e')(e$5, el cdigo deber( #uedar de la siguiente manera. Cdisplay:table idFGpersonaG pagesi+eFG>G nameFGOP#8.ro!sQG exportFGtrueG I Cdisplay:column titleFG%odigoG propertyFGidG sortableFGtrueGHI Cdisplay:column titleFG=ombreG propertyFGnombresG sortableFGtrueGHI CHdisplay:tableI "l resultado despu*s de refrescar la pagina #uedara de la siguiente manera.

,ara poder a exportar a otros formatos modificaremos el archivo 2($& +/)+0.&'1&e')(e$, #ue al abrirlo se ve de la siguiente manera.

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

2hora lo modificaremos para #ue #uede de la siguiente manera

0eber( parar el Komcat y volver( a reiniciarlo ya #ue la modificacin es a nivel de un archivo de propiedades, el resultado se observara de la siguiente manera.

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

M+.e31 2e E''1'e$ 8. ,ara esta parte mane aremos los errores a partir de la modificacin del archivo !eb.xml, este deber( #uedar de la siguiente manera. CUxml versionFG8.NG encodingFGUK1;LGUI C!eb;app versionFG5.@G xmlnsFGhttp:HH ava.sun.comHxmlHnsH avaeeG xmlns:xsiFGhttp:HH!!!.!>.orgH5NN8H.$L/chema;instanceG xsi:schemaLocationFGhttp:HH ava.sun.comHxmlHnsH avaee http:HH ava.sun.comHxmlHnsH avaeeH!eb; appV5V@.xsdGI Csession;configI Csession;timeoutI >N CHsession;timeoutI CHsession;configI C!elcome;file;listI C!elcome;fileIindex. spCH!elcome;fileI CH!elcome;file;listI Cerror;pageI Cerror;codeI?N?CHerror;codeI ClocationIHerror?N?. spCHlocationI CHerror;pageI Cerror;pageI Cerror;codeI@NNCHerror;codeI ClocationIHerror@NN. spCHlocationI CHerror;pageI
<error-page> <exception-type>java.sql.SQLException</exception-type> <location>/errorsql.jsp</location>

CHerror;pageI CH!eb;appI Las definiciones anteriores permiten un mane o gr(fico para cual#uier error #ue pueda surgir dentro de la aplicacin &92W;G9eb;2rchiveG). Las primeras dos declaraciones indican una p(gina de redireccin mediante el elemento <location>, esta redireccin sera llevada acabo cada ve+ #ue el G/ervlet "ngineGHG2pplication /erverG encontrara un error TKK, ?N? &,(gina no "ncontrada) yHo TKK, @NN &"rror <nterno). La tercer declaracin indica una redireccin en base a un error por %lase, en este caso se esta indicando #ue 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 #ue 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. 5. 2hora deber( crear tres paginas: error?N?. sp con el siguiente contenido. P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I L

ChtmlI CheadI Cmeta http;e#uivFG%ontent;KypeG contentFGtextHhtmlR charsetFUK1;LGI CtitleIB/, ,ageCHtitleI CHheadI CbodyI Ch5I"rror ?N? &,agina no encontrada)CHh5I Cimg srcFGimgHerror?N?. pgGg !idthFGAM>G heightFG@??G altFGerror ?NNGHI CHbodyI CHhtmlI

error@NN. sp con el siguiente contenido:

ChtmlI CheadI Cmeta http;e#uivFG%ontent;KypeG contentFGtextHhtmlR charsetFUK1;LGI CtitleIB/, ,ageCHtitleI CHheadI CbodyI Ch5I"rror @NN &"rror <nterno)CHh5I Cimg srcFGimgHerror@NN.B,4G !idthFGAM>G heightFG@??G altFGerror @NNGHI CHbodyI CHhtmlI

errors#l. sp

ChtmlI CheadI Cmeta http;e#uivFG%ontent;KypeG contentFGtextHhtmlR charsetFUK1;LGI CtitleIB/, ,ageCHtitleI CHheadI CbodyI Ch5I"rror con la :ase de 0atosCHh5I Cimg srcFGimgHerrors#l. pgG !idthFGAM>G heightFG@??G altFGerror s#lGHI CHbodyI CHhtmlI 2hora #ue se produ+ca alg'n error del tipo establecido en el !eb.xml este sera redireccionado para #ue el usuario no vea el error causado. L(b'e'(+$ A3+x 8P'1)1)/&e / S,'(&)+,# #$9 ,ara esta seccin utili+aremos estas libreras para poder reali+ar una insercin de datos sin la necesidad de refrescar toda la pagina, utili+aremos archivos Bsp y avabens creados en la gui(8. 8. 2grear las libreras 3&'1)1)/&e.3$: $,'(&)+,# 1#$.3$:e;;e,)$.3$6 5. 2gregar la imagen llamada <=0.0(; dentro de la carpeta img. >. %rear la pagina 4I.;1'm+,(1..3$&5 y agregar el siguiente cdigo: CDE taglib prefixFGcG uriFGhttp:HH ava.sun.comH spH stlHcoreG DI ChtmlI CheadI P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I M

Cmeta http;e#uivFG%ontent;KypeG contentFGtextHhtmlR charsetFUK1;LGI CtitleIB/, ,ageCHtitleI Cscript typeFGtextH avascriptG srcFG sHprototype. sGICHscriptI Cscript typeFGtextH avascriptG srcFG sHscriptaculous. sGICHscriptI Cscript languageFGBavascriptGI function ingresar&)P O&XdatosX).innerTK$L F GGR O&XWesultadoX).innerTK$LFGGR "lement.sho!&XWesultadoX)R O&XcargandoX).innerTK$L F GCimg srcFXimgHcargando.gifXIGR var paramsF 1orm.seriali+e&O&GpersonaG))R var urlFG,rocesar<nfo. spGR var a x F ne! 2 ax.Updater&XdatosX,url,Pparameters:params,method:GpostG, on%omplete:muestra$ensa eQ)R Q function muestra$ensa e&)P O&XcargandoX).innerTK$L F GGR O&XWesultadoX).innerTK$L F GCbI0atos ingresados correctamenteCHbIGR ne! "ffect.1ade&XWesultadoX, Pduration: @Q)R Q CHscriptI Cc:set varFGctxG valueFGOPpage%ontext.re#uest.context,athQG HI Cstyle mediaFGallG typeFGtextHcssGI Eimport url&GOPctxQHcssHscreen.cssG)R CHstyleI CHheadI CbodyI Ch5I<ngrese los datosCHh5I CbodyI Cform nameFGpersonaG idFGpersonaG actionFG,rocesar<nfo. spG methodFGpostGI <ngrese su nombre: Cinput typeFGtextG nameFGnombreG valueFGG HICbrI <ngrese su primer apellido: Cinput typeFGtextG nameFGapellido8G valueFGG HICbrI <ngrese su segundo apellido: Cinput typeFGtextG nameFGapellido5G valueFGG HICbrI <ngrese su edad: Cinput typeFGtextG nameFGedadG valueFGG HICbrI Cinput typeFGbuttonG valueFG<ngresarG onclic7FGingresar&)RGHIYnbspRCinput valueFGLimpiarG typeFGresetGHI CHformI Cdiv idFGdatosGI0atosCHdivI Cdiv idFGcargandoGIa#ui va a cargar el gifCHdivI Cdiv idFGWesultadoGIWesultadoCHdivI CDE include fileFGVer"mpleados. spGDI CHbodyI CHhtmlI

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

8N

?. 2hora crearemos la pagina donde se reali+ara la captura e insercin de datos, esta sera llamada 4P'1,e$+'I.;1.3$&5 CDE taglib prefixFGcG uriFGhttp:HH ava.sun.comH spH stlHcoreG DI CDE taglib uriFGhttp:HH ava.sun.comH spH stlHs#lG prefixFGs#lG DI C sp:use:ean idFGcodG scopeFGpageG classFGsv.edu.udb.guia8.%odigo:eanGHI ChtmlI CheadI Cmeta http;e#uivFG%ontent;KypeG contentFGtextHhtmlR charsetFUK1;LGI CtitleIB/, ,ageCHtitleI CHheadI CbodyI Cc:set varFGnombreG valueFGOPparam.nombreQGHI Cc:set varFGapellido8G valueFGOPparam.apellido8QGHI Cc:set varFGapellido5G valueFGOPparam.apellido5QGHI Cc:set varFGedadG valueFGOPparam.edadQGHI Cs#l:#uery varFG#8G data/ourceFG dbcHmys#lGI /"L"%K S from datosempleados CHs#l:#ueryI Cc:set varFGnregG valueFGOP#8.ro!%ountQGHI Cc:set targetFGOPcodQG propertyFGapellido8G valueFGOPapellido8QGHI Cc:set targetFGOPcodQG propertyFGapellido5G valueFGOPapellido5QGHI Cc:set targetFGOPcodQG propertyFGcantidadVregistrosG valueFGOPnregQGHI Cc:set varFGcodigoUsuG valueFGOPcod.codQGHI =ombre: Cc:out valueFGOPnombreQ G HICbrI 2pellido8: Cc:out valueFGOPapellido8Q G HICbrI 2pellido5: Cc:out valueFGOPapellido5Q G HICbrI edad: Cc:out valueFGOPedadQ G HICbrI %odigo: Cc:out valueFGOPcodigoUsuQ G HICbrI Cs#l:update varFGinsertarG data/ourceFG dbcHmys#lGI insert into datosempleados &id,nombres,apellido8,apellido5,edad) values &U,U,U,U,U) Cs#l:param valueFGOPcodigoUsuQGHI Cs#l:param valueFGOPnombreQGHI Cs#l:param valueFGOPapellido8QGHI Cs#l:param valueFGOPapellido5QGHI Cs#l:param valueFGOPedadQGHI CHs#l:updateI CHbodyI CHhtmlI @. 2gregar el avaben llamado 4C12(01Be+.5 y #ue fue creado en la gui( 8N. A. 2hora crearemos la pagina 4Ve'Em& e+21$.3$&5 y agregar el siguiente cdigo &2gregar las libreras #ue se observan en el cdigo, estas sera proporcionadas por su docente). P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I 88

CDE taglib uriFGhttp:HHa axtags.orgHtagsHa axG prefixFGa axG DI CDE taglib uriFGhttp:HHdisplaytag.sf.netG prefixFGdisplayG DI CDE taglib uriFGhttp:HH ava.sun.comH spH stlHs#lG prefixFGs#lG DI CDE taglib uriFGhttp:HHa axtags.orgHtagsHa axG prefixFGa axG DI Cc:set varFGctxG valueFGOPpage%ontext.re#uest.context,athQG HI ChtmlI CheadI Cmeta http;e#uivFG%ontent;KypeG contentFGtextHhtmlR charsetFUK1;LGI CtitleIB/, ,ageCHtitleI Cscript typeFGtextH avascriptG srcFGOPctxQH sHprototype. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHscriptaculousHscriptaculous. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHoverlibm!s. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHoverlibm!sVcrossframe. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHoverlibm!sViframe. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHoverlibm!sVhide. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHoverlibm!sVshado!. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHa axtags. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHa axtagsVcontrols. sGICHscriptI Cscript typeFGtextH avascriptG srcFGOPctxQH sHa axtagsVparser. sGICHscriptI CHheadI CbodyI Cs#l:#uery varFG#8G data/ourceFG dbcHmys#lGI /"L"%K S from datosempleados CHs#l:#ueryI Ca ax:displayKag idFGdisplayKag1rameG a ax1lagFGdisplay2 axGI Cdisplay:table idFGpersonaG nameFGOP#8.ro!sQG pagesi+eFG>G exportFGtrueGI Cdisplay:column titleFG%odigoG propertyFGidG sortableFGtrueGHI Cdisplay:column titleFG=ombresG propertyFGnombresG sortableFGtrueGHI Cdisplay:column titleFG2pellidosGI Cc:out valueFGOPpersona.apellido8QGHI Cc:out valueFGOPpersona.apellido5QGHI CHdisplay:columnI Cdisplay:column titleFG"dadG propertyFGedadG HI CHdisplay:tableI CHa ax:displayKagI CHbodyI CHhtmlI J. %orrer la pagina 4I.;1'm+,(1..3$&5 y observar el resultado. V+ (2+,(-. 2e F1'm# +'(1$ ,1. J>#e'/ 8. %rear una nueva pagina sp llamada 4;1'm# +'(1.3$&5 y agregar el siguiente cdigo. ChtmlI CheadI CtitleI,ruebaCHtitleI

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

85

Cscript srcFG sH #uery. sG typeFGtextH avascriptGICHscriptI Cscript srcFG sH #uery.validate. sG typeFGtextH avascriptGICHscriptI Cscript typeFGtextH avascriptGI O&document).ready&function&) P O&GZcomentarios1rmG).validate&)R Q)R CHscriptI Clin7 hrefFGcssHstyle.cssG relFGstylesheetG typeFGtextHcssG HI CHheadI CbodyI Cfieldset idFGformGI ClegendI%ont(ctenosCHlegendI Cform nameFGcomentarios1rmG idFGcomentarios1rmG methodFGpostG actionFGGI ColI CliI ClabelI=ombre: &re#uerido al menos dos caracteres)CHlabelI Cinput idFGcnameG nameFGnameG classFGre#uiredG minlengthFG5G HI CHliI CliI ClabelI";mail: &re#uerido)CHlabelI Cinput idFGcemailG nameFGemailG classFGre#uired emailG minlengthFG5G HI CHliI CliI ClabelIKu p(gina !eb: &opcional)CHlabelI Cinput idFGcurlG nameFGurlG classFGurlG valueFGG HI CHliI CliI ClabelI%omentarios: &re#uerido)CHlabelI Ctextarea idFGcomentarioG nameFGcomentarioG classFGre#uiredGICHtextareaI CHliI Cp alignFGcenterGICinput typeFGsubmitG nameFGsubmitG valueFG"nviarG HICHpI CHolI CHformI CHfieldsetI CHbodyI CHhtmlI 5. 2gregar las libreras de #uery llamadas 43>#e'/.3$ / 3>#e'/.?+ (2+)e.3$5. >. 2gregar dentro de la carpeta s una carpeta proporcionada por el docente llamada 4 1,+ (6+)(1.5 ?. 2gregar una ho a de estilo proporcionada por el docente llamada style.css. @. %orrer la pagina y el resultado deber( verse como el siguiente.

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

8>

VI. REFERENCIA BIBLIO@RAFICA.

http:HH!!!.ribosomatic.comHe emplosHscript.aculo.usHefectos.php http:HH!!!.miguelmanchego.comH5NNMHvalidar;formularios;a ax; #ueryH http:HH ava!eb.osmosislatina.comHcursoH!ars.htm

P'10'+m+,(-. O'(e.)+21 + Ob3e)1$ I

8?