Curso de Java Server Faces y Ajax

Manualdelalumno

<JSF2.0> <Ajax>

Docente:CdricSimon

Versin1.0 [Link]

CursodeJSP

Pagina2/70

ndice
ndice....................................................................................................................................................................................2 1 Introduccin al curso.........................................................................................................................................................5 1.1 Objetivo de este curso................................................................................................................................................5 1.2 Manual del alumno.....................................................................................................................................................5 1.3 Ejercicios prcticos....................................................................................................................................................5 1.4 Requisitos para atender a este curso........................................................................................................................5 1.5 Soporte despus del curso..........................................................................................................................................5 2 Introduccin a Java Server Faces.....................................................................................................................................6 2.1 Que es JSF?...............................................................................................................................................................6 2.2 Servidor y herramientas utilizados...........................................................................................................................6 2.3 Primera aplicacin.....................................................................................................................................................7 2.4 Primera pgina JSF...................................................................................................................................................8 2.5 Recuperando informaciones del cdigo Java...........................................................................................................9 3 Aplicaciones JSF.............................................................................................................................................................10 3.1 Qu es una aplicacin JavaServer Faces?............................................................................................................10 3.2 Modelo de componentes de interfaz de usuario.....................................................................................................10 3.3 Las clases de componentes de interfaz de usuario................................................................................................10 3.4 Conversin de Modelo.............................................................................................................................................13 3.5 Evento y el oyente de modelo..................................................................................................................................14 1.1 Validacin.................................................................................................................................................................15 3.6 Modelo de navegacin..............................................................................................................................................15 3.6.1 Configuracin de reglas de navegacin..............................................................................................................15 3.6.2 Reglas de navegacin implcitas.........................................................................................................................18 3.7 Backed Beans............................................................................................................................................................18 3.7.1 Crear una clase de bean de respaldo....................................................................................................................18 3.7.2 Configuracin de un Bean...................................................................................................................................19 3.8 Usando el EL unificada para referenciar Backed beans......................................................................................20 3.8.1 El Ciclo de Vida de una pgina JavaServer Faces..............................................................................................21 3.8.2 Fase de restauracin de vista...............................................................................................................................22 3.8.3 Fase de aplicacin de valores..............................................................................................................................23 3.8.4 Fase de validaciones de proceso..........................................................................................................................23 3.8.5 Fase de actualizacin de valores de modelo........................................................................................................24 3.8.6 Fase de invocacin de la aplicacin....................................................................................................................24 3.8.7 Fase de creacin de la respuesta..........................................................................................................................24 4 Expresiones EL................................................................................................................................................................26 4.1 Informacin general sobre EL................................................................................................................................26 4.2 Evaluacin inmediata y diferida.............................................................................................................................26 4.2.1 Evaluacin Inmediata..........................................................................................................................................26 4.2.2 Evaluacin diferida.............................................................................................................................................27 4.3 Valor y el mtodo de expresiones............................................................................................................................27 4.4 Operadores................................................................................................................................................................27 4.5 Palabras reservadas.................................................................................................................................................28 4.6 Ejemplos de uso de EL.............................................................................................................................................28 [Link]

CursodeJSP

Pagina3/70

5 JSTL - Libreras estndar Taglib....................................................................................................................................29 5.1 Introduccin..............................................................................................................................................................29 5.2 Core...........................................................................................................................................................................29 5.3 Iteracin....................................................................................................................................................................29 5.4 Acciones de URL......................................................................................................................................................30 5.5 Condicionales............................................................................................................................................................30 5.6 Formato de texto con capacidad I18N....................................................................................................................31 5.7 Acceso a bases de datos............................................................................................................................................32 5.8 La manipulacin de XML........................................................................................................................................33 6 Formularios......................................................................................................................................................................34 6.1 Formulario sencillo..................................................................................................................................................34 6.2 Formulario mas complejo........................................................................................................................................35 7 HtmlDataTable.................................................................................................................................................................37 8 Mensaje de error personalizados.....................................................................................................................................42 8.1 Lista de mensaje personalizados.............................................................................................................................42 8.2 Pgina de error personalizada:...............................................................................................................................42 9 Convertidores...................................................................................................................................................................43 9.1 Qu es un convertidor?..........................................................................................................................................43 9.2 Uso de los convertidores..........................................................................................................................................43 9.3 Convertidores incluidos...........................................................................................................................................43 9.3.1 Convertidor DateTime.........................................................................................................................................44 9.3.2 Convertidor de Nmero.......................................................................................................................................44 9.4 Convertidores personalizados.................................................................................................................................46 10 Validadores.....................................................................................................................................................................49 10.1 Uso y Creacin de los validadores........................................................................................................................49 10.2 Validadores incluidos.............................................................................................................................................49 10.3 Validacin a nivel de aplicacin............................................................................................................................49 10.4 Validadores personalizados...................................................................................................................................50 10.5 Validador en Backed Bean....................................................................................................................................51 11 Componentes personalizados.........................................................................................................................................52 11.1 Creacin de componentes personalizados para JSP...........................................................................................52 11.1.1 El Componente..................................................................................................................................................53 11.1.2 Renderer............................................................................................................................................................54 11.1.3 Tag.....................................................................................................................................................................56 11.1.4 Inline Renderer .................................................................................................................................................58 11.2 Componentes personalizados para Facelets........................................................................................................59 12 Introduccin a Ajax.......................................................................................................................................................61 12.1 Definicin y uso.......................................................................................................................................................61 12.2 Marcos de trabajo..................................................................................................................................................61 13 Ajax con Java.................................................................................................................................................................62 13.1 Llamada Ajax con HTML.....................................................................................................................................62 13.2 Llamada Ajax con Java.........................................................................................................................................63 13.2.1 Servlet para Ajax...............................................................................................................................................63
CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina4/70

13.3 Ajax y seguridad.....................................................................................................................................................65 14 Componentes JSF para Ajax........................................................................................................................................66 14.1 Cmo JSF y Ajax pueden trabajar juntos?.......................................................................................................66 14.2 Utilizar el (Ajax) JavaScript en su pgina JSF....................................................................................................66 14.2.1 Pros....................................................................................................................................................................66 14.2.2 Contras..............................................................................................................................................................66 14.3 Poner su cdigo de Ajax JavaScript en los componentes JSF............................................................................66 14.3.1 Pros....................................................................................................................................................................66 14.3.2 Contras..............................................................................................................................................................66 14.4 Aprovechar la creciente coleccin de marcos de trabajo Ajax JSF..................................................................67 14.4.1 Pros....................................................................................................................................................................67 14.4.2 Contras..............................................................................................................................................................67 14.5 Utilizar el nuevo tag <f:ajax>................................................................................................................................67 14.5.1 Pros....................................................................................................................................................................67 14.5.2 Contras..............................................................................................................................................................67 14.5.3 Por qu el Ajax en JSF?...................................................................................................................................67 [Link] Ventajas de un enfoque especfico JSF Ajax.............................................................................................67 14.5.4 Uso del tag <f:ajax>..........................................................................................................................................68 [Link] Ejemplo sencillo.........................................................................................................................................68 [Link] renderer: Especificacin de los elementos de actualizacin en el cliente..................................................69 [Link] execute: Especificacin de los elementos a procesar en servidor..............................................................69 [Link] event: mencionar a cual evento de usuario debe disparar la llamada Ajax................................................70

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina5/70

1 Introduccinalcurso
1.1 Objetivodeestecurso
EnestecursovamosaaprenderellenguajeJSFquenospermitircrearpginaswebdinmicas.

1.2 Manualdelalumno
Estemanualdelalumnoesunaayudaparaelalumno,[Link] contieneunresumendelasmateriasquesevanaestudiarduranteelcurso,peroelalumnodeberade tomarnotaspersonalesparacompletasestemanual.

1.3 Ejerciciosprcticos
Paracaptarmejorlateora,seharnmuchosejerciciosconlosalumnos,paraprobarlateorayverificar laintegracindelamateria. Tambin,elalumnopodrcopiarsuscdigosenundisquetealfindelcursoparallevarse,confinde seguirlaprcticaensuhogar.

1.4 Requisitosparaatenderaestecurso
UnabuenconocimientodeloslenguajesJava,JSP,HTML,yJavascriptesrequeridaparaseguireste [Link] deempezarestecurso. Sielalumnotienedificultadesenunuotrocapitulo,eldebesentirselibredepedirexplicaciones adicionalesalprofesor. Perosiaparecequeelalumnonoposeelosrequisitosmnimosparaestecurso,porrespetoalosotros alumnosqueyaposeenestamateria,elalumnopodrasertrasladoparaotrocursoenelfuturo,cuando elcumplirconlosrequisitos.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina6/70

2 IntroduccinaJavaServerFaces
2.1 QueesJSF?
JavaServerFaces(JSF)esuntecnologayframeworkparaaplicacionesJavabasadasenwebque simplificaeldesarrollodeinterfacesdeusuarioenaplicacionesJavaEE. JSFusaJavaServerPages(JSP)comolatecnologaquepermitehacereldesplieguedelaspginas,pero tambinsepuedeacomodaraotrastecnologascomoXUL. JSFincluye: UnconjuntodeAPIspararepresentarcomponentesdeunainterfazdeusuarioyadministrarsu estado,manejareventos,validarentrada,definirunesquemadenavegacindelaspginasydar soporteparainternacionalizacinyaccesibilidad. Unconjuntopordefectodecomponentesparalainterfazdeusuario. DosbibliotecasdeetiquetaspersonalizadasparaJavaServerPagesquepermitenexpresaruna interfazJavaServerFacesdentrodeunapginaJSP. Unmodelodeeventosenelladodelservidor. Administracindeestados. Beansadministrados. LaespecificacindeJSFfuedesarrolladaporlaJavaCommunityProcess VersionesdeJSF: JSF1.0(11032004)lanzamientoinicialdelasespecificacionesdeJSF. JSF1.1(27052004)[Link] nienelrenderkitdeHTML. JSF1.2(11052006)lanzamientoconmejorasycorreccindeerrores. JSF2.0(12082009)ltimolanzamiento. LasprincipalesimplementacionesdeJSFson: JSFReferenceImplementationdeSunMicrosystems. MyFacesproyectodeApacheSoftwareFoundation. RichFaces ICEfacesContienediversoscomponentesparainterfacesdeusuariosmsenriquecidas,tales comoeditoresdetextoenriquecidos,reproductoresdemultimedia,entreotros. jQuery4jsfContienediversoscomponentessobrelabasedeunodelosmspopularesframework javascriptjQuery.

2.2 Servidoryherramientasutilizados
JavaServerFaces2.0esunatecnologanueva,ynecesitalasltimasversionesdelasherramientasde desarrolloyservidoreswebparapoderusarla. Aniveldeherramientas,[Link] versin6.8oarriba. Aniveldeservidoresweb,servidorescomoApacheTomcat6,Jboss5,oGlassFish3soportanJSF2.0. EnelcursousaremosGlassFish3quevieneincluidoconNetBeans.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina7/70

2.3 Primeraaplicacin
PrimerovamosainstalarNetBeansycrearunnuevoproyecto.

AgregamoslalibreraJSF2.0alservidor.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina8/70

Iniciamoselservidorwebydesplegamoslaaplicacin. Miramoselresultadoen[Link]

PorelmomentosoloestamosmirandoaunapginaJSP,nadadeJSF.

2.4 PrimerapginaJSF
LaspginasJSFsonpginasJSPconunaslibrerasTaglibadicionales. Ademas,laspginasJSPnosellamandirectamente,[Link] alapginaJSF,bastaconagregar/faces/anteselnombredelapgina. [Link] Comolovemos,unapginaJSP(sincdigoJSF)puedeserllamadasinproblema. Laconfiguracindelreenvosepuedepersonalizar(porcarpetay/oporextensin)[Link]: <servlet>
<servlet-name>Faces Servlet</servlet-name> <servlet-class>[Link]</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping>

CuandocreamosunanuevapginaJSF,podemosescogerentredostiposdesintaxis:FaceletsoJSP. FaceletsusaunformatoXML(XHTML),yJSPusa...el formatoJSP. ElJSFusapginasJSPoXHTML,unarchivode configuracinXML([Link]),yJavaPOJO's. ApartirdeJSF2.0,elformatoXMLeselestndar. Agregamoselarchivodeconfiguracin.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina9/70

Ahoraquetenemostodolisto,creamosnuestraprimerapginaJSF,usandolaopcinJSP:
<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib prefix="f" uri="[Link] <%@taglib prefix="h" uri="[Link] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[Link] <f:view> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Mi primera pagina JSP</title> </head> <body> <h1><h:outputText value="Hola alumno!"/></h1> </body> </html> </f:view>

ElcdigoJSFenlapginaJSPsedebeencontrarentrelostags<f:view>y</f:view>. Comopodemosver,seincluyenlasdoslibrerasTaglib,queseusanluego,conlasetiquetas<f:>y<h:>. SiusamoselformatoXHTML,todoelcontenidoseconsideraJSF.

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Link] <html xmlns="[Link] xmlns:h="[Link] <h:body> <h1>Hello alumno !!!</h1> </h:body> </html>

Labiblioteca<h:>contieneequivalentesdelHTML,yaseaformularios,botones,cajasdetexto, imgenes,etc... EnelfuturousaremoslosFaceletsynomaselJSP.

2.5 RecuperandoinformacionesdelcdigoJava
VamosacrearunaclaseJava(JSFBackedBean)HelloyllamarladesdenuestrapginaJSF.
package curso; import [Link]; import [Link]; @ManagedBean(name="Hello") @RequestScoped public class Hello { public Hello() { } public String getNombre(){ return "Cedric"; } }

[Link]:
<h1>Hello #{[Link]()} !!!</h1>

EnelfuturousaremoselformatoXHTML,ynoincluirlasetiquetas<xml>,<DOCTYPE>ni<html>, quesernlossiguientes:
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Link] <html xmlns="[Link] xmlns:f="[Link] xmlns:h="[Link] xmlns:ui="[Link] >

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina10/70

3 AplicacionesJSF
3.1 QuesunaaplicacinJavaServerFaces?
Ensumayorparte,[Link] aplicacintpicadeJavaServerFacesincluyelassiguientespiezas: Unconjuntodepginasweb,enlaqueloscomponentesdeinterfazdeusuariosonestablecidos. Unconjuntodebibliotecasdeetiquetasproporcionaretiquetasparaaadircomponentesde interfazdeusuarioalapginaweb. UnconjuntodeBackedBean,quesonJavaBeanscomponentesquedefinenlaspropiedadesy funcionesdeloscomponentesdelainterfazdeusuarioenunapgina. Opcionalmente,unoomsficherosdeconfiguracindelaaplicacinderecursos(comofaces [Link]),quedefinenlasnormasdenavegacindelapginayconfiguralosbeansyotros objetospersonalizados,talescomocomponentespersonalizados. Undescriptordedespliegue([Link]). Esposiblequeunconjuntodeobjetospersonalizadoscreadosporeldesarrolladordeaplicaciones. Estosobjetospuedenincluircomponentespersonalizados,validadores,convertidores,olos oyentes. Unconjuntodeetiquetaspersonalizadaspararepresentarlosobjetospersonalizadosenla pgina.

3.2 Modelodecomponentesdeinterfazdeusuario
JavaServerFacescomponentesdeinterfazdeusuariosonlosbloquesdeconstruccindevistade JavaServerFaces. JavaServerFacescomponentesdeinterfazdeusuariosonelementosconfigurables,reutilizablesque [Link], comounbotn,opuedensercompuestos,talescomounatabla,compuestademltiplescomponentes. LatecnologaJavaServerFacesproporcionaunaricaarquitecturadecomponentesflexiblesqueincluye losiguiente: UnconjuntodeclasesUIComponentparaespecificarelestadoyelcomportamientodelos componentesdelainterfazdeusuario Unmodeloderepresentacinquedefineelmododehacerloscomponentesdevariasmaneras Uneventodeescuchayelmodeloquedefinecmomanejarloseventosdeloscomponentes Unmodelodeconversinquedefinecmoregistrarlosconvertidoresdedatosenuncomponente Unmodelodevalidacinquedefinecmoregistrarvalidadoresenuncomponente Estaseccindescribebrevementecadaunadeestaspiezasdelaarquitecturadecomponentes.

3.3 Lasclasesdecomponentesdeinterfazdeusuario
LatecnologaJavaServerFacesproporcionaunconjuntodeclasesdecomponentesdeinterfazdeusuario ydecomportamientoasociadosalasinterfacesqueespecificantodaslasfuncionalidaddelos componentesdeinterfazdeusuario,comocomponentedeparticipacindelestado,manteneruna referenciaalosobjetos,yuneventodeconduccinymanejodelaprestacindeunconjuntode componentesestndar.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina11/70

Lasclasesdecomponentessontotalmenteextensible,permitiendoalosescritoresdecomponentespara [Link] avanzadoqueveremosmstarde. Laclasebaseabstractaparatodosloscomponentesdeinterfazdeusuarioes [Link]. LasclasesdecomponentesdeinterfazdeusuarioamplianlaclaseUIComponentBase,(unasubclasede laclaseUIComponent),quedefineelestadopordefectoyelcomportamientodeuncomponentede [Link] latecnologaJavaServerFaces: UIColumn:RepresentaunasolacolumnadedatosenuncomponenteUIData. UICommand:Representauncontrolqueiniciaaccionescuandoseactiva. UIData:Representaunenlacededatosaunacoleccindedatosrepresentadosporunainstancia dataModel. UIForm:[Link] anlogoalaetiquetadeformularioenHTML. UIGraphic:Muestraunaimagen. UIInput:[Link]. UIMessage:Muestraunmensajedeerrortraducidos. UIMessages:Muestraunconjuntodemensajesdeerrortraducidos. UIOutcomeTarget:Muestraunhipervnculoenlaformadeunvnculoounbotn. UIOutput:Muestralasalidadedatosenunapgina. UIPanel:administraeldiseodesuscomponentesnio. UIParameter:Representalosparmetrosdesustitucin. UISelectBoolean:Permitealusuarioestablecerunvalorbooleanoenuncontroldeselecciny [Link]. UISelectItem:Representaunsoloelementoenunconjuntodeelementos. UISelectItems:Representatodounconjuntodeelementos. UISelectMany:[Link] claseesunasubclasedelaclaseUIInput. UISelectOne:[Link] esunasubclasedelaclaseUIInput. UIViewParameter:[Link] subclasedelaclaseUIInput. UIViewRoot:Representalarazdelrboldecomponentes. AdemsdeampliarUIComponentBase,lasclasesdecomponentetambinaplicarunaomsinterfaces decomportamiento,cadaunodeloscualesdefineciertocomportamientodeunconjuntodecomponentes cuyasclasesimplementanlainterfaz. Estasinterfacesdecomportamientosonlassiguientes: ActionSource:[Link] estdiseadoparautilizarseconcomponentesbasadosenlatecnologaJavaServerFaces1.1_01 yversionesanteriores. ActionSource2:ExtiendeActionSource,[Link] embargo,sepermitealoscomponentesautilizarelELunificadocuandosehacereferenciaalos mtodosparacontrolarloseventosdeaccin. EditableValueHolder:ExtiendeValueHolderyespecificalascaractersticasadicionalesparalos componentesmodificable,comolavalidacinyemitirloseventosdecambiodevalor. NamingContainer:losmandatosquecadacomponentederazenestecomponentetieneuna identificacinnica. StateHolder:Indicaqueuncomponentehaestadoquedebenguardarentrelassolicitudes.
CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina12/70

ValueHolder:Indicaqueelcomponentemantieneunvalorlocal,ascomolaposibilidadde accederalosdatosenelniveldemodelo. SystemEventListenerHolder:MantieneunalistadecasosSystemEventListenerparacadatipo deSystemEventdefinidoporesaclase. ClientBehaviorHolder:aadelacapacidaddeunirloscasosClientBehaviorcomounasecuencia decomandosreutilizables.

CadaetiquetapersonalizadadefinidaenelestndarHTMLhacerkitsecomponedelafuncionalidadde loscomponentes(definidosenlaclaseUIComponent)ylaprestacindeatributos(definidosporlaclase Renderer). ListadeetiquetasUIComponent

Tag column Funciones Representa una columna de datos en un componente UIData Enva un formulario para la solicitud Rendered As A column of data in an HTML table Apariencia Una columna de una tabla

commandButton

An HTML <input type=type> Un botn element, where the type value can be submit, reset, or image An HTML <a href> element Un hipervnculo

commandLink

Enlaces a otra pgina o ubicacin en una pgina Representa un contenedor de datos Representa una forma de entrada (etiquetas internas de la forma recibir los datos que se presentar con el formulario) Muestra una imagen Permite a un autor de la pgina incluir una variable oculta en una pgina

dataTable

An HTML <table> element

Una tabla que se pueden actualizar de forma dinmica No aparece

form

An HTML <form> element

graphicImage inputHidden

An HTML <img> element An HTML <input type=hidden> element

Una imagen No aparece

inputSecret

Permite al usuario An HTML <input type=password> Un campo de texto, que muestra una fila introducir una cadena sin la element de estrellas en cadena aparece en claro en lugar de la cadena el campo real que haya entrado Permite al usuario introducir una cadena Permite a un usuario introducir una cadena de varias lneas Muestra un mensaje localizado Muestra los mensajes localizados Muestra un mensaje localizado Muestra un componente anidado como una etiqueta para un campo de entrada especificado Enlaces a otra pgina o ubicacin en una pgina sin An HTML <input type=text> element An HTML <textarea> element Un campo de texto Un campo de texto de varias lineas Una cadena de texto Una cadena de texto Texto sin formato Texto sin formato

inputText inputTextarea

message messages outputFormat outputLabel

An HTML <span> tag if styles are used A set of HTML <span> tags if styles are used Plain text An HTML <label> element

outputLink

An HTML <a> element

Un hipervnculo

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
que se genere un evento de accin outputText panelGrid panelGroup Muestra una lnea de texto Muestra una tabla Grupos de un conjunto de componentes en uno de los padres Plain text An HTML <table> element with <tr> and <td> elements A HTML <div> or <span> element

Pagina13/70

Texto sin formato Una tabla Una fila de una tabla de

selectBooleanCheck Permite a un usuario cambiar An HTML <input type=checkbox> Una casilla de box el valor de una opcin element. verificacin boleana selectItem Representa un elemento en An HTML <option> element una lista de elementos en un componente UISelectOne Representa una lista de elementos en un componente UISelectOne A list of HTML <option> elements A set of HTML <input> elements of type checkbox No aparece

selectItems

No aparece

selectManyCheckbox Muestra un conjunto de casillas de verificacin de que el usuario puede seleccionar varios valores selectManyListbox

Un conjunto de casillas de verificacin Un cuadro de lista

Permite al usuario An HTML <select> element seleccionar varios elementos de un conjunto de elementos, todos muestran a la vez Permite al usuario An HTML <select> element seleccionar varios elementos de un conjunto de elementos Permite a un usuario para seleccionar un elemento de un conjunto de elementos, todos muestran a la vez Permite a un usuario para seleccionar un elemento de un conjunto de elementos Permite a un usuario para seleccionar un elemento de un conjunto de elementos An HTML <select> element

selectManyMenu

Un cuadro combinado desplazable Un cuadro de lista

selectOneListbox

selectOneMenu

An HTML <select> element

Un cuadro combinado desplazable Un conjunto de botones de radio

selectOneRadio

An HTML <input type=radio> element

3.4 ConversindeModelo
UnaaplicacinJavaServerFaces,opcionalmente,sepuedeasociarconuncomponentedeservidorde [Link],[Link] aplicacinobtieneyestableceelobjetodedatosparauncomponentellamandoalaspropiedadesde objetoapropiadoparaesecomponente. Cuandouncomponenteestasociadoaunobjeto,laaplicacintienedospuntosdevistadelosdatosdel componente: Elpuntodevistadelmodelo,enelqueserepresentanlosdatoscomotiposdedatos,talescomo intolong. Lavistadepresentacin,enelqueserepresentanlosdatosdeunamaneraquepuedeserledoo [Link],[Link] cadenadetextoenelformatomm/dd/aaocomounconjuntodetrescadenasdetexto. LaimplementacindeJavaServerFacesconvierteautomticamentedatosdeloscomponentesentre estosdospuntosdevistacuandolapropiedaddebeanasociadosconelcomponentedeunodelostipos soportadosporlosdatosdelcomponente.
CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina14/70

Porejemplo,siuncomponentedeUISelectBooleanseasociaconunapropiedaddebeande [Link],laimplementacinJavaServerFacesseconvertirautomticamentelosdatosdel [Link],algunosdatosdeloscomponentesdebenestarvinculadas [Link],uncomponenteUISelectBooleandebeestar [Link]. Avecespuedequedeseeconvertirlosdatosdeuncomponenteauntipodistintodeuntipoestndar,o [Link],latecnologaJavaServerFacesle permiteregistrarlaaplicacinConverterencomponentesUIOutputycomponentescuyasclases [Link],laaplicacinConverter conviertelosdatosdelcomponenteentrelosdospuntosdevista. PuedeutilizarlosconvertidoresestndarsuministradosconlaimplementacinJavaServerFacesocrear [Link] severmsadelante.

3.5 Eventoyeloyentedemodelo
JavaServerFaces2.0definetrestiposdeeventos:loseventosdeaplicacin,loseventosdelsistemaylos datosdeeventosdemodelo. Eventosdeaplicacinestnvinculadosaunaaplicacinenparticularysongeneradosporun [Link] tecnologaJavaServerFaces. Unobjetodeeventoidentificaelcomponentequegenereleventoyalmacenainformacinsobreel [Link],unaaplicacindebeproporcionarunaimplementacindela [Link] componente,porejemplo,hacerclicenunbotn,[Link] JavaServerFacesparainvocarelmtododeescuchaqueprocesaelevento. JavaServerFacessoportadostiposdeeventosdeaplicacin:eventosdeaccinydevaloreventosde cambio. Uneventodeaccin(ActionEventclase)seproducecuandoelusuarioactivauncomponenteque [Link]. Uneventodecambiodevalor(ValueChangeEventclase)seproducecuandoelusuariocambiaelvalorde [Link] casilladeverificacin,[Link] tiposdecomponentesquepuedegenerarestetipodeeventossonlosUIInput,UISelectOne, UISelectMany,[Link] sedetectaronerroresdevalidacin. [Link] [Link] lugardeauncomponenteespecfico. Unmodelodedatosdeeventosseproducecuandoseseleccionaunanuevafiladeuncomponentede UIData. Lossucesosdelsistemaylosdatosdeeventosdemodelosontemasavanzadosquesemirarnmstarde.
CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina15/70

1.1

Validacin

LatecnologaJavaServerFacessoportaunmecanismoparalavalidacindelosdatoslocalesdelos componentesmodificables(comoloscamposdetexto).Estavalidacinseproduceantesdequeelmodelo dedatoscorrespondienteseactualizaparaquecoincidaconelvalorlocal. Aligualqueelmodelodeconversin,elmodelodevalidacindefineunconjuntodeclasesestndarpara [Link] ncleobibliotecatambindefineunconjuntodeetiquetasquecorrespondenalasimplementaciones estndardeValidator. Lamayoradelasetiquetastienenunconjuntodeatributosparaconfigurarlaspropiedadesdel validador,[Link] registrosdeautoreselvalidadorenuncomponenteporlaetiquetadeanidacindelvalidadordentrode laetiquetadelcomponente.

3.6 Modelodenavegacin
ElmodelodenavegacinJavaServerFaceshacequeseafcildedefinirydenavegacindelapgina paramanejarcualquierprocesamientoadicionalquesenecesitaparaelegirlasecuenciaenlaquese carganlaspginas. EnlatecnologaJavaServerFaces,lanavegacinesunconjuntodereglasparalaeleccindelapgina siguienteolavistaquesemostrardespusdeunaaccindeaplicacin,comocuandounbotno hipervnculosehaceclic. Estasnormassedeclaranenceroomsrecursosdeconfiguracindelaaplicacin,talescomo<faces [Link]>,[Link] navegacineselsiguiente: <navigationrule> <description> </description> <fromviewid></fromviewid> <navigationcase> <fromaction></fromaction> <fromoutcome></fromoutcome> <if></if> <toviewid></toviewid> </navigationcase> </navigationrule> EnJavaServerFaces2.0,[Link] navegacinimplcitasentranenjuegocuandolasnormasdenavegacinnoestndisponiblesenun archivodeconfiguracindelaaplicacinderecursos. 3.6.1

Configuracindereglasdenavegacin

Comoseexplicaenelmodelodenavegacin,lanavegacinesunconjuntodereglasparalaeleccindela siguientepginaquesemuestradespusdeunbotnouncomponentedehipervnculosehaceclic. Lasreglasdenavegacinsedefinenenelexpedientedesolicitudderecursosdeconfiguracin.

CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina16/70

[Link] implementacindeJavaServerFaceseligelaregladenavegacinadecuadodeacuerdoalapginaque semuestraactualmente. Despusdelaregladenavegacinadecuadoesseleccionado,laeleccindequeparaaccederalapgina siguientedelapginaactualdependededosfactores: Elmtododeaccinqueseinvocacuandoelcomponentesehahechoclic Elresultadolgicoquesehacereferenciaporelcomponenteenlaetiqueta,ofuedevueltoporel mtododeaccin Elresultadopuedesercualquiercosaqueeldesarrolladordecide,perolatablaaquvanalgunos resultadosdeusocomnenaplicacionesweb.

Final success failure logon noresults

Loquesignificacomnmente [Link]. [Link]. [Link]. [Link].

Normalmente,elmtododeaccinrealizaunprocesamientodelosdatosdelformulariodelapgina actual. Porejemplo,elmtodopodracomprobarsielnombredeusuarioylacontraseaintroducidaenel [Link],elmtodo [Link],devuelvelafaltaderesultados. Comodemuestraesteejemplo,tantoelmtodoutilizadoparaprocesarlaaccinylosresultados devueltossonnecesariasparadeterminarlapginapropiadeacceso. Heaquunaregladenavegacinquepodranserutilizadosconelejemploqueacabamosdedescribir:

<navigation-rule> <from-view-id>/[Link]</from-view-id> <navigation-case> <from-action>#{[Link]}</from-action> <from-outcome>success</from-outcome> <to-view-id>/[Link]</to-view-id> </navigation-case> <navigation-case> <from-action>#{[Link]}</from-action> <from-outcome>failure</from-outcome> <to-view-id>/[Link]</to-view-id> </navigation-case> </navigation-rule>

[Link] navegacincaso,[Link] [Link],[Link] [Link],[Link] fracaso. Laconfiguracindeunaaplicacin,elflujodelapginaconstadeunconjuntodereglasdenavegacin. [Link].

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina17/70

Cadaelementoderegladenavegacincorrespondeaunidentificadordelcomponentearbreodefinido [Link] posiblesmanerasdenavegardeunapginaespecialenlaaplicacin. Sinohayningnelementodelavistadeid,lasreglasdenavegacinsedefineenelelementodereglade [Link] [Link],estedevistaIDdeelementodicequelareglade navegacinseaplicaatodaslaspginaseneldirectoriodelibros:

<from-view-id> / libros / * </ from-view-id>

Comoseindicaenlaregladenavegacinejemplo,unelementoderegladenavegacinpuedecontener [Link],defineunconjuntodecriterios [Link],laaplicacinsevayaalapginadefinidaporela verIDdeelementocontenidoenlanavegacindelmismoelementodecaso. [Link] resultadodeelementodefineunresultadolgico,[Link] unaexpresinparareferirseaunmtododeaccinquedevuelveunacadena,queeselresultadolgico. Elmtodorealizaalgunalgicaparadeterminarelresultadoydevuelveelresultado. Loselementosdenavegacincasodequesecotejarnconlosresultadosyelmtododeexpresineneste orden: [Link] puedenserutilizadossielmtododeaccindevuelveresultadosdiferentesdependiendodel resultadodelatransformacinquerealiza. [Link] resultadoyaseadefinidoporelatributodeaccindelcomponentedeUICommandoelresultado devueltoporelmtodomencionadoporelcomponentedeUICommand. [Link] accinespecificadaporlaetiquetadelcomponente. Cuandosecomparacualquieradeestoscasos,elrboldecomponentesdefinidosporelaverelementode identificacinsernseleccionadosparalarepresentacin. UsodeNetBeansIDE,puedeconfigurarunaregladenavegacindelasiguientemanera: 1. DespusdeabrirsuproyectoenelIDENetBeans,expandaelnododelproyectoenelpanelde Proyectos. 2. AmpliarlasPginasWebyWebnodosINFdelnododelproyecto. 3. [Link]. 4. [Link],hagaclicenelpaneldeleditor. 5. SeleccioneJavaServerFaces,AddNavegacinartculo. 6. EnelcuadrodedilogoAgregarnavegacinartculo: Introduzcaobusquelapginaquerepresentaelpuntodevistadepartidadeestaregla denavegacin. HagaclicenAgregar. 7. Hagaclicdenuevoenelpaneldeleditor. 8. SeleccioneJavaServerFaces,UIAadirNavegacinasunto. 9. EnelcuadroAgregarnavegacinasuntodedilogo: DesdeelmenVer,seleccionelapginaquerepresentaelpuntodevistadepartidapara laregladenavegacin(enelpaso6a). (opcional)Enelcampodeaccin,escribaelmtododeaccinseinvocacuandoel componentequeseactivalanavegacinactiva.
CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina18/70

3.6.2

(opcional)Enelcampoderesultados,escribalacadenaresultadolgicodequelas referenciascomponenteactivodesuatributodeaccin. DelaAmenVer,seleccioneobusquelapginaqueseabrirsiestecasodenavegacin esseleccionadoporelsistemadenavegacin. HagaclicenAgregar.

Reglasdenavegacinimplcitas

ApartirdeJavaServerFaces2.0,lasreglasdenavegacinimplcitaestndisponiblesparaaplicaciones [Link] configuranenlosarchivosdeconfiguracinderecursosdeaplicacin. Cuandoseagregauncomponentedeinterfazdeusuariocomouncomandoyasignaunapginacomoel valordesupropiedadlaaccin,elcontroladordenavegacinpordefectotratandecombinarunapgina adecuadadentrodelaaplicacin.

<h:commandButton value="Enviar" action="response">

Enelejemploanterior,elcontroladordenavegacinpordefectotratardelocalizarlapgina [Link].

3.7 BackedBeans
UnaaplicacintpicadeJavaServerFacesincluyeunoomsbeansdeapoyo,cadaunodeellosesun JavaServerFacesgestionadosdebeanqueestasociadoconloscomponentesdelainterfazdeusuario utilizadosenunadeterminadapgina. LosbeansGestionadosonJavaBeanscomponentesquesepuedenconfigurarmediantelainstalacinde beangestionado,[Link] sobrelacreacin,configuracinyusodesemillasdeapoyoenunaaplicacin. 3.7.1

Crearunaclasedebeanderespaldo

Ademsdedefinirunconstructorsinargumento,comotodosloscomponentesJavaBeansdebehacer, unaclasedebeanderespaldotambindefineunconjuntodepropiedadesdeloscomponentesdeinterfaz deusuarioy,posiblemente,unconjuntodemtodosquerealizanfuncionesdeuncomponente. Cadaunadelaspropiedadesdeloscomponentessepuedenenlazaraunadelassiguientes: Elvalordeuncomponente Unainstanciadecomponente Unejemplodelconvertidor Unejemplodeescucha Unejemplodevalidador Lasfuncionesmscomunesquelosmtodosdebackedbeanrealizarsonlassiguientes: Validarlosdatosdeuncomponente Manejodeuneventodisparadoporuncomponentede Realizacindetratamientoparadeterminarlasiguientepginaparaquelasolicituddebe navegar ComocontodosloscomponentesJavaBeans,unapropiedadconstadeuncampodedatosprivadosyun conjuntodemtodosdeacceso,comolomuestraestecdigo:

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
UserNumber Integer = null; ... setUserNumber public void (Integer user_number) ( = userNumber user_number; ) getUserNumber public Integer () ( userNumber retorno; ) public String getResponse () ( ... )

Pagina19/70

Cuandounapropiedaddebeanestligadaalvalordeuncomponente,puedesercualquieradelostipos bsicosprimitivosynumricoocualquiertipodeobjetodeJavaparaquelaaplicacintengaaccesoaun [Link],unapropiedadpuedeserdetipofecha,silaaplicacintieneaccesoa unconvertidorquepuedeconvertireltipodefechaenunacadenayviceversa. Cuandounapropiedadseuneaunainstanciadelcomponente,eltipodelapropiedaddebeserelmismo [Link],siunUISelectBooleanestligadoalapropiedad,la propiedaddebeaceptarydevolverunobjetoUISelectBoolean. Delmismomodo,silapropiedadestenlazadoaunconvertidor,validador,oeloyenteejemplo,la propiedaddebeserdelconvertidorcaso,validador,oeloyentetipo. 3.7.2

ConfiguracindeunBean

LatecnologaJavaServerFacessoportaunsofisticadoestablecimientoadministradoporlacreacinde bean,quepermitealosarquitectosdeaplicacionesparahacerlosiguiente: Configurarbeanssimpleyrbolesmscomplejodebeans Inicializarelbeanconlosvalores Ponerlosbeansenunmbitoparticular(mbitosdisponibles:request,view,session,application) ExponelosbeansalaELunificadaparaquelosautoresdepginassepuedeaccederaellos [Link]:

<managed-bean> <managed-bean-name> UserNumberBean </ managed-bean-name> <managed-bean-class> [Link] </ managed-bean-class> <managed-bean-scope> sesin </ managed-bean-scope> <managed-property> <property-name> mnimos </ propiedad name> <property-class> largo </ propiedad de clase> <valor> 0 </ value> </ managed-property> <managed-property> <property-name> <mximo / property-name> <property-class> largo </ propiedad de clase> <valor> 10 </ value> </ managed-property> </ managed-bean>

LaimplementacindeJavaServerFacesprocesala<managedbeanscope>elementoenelmomentode [Link],secreaunainstancia. Unautordelapginapuedeaccederalaspropiedadesdebeandelasetiquetasdecomponentesenla pginautilizandoelELunificada,comosemuestraaqu:

<h:outputText value="#{[Link]}"/>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina20/70

Tambinesposibleaprovecharlafuncindeanotacionesparaelbeanlogradoevitarlaconfiguracinde beangestionadoenarchivodeconfiguracinderecursosdeaplicacin. Ejemplo:

@ManagedBean(name = "Login") @RequestScoped public class Login {...}

3.8 UsandoelELunificadaparareferenciarBackedbeans
Paraobligaralosvaloresdelainterfazdeusuariodeloscomponentesypropiedadesdelosobjetosal apoyodebeanoderespaldoparahacerreferenciaalosmtodosdebeandeetiquetasdecomponentesde interfazdeusuario,losautoresdepginasutilizarellenguajedeexpresinunificada(EL)sintaxis definidaporJSP2.1. Lassiguientessonalgunasdelascaractersticasqueofreceestelenguaje: Evaluacindiferidadelasexpresiones Lacapacidaddeusarunaexpresindevalortantoparaleeryescribirdatos Expresindemtodos Estascaractersticassonespecialmenteimportantesparaapoyarelmodelodeinterfazdeusuario sofisticadocomponentequeofrecelatecnologaJavaServerFaces. EvaluacindiferidadelasexpresionesesimportanteporqueelciclodevidadeJavaServerFacesest divididoenfasesdistintas,demaneraqueelmanejodeeventosdecomponentes,laconversindedatosy validacin,ylapropagacindedatosalosobjetosexternos,[Link] debesercapazderetrasarlaevaluacindelasexpresiones,hastalafaseapropiadadelciclodevidase [Link],suetiquetadeatributossiempreutilizalasintaxisdelaevaluacindiferida, quesedistingueporeldelimitador#().ElCiclodeVidadeunapginaJavaServerFacesdescribeelciclo devidaendetalle. Conelfindealmacenardatosenlosobjetosexternos,casitodoslosatributosdeetiquetasJavaServer Facesutilizarexpresionesdevalorvalor,quesonexpresionesquepermitentantoobteneryestablecer datossobrelosobjetosexternos. Porltimo,algunosatributosdeetiquetadecomponentedeaceptarexpresionesmtodoquelosmtodos dereferenciaparacontrolarloseventosdecomponentes,ovalidaroconvertirlosdatosdelos componentes. ParailustrarunaetiquetadeJavaServerFacesusandoelELunificado,supongamosqueunaetiqueta deunasolicituddereferenciaaunmtodopararealizarlavalidacindeentradadeusuario:
<h:inputText id="userNo" value="#{[Link]}" validator="#{[Link]}" />

EstaetiquetaseuneelvalordelcomponenteuserNoparaelbeandelapropiedad [Link] [Link],querealizalavalidacindevalorlocaldel [Link] mtodoseinvocacuandoseevalalaexpresin,queesdurantelafasedevalidacindelprocesodelciclo devida. [Link] propiedadesjudasdereferencias,expresionesdevalorpuedetambinlistasdereferencias,mapas, paneles,objetosimplcita,ylospaquetesderecursos.

CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina21/70

Otrousodelasexpresionesdevalorvinculanteesunainstanciadelcomponenteaunapropiedadde [Link]:
<inputText binding="#{[Link]}" />

Esasetiquetasdecomponentesquelasexpresionesmtododeusosonlasetiquetasylasetiquetasde componentesUIInputcomponenteUICommand. 3.8.1

ElCiclodeVidadeunapginaJavaServerFaces

ElciclodevidadeunapginaJavaServerFacesesalgosimilaraladeunapginaJSP:Elclienterealiza [Link],el ciclodevidadeJavaServerFacesdifieredelciclodevidadeJSPenquesedivideenvariasfasespara [Link] deserconvertidosyvalidados,eventosdeloscomponentessemanipulan,ylosdatosdeloscomponentes sepropagaalasjudasenunamaneraordenada. UnapginadeJavaServerFacesestambindiferentedeunapginaJSPenlaqueesrepresentadopor unrboldecomponentesdeinterfazdeusuario,[Link],la implementacinJavaServerFacesdebeconstruirelpuntodevistaalconsiderarelestadoguardadode [Link],laimplementacin JavaServerFacesrealizavariastareas,talescomolavalidacindelaentradadedatosdelos componentesdelavistaylaconversindelosdatosdeentradaalostiposespecificadosenelladodel servidor. LaimplementacindeJavaServerFacesrealizatodasestastareascomounaseriedepasosenla solicituddeJavaServerFacesciclodevidaderespuesta.

DiagramadeflujodelasolicituddeFacesyrespuestadeFaces,incluyendoeleventodevalidacinyel procesamiento,manejodeerrores,elmodelodeactualizacin,lainvocacindelaaplicacin. Elciclodevidamanejaambostiposdesolicitudes:Lassolicitudesinicialesydevolucionesdedatos. Cuandounusuariohaceunasolicitudinicialdeunapgina,loellaestsolicitandolapginapor [Link],seleenvaelformularioquefiguraen

CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina22/70

unapginaquefuepreviamentecargadoenelnavegadorcomoresultadodelaejecucindeunasolicitud inicial. Cuandoelciclodevidaseencargadelapeticininicial,sloseejecutalarestauracindevistayhacer quelasfasesderespuesta,[Link] contrario,cuandoelciclodevidamanejaunadevolucindedatos,ejecutatodaslasfases. Normalmente,laprimerasolicitudparaunapginaJavaServerFacestratadeuncliente,como resultadodehacerclicenunhipervnculoenunapginaHTMLqueenlazaconlapginadeJavaServer Faces. ParahacerunarespuestaqueesotrapginaJavaServerFaces,laaplicacincreaunanuevavisinyla almacenaenlainstanciaFacesContext,querepresentaatodalainformacincontextualasociadaconel [Link] [Link],queobligaalaprestacin inmediatadelaopinindepasarporlarespuestaalafasedeprocesamientodelciclodevida,como indicanlasflechasetiquetadosRenderderespuestaeneldiagrama. Aveces,unaaplicacinpodranecesidaddereorientarlosrecursosadiferentesaplicacionesweb,como unservicioweb,[Link] situaciones,eldesarrolladordebesaltarselafasederenderizado(RenderFasederespuesta)llamando [Link],estavezconlas flechasdelaetiquetarespuestacompleta. LapropiedaddelacurrentPhaseIDFacesContext,querepresentalafasequeseencuentra,debeser actualizadatanprontocomoseaposibleporlaaplicacin. LasituacinmscomnesqueuncomponenteJavaServerFacespresentaunasolicituddelapginade [Link],laimplementacinJavaServerFacesmanejalasolicitudy automticamentepasaatravsdelasfasesdelciclodevidapararealizarcualquierconversin necesaria,validacionesyactualizacindelosmodelos,yparagenerarlarespuesta. Losdetallesdelciclodevidaseexplicaenestaseccinestndestinadosprincipalmentepara desarrolladoresquenecesitanconocerdichainformacincomocuandovalidaciones,conversiones,ylos [Link] autoresdepginasnotienenporquconocerlosdetallesdelciclodevida. 3.8.2

Fasederestauracindevista

CuandounasolicituddeunapginaJavaServerFacessehace,comocuandounenlaceounbotnse presiona,laimplementacinJavaServerFacescomienzalafasederestauracindevista. Duranteestafase,laimplementacinJavaServerFacesconstruyeelpuntodevistadelapgina,cables controladoresdeeventosylosvalidadoresdeloscomponentesenlavista,yguardalavistaenelejemplo FacesContext,[Link] etiquetasdecomponentesdelaaplicacin,loscontroladoresdeeventos,convertidoresyvalidadoresde teneraccesoalainstanciadeFacesContext. Silasolicituddelapginaesunasolicitudinicial,laimplementacinJavaServerFacescreaunavisin devacoenestaetapaylosavancesdelciclodevidaparahacerlafasederespuesta,duranteelcualla opinindevacosellenaconloscomponentesdereferenciadelasetiquetasenlapgina.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina23/70

Silasolicituddelapginaesunadevolucindedatos,unavistacorrespondienteaestapginayaexiste. Duranteestafase,laimplementacinJavaServerFacesrestauralavistamedianteelusodela informacindeestadoguardadaenelclienteoelservidor. 3.8.3

Fasedeaplicacindevalores

Despusdequeelrboldecomponentesqueserestablezca,cadacomponenteenelrboldelosextractos desunuevovalordelosparmetrosdelapeticinmedianteelusodesudecodificar(processDecodes()) [Link],un [Link] mensajesemostrardurantelafasededarrespuesta,juntoconloserroresdevalidacinresultantede lafasedevalidacindelproceso. SilosmtodosdescifrarodetectoresdeeventosllamadorenderResponseFacesContextenlainstancia actual,laimplementacinJavaServerFacessaltaalafasededarrespuesta. Silosacontecimientossehancoladuranteestafase,lasemisionesdeaplicacinJavaServerFaceslos acontecimientosalosoyentesinteresados. Sialgunoscomponentesdelapginatienensusatributosdeinmediatoestableceentrue,entoncesla validacin,laconversin,yloseventosrelacionadosconestoscomponentesserntratadosduranteesta fase. Enestepunto,silasolicitudtienequereorientarlosrecursosadiferentesaplicacioneswebodegenerar unarespuestaquenocontienecomponentesJavaServerFaces,puedellamara [Link]. Alfinaldeestafase,loscomponentessefijanasusnuevosvalores,ylosmensajesyeventossehan puestoencola. Silapeticinactualseidentificacomounapeticinparcial,elcontextoparcialserecuperadelascaras decontextoyelmtododetransformacinparcialesaplicado. 3.8.4

Fasedevalidacionesdeproceso

Duranteestafase,laimplementacinJavaServerFacesprocesatodoslosvalidadoresregistradasenlos componentesenelrbol,mediantesuvalidacin((processValidators))[Link] componentedeatributosqueespecificanlasnormasparalavalidacinycomparaestasnormasparael valorlocalalmacenadoparaelcomponente. Sielvalorlocalnoesvlido,laimplementacinJavaServerFacesaadeunmensajedeerrorala instanciaFacesContext,yelciclodevidaavanzadirectamentealafasededarrespuestaparaquela [Link] valoresdefase,losmensajesdeestoserrorestambinsemuestran. SialgunavalidarmtodosodetectoresdeeventosllamadorenderResponseenelFacesContextactual,la implementacinJavaServerFacessaltaalafasededarrespuesta. Enestepunto,silasolicitudtienequereorientarlosrecursosadiferentesaplicacioneswebodegenerar unarespuestaquenocontienecomponentesJavaServerFaces,puedellamara [Link].

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina24/70

Silosacontecimientossehancoladuranteestafase,laimplementacinJavaServerFacesemisionesa oyentesinteresados. Silapeticinactualseidentificacomounapeticinparcial,elcontextoparcialserecuperadelascaras [Link] JavaEE6Tutorial,VolumenII:Temasavanzados. 3.8.5

Fasedeactualizacindevaloresdemodelo

DespusdelaimplementacinJavaServerFacesdeterminaquelosdatossonvlidos,sepuederecorrer elrboldecomponentesyestablecerelservidorcorrespondientedelaspropiedadesdelobjetodeladoa [Link] [Link] puedenserconvertidosalostiposespecificadosporlaspropiedadesjudas,elciclodevidaavanza [Link] similaraloquesucedeconloserroresdevalidacin. SilosmtodosupdateModelsocualquieroyentesllamadorenderResponseFacesContextenlainstancia actual,laimplementacinJavaServerFacessaltaalafasededarrespuesta. Enestepunto,silasolicitudtienequereorientarlosrecursosadiferentesaplicacioneswebodegenerar unarespuestaquenocontienecomponentesJavaServerFaces,puedellamara [Link]. Silosacontecimientossehancoladuranteestafase,laimplementacinJavaServerFacesemisionesa oyentesinteresados. Silapeticinactualseidentificacomounapeticinparcial,elcontextoparcialserecuperadelascaras [Link] JavaEE6Tutorial,VolumenII:Temasavanzados. 3.8.6

Fasedeinvocacindelaaplicacin

Duranteestafase,laimplementacinJavaServerFacesmanejacualquiersolicituddeeventosdenivel, talescomolapresentacindeunformularioounvnculoaotrapgina. Enestepunto,silasolicitudtienequereorientarlosrecursosadiferentesaplicacioneswebodegenerar unarespuestaquenocontienecomponentesJavaServerFaces,puedellamara [Link]. Siseprocesaelpuntodevistafuereconstruidoapartirdeinformacindeestadodeunasolicitud anteriorysiuncomponentehadisparadounevento,estoseventossetransmitenalosoyentes interesados. Porltimo,lastransferenciasdeJavaServerFacesaplicacindecontrolparahacerquelafasede respuesta. 3.8.7

Fasedecreacindelarespuesta

Duranteestafase,JavaServerFacesconstruyeelpuntodevistaydelegalaautoridadparael [Link],paraelcontenedordeJSPsilaaplicacineslautilizacinde pginasJSP.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina25/70

Sisetratadeunasolicitudinicial,loscomponentesqueestnrepresentadosenlapginaseagregaal [Link],loscomponentesseaadenyaalrbolparaque nosenecesitaaadirms. Silasolicitudesunadevolucindedatosyloserroresfueronencontradosdurantelafasedesolicitudde aplicarlosvalores,lasvalidacionesdeprocesodefase,ofasedeactualizacindelosvaloresdelmodelo, [Link] etiquetas,losmensajesdeerrorenlacolasemuestranenlapgina. Despusdequeelcontenidodelavistaserepresenta,elestadodelarespuestaseguardaparaquelas [Link] restauracindevista.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina26/70

4 ExpresionesEL
4.1 InformacingeneralsobreEL
Ellenguajedeexpresinunificadapermitealosautoresdepginasutilizarexpresionessencillaspara accederalosdatosdeformadinmicaapartirdecomponentesJavaBeans. LatecnologaJavaServerFacesutilizaELparalassiguientesfunciones: Evaluacindiferidaeinmediatadelasexpresiones Lacapacidaddeestablecer,ascomoobtenerdatos Lacapacidaddeinvocarlosmtodos Enresumen,ellenguajedeexpresinunificadaproporcionaunamaneradeutilizarexpresionessencillas parallevaracabolassiguientestareas: LeerdemaneradinmicalosdatosdeaplicacionesalmacenadosenJavaBeans,diversas estructurasdedatos,yobjetosimplcita Escribirdemaneradinmicalosdatos,talescomolaentradadelusuarioenlosformularios,alos componentesdeJavaBeans Invocacindemtodosarbitrariosestticaypblica Realizaroperacionesaritmticasdemaneradinmica

Evaluacininmediataydiferida 4.2
ELapoyalaevaluacin,[Link] entiendequelaexpresinseevalayelresultadoesdevueltoinmediatamentecuandolapginase [Link] expresionespuedenemplearsupropiomecanismoparaevaluarlaexpresinenalgnmomentoms tarde,duranteelciclodevidadelapgina,ocuandoseaapropiadohacerlo. Esasexpresionesqueseevalandeinmediatoelusode${}[Link] demaneradiferidautilizarel#{}sintaxis. Debidoasuciclodevidadevariasfases,latecnologaJavaServerFacesusaprincipalmenteexpresiones [Link],loseventosdecomponentessemanejan,losdatosson validados,[Link],unaaplicacin JavaServerFacesdebediferirlaevaluacindelasexpresiones,hastaelpuntoapropiadoenelciclode vida. 4.2.1

EvaluacinInmediata

Todaslasexpresionesutilizandolasintaxis${}[Link] serutilizadosdentrodeunaplantilladetextoocomoelvalordeunatributodeetiquetaquepuede aceptarlasexpresionesentiempodeejecucin. Elsiguienteejemplomuestraunaetiquetadereferenciacuyovaloratribuirunaexpresindeevaluacin inmediataqueobtieneelpreciototaldelasesinbeandenombredecart:

<fmt:formatNumber value="${[Link]}"/>

LaimplementacindeJavaServerFacesevalalaexpresin,${[Link]},loconviertey pasaelvalordevueltoalcontroladordeetiqueta.
CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina27/70

[Link] ejemploanteriorslosepuedeobtenerelpreciototaldecompradelgrano,nopuedeestablecerelprecio total. 4.2.2

Evaluacindiferida

Expresionesdeevaluacindiferidaadoptarlaforma#{expr}ypuedeserevaluadoenotrasfasesdeun [Link] latecnologaJavaServerFaces,sucontroladorpuedeevaluarlaexpresinenlasdiferentesfasesdel ciclodevidaenfuncindecmolaexpresinseutilizaenlapgina. ElsiguienteejemplomuestraunaetiquetadeJavaServerFacesinputText,loquerepresentaun [Link],referencias elvalordeunatributodeexpresindeevaluacindiferidaqueapuntaalapropiedadnamedelbean customer.

<h:inputText id="name" value="#{[Link]}" />

Paraqueunasolicitudinicialdelapginaquecontieneunaetiqueta,laimplementacinJavaServer Facesevalalaexpresin#{[Link]}[Link] estafase,laexpresinslotieneaccesoalvalordelnombredelcliente,comosehaceenlaevaluacin inmediata. Paraunasolicituddedevolucindedatos,laimplementacinJavaServerFacesevalalaexpresinen lasdiferentesfasesdelciclodevida,durantelacualelvalorserecuperadelasolicitud,validados,y reproducidasenelbeandelcliente. Comosemuestraenesteejemplo,lasexpresionesdeevaluacindiferidapuedenserexpresionesdevalor [Link] valor(tantoinmediatoscomodiferidos)ylasexpresionesmtodoseexplicaenlasiguienteseccin.

4.3 Valoryelmtododeexpresiones
LaELsedefinendostiposdeexpresiones:[Link] [Link] serinvocadoypuededevolverunvalor.

4.4 Operadores
Ademsdel.y[],ellenguajedeexpresinunificadoproporcionalossiguientesoperadores,quepueden serutilizadosenexpresionesrvalueslo: Aritmtica:+,(binario),*,/ydiv,%yelmod,(unario) Lgicos:AND,&&,o,||,not,! Relacionales:==,eq,!=,ne,<,lt,>,gt,<=,ge,>=,[Link] valores,ocontraBoolean,String,enterooflotante. Vaco:Eloperadordevacoesunaoperacindeprefijoquepuedeusarseparadeterminarsiun valoresnuloovaco. Condicional:A?B:[Link],dependiendodelresultadodelaevaluacindeA. Laprecedenciadelosoperadoresdemayoramenor,deizquierdaaderechaescomosigue: []. ()(Utilizadoparacambiarlaprioridaddelosoperadores) (Unario)not!empty
CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina28/70

/divmod% +(Binario) <><=>=ltgtlege ==!=eqne &&and ||or ?:

4.5 Palabrasreservadas
Laspalabrassiguientesestnreservadasparaellenguajedeexpresinunificadaynodebeutilizarse comoidentificadores. and ne ge instanceof or lt true empty not gt false div eq le null mod

4.6 EjemplosdeusodeEL
Ejemplo #([Link]) Descripcin Devuelveelvalordelapropiedaddelobjetoalmacenadoenlaclavede myBean,oelelementoalmacenadoenelvalordelaclave,simyBeanesde tipoMap #(myBean['value']) Igualque"[Link](#)". #(myArrayList[5]) Devuelveelquintoelementodeunalistaquesealmacenaenlaclavede myArrayList. #(myMap['foo']) Devuelveelobjetoalmacenadoenlaclavefoodelmapaalmacenadoen myMap. #(myMap[[Link]]) Devuelveelobjetoalmacenadoenlaclavequeesigualalvalordela [Link]. #(myMap['foo'].valor) Devuelveelvalordelapropiedaddelosobjetosalmacenadosenlaclavede foodemyMap. #(myMap['foo'].valor[5]) Devuelveelquintoelementodelalistaomatrizalmacenadaenlaclavede myMapclave. #()miCadena DevuelvelacadenadeobjetosalmacenadosenelmarcodelmiCadena clave. #()myInteger DevuelveelenteroobjetoalmacenadoenelmarcodelmyIntegerclave. #([Link]=='normal') Devuelvetruesielpapeldelapropiedaddelobjetoalmacenadoenlaclave [Link]. #((user.balance200) Sielvalordelapropiedaddeequilibriodelobjetoalmacenadoenelmarco delclavedeusuariomenos200igualacero,[Link] OTHfalsos Hola#()[Link]! Devuelvelacadena"Hola",seguidadelnombredelapropiedaddelobjeto [Link] Sean,esto"retornoHolaSean!" Ests#(([Link]> Devuelvelacadena"Ustedestcargado"silapropiedaddeequilibriodela 100)?"cargado":"no objetoalmacenadoenlaclavedeusuarioesmayorde100;devuelve"Usted cargado') nosecargan"deotramanera. #()[Link] Devuelveelmtodollamadomtododelobjetoalmacenadoenelmarcodel myBeanclave. #(20+3) Devuelve23.
CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina29/70

5 JSTLLibrerasestndarTaglib
5.1 Introduccin
ExistenvariaslibrerasTaglibdisponibleparaJSPyJSF. FuntionalArea Core XMLprocessing I18Ncapableformatting Databaseaccess(SQL) Functions URI [Link] [Link] [Link] [Link] [Link] Prefix c x fmt sql fn Example <c:tagname ...> <x:tagname ...> <fmt:tagname ...> <sql:tagname ...> fn:functionName(...)

5.2 Core
[Link]<c:out>evaluacindela [Link]<%=exp%>.La utilizacinsehaceas: <c:outvalue="${[Link]}"default="N/A"/> [Link] [Link],podemosdefinirunavariablellamadaalmbito deaplicacindelclientemedianteelusode<c:set var="customer" value=${customer}" />yluegousar <c:remove var="customer" /> paraquitarlodembito. [Link],porejemplo,<c:catch var="myError" />.Elusodeestaetiquetapermiteelmanejouniformedeerrorquesedeclareenuna [Link] usodelaetiqueta <c:catch>esposibletenerbuencontroldeerroresdegrano,loquepermitequelos erroressemanejanporlapginaenlugardeiralapginadeerrornotodosloserroresquesetira [Link]<c:catch>etiqueta,esposibledisearmejor lasinteraccionesdelusuario,porqueelflujodelapginaesmsfcildeusar.

5.3 Iteracin
Laetiquetadeiteracinbsicaes<forEach>,queiterasobrelamayoradelascoleccionesyobjetos similares,unopensaraquepararecorrereniteracin.<forTokens>lepermiteiterarsobrefichasenun objetoString,quelepermiteespecificarlacadenaylosdelimitadores. [Link] iteracionesdeapoyoson<c:forEach>,<c:forToken>,y<x:forEach>.TambinhayetiquetasXMLque [Link] momento,peroporahora,vamosaseguirconlasaccionesfundamentales.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina30/70

EstasaccionesdeapoyoatodoslostiposestndarderecogidadeJ2SE,incluyendolalista,LinkedList, ArrayList,Vector,Stack,[Link], Hashtable,Properites,Providers,[Link] [Link],elelementoactualqueestenvueltoconlaclase [Link] seexportanparacadaiteracin,[Link] ejemplo:

<table> <c:forEach var="product" items="${products}" varStatus="status"> <tr> <td><c:out value="${[Link]}"/></td> <td><c:out value="${[Link]}"/></td> </tr> </c:forEach> </table>

Enesteejemplo,[Link] [Link] sencillo.

5.4 AccionesdeURL
Ademsdelasaccionesderepeticin,[Link] incluyeapoyoparaloshipervnculos,lasimportacionesderecursos,[Link] etiqueta<c:url>[Link] deunaURLconunparmetroyluegousarlaenunenlace,puedesercomoeste:
<c:url=[Link] var="myUrl"> <c:param name="name" value="${[Link]}"/> </c:url> <a href='<c:out value="${myUrl}"/>'>Register</a>

[Link] especificarrutasabsolutas,relativas,enrelacinconladireccindeuncontextoexterior,ylosrecursos [Link]: URLabsoluta:<c:importurl="[Link] RelativaURL(paraelcontextoactual):<c:importurl="/[Link]"/> URLrelacionadaconuncontextoexterior:<c:importurl="/[Link]"context="/common"/> RecursosFTP:<c:importurl="[Link]

Delosejemplosanteriores,esobvioque<c:import>proporcionamspotenciaqueconun<jsp:include>, sinembargo,[Link] recursosdebufferenlaJSTLqueeliminarelbufferinnecesarios.

5.5 Condicionales
JSTLescompatibleconunacondicionalsimple<if>etiquetajuntoconunacoleccindeetiquetas <choose>,<when>,y<otherwise>[Link] ltimostresetiquetaspermitenaplicaruntpicoif/elseif/elseifestructuray/olosdems. Utilizandoellenguajedeexpresinenlasaccionescondicionaltambinpuedeserunmecanismo [Link]<c:if>etiqueta,esposibleconstruirexpresiones

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina31/70

[Link],medianteelaccesoaunapropiedaddeobjetos,as:
<c:if test="${[Link] == 1}" Welcome back! </c:if>

Mutuamenteexclusivoscondicionalessontilescuandoseevalanslounodeunaseriedeacciones [Link]"si/entonces/else"funcionalidadmediantelasetiquetas <c:choose>,<c:when>,y<c:otherwise>. [Link],podramos utilizarestasetiquetasparadeterminarculeselmensajecorrectoalapantalladebeser.

<c:choose> <c:when test="${count == 0}"> No records matched your selection. </c:when> <c:otherwise> <c:out value="${count}"/> records matched your selection. </c:otherwise> </c:choose>

5.6 FormatodetextoconcapacidadI18N
[Link] [Link] soportaraplicacionesinternacionalizadas. OtraimportantereafuncionaldelaJSTLessuenfoqueinternacional(I18N)[Link] utilizacindelasaccionesprevistasfacilitalainternacionalizacindeunasolicitudocontextobasede configuracin. EstasaccioneshacenusodelaResourceBundleJ2SEestndarseutilizaparamantenerlascadenasque [Link],dependiendodela [Link]<fmt:setLocale>etiquetapuedeserusadaparaespecificarunlugarcomoeste: <fmt:setLocalevalue="es_Es"/>,[Link] posiblespecificyunResourceBundle:<fmt:bundlebasename="ApplicationResource_fr"/>. Unavezquelaconfiguracinregionaloelpaqueteestestablecido,entonceslaetiqueta<fmt:message> [Link] cadenasdeestemodo:
<fmt:message key="welcome"> <fmt:param value="${visitCount}" /> <fmt:message/>

Tambinpuedeutilizar<fmt: solicitud.

requestEncoding />paraestablecerlacodificacindecaracteresdela

[Link] deanalizarelformatoylosnmerosylasfechas,lugaresdiferentessuelentenerformasespecficasde [Link]<fmt:formatNumber> o <fmt:parseNumber> permiteelformatodelosnmeros,monedas,y [Link] atributodelpatrn.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina32/70
value="12.3" pattern=".00"/>seralasalida"12,30". <fmt:timeZone>, <fmt:setTimeZone>, y

Parademostrar:<fmt:formatNumber

Fechasyhorariossemanejanutilizandola<fmt:formatDate>,
<fmt:parseDate>.

5.7 Accesoabasesdedatos
[Link] consultasdebasededatos,fcildeaccederalosresultados,realizaractualizaciones,yelgrupodevarias operacionesenunatransaccin. Medianteestasetiquetashaceposibleelestablecimientodefuentesdedatos,consultalafuentededatos, tienenfcilaccesoalosconjuntosderesultados,yrealizarlasactualizaciones,ascomolas [Link](datasource).Elorigende datospuederealizarseenvariasformas:sepuedeconfiguraratravsdelparmetrodeconfiguracin [Link],puedeserunobjetoqueesproporcionadoporlalgicadelaaplicacin,opuedehaberun objetoproporcionadoporel<sql:setDataSource>[Link],siseutilizaunabasededatos MySQLconelcontroladorJDBC,puededefinirelorigendedatoscomo:
<sql:setDataSource var="datasource" driver="[Link]" url="jdbc:mysql://localhost/db" />

ParaaquellosfamiliarizadosconelDriverManagerJDBC,<sql:setDataSource>esslounaenvoltura [Link],bienpodraserunaruta relativaaunrecursoJNDIounacadenadeparmetroJDBC. Unaconsultapuedeaccederalafuentededatos,as:<SQL:

de datos" ... /> fuente de datos de consulta = "$ () fuente

Siponemosunamuestradetodojuntoparaejecutarunaconsultaydespusmostrarelresultado,que podraparecersea:
<sql:query var="customer" datasource="${datasource}" SELECT * FROM customers WHERE state = 'CO' ORDER BY city </sql:query> <table> <c:forEach var="row" items="${[Link]}"> <tr> <td><c:out value="${[Link]}" /></td> <td><c:out value="${[Link]}" /></td> </tr> </c:forEach> </table>

[Link],podemosdefiniruna [Link] ejemplosiguiente.

<sql:transaction dataSource="${dataSource}"> <sql:update> UPDATE account SET Balance =Balance -? WHERE accountNo = ? <sql:param value="${transferAmount}"/> <sql:param value="${accountFrom}"/> </sql:update> </sql:transaction>

El<sql:dateParam> accinpuedeserusadoparafijarlosvaloresdelosmarcadoresdeparmetros(?)En unainstruccinSQL,[Link],es

CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina33/70

[Link] sonlosdefinidospor [Link],elnivelde [Link] ocurrireneltranscursodelaoperacinsedetectaysevuelveainiciarcomounJspTagExceptionporla etiqueta.

5.8 LamanipulacindeXML
[Link] clasificarenbsico(core),controldeflujo,[Link] basaenXPath,[Link] [Link] unacadenaliteralqueseevalaelmotordeXPath. [Link] incluyen<x:out>,<x:set>,y<x:parse>.LaprincipaldiferenciaentrelasetiquetasCoreylasetiquetas XMLesquelasetiquetasXMLapoyarlasexpresionesXPath,[Link] etiquetadeanalizarproporcionafuncionalidadparaanalizarundocumentoXMLenunaestructurade [Link],porejemplo,si tenemosunarchivoXMLqueidentificaaunlibro,sepuedeanalizar,yluegoaccederaesosdatos medianteunaexpresinXPatheimprimirlo:
<c:import url="[Link] var="xml"/> <x:parse source="${xml}" var="bookInfo"/> <x:out select="$bookInfo/title"/> <x:out select="$bookInfo/author"/>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina34/70

6 Formularios
6.1 Formulariosencillo
Paraponerenpracticaloanteriorvisto,vamosausarunformulariodeentradaalsitio. Lovamosaconstruirpocoapocoparallegaralcdigosiguiente: [Link]:
<h:head> <title>Entrada al sitio</title> <link rel="stylesheet" href="[Link]" /> <ui:include src="WEB-INF/include/[Link]"/> </h:head> <h:body> <ui:include src="WEB-INF/include/[Link]"/> <h1><h:outputText value="Hello World!"/></h1> <h:graphicImage alt="GIF" url="/images/Duke_Blocks.gif" width="100px" /> <h:form> <h:panelGrid columns="3"> <h:outputText value="Usuario" /> <h:inputText id="username" value="#{[Link]}" required="true" validatorMessage="Minimo 2 caracteres!" requiredMessage="Value is required!" > <f:validateLength minimum="2" /> </h:inputText> <h:message for="username" styleClass="error"/> <h:outputText value="Clave" /> <h:inputText value="#{[Link]}" /> <h:commandButton value="Entrar" action="#{[Link]}" actionListener="#{[Link]}" /> </h:panelGrid> </h:form> </h:body>

[Link]:

root { display: block; } .logo{ font-size: 20px; color: teal; }

[Link]:
package curso; import [Link]; import [Link]; import [Link]; import [Link]; @ManagedBean(name = "Login") @RequestScoped public class Login { private String username; private String password; public void onLogin(ActionEvent e) { if (![Link]("dukes") && ![Link]("admin")) { throw new AbortProcessingException("Usuario invalido"); } // password=null; } public String submit() { String outcome = "none"; if ([Link]("dukes")) { outcome = "success"; } else { outcome = "admin"; }

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
[Link](outcome); return outcome;

Pagina35/70

} public void setPassword(String password) { [Link] = password; } public void setUsername(String username) { [Link] = username; } public String getPassword() { return password; } public String getUsername() { return username; } }

[Link]:

<?xml version='1.0' encoding='UTF-8'?> <faces-config version="2.0" xmlns="[Link] xmlns:xsi="[Link] xsi:schemaLocation="[Link] [Link] <navigation-rule> <from-view-id>/[Link]</from-view-id> <navigation-case> <from-outcome>admin</from-outcome> <to-view-id>/[Link] </to-view-id> </navigation-case> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/[Link] </to-view-id> </navigation-case> </navigation-rule> </faces-config>

[Link].

6.2 Formulariomascomplejo
Vamosacrearunformularioparaagregarunusuario,condiferentestiposdecamposenelformulario.

user_add.xhtml
<h:head> <title>Agregar un usuario</title> <link rel="stylesheet" href="[Link]" /> </h:head> <h:body> <h1>Agregar un usuario</h1> <h:form> <h:panelGrid columns="3" > <h:outputLabel value="Nombre:"/> <h:inputText id="nombre" value="#{[Link]}" size="20" maxlength="30" required="true" validatorMessage="Minimo 2 caracteres!" requiredMessage="El nombre no puede estar vacio" > <f:validateLength minimum="2" /> </h:inputText> <h:message for="nombre" styleClass="error"/>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina36/70

<h:outputLabel value="Apellido:"/> <h:inputText id="apellido" value="#{[Link]}" size="20" maxlength="30" required="true" validatorMessage="Minimo 2 caracteres!" requiredMessage="El apellido no puede estar vacio" > <f:validateLength minimum="2" /></h:inputText> <h:message for="apellido" styleClass="error"/> <h:panelGroup style="text-align:right;"><h:outputLabel value="Domicilio:"/></h:panelGroup> <h:inputTextarea id="add1" value="#{Usuario.add1}" cols="50" rows="3" ></h:inputTextarea> <f:verbatim /> <h:outputLabel value="Sexo:"/> <h:selectOneListbox title="Selecciona el sexo del usuario" value="#{[Link]}" size="1"> <f:selectItem itemValue="M" itemLabel="Masculino"/> <f:selectItem itemValue="F" itemLabel="Feminino"/> </h:selectOneListbox> <f:verbatim /> <h:outputLabel value="Cuantos herman@s"/> <h:inputText id="hermanos" value="#{[Link]}" size="1" maxlength="2" required="true" validatorMessage="Valor aceptados: de 0 a 25." requiredMessage="Este campo no puede estar vacio" converterMessage="Se espera un numero entero aqui." > <f:validateLongRange minimum="0" maximum="25" /> </h:inputText> <h:message for="hermanos" styleClass="error"/> <h:outputLabel value="Salario"/> <h:inputText id="salario" value="#{[Link]}" size="10" maxlength="12" required="true" validatorMessage="Valor aceptados: de 0 a 250000." requiredMessage="Este campo no puede estar vacio" converterMessage="Formato incorrecto." > <f:convertNumber maxFractionDigits="2" maxIntegerDigits="6" type="currency" currencySymbol="C$" locale="es" pattern=""/> <f:validateDoubleRange minimum="0" maximum="2500" /> </h:inputText> <h:message for="salario" styleClass="error"/> <h:panelGroup> <h:commandButton value="Agregar el usuario" action="#{[Link]}" ></h:commandButton> </h:panelGroup> </h:panelGrid> </h:form> </h:body>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina37/70

7 HtmlDataTable
UnDataTablemuestraunatablaHTML<table>. LascolumnasseespecificanconloscomponentessecundariosUIColumn. ElHtmlDataTabletienevariosparametros: ID:[Link] mscercanodelospadres. Value:[Link] [Link]. Var:Esteeselnombredelavariablecreadaporlatabladedatosquerepresentaelelemento [Link]. Bgcolor:Esteatributoseutilizaparaestablecerelcolordefondodelatabla. Border:Sepuedeconfigurarelanchodelbordedelamesaalrededordelamesa. Cellpadding:Estoestableceelespacioentreelcontenidoylafronteradelaclula. Cellspacing:Seespecificalacantidaddeespacioparadejarentrelasclulas. First:Seutilizaparaespecificarelnmerodefiladelaprimerafiladelaquepresentamosesque [Link],estapropiedadseestableceen3,quemuestraseiniciar desdelatercerafiladelosdatossubyacentes. Rows:[Link] desdeelndiceespecificadoenla"primera"[Link],entonces todaslasfilasquesemostrarn. Width:[Link]%. Supongamosqueseestablecequeel50%,entoncesestatablasemuestraenelespaciodel50%de laanchuradelapantalla. Dir:[Link]"ltr"(de izquierdaaderecha)y"RTL"(dederechaaizquierda)[Link] continuacin,elcontenidosemostrarenelcentro. Frame:[Link] atributopuedetomaralgunosvaloresquesemuestranacontinuacin: [Link],Valorpredeterminado [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] Rules:[Link] queseindicanacontinuacin: [Link]:Nohayreglasninguno,elvalorpordefecto [Link]:Entrelosgruposdelosgruposdefilas [Link]:Entrelasfilasdelasfilasslo [Link]:Entrecolumnasslo [Link]:Entretodaslastodaslasfilasycolumnas Summary:Puedeespecificarresumendelpropsitodelatabla. Rendered:[Link] predeterminadoes"true".Siseestableceenfalseentoncesseimpidelaprestacindeeste componentealapgina.
Versin1.0 Reproduccinprohibida

CopyrightCdricSimon,2009

[Link]

CursodeJSP

Pagina38/70

CaptionClass:listaseparadaporespaciosdelaclaseoclasesCSSqueseaplicaracualquier ttulogeneradoparaestatabla. CaptionStyle:EspecificaestiloCSSoestilosquedebenaplicarsecuandoserepresentaeste epgrafe. ColumnClasses:listaseparadaporcomasdelasclasesCSSqueseaplicaralascolumnasde estecuadro. FooterClass:EsteatributotienelistaseparadaporespaciosdeestiloCSSdelaclaseoclasesque seaplicaraaheadertergeneradoparaestatabla. HeaderClass:EsteatributotienelistaseparadaporespaciosdelaclasedeestiloCSSoclases queseaplicarseacualquierencabezadogeneradoparaestatabla. RowClasses:[Link] [Link],entonces [Link] [Link] [Link],denuevoenla tercerafila,[Link] filadelatabla. Lang:Estableceelidiomabasedelosatributosdeunelemento,esdecir,eltextoyellenguaje utilizadoenelmarcadogeneradoparaestecomponente. StyleClass:SeestableceelnombredelasclasesdeclassorCSSqueseaplicaenelmomentodela prestacindelelemento. Title:Elatributodelttuloseutilizaparaestablecereltextoparamostrarinformacinsobre [Link] paraelcliente. Binding:Esunvalordelaexpresindeuninqueesutilizadoparaconectarcomponentesauna propiedadenunbeanderespaldo. OnClick:SeestableceelcdigoJavaScriptaejecutarcuandosehaceclicenlosbotonesdelratn sobreesteelemento. Ondblclick:SeestableceelcdigoJavaScriptqueseejecutacuandoelbotndelpunteroesdoble clicsobreesteelemento. Onkeydown:SeestableceelcdigoJavaScriptqueseejecutacuandosepresionaunateclahacia abajosobreesteelemento. Onkeypress:SeestableceelcdigoJavaScriptqueseejecutacuandosepulsaunateclay publicadosobreesteelemento. Onkeyup:SeestableceelcdigoJavaScriptqueseejecutacuandosesueltaunateclasobreeste elemento. Onmousedown:SeestableceelcdigoJavaScriptqueseejecutacuandoelbotnespulsadoel punterosobreesteelemento. Onmousemove:SeestableceelcdigoJavaScriptaejecutarcuandounbotonesdelratnse muevedentrodeesteelemento. Onmouseout:SeestableceelcdigoJavaScriptaejecutarcuandounbotonesdelratnsealejade esteelemento. Onmouseover:SeestableceelcdigoJavaScriptaejecutarcuandounbotonesdelratnsemueve sobreesteelemento. Onmouseup:SeestableceelcdigoJavaScriptaejecutarcuandounbotonesdelratnsesuelta sobreesteelemento.

Ejemplo: user_details.xhtml
<h:head> <title>Detalles del usuario</title> <link rel="stylesheet" href="[Link]" /> </h:head> <h:body>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
<h1>Detalles del usuario</h1> <h:dataTable value="#{Usuario}" var="user" border="1" cellspacing="2"> <h:column> <f:facet name="header"> <h:outputText value="First Name"/> </f:facet> <h:outputText value="#{[Link]}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Last Name"/> </f:facet> <h:outputText value="#{[Link]}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Balance"/> </f:facet> <h:outputText value="#{[Link]}"> <f:convertNumber type="currency"/> </h:outputText> </h:column> </h:dataTable> </h:body> [Link]: package [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; @ManagedBean(name="Usuario") @RequestScoped public class Usuario { private String nombre; private String apellido; private String sexo; private Date fecnac=new Date(); private String add1; private String pasatiempo; private Byte hermanos; private Double salario=1550.25564; private Integer testInt=12900; public Usuario() { }

Pagina39/70

public Usuario(String nombre, String apellido, String sexo, Date fecnac, String add1, String pasatiempo, Byte hermanos, Double salario) { [Link] = nombre; [Link] = apellido; [Link] = sexo; [Link] = fecnac; this.add1 = add1; [Link] = pasatiempo; [Link] = hermanos; [Link] = salario; } public String onSubmit(){ return "success"; } public void validateCCExpiry(FacesContext cntx, UIComponent cmp, Object val) { [Link]("Validando la entrada "+val); String messS = null; String[] fields = ((String) val).split("/", 3); if ([Link] != 2) { messS = "Se espera MM/AA!"; } else { int month = 0; int year = 0; try {

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
month = [Link](fields[0]); year = [Link](fields[1]); } catch (NumberFormatException e) { } if (month <= 0 || month > 12) { messS = "Mes " + fields[0] + " invalido!"; } else if (year < 0 || year > 99) { messS = "A&ntild:o " + fields[1] + " invalido!"; } else { GregorianCalendar cal = new GregorianCalendar(); int thisMonth = [Link]([Link]) + 1; int thisYear = [Link]([Link]) - 2000; if (year < thisYear || year == thisYear && month < thisMonth) { messS = "Tarjeta vencida!"; } }

Pagina40/70

} if (messS != null) { FacesMessage mess = new FacesMessage(messS); [Link]([Link](cntx), mess); } } public String getNombre() { return nombre; } public void setNombre(String nombre) { [Link] = nombre; } public String getApellido() { return apellido; } public void setApellido(String apellido) { [Link] = apellido; } public String getSexo() { return sexo; } public void setSexo(String sexo) { [Link] = sexo; } public Date getFecnac() { return fecnac; } public void setFecnac(Date fecnac) { [Link] = fecnac; } public String getAdd1() { return add1; } public void setAdd1(String add1) { this.add1 = add1; } public String getPasatiempo() { return pasatiempo; } public void setPasatiempo(String pasatiempo) { [Link] = pasatiempo; } public void setSalario(Double salario) { [Link] = salario; } public void setHermanos(Byte hermanos) { [Link] = hermanos; } public Double getSalario() { return salario; } public Byte getHermanos() { return hermanos; } public void setTestInt(Integer testInt) { [Link] = testInt; } public Integer getTestInt() { return testInt; }

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
} demo_table.xhtml <h:head> <title>Lista de usuarios</title> <link rel="stylesheet" href="[Link]" /> </h:head> <h:body> <h1>Lista de usuarios</h1> <h:dataTable value="#{[Link]}" var="user" border="1" cellspacing="2" columnClasses="col1,col2,col1,col2" rowClasses="row1,row2" headerClass="header"> <h:column> <f:facet name="header"> <h:outputText value="Nombre"/> </f:facet> <h:outputText value="#{[Link]}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Apellido"/> </f:facet> <h:outputText value="#{[Link]}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Sexo"/> </f:facet> <h:outputText value="#{[Link]}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Salario"/> </f:facet> <h:outputText value="#{[Link]}"> <f:convertNumber type="currency"/> </h:outputText> </h:column> </h:dataTable> </h:body> [Link] package [Link]; import import import import import [Link]; [Link]; [Link]; [Link]; [Link];

Pagina41/70

@ManagedBean(name="DemoTable") @ApplicationScoped public class DemoTable { List<Usuario> data = new ArrayList(); public DemoTable() { populateData(); } public List getData(){ return data; } public void setData(Usuario a){ [Link](a); } public void populateData(){ [Link](new Usuario("Cedric","Simon","M",new Date(),"Managua","demo",(byte)2,2500.80)); [Link](new Usuario("Juan","Palmado","M",new Date(),"Managua","demo",(byte)2,25.08)); [Link](new Usuario("Melanie","Castro","F",new Date(),"Managua","demo",(byte)2,1205.05)); [Link](new Usuario("Melanie2","Castro","F",new Date(),"Managua","demo",(byte)2,1205.05)); [Link](new Usuario("Melanie3","Castro","F",new Date(),"Managua","demo",(byte)2,1205.05)); [Link](new Usuario("Melanie4","Castro","F",new Date(),"Managua","demo",(byte)2,1205.05)); } }

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina42/70

8 Mensajedeerrorpersonalizados
8.1 Listademensajepersonalizados
[Link]:
<application> <resource-bundle> <base-name>[Link]</base-name> <var>ErrMsg</var> </resource-bundle> </application>

Ensrc/curso/[Link]:
test=Hola Mundo

Uso:#{[Link]} HolaMundo

8.2 Pginadeerrorpersonalizada:
[Link] :
<h:head> <title>Pagina de error</title> </h:head> <h:body> <h2>Un error fata ocurio!</h2> <a href="#{[Link]()}/faces/[Link]">Favor prueba de nuevo.</a> <p><h:link outcome="success" value="Favor prueba de nuevo."></h:link></p> <p><h:link outcome="index" value="Favor prueba de nuevo."></h:link></p> </h:body>

[Link]:
<error-page> <location>/[Link]</location> </error-page>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina43/70

9 Convertidores
9.1 Quesunconvertidor?
Unconvertidorseutilizaparadarformato"agradable"aunobjeto,textoquesemostrar. Porejemplo,sideseaparamostrarunafechaenJSPsepuedeutilizarunconvertidordeformatodela fechaaunformatomascomnparaelusuario,como"10/03/2005". [Link], [Link] entradanocoincideenelformato,puedelanzarunaexcepcinenelconvertidorquesemuestraal [Link].

9.2 Usodelosconvertidores
ElconvertidorepuedeserfijadodentrodeJSP,oustedpuederegistrarelconvertidormediante programacin. UstedpuederegistrarunconvertidorconJSPenunadelastresmaneras: Especifiqueelidentificadordeconvertidorconlapropiedadconverterdentrodelaetiqueta.
<h:outputText value="#{[Link]}" converter="myConverter">

Juntar<f:converter>dedentrodelaetiquetadelcomponente.
<h:outputText value="#{[Link]}"> <f:converter converterId="myConverter"/> </ h: outputText>

Juntarlaetiquetapersonalizadadelconvertidordentrodeunaetiquetadelcomponente.
<h:outputText value="#{[Link]}"> <laliluna:myConverter /> </ h: outputText>

LossiguientesJSFEtiquetasapoyaconvertidores.
<h:outputText> <h:outputFormat> <h:outputLink> <h:outputLabel> <h:inputText> <h:inputTextarea> <h:inputHidden> <h:inputSecret> <h:selectBooleanCheckbox> <h:selectManyListbox> <h:selectMaynyMenu> <h:selectOneRadio> <h:selectOneListbox> <h:selectOneMenu>

9.3 Convertidoresincluidos
Sinoseespecificaunconvertidor,[Link] paratodoslostiposbsicos:Long,byte,integer,short,Character,Double,Float,BigDecimal, BigIntegeryBoolean.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina44/70

Porejemplo,sielcomponenteseasociaconunapropiedaddetipoboolean,JSFelijaelconvertidorde [Link]. Ademstieneconvertidorespredefinidosparafechasunmeros. 9.3.1

ConvertidorDateTime

[Link] formatoaunafechaobjetodeJSFproporcionaunaetiquetaconvertidor<f:convertDateTime>. Estaetiquetadebeseranidadasdentrodeuntagcomponentequeapoyalosconvertidores.

<h:outputText value="#{[Link]}"> <f:convertDateTime type="date" dateStyle="medium"/> </h:outputText>

ElconvertidorDateTimeadmiteatributos,comoeltipoodatestyle,[Link] listaacontinuacinmuestralosatributosquepuedeutilizarconelconvertidordeDateTime. Nombredelatributo datestyle Descripcin Especificaelestilodeformatoparalaporcindela [Link] sondeshort,medium(pordefecto),[Link] esvlidosiseestableceeltipodeatributo. Especificaelestilodeformatoparalaporcinde [Link] sondeshort,medium(pordefecto),[Link] esvlidosiseestableceeltipodeatributo. [Link] establece,horadelmeridianodeGreenwich(GMT) seutilizar. Elidiomalocalautilizarparalavisualizacinde [Link] Elmodelodeformatodefechautilizadopara [Link] tipodepropiedad. Especificasisedebemostrarlafecha(date),hora (time)oambas(both).

timeStyle

timezone

locale pattern

type

9.3.2

ConvertidordeNmero

Estesegundoconvertidorsepuedepersonalizarmedianteelusodeatributosadicionales,esel convertidordeNmero. Elestilparamostrarnmerosenlosformatosdebasequetrabajaparalaconfiguracinregionaldel usuario.

<h:outputText value="#{[Link]}"> <f:convertNumber type="number" maxIntegerDigits="3"/> </ h: outputText>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina45/70

[Link] atributospermitencontrolardemaneraprecisacmosemuestraunnmero. Nombredelatributo CurrencyCode Descripcin Especificaunperododetresdgitosdelcdigode monedainternacionalcuandoelatributotipoesla [Link]. Especificaunsmboloespecfico,como"$",quese utilizacuandoeltipodeatributoesmoneda. UtiliceesteoCurrencyCode. Truesiunsmbolodeagrupacin,como","o"" [Link] true. Verdaderosislolaparteenteradelvalorde entradadebeserprocesado(todoslosdecimales serignorado).Elvalorpredeterminadoesfalso. Ellocalqueseutilizarparalavisualizacinde [Link] actual Unacantidadmnimadedecimalesquesevea. Mximanmerodedecimalesquesevea. Unacantidadmnimadedgitosenterospara mostrar. Mximanmerodedgitosenterosparamostrar. Elmodelodeformatodecimalparaconvertireste [Link]. Eltipodenmero,porelnmero(number,por defecto),lamoneda(currency),oporciento (percent).Usaresteoelpatrndeesteatributo.

CurrencySymbol

groupingUsed

integerOnly

locale

minFractionDigits maxFractionDigits minIntegerDigits maxIntegerDigits pattern tipo

[Link]: <h:head> <title>Convertidores JSF</title> </h:head> <h:body> <h4>Convertidores</h4> <p> Mostrar slo la fecha y la datestyle es <i> short </i> </p> <h:outputText value="#{[Link]}"> <f:convertDateTime type="date" dateStyle="short" /> </h:outputText> <p> Mostrar slo el tiempo y el timeStyle es <i> full </i> </p> <h:outputText value="#{[Link]}"> <f:convertDateTime type="time" timeStyle="full" /> </h:outputText> <p> Pantalla de fecha y hora, la datestyle es <i> full </i> y la configuracin regional es <i> ru </i> </p> <h:outputText value="#{[Link]}"> <f:convertDateTime type="both" dateStyle="full" locale="ru" /> </h:outputText> <p> Mostrar tanto, la fecha y la hora y el datestyle es <i> short </i> </p>

Ejemplo:

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
<h:outputText value="#{[Link]}"> <f:convertDateTime type="both" dateStyle="short" /> </h:outputText> <p> Muestra una fecha con el patrn de <i> [Link] HH: mm </i> </p> <h:outputText value="#{[Link]}"> HH:mm" pattern="[Link] <f:convertDateTime /> </h:outputText>

Pagina46/70

<h:form id="datetime1"> <p> entrada de una fecha y el datestyle es <i> short </i> </p> <h:inputText value="#{[Link]}"> <f:convertDateTime type="date" dateStyle="short" /> </h:inputText> <h:commandButton value="Send" /> </h:form> <h:form id="datetime2"> <p> de entrada de una fecha que coincide con este patrn <i> [Link] </i> </p> <h:inputText value="#{[Link]}"> <f:convertDateTime pattern="[Link]" /> </h:inputText> <h:commandButton value="Send" /> </h:form> <h4> convertidor Nmero </h4> <p> mxima de pantalla <i> 3 dgitos entero </i> </p> <h:outputText value="#{[Link]}"> <f:convertNumber maxIntegerDigits="3" /> </h:outputText> <p> Tipo de pantalla es <i> moneda </i> y la CurrencySymbol es <i> $ </i> </p> <h:outputText value="#{[Link]}"> <f:convertNumber type="currency" currencySymbol="$"/> </h:outputText> <p> Tipo de pantalla es <i> por ciento </i> </p> <h:outputText value="#{[Link]}"> <f:convertNumber type="percent"/> </h:outputText> Mostrar <p> mximo de 4 dgitos de fraccin </p> <h:outputText value="#{[Link]}"> <f:convertNumber maxFractionDigits="4"/> </h:outputText> <p> Mostrar el nmero de patrones <i> # # # 0,00% </i> </p> <h:outputText value="#{[Link]}"> <f:convertNumber pattern="###0.00%"/> </h:outputText> <h:form id="number1"> <p> entrada de un nmero, pero slo los dgitos entero ser procesado </p> <h:inputText value="#{[Link]}"> <f:convertNumber integerOnly="true"/> </h:inputText> <h:commandButton value="Send" /> </h:form> <h:form id="number2"> <p> entrada de un nmero coincida con el patrn <i> ##0,00 </i> </p> <h:inputText value="#{[Link]}"> <f:convertNumber pattern="##0,00"/> </h:inputText> <h:commandButton value="Send" /> </h:form> </h:body>

9.4 Convertidorespersonalizados
Aveces,losconvertidoresestndarnosonsuficientes.

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina47/70

Porejemplo,ustedpuedenecesitarguardarenunabasededatoslosnmerosdetarjetadecrditosin [Link],ustednecesitaparacrearunaimplementacin [Link],ysobreescibirsusmtodosgetAsObjectygetAsString. [Link](fase2),el servletJSFutilizaelgetAsObjectmtodoparaconvertirlacadenadeentradaalmodelodeobjetosde [Link](fase9),elservletJSFutilizaelmtodogetAsStringparahacerla conversinenladireccinopuesta,demaneraqueunacadenapuedeserincluidoenlarespuestaHTML. Unavezfinalizadoelconversor,[Link] [Link]@FacesConverter.

<converter> <converter-id>CCNumberConverter</converter-id> <converter-class>[Link]</converter-class> </converter>

Parainvocarelconvertidor,ustednecesitajuntarcomounapropiedaddef:convertidoroasignarala propiedadConverterdelcomponentedeentrada. Ejemplo: Vamosacrearunconvertidorquevaalimpiarunnmerodetarjetadecrditodecualquiercarcterno numrico.

package [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; @FacesConverter(value="CCNumberConverter") public class CCNumberConvertEr implements Converter { // getAsObject extracts from the input string all numeric characters public Object getAsObject(FacesContext ctx, UIComponent cmp, String val) { String convVal = null; if (val != null) { char[] chars = [Link]().toCharArray(); convVal = ""; for (int k = 0; k < [Link]; k++) { if (chars[k] >= '0' && chars[k] <= '9') { convVal += chars[k]; } } [Link]("[Link]: '" + val + "' -> '" + convVal + "'"); } return convVal;

} // getAsString inserts into the object string spaces to make it readable // default: nnnn nnnn nnnn nnnn, Amex: nnnn nnnnnn nnnnn public String getAsString(FacesContext ctx, UIComponent cmp, Object val) throws ConverterException { String convVal = null; if (val != null) { int[] spaces = {3, 7, 11, 99}; int[] amex = {3, 9, 99}; String sVal = null; try { sVal = (String) val; // The val object should be a String! } catch (ClassCastException e) { throw new ConverterException("CCNumberConverter: Conversion Error"); } int kSpace = 0;

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
char[] chars = [Link](); if ([Link] == 15) { spaces = amex; } convVal = ""; for (int k = 0; k < [Link]; k++) { convVal += chars[k]; if (spaces[kSpace] == k) { convVal += ' '; kSpace++; } } [Link]("[Link]: '" + sVal + "' -> '" + convVal + "'"); } return convVal; } converters_perso.xhtml: <h:head> <title>Convertidor Personalizado</title> </h:head> <h:body> <h4>Convertidor Personalizado </h4> <h:form id="number2"> <p> entrada de un nmero de tarjeta</p> <h:inputText value="#{[Link]}" converter="CCNumberConverter"> </h:inputText> <h:commandButton value="Send" /> </h:form> </h:body>

Pagina48/70

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina49/70

10Validadores
10.1UsoyCreacindelosvalidadores
Cmogarantizarqueelusuariodelaaplicacinnopuedecompraunnmeronegativodelibros?En realidad,[Link] comprobarlavalidezdeunnmerodetarjetadecrdito?Estassontareasparalosvalidadores. JSFcuentaconcuatrotiposdemecanismosdevalidacin: Integradaenloscomponentes Validacinaniveldeaplicacin Componentesdevalidacinpersonalizada ValidacinpormtodosdeBackedBeans

10.2Validadoresincluidos
JSFproporcionalossiguientestrescomponentesdevalidacin: F:validateDoubleRange:[Link] aplicablesalosvaloresquesepuedenconvertiraundoble. f:validateLength:Sevalidaquelalongituddelacadenadeentradaestdentrodeunrango determinado. F:validateLongRange:[Link] aplicablesalosvaloresquesepuedenconvertiraunlong. Parautilizarestoscomponentesdevalidacin,simplementeanidardentrodelah:inputquenecesita [Link],paracomprobarqueslocantidadespositivassepuedenintroducir:
<h:inputText id="quantity" value="#{[Link]}" size="2" required="true" requiredMessage="Cuantos? Ninguno?" converterMessage="Un entero por favor!" validatorMessage="Minimo uno!"> <f:validateLongRange minimum="1"/> </h:inputText>

10.3Validacinaniveldeaplicacin
Lavalidacinaniveldeaplicacintienesentidosiesnecesarioparavalidarlalgicadeaplicacin,a [Link],antesde aceptarunpedido,legustaracomprobarquesubanconotieneenlalistanegraelnmerodetarjetade crdito. Sideseahaceralgunasolicituddevalidacinaniveldeaplicacin,puedeinsertarsulgicaal principiodelmtodollamadaporelformularioyhacerquelaactualizacindebasesdedatosyel [Link],tambinpodra enviarunmensajeparaelusuario,comosemuestraenlaspocaslneassiguientes:
FacesContext ctxt = [Link](); FacesMessage mess = new FacesMessage(); [Link](FacesMessage.SEVERITY_ERROR); [Link]("Este es el mensaje de error principal"); [Link]("Este es el detalle"); [Link](null, mess);

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina50/70

Elmensajecreadodeestamaneraesunmensajeglobal,novinculadaaningncomponenteen particular,ysepuedevisualizarconelcomponenteJSFsiguiente:
<h:messages globalOnly="true" styleClass="error"/>

10.4Validadorespersonalizados
Enelcapitulosobrelosconvertidores,[Link] implementarunvalidadorpersonalizado,esunprocesocasiidntico: [Link]. [Link]. DentrodelaaplicacindeJSF,consulteelatributovalidatordelcomponente. Supongamosquedeseaasegurarsedequeelcrdito,fechadecaducidaddetarjetaproporcionadaporel usuarioduranteelpedidoestenelformatomm/aoyquelatarjetanohacaducado.
package [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; @FacesValidator("CCExpiryValidator") public class CCExpiryValidator implements Validator { public CCExpiryValidator() { } public void validate(FacesContext cntx, UIComponent cmp, Object val) { String messS = null; String[] fields = ((String) val).split("/", 3); if ([Link] != 2) { messS = "Se espera MM/AA!"; } else { int month = 0; int year = 0; try { month = [Link](fields[0]); year = [Link](fields[1]); } catch (NumberFormatException e) { } if (month <= 0 || month > 12) { messS = "Mes " + fields[0] + " invalido!"; } else if (year < 0 || year > 99) { messS = "A&ntild:o " + fields[1] + " invalido!"; } else { GregorianCalendar cal = new GregorianCalendar(); int thisMonth = [Link]([Link]) + 1; int thisYear = [Link]([Link]) - 2000; if (year < thisYear || year == thisYear && month < thisMonth) { messS = "Tarjeta vencida!"; } } } if (messS != null) { FacesMessage mess = new FacesMessage( FacesMessage.SEVERITY_ERROR, messS, messS); throw new ValidatorException(mess); } }

Pararegistrarelvalidador,[Link]@FacesValidator.
<validator> <validator-id>CCExpiryValidator</validator-id> <validator-class>[Link]</validator-class> </validator>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina51/70

Uso:

<h:form> <h:inputText id="ccexpiry" value="#{[Link]}" rendered="true" requiredMessage="No puede estar vacio"> <f:validator validatorId="CCExpiryValidator" /> </h:inputText> <h:message for="ccexpiry" errorClass="error" /> <f:verbatim><br/></f:verbatim> <h:commandButton value="Probar"></h:commandButton>

</h:form>

10.5ValidadorenBackedBean
Enlugardecrearunanuevaclasecomosedescribeenlaseccinanterior,puedeagregarunmtodoaun backedbean. Enestecaso,puedeshacerlosiguiente: Copiarelmtododevalidacindentrodelaclase Copiadelasimportaciones SustituyalalneaquelanzalaValidatorExceptioncon:
if (messS != null) { FacesMessage mess = new FacesMessage(messS); [Link]([Link](cntx), mess); }

Ejemplo:
<h:inputText id="ccexpiry" value="#{[Link]}" rendered="true" requiredMessage="No puede estar vacio" validator="#{[Link]}"> </h:inputText> <h:message for="ccexpiry" errorClass="error" />

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina52/70

11Componentespersonalizados
11.1CreacindecomponentespersonalizadosparaJSP
Lafuncionalidaddeuncomponentesecentraenlaconversindelosometidoporunusuario(esdecir,los parmetrosHTTPdelapeticin)avaloresdeloscomponentes(atravsdelmtododedecodificacin duranteApplyRequestValues)ylaconversindevaloresdeloscomponentesdevueltaaHTML(a travsdelmtododecodificarduranteRenderResponse). CuandosediseauncomponenteJSF,sepuedeoptarporcambiarlacodificacinydecodificacindeuna [Link] procesadorparaelmismocomponente,[Link] continuacin,tienenelmismocomportamientoasociadoscondiferentesmanerasdeleerlosdatosdela solicituddeylaescrituraalarespuesta. Engeneral,teniendoencuentaqueJSFesdecdigoabierto,podraconsiderarlamodificacindeun componenteexistenteenlugardedesarrollarunnuevo,oquizs,graciasalaseparacindelos componentesylosrenderer,lamodificacindeunrendererexistentes. [Link],y [Link], sinembargo,ustedprobablementevaapreferirampliaruncomponenteyaexistenteo,porloporlo menos,laclaseUIComponentBase,queproporcionaimplementacionespordefectodetodoslosabstractos [Link],ustedslotienequedesarrollarcdigoparalosmtodos [Link]. Paracompletarelpanoramadeloqueustednecesitahacerparatenersucomponentepersonalizado,es [Link] [Link]. Enresumen,paradesarrollaruncomponentepersonalizado,tienequeiratravsdelospasossiguientes, aunquenonecesariamenteenesteorden: CrearunaclasedecomponentesquelassubclasesUIComponentporlaampliacindeuna existentecomponente. [Link]. CrearunaclasedeprocesadorquesubclasaRendereryreemplazalosmtodosdecodificaciny descodificacin. [Link]. CrearunaetiquetapersonalizadaquesubclasaUIComponentELTag. CrearunTLDparalaetiquetapersonalizada. Unaltimapalabraacercadeloscomponentesylosrenderers:amenosqueustedrealmentepiensaque ustedvaalareutilizarelmismocomponenteparadiferentesaplicaciones,teharslavidamuchoms fcilsimantieneselrendererdentrodelcomponente. Enprimerlugar,vamosaverloquesedebehacercuandoestnseparados,yacontinuacinveremos cmomantenerlosjuntos. Lemostraremoscmodesarrollaruncomponentequecombinalafuncionalidaddelostrescomponentes estndarnecesariosparaaceptarlaentradadeunusuario:unaetiquetaqueexplicaloqueseespera,el

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina53/70

campodetextoparaaceptarlaentrada,[Link] palabras,vamosamuestracmoreemplazarelcdigodeJSFsiguientes:
<h:outputText value="Nombre de Contacto"/> <h:inputText id = "nombre" required = "true" value = "# {[Link]}" requiredMessage = "El valor es necesario!" /> <h:message for="name" styleClass="error"/>

conestecomponentepersonalizado:
<curso:inputEntry label="Nombre de Contacto" required = "true" value = "#{[Link]}" errorStyleClass ="error" requiredMessage = "El valor es necesario!" />

TambinlemostraremoscmoestenuevocomponenteinputEntryimprimeunasteriscoalladode laetiquetasiesnecesario="true". 11.1.1

ElComponente

[Link]. InputEntryComponenteslainicializacindeloscomponentes. [Link] propiedaddelcomponentesedefineenestearchivoeslaetiqueta(label).Estosedebeaqueesta ampliacinUIInput,queseencargadedefinirtodoloquetienequeverconelcampodeentrada. SeutilizaelmtodogetFamilyparaencontrartodoslosrenderersasociadosconestecomponente. Estamosplaneandocrearunsoloprocesador,perosiguesiendoapropiadaparadefinirunafamiliams bienqueheredandelafamiliadeUIInput,porquenosepodautilizarrenderizadoresUIInputcon InputEntryComponent. [Link], [Link] matrizylodevuelve,[Link], lodescomprime,[Link] sonsiempredelegadas.
package [Link]; import [Link]; import [Link]; import [Link]; @FacesComponent("[Link]") public class InputEntryComponent extends UIInput { private String label; public InputEntryComponent() { [Link]("[Link]"); } public String getLabel() { return label; } public void setLabel(String label) {

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
[Link] = label; } // Overridden methods public String getFamily() { return "[Link]"; } public void restoreState(FacesContext ctxt, Object state) { Object val[] = (Object[]) state; [Link](ctxt, val[0]); label = (String) val[1]; } public Object saveState(FacesContext ctxt) { Object val[] = new Object[2]; val[0] = [Link](ctxt); val[1] = label; return ((Object) val); } }

Pagina54/70

Ahoraquetieneelcomponente,[Link],medianteelusodeunanotacin @FacesComponent [Link]:

<component> <component-type>[Link]</component-type> <component-class>[Link]</component-class> </component>

11.1.2

Renderer

[Link],sedefineunaclaseque [Link]. Primerovamosasobreescribirtresmtodos,decode,encodeBegin,ygetConvertedValue. LanicapropiedadqueseagregaaUIInputeslaetiqueta,queelusuariopuedemodificar. Porlotanto,sloesnecesarioparadecodificarelcampodeentrada. ElprocesodedecodificacinocurreenlafasedeApplyRequestValues(fase2). Elprocesodecodificacinrequieremstrabajoqueelprocesodedecodificacin,porquetiene paraenviaralarespuestaHTTPlostrescomponentesquesecombinanparaformar [Link](fase9). [Link] elmtododestartElement,escribelaetiquetaconunsimplemtododeescritura,escribeunasterisco, peroslosiserequiereelcomponente,ysecierraelelementodelaetiquetaconelmtodode endElement. Elresultadoesalgoascomo<label>Nombre
de contacto * </label>.

[Link] input,aadelosatributosconelmtodowriteAttribute,[Link] parmetrosdewriteAttributesonelnombreyelvalordelatributoHTMLyelnombrede lapropiedaddelcomponente. Elresultadoesalgocomoelsiguienteelemento:

<input type="text" id="form:nameEntry" name="form:nameEntry" value="" />

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina55/70

[Link] delacolaparaelcomponente,[Link],slo tienequesustituirlapalabraclaveifconunwhile. Paramostrarelmensaje,elmtodoabreelelementoSPANHTML,agregaelatributodeclasepara mostrarelmensajeconelestilocorrecto,muestraelmensaje,[Link] algocomolosiguienteelemento:<span class="error">Un valor es necesario!</span>

package [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; import [Link]; @FacesRenderer(rendererType="[Link]", componentFamily="[Link]") public class InputEntryRenderer extends Renderer { public void decode(FacesContext ctxt, UIComponent cmp) { InputEntryComponent ieCmp = (InputEntryComponent) cmp; Map requestMap = [Link]().getRequestParameterMap(); String clientId = [Link](ctxt); String val = (String) [Link](clientId); ((UIInput) ieCmp).setSubmittedValue(val); } public void encodeBegin(FacesContext ctxt, UIComponent cmp) throws IOException { InputEntryComponent ieCmp = (InputEntryComponent) cmp; ResponseWriter respWr = [Link](); encodeLabel(respWr, ieCmp); encodeInput(respWr, ieCmp); encodeMessage(ctxt, respWr, ieCmp); [Link](); } public Object getConvertedValue(FacesContext ctxt, UIComponent cmp, Object subVal) throws ConverterException { Object convVal = null; ValueExpression valExpr = [Link]("value"); if (valExpr != null) { Class valType = [Link]([Link]()); if (valType != null) { convVal = subVal; if ( && ) { Converter converter = ((UIInput) cmp).getConverter(); converter = [Link]().createConverter(valType); if (converter != null) { convVal = [Link](ctxt, cmp, (String) subVal); } } } } return convVal; } private void encodeLabel(ResponseWriter respWr, InputEntryComponent cmp) throws IOException { [Link]("label", cmp); [Link]([Link]()); if ([Link]()) { [Link]("*"); }

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
[Link]("label"); } private void encodeInput(ResponseWriter respWr, InputEntryComponent cmp) throws IOException { FacesContext ctxt = [Link](); [Link]("input", cmp); [Link]("type", "text", "type"); [Link]("id", [Link](ctxt), "id"); [Link]("name", [Link](ctxt), "name"); if ([Link]() != null) { [Link]("value", [Link]().toString(), "value"); } [Link]("input"); } private void encodeMessage(FacesContext ctxt, ResponseWriter respWr, InputEntryComponent cmp) throws IOException { Iterator it = [Link]([Link](ctxt)); // Notice: an if instead of a while if ([Link]()) { FacesMessage mess = (FacesMessage) [Link](); if (![Link]()) { String errorStyleClass = (String) [Link]().get("errorStyleClass"); [Link]("span", cmp); [Link]("class", errorStyleClass, "class"); [Link]([Link]()); [Link]("span"); } } } }

Pagina56/70

Pararegistrarelrenderer,usaunaanotacin@FacesRendereroinsertalaslneassiguientesenfaces [Link]:
<render-kit> <renderer> <component-family>[Link]</component-family> <renderer-type>[Link]</renderer-type> <renderer-class>[Link]</renderer-class> </renderer> </render-kit>

11.1.3

Tag

Elcomponentepersonalizadosehizo,peroparausarloconJSPesnecesariodefinirlaetiqueta [Link] UIComponentELTagenestecaso. Sedefineunapropiedadparacadaatributoconelapoyodelaetiqueta,peronopara [Link]. Tengaencuentaqueslotienenmtodossetter,[Link] [Link] componente,yelmtododeliberacinlimpialoqueyanoesnecesario.

package [Link]; import [Link]; import [Link]; import [Link]; public class InputEntryTag extends UIComponentELTag { private ValueExpression errorStyleClass; private ValueExpression label; private ValueExpression required; private ValueExpression requiredMessage; private ValueExpression value;

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
// Setters public void setErrorStyleClass(ValueExpression errorStyleClass) { [Link] = errorStyleClass; } public void setLabel(ValueExpression label) { [Link] = label; } public void setRequired(ValueExpression required) { [Link] = required; } public void setRequiredMessage(ValueExpression requiredMessage) { [Link] = requiredMessage; } public void setValue(ValueExpression value) { [Link] = value; } // Overridden methods public String getComponentType() { return "[Link]"; } public String getRendererType() { return "[Link]"; } protected void setProperties(UIComponent cmp) { [Link](cmp); if (errorStyleClass != null) { [Link]("errorStyleClass", errorStyleClass); } if (label != null) { [Link]("label", label); } if (required != null) { [Link]("required", required); } if (requiredMessage != null) { [Link]("requiredMessage", requiredMessage); } if (value != null) { [Link]("value", value); } } public void release() { [Link](); errorStyleClass = null; label = null; requiredMessage = null; value = null; required = null; }

Pagina57/70

AntesdepoderutilizarlaetiquetapersonalizadaenJSPannecesidaddecrearunTLDaponerenla carpetaWEBINF/tlds/. [Link]:

<?xml version="1.0" encoding="UTF-8"?> <taglib version="2.1" xmlns="[Link] xmlns:xsi="[Link] xsi:schemaLocation="[Link] [Link] <tlib-version>1.0</tlib-version> <short-name>curso</short-name> <uri>/WEB-INF/tlds/curso</uri> <tag> <display-name>inputEntry</display-name>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
<name>inputEntry</name> <tag-class>[Link]</tag-class> <attribute> <name>id</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>value</name> <required>false</required> <deferred-value><type>[Link]</type></deferred-value> </attribute> <attribute> <name>required</name> <required>false</required> <deferred-value><type>boolean</type></deferred-value> </attribute> <attribute> <name>label</name> <required>false</required> <deferred-value><type>[Link]</type></deferred-value> </attribute> <attribute> <name>errorStyleClass</name> <required>false</required> <deferred-value><type>[Link]</type></deferred-value> </attribute> <attribute> <name>requiredMessage</name> <required>false</required> <deferred-value><type>[Link]</type></deferred-value> </attribute> </tag> </taglib>

Pagina58/70

Conesto,ustedestarpreparadoparautilizarelnuevohJSFcomponentedeinterfazdeusuario: [Link]: elementorazeneliniciodeeldocumentoJSP:<%@taglib prefix="curso" uri="WEB-INF/tlds/[Link]"%> Ladesventajadelnuevocomponenteencomparacincontenerdemaneraindependienteloslabel,input, ymessage,esquenoesposiblealinearloscamposdeentradavertical. Ahoraqueyaesthecho,ustedpuedepreguntar,"Porqucurso:inputEntrysloadmitenunatributo, mientrasqueh:inputTexttienecomo40?"[Link] msatributos,talescomoeltamaodelcampodeentrada,queh:inputTextpasaaHTML,peronuestro objetivoerasercapazdereemplazarconuncomponentenicodelostresloscamposenqueseutilicen. Msatributosdeloestrictamentenecesarioslogeneraramscdigosinaadirnadatil. 11.1.4

InlineRenderer

Esposibleincluirlafuncionalidadderendererdentrodelaclasedecomponentes,demodoqueel componenteserepresenta(render)[Link],amenosqueusted planeautilizarmsdeunprocesadorconelmismocomponente,esposiblequenosevaamolestar creandorentderersseparados. Parahacercurso:inputEntryconautorepresentacin,tienequehacerlosiguiente: [Link] [Link] borrarelarchivoderenderer. [Link]. [Link]. [Link].

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina59/70

LaclaseUIInput,queseextiendeparacrearelcomponente,hospedalostresmtodosdecode, encodeBegin,ygetConvertedValuequeutilizenelrendererporseparado,perosinelparmetro [Link],porqueelobjetocomponenteesdirectamenteaccesiblesconla palabraclavethis. Cuandosequitaelparmetrodecmpdelostresmtodos,tambindebereliminarestalneade decodificaryencodeBegin,porquesehaconvertidoenintil:

InputEntryComponent ieCmp = (InputEntryComponent)cmp;

Luego,remplazatodosloscmpyieCmpconthis. SenecesitaelmtodoencodeEndparareemplazarelmtodoenUIComponentBase,quearrojaun [Link],ustednonecesitahacernadaenencodeEnd,solamentetienesque escribirunmtododevaco:public void encodeEnd(FacesContext context) throws IOException { } Tengaencuentaqueslonecesitaestemtodocuandoseejecutauncomponenteensmismo,nocuando seutilizaunaclasedeprocesadorseparado. [Link],elmtododevuelvegetRendererType"[Link]".Sielmtodoconsiste enutilizarsusmtodosderepresentacininterna,[Link], [Link].

11.2ComponentespersonalizadosparaFacelets
ConlosFaceletsesmassencillalacreacindecomponentespersonalizados. NohaynecesidaddecrearunaclaseJava,solonecesitamosarchivosXHTML(yXML). HayquecrearunequivalentealTLDparafacelets(.xml),[Link] [Link]:
<context-param> <param-name>[Link]</param-name> <param-value>/WEB-INF/facelets/[Link]</param-value> </context-param>

[Link]:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "[Link] <facelet-taglib> <namespace>[Link] <tag> <tag-name>pie</tag-name> <source>../include/[Link]</source> </tag> </facelet-taglib>

[Link]:

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Link] <html xmlns="[Link] xmlns:h="[Link] xmlns:ui="[Link] <h:body> <ui:component> <h:panelGroup styleClass="footer"> <h:outputText value="Docente: Cedric Simon - "/>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
<h:outputLink value="[Link] </h:panelGroup>. </ui:component> </h:body> </html>

Pagina60/70

LapginaaincluiresunapginaJSFXHTML,yelcomponentequequeremosincluirseencuentra entre<ui:component>y</ui:component>. Losparametrosserecuperancon#{nombreDelParametro}.Seacceptancomoparametrostambien objetosJSFometodos. Ejemplomascomplejo,equivalenteaInputEntry: input_entry.xhtml:

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Link] <html xmlns="[Link] xmlns:h="[Link] xmlns:ui="[Link] xmlns:c="[Link] <h:body> <ui:component> <h:outputText value="Nombre de Contacto"/> <c:if test="#{required}">*</c:if>: <h:inputText id = "nombre" required = "#{required}" value = "#{value}" requiredMessage = "El valor es necesario!" /> <h:message for="nombre" styleClass="error"/> </ui:component> </h:body> </html>

custom_component.xhtml:
<h:form> <curso:inputEntry label="Nombre de Contacto" required = "true" value = "#{[Link]}" errorStyleClass ="error" requiredMessage = "El valor es necesario!" /> <f:verbatim><br/></f:verbatim> <h:commandButton value="Probar" type="submit"></h:commandButton> </h:form>

box_doble.xhtml:

<h:panelGrid border="1" columns="2"> <ui:insert name="izquierdo"/> <ui:insert name="derecho"/> </h:panelGrid>

Usodebox_doble:
<curso:box_doble> <ui:define name="derecho">Derecho</ui:define> <ui:define name="izquierdo">Izquierdo</ui:define> </curso:box_doble>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina61/70

12Introduccin a Ajax
12.1Definicinyuso
Ajax significa Asynchronous Javascript and XML. Basicamente, la tecnologa Ajax permite comunicar con sistemas remotos y/o refrescar partes de una pgina si necesidad de recargar la pgina. Algunos ejemplos del uso de Ajax: Lista con seleccin automtica de valor. Aplicaciones de chat 'Drag and drop' Validaciones extensas de formulario Mens dinmicos Personalizacin de pgina ...

12.2Marcosdetrabajo
[Link],que tienenunaparteorientadaaAjax. Losmarcosdetrabajotepermitenusarcdigos/efectosconJavascript/Ajaxsinnecesidaddeentender todoelcdigoquevaatrs. Muyprobablementeestarsinteresadoenvariosmarcosdetrabajo,ytrabajarasconvariosalmismo tiempo,yaqueposiblementeningunotienetodoloquequieres. Ademas,elobjetivodeestecursoesqueseascapazdedesarrollartupropiomarcodetrabajoademasde usarlosterceros. Algunosmarcosdetrabajo'libres': Rico([Link] [Link]([Link] Mootools([Link] OAT([Link] ZeroKonfig([Link] ...

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina62/70

13AjaxconJava
13.1LlamadaAjaxconHTML
Coneljavascript'corriente',podemosmodificarlaformayelcontenidodeunapgina,perosin comunicarconfuentesexternas. Ajaxpermitecomunicarseconfuentesexternas,yaseaarchivosdetexto,pginasHTML,PHP,JSP, servlet,ocualquiertypodearchivoremoto. Parallamaraunapginaremotasinrefrescarlapginacorriente,hayquecrearunaconsultausando unafuncin,queesdiferentesiusasInternetExplorer(new ActiveXObject("[Link]"))uotro navegadorcomoFirefox(new XMLHttpRequest( )). Unavezlaconsultalista,seusaelmetodo'open'delaconsultacon3parmetros:elmodode transmisin(generalmentegetopost)[Link] llamadaesasncrona(pordefectoloes),yunusuarioyunaclaveparalacuenta. ApesardequeAjaxsignificaAsyncronousJavascriptandXML,esposiblehacerllamadassincrnicay usandotextoenvezdeXML. Unavezlallamadainiciada,seesperalarespuestausando'onreadystatechange'. Elestado'readyStatus'delallamadapuedetenerlosvaloressiguientes: 0Noiniciado 1Cargando 2Cargado 3Interactivo 4Completo Elestado'status'delallamadapuedetenerlosvaloressiguientes:
200 201 204 205 206 400 401 403 404 405 406 407 OK Created No Content Reset Content Partial Content Bad Request Unauthorized Forbidden Not Found Method Not Allowed Not Acceptable Proxy Authentication Required 408 411 413 414 415 500 501 502 503 504 505

Request Timeout Length Required Requested Entity Too Large Requested URL Too Long Unsupported Media Type Internal Server Error Not Implemented Bad Gateway Service Unavailable Gateway Timeout HTTP Version Not Supported

Generalmente,nosinteresaejecutarnuestrocdigocuandolaconsultaestcompletayconestadoOK. EjemplodellamadaAjax: ajax_html.jsp:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[Link] <html> <head> <meta name="description" content="Curso de Ajax - [Link]"> <meta name="keywords" content="Curso,Ajax,SolucionJava, java"> <link rel="stylesheet" type="text/css" href="css/[Link]"> <SCRIPT language="JavaScript" src="js/[Link]"></SCRIPT> <SCRIPT language="JavaScript" src="js/ajax_html.js"></SCRIPT> <title>[Link] | Curso de Ajax | Primera llamada Ajax con HTML</title>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
</head> <body> <button onclick="getText();">Clic aqui</button> <div id="texto"> Este es mi bloque de texto inicial </div> </body> </html> ajax_html.js: var req; function getText() { var url = "nuevo_texto.txt"; if ([Link]) { req = new XMLHttpRequest( ); } else if ([Link]) { req = new ActiveXObject("[Link]"); } [Link]("Get",url,true); [Link] = callback; [Link](null); } function callback( ) { if ([Link]==4) { if ([Link] == 200) { [Link]('texto').innerHTML = [Link]; } } }

Pagina63/70

nuevo_texto.txt:
<h2>Este es el texto desde el archivo en el servidor!</h2>

13.2LlamadaAjaxconJava
Ahorahemosllamadounapginadetexto'fijo'[Link],o lalistadeURLdelabasededatos,[Link]:permitellamaraun Servletopginajsp,ytraerelcontenidodelservlet. 13.2.1

ServletparaAjax

[Link],HTML,oXMLpor ejemplo. Enelejemploabajo,vamosarecuperarunnumeroalhazarsinsalirdelapgina. Ejemplo: ajax_java.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[Link] <html> <head> <title>[Link] | Curso de Ajax | Primera llamada Ajax con Java</title> <script type="text/javascript" src="js/ajax_java.js"></script> <script type="text/javascript" src="js/[Link]"></script> </head> <body onload="focusIn( );"> <table align="right"> <tr><td> <h4>Numero al hazar</h4> <div id="empList" style="background-color: white; font-size: 11px;color:blue;"> </div> </td></tr> </table> <h1>Primera llamada con AJAX </h1>

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina64/70

<h2> Solo pone el numero que se va a multiplicar por el numero al hazar</h2> <table align="left"> <tr> <td>Numero de paciente : <input type="text" id="no" name="no" size="5" onchange="if (check_only_digitsNoDot(this)) {buscaPaciente(this);}"> </td> </tr> </table> </body> </html>

ajax_java.js
var req; function buscaPaciente(campo ) { var url = "GetRandomNumber?no=" + escape([Link]); if ([Link]) { req = new XMLHttpRequest( ); } else if ([Link]) { req = new ActiveXObject("[Link]"); } [Link]("Get",url,true); [Link] = callback; [Link](null); } function callback( ) { if ([Link]==4) { if ([Link] == 200) { [Link]('empList').innerHTML = [Link]; } } } function focusIn( ) { [Link]("no").focus( ); }

[Link]:
package [Link]; import import import import import import [Link]; [Link]; [Link]; [Link]; [Link]; [Link];

public class GetRandomNumber extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { [Link]("text/html;charset=UTF-8"); PrintWriter out = [Link](); try { String no=[Link]("no"); double rand = [Link](); String ajaxData ="El numero al hazar es "+rand+", multiplicado por "+no+" = "+ (rand*[Link](no)); [Link](response, ajaxData); } finally { [Link](); } } public void writeResponse(HttpServletResponse resp, String output) throws IOException { [Link]("text/plain"); [Link]("Cache-Control", "no-cache"); [Link]("Content", "text/html;charset=iso-8859-1"); [Link]().write(output); }

[Link]:

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP
... <servlet> <servlet-name>GetRandomNumber</servlet-name> <servlet-class>[Link]</servlet-class> </servlet> <servlet-mapping> <servlet-name>GetRandomNumber</servlet-name> <url-pattern>/GetRandomNumber</url-pattern> </servlet-mapping>

Pagina65/70

13.3Ajaxyseguridad
ComoelAjaxpermite(enciertoscasos)hacerllamadasdirectasalabasededatosoarecursos'seguros', debentenerenmenteelaspectorelacionadoalaseguridadconAjax. ComolasllamadasAjaxsehacendesdeelnavegador,porunaconsultaHTML,esposiblerecuperarla sesindelusuarioyentoncesvalidarsieltieneaccesoaesterecurso(ono).

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina66/70

14ComponentesJSFparaAjax
14.1CmoJSFyAjaxpuedentrabajarjuntos?
Utilizarel(Ajax)JavaScriptensupginaJSF PonersucdigodeAjaxJavaScriptenloscomponentesJSF AprovecharlacrecientecoleccindemarcosdetrabajoAjaxJSF Utilizarelnuevotag<f:ajax>

14.2Utilizarel(Ajax)JavaScriptensupginaJSF
Elmsprctico/formafcildeinyectaralgodefuncionalidadWeb2.0ensuinterfazdeusuarioJSF, PuedesagregartuspropiosJS,oextenderlosmarcosdetrabajoAjaxexistentescomo: Dojo JQuery Prototype Scriptaculous OAT 14.2.1 14.2.2

Pros
Tcnicamentesencillo Fcilparacosassimples/pequeas

Contras
TrabajoconJavaScriptmsavanzadopuedeserunretoparalosprogramadoresJava(usted tienequepasarcdigo(javascript)alladodelcliente). Puedeserdifcildepurarlaaplicacin(busqueerrorestantoenelservidoryelcliente)

14.3PonersucdigodeAjaxJavaScriptenlos componentesJSF
MedianteelusodelatecnologaJSFdecomponentesesposibleescribirsuspropioscomponentesque generanelJavaScriptnecesarioenelcliente. EstoesfactibleporqueJSFpuedegenerarcualquiertipodetextoenelcliente
/ / Javascript Render personalizado para llamar a [Link] [Link] ( "<script language=\"JavaScript\" src=\"" contextPath + + "/js/[Link]\"> </ script>");

14.3.1 14.3.2

Pros
Arquitecturaslida Usuariofinal/desarrolladordeaplicacioneslopuedeutilizarfcilmentesintratarconJS.

Contras
Puedeserunretoparaconstruirdesdeunpuntodevistatcnico(tienesqueserun/experto clienteAjax,ascomounServerside/expertoenJSF)
Versin1.0 Reproduccinprohibida

CopyrightCdricSimon,2009

[Link]

CursodeJSP

Pagina67/70

Difcilesdedepurareneldesarrollodecomponentes

14.4Aprovecharlacrecientecoleccindemarcosde trabajoAjaxJSF
AhorapuedendescargardiversasbibliotecasdecomponentesJSF Instalacinfcilyrpida SoporteIDEtambinestdisponibleparamuchos(Eclipse,NetBeans,Exadel,JDeveloper...) Algunosejemplos:JBossRichFaces(Ajax4JSF),ICEfaces,ADFFaces(Trinidad)RichClient 14.4.1 14.4.2

Pros
Aprendizajemsfcil NotienesquelidiarconlascomplejidadesdelJavaScript Puedenelegirentreunacrecientecoleccindelasbibliotecas

Contras
Sitodofunciona,excelente! Todavapuedeserdifcildedepurarenelcliente(estoesporqueelcdigodeclientese representadesdeelcliente,yustedtienepocooningncontrolsobreeste)

14.5Utilizarelnuevotag<f:ajax>
JSF2.0traeunanuevalibreraparaAjax. 14.5.1 14.5.2

Pros
IncluidaenJSF2.0 NotienesquelidiarconlascomplejidadesdelJavaScript

Contras
Existenlimitacionesalusodeh:outputTextconAjax Tecnologamuynueva(>menosfuentesparaaprendizajeautodidacto,depuracin),soloJSF2.0 Todavapuedeserdifcildedepurarenelcliente(estoesporqueelcdigodeclientese representadesdeelcliente,yustedtienepocooningncontrolsobreeste)

14.5.3

PorquelAjaxenJSF?

PorquunabibliotecadeJSFAjaxespecfico? HaytoneladasdelasbibliotecasAjaxya(jQuery,DWR,GWT,etc.)Porquinventarunanuevapara JSF? [Link] VentajasdeunenfoqueespecficoJSFAjax JSFespecfico Delladodelcliente: UstedpuedeactualizarloselementosJSF(h:outputText,h:inputText,h:selectOneMenu,etc). UstednotienequeescribirJavaScript Delladodelservidor LosbackedbeansestndisponibleenlasllamadasAjax Ustednotienequeescribirservletsyanalizarparmetros

CopyrightCdricSimon,2009

Versin1.0

Reproduccinprohibida

[Link]

CursodeJSP

Pagina68/70

14.5.4

Usodeltag<f:ajax>

Descripcingeneral:
<h:commandButton action=""> <f:ajax render="id1 id2" execute="id3 id4" event="blah" onevent="javaScriptHandler"/> </h:commandButton>

Render:especificarloselementosaactualizarenelcliente Execute:especificarelementosparaprocesarenelservidor Event:especificarloseventosdeusuarioqueinicianlallamadaAjax onEvent:especificarlosscriptssecundarios(JavaScript)ainiciarlallamadaAjax Backedbeanutilizadoenlosejemplosabajo:

package [Link]; import [Link]; import [Link]; @ManagedBean(name = "AjaxDemo") @SessionScoped public class AjaxDemo { private Integer a = 0; private int b=0; private String respuesta; public AjaxDemo() { } public void onClick() { a += 10; } public void execute() { double rand = [Link](); respuesta = "El numero al hazar es " + rand + ", multiplicado por " + a + " = " + (rand * a); } public Integer getA() { return a; } public void setA(Integer a) { this.a = a; } public String getRespuesta() { return respuesta; } public void setRespuesta(String respuesta) { [Link] = respuesta; } public int getB() { b+=10; return b; } public void setB(int b) { this.b = b; }

[Link] Ejemplosencillo Cdigo:

<h:commandButton action=""> <f:ajax render="id1"/> </h:commandButton> /h:commandButton <h:outputText id="id1"/>

Interpretacin: Cuandosepulsaelbotn,vayaalservidor,ejecutelaaccin,calcularelvalordelelementodeJSF,cuyo ides"id1",enviaresevaloralcliente,yluegosustituireseelementoenelDOMconelnuevovalor.

CopyrightCdricSimon,2009 Versin1.0 Reproduccinprohibida

[Link]

CursodeJSP

Pagina69/70

Ejemplo:
<h:form prependId="false" id="form"> <h1>Ajax demo 1</h1> <h:commandButton action="#{[Link]}" value="Agrega 10 a A"> <f:ajax render="id1" /> </h:commandButton> <br/> <h3>Valor de A: <h:outputText id="id1" value="#{AjaxDemo.a}" /> </h3> </h:form>

[Link] renderer:Especificacindeloselementosdeactualizacinenelcliente ResumendeCdigo

<f:ajax render="formId:elementId" />

Idea IdolistaseparadaporespaciosdelasidentificacionesdeloselementosdeJSFcuyosvaloresseparados porespaciosdebenserdevueltosdesdeelservidorysesustituyeenDOM Detalles Haycuatrovaloresespeciales:@este@formulario,ninguno@y@[Link],estossonms [Link]. Amenosqueutilice<h:formprependId="false"/>,elREALIDesFormID:elementId. [Link] execute:Especificacindeloselementosaprocesarenservidor ResumendeCdigo
<f:ajax render="" execute="" />

Idea UnidentificadorolistadeidentificadoresJSFseparadaporespacioquedebeserenviadaalservidor [Link],unh:inputText,queserprocesadonormalmente(setters,validacin, etc). Detalles Hay4valoresespeciales:@this@form,@none@all @[Link]:[Link]. @[Link]:formincluyendoaf:[Link]. @[Link] evalen. @[Link]. Ejemplo:
<h:form> <h:panelGrid columns="2"> Numero a multiplicar : <h:inputText id="a" size="5" value="#{AjaxDemo.a}"> </h:inputText> <h:commandButton action="#{[Link]}" value="Clic"> <f:ajax render="respuesta" execute="@form"></f:ajax> </h:commandButton> </h:panelGrid> <hr></hr> <h:outputText id="respuesta" value="#{[Link]}" /> </h:form>

[Link]

CursodeJSP

Pagina70/70

[Link] event:mencionaracualeventodeusuariodebedispararlallamadaAjax ResumendeCdigo

<f:ajax Render="" event="" />

Idea [Link]"on",porloqueesmouseover,keyup,Blur, etc... Detalles Pordefecto Sieleventonoespecificado,pordefectoutilizado. Altoniveldeeventos JSFaade2Extras:accionyvalueChange. Ajustef:ajaxentornoaelementos <f:ajaxrender="">unmontndecomponentes</f:Ajax>aadeelcomportamientoAjaxenelevento pordefectoparacadacomponenteenvolvi. Accionespordefecto: action:h:CommandButton,h:commandLink Tengaencuentaquela"accin"espartedeJSF,ynounnombredeJavascriptnativoevento. Significaqueelbotnhasidoinvocadaencualquierforma(haciendoclicenl,ENTER,sitiene elfoco,elteclado,accesodirecto,etc). valueChange:h:inputText,h:inputSecret,h:inputTextarea,todoslosbotonesdeopcin,casillade verificacin,yloselementosdemen(h:selectOneMenu,etc), Unavezms,esteeventoesaadidoporJSFynoesunnombreJavascriptnativoevento. Diferentesnavegadoresmanejanun"cambio"demaneradiferente,porloqueesteunificael comportamiento. Tambintengaencuentaquees"valueChange"no",valuechange".Losacontecimientosnativas JavaScriptsonminsculas(mouseover,keyup,etc) Ejemplo:
<h:form prependId="false"> <h1>Ajax Event</h1> <h:commandButton action="#{[Link]}" value="Agrega 10 a B"> <f:ajax render="id1" event="mouseover" /> </h:commandButton> <br/> <h3>Valor de B: <h:outputText id="id1" value="#{AjaxDemo.b}" /> </h3> </h:form>

[Link]