Java Server Faces

1
Java Server Faces

• El siguiente paso en el desarrollo web

Óscar Sánchez Ramón. SSDD. Curso 05/06
2
Contenidos

• 1. Qué es JSF?
• 2. En qué tecnologías se basa?
• 3. Los conceptos clave de la tecnología
• 4. Integración con otros frameworks
• 5. Resumen
• 6. Referencias.

3
1. Qué es JSF?

• La tecnología Java Server Faces (JSF) es un marco
  de trabajo de interfaces de usuario del lado de
  servidor para aplicaciones Web basadas en
  tecnología Java.
• Los dos componentes principales son
• Una librería de etiquetas para JSP
• Una API para manejo de eventos, validadores, etc.
• lt_at_ taglib uri"http//java.sun.com/jsf/core"
  prefix"f" gt

4
1. Qué es JSF?

• Permite a los desarrolladores pensar en términos
  de componentes, eventos, backing beans y otras
  interacciones, en vez de hablar de peticiones,
  respuestas y marcas.
• JSF promete reutilización, separación de roles,
  facilidad de uso de las herramientas.
• JSF tiene una meta específica hacer el
  desarrollo web más rápido y fácil.

5
1. Qué es JSF?

• JSF (en J2EE) es similar a ASP .NET
• Interfaz de usuario dirigida por eventos,
• Abstracción del protocolo HTTP

Tienen correspondencia en JSF
HTML
Controles en ASP .NET
De validación
De servidor
6
2. En qué tecnologías se basa?

• HTTP
• Servlets
• JavaBeans
• JSP

7
2. En qué tecnologías se basa?

• Servlets
• Amplía la funcionalidad del servidor
• Posterior al CGI
• API Java
• Se ejecuta en un contenedor de aplicaciones
• Hasta JSP, único modo de generar páginas web
  dinámicas

8
2. En qué tecnologías se basa?

• Servlets (ejemplo)
• MyTableData tableData MyDAO.queryData()
• PrintWriter writer response.getWriter()
  writer.println("lttable border\"1\"gt")
• for (int i0 ilttableData.getData().length
  i)
• writer.println("lttrgt")
• writer.println("lttdgt") writer.println(tableDat
  a.getData()i) writer.println("lt/tdgt")
• writer.println("lt/trgt")
• writer.println("lt/tablegt")

9
2. En qué tecnologías se basa?

• Servlets
• Inconvenientes
• Poco legible
• Mantenimiento costoso
• El diseñador gráfico debe saber Java
• A cada cambio recompilar, empaquetar, desplegar.
• Uso actual de los servlets
• Controlador en la arquitectura MVC
• Preprocesamiento de peticiones

10
2. En qué tecnologías se basa?

• Java Server Pages (JSP)
• Páginas HTML con scripts (por defecto Java)
• Se traduce a un servlet en la primera petición
• Semánticamente equivalente a los servlets
• Facilitan el desarrollo y mantenimiento

11
2. En qué tecnologías se basa?

• JSP 1.x (Ejemplo de programación en sus inicios)
• lt
• MyTableData tableData MyDAO.queryData()
• gt
• lttable border"1"gt
• lt
• for (int i 0 i lt tableData.getData().length
  i)
• gt
• lttrgt lttdgt
• lt tableData.getData()i gt
• lt/tdgt lt/trgt
• lt gt
• lt/tablegt

12
2. En qué tecnologías se basa?

• JSP 1.x
• Facilidad para manejo de JavaBeans
• ltjspuseBean iduser classCliente
  scopesessiongt
• ltform methodPOST actionactualiza.ctrlgt
• ltinput typetext namenombre value
• ltjspgetProperty nameuser
  propertyname/gt
• /gt
• lt/formgt
• lt/jspuseBeangt

13
2. En qué tecnologías se basa?

• JSP 1.x
• Otras etiquetas estándar de JSP
• ltjspforward pageregistro.jsp
• ltjspinclude page/servlet/ServletCookie
• flushtrue /gt
• ltjspsetProperty namecliente propertynif
• value53146712F /gt

14
2. En qué tecnologías se basa?

• JSP 1.x
• Etiquetas de extensión
• Alternativa a los JavaBeans para encapsular la
  lógica de negocio
• Componentes para la edición web
• Para usar declarativamente la lógica de negocio
• Ejemplo
• ltssddenlace URLindex.jsp textoinicio/gt

15
2. En qué tecnologías se basa?

• JSP 1.x (Ejemplo de una nueva etiqueta)
• lttable border"1"gt
• lttrgt
• lttd width"20"gtltp align"center"gtltbgtUsuariolt/bgt
  lt/tdgt
• lttd width"50"gtltp align"center"gtltbgtNombrelt/bgtlt
  /tdgt
• lttd width"30"gtltp align"center"gtltbgtCorreolt/bgtlt
  /tdgt
• lt/trgt
• ltssddlistaUsuarios usuarios"lt usuariosgt"gt
• lttrgt
• lttd with"20 align"center"gtltidentificadorgt
  lt/tdgt
• lttd with"50" align"center"gtltnombregtlt/tdgt
• lttd with"30" align"center"gtltcorreogtlt/tdgt
• lt/trgt
• lt/ssddlistaUsuariosgt
• lt/tablegt

16
2. En qué tecnologías se basa?

• JSP (Código de la nueva etiqueta) (1 de 2)
• public class UsuariosTag extends BodyTagSupport
• private Collection usuarios
• private Iterator it
• public void setUsuarios(Collection usuarios)
• this.usuarios usuarios
• public void doInitBody() throws JspTagException
  
• it usuarios.iterator()
• Cliente c (Cliente) it.next()
• if (c null)
• return
• else
• pageContext.setAttribute("identificador",
  c.getUsuario())
• pageContext.setAttribute("nombre",
  c.getNombre())
• pageContext.setAttribute("correo",
  c.getCorreo())

17
2. En qué tecnologías se basa?

• JSP (Código de la nueva etiqueta)(2 de 2)
• public int doAfterBody() throws JspTagException
• BodyContent bodyContent getBodyContent()
• if (bodyContent ! null)
• try bodyContent.getEnclosingWriter().
  
• print(bodyContent.getString())
• bodyContent.clearBody()
• catch (Exception e) throw new
  JspTagException(e.getMessage())
• if (it.hasNext())
• Cliente c (Cliente) it.next()
• pageContext.setAttribute("identificador",
  c.getUsuario())
• pageContext.setAttribute("nombre",
  c.getNombre())
• pageContext.setAttribute("correo",
  c.getCorreo())
• return EVAL_BODY_TAG
• else return SKIP_BODY

18
2. En qué tecnologías se basa?

• JSP Standard Tag Library (JSTL)
• Librería de etiquetas para JSP.
• No es parte de JSP ni JSF, los complementa
• Precursor librerías de etiquetas de Struts
• Formado por 4 librerías
• core funciones script básicas
• xml procesamiento de xml
• fmt internacionalización y formato
• sql acceso a base de datos

19
2. En qué tecnologías se basa?

• JSTL (Ejemplo con scriptlets, sin JSTL)
• lt_at_ page importcom.ktaylor.model.AddressVO,
  java.util. gt
• lt
• List addresses (List)request.getAttribute("add
  resses")
• Iterator addressIter addresses.iterator()
  while(addressIter.hasNext())
• AddressVO address (AddressVO)addressIter.next()
  
• if((null ! address) (null !
  address.getLastName()) (address.getLastName()
  .length() gt 0))
• gt
• lt
• address.getLastName()gtltbr/gt
• lt
• else
• gt
• N/Altbr/gt
• lt gt

20
2. En qué tecnologías se basa?
Librería básica

• JSTL (Ejemplo sin scriptlets, con JSTL)
• lt_at_ taglib prefix"c"uri"http//java.sun.com/jstl
  /core" gt
• ltcforEach items"addresses" var"address"gt
• ltcchoosegt
• ltcwhen test"not empty address.lastName" gt
• ltcout value"address.lastName"/gtltbr/gt
• lt/cwhengt
• ltcotherwisegt
• N/Altbr/gt
• lt/cotherwisegt
• lt/cchoosegtltbr/gt
• lt/cforEachgtltbr/gt

Etiqueta Iterador
Lenguaje de expresiones
21
2. En qué tecnologías se basa?

• JSP 2.0
• Evolución de JSP 1.2
• Separación completa de roles
• Todavía se habla de cabeceras, sesión,
• Elementos principales
• Lenguaje de expresiones (EL)
• Ficheros de etiquetas
• SimpleTag vs Tag
• Mejorada la sintaxis XML

22
2. En qué tecnologías se basa?

• JSP 2.0
• Lenguaje de expresiones (EL)
• Mismo EL que JSTL, pero soportado nativamente
• Meta que lo use gente que no sabe programar
• Inspirado en JavaScript y XPath
• Se puede desactivar los scriptlets y habilitar EL
• ltexpresióngt

23
2. En qué tecnologías se basa?

• JSP 2.0
• Ejemplos de EL
• ((Duck) pageContext.getAttribute(duck)).getBeakC
  olor()
• ? duck.beakColor
• ltjspuseBean id"foo" class"FooBean" /gt
• lt foo.getBar() gt
• ? foo.bar

24
2. En qué tecnologías se basa?

• JSP 2.0
• Ficheros de etiquetas
• Escribir etiquetas sólo con código JSP
• Mecanismo de reutilización para autores de
  páginas
• Empaquetado de la aplicación más flexible
• Etiquetas en /WEB-INF/tags
• TLD implícito
• lt_at_ taglib prefix"..." tagdir"/WEB-INF/tags" gt
  

25
2. En qué tecnologías se basa?

• JSP 2.0
• Ejemplo de fichero de etiqueta.
• lt_at_ tag nametableTag gt
• lt_at_ attribute nameitems gt
• lttable width bgcolorgt
• ltthgt
• lttdgtNamelt/tdgt lttdgtIQlt/tdgt
• lt/thgt
• ltcforEach vari itemsitemsgt
• lttrgt
• lttdgti.fullNamelt/tdgt
• lttdgti.IQlt/tdgt
• lt/trgt
• lt/cforEachgt
• lt/tablegt

26
2. En qué tecnologías se basa?

• JSP 2.0
• La anterior API para definir nuevas etiquetas
  (Tag)

27
2. En qué tecnologías se basa?

• JSP 2.0
• Nueva API para definir etiquetas (SimpleTag)

28
2. En qué tecnologías se basa?

• JSP 2.0
• Mejorada la sintaxis XML
• Antes JSP como documento ? ltjsp rootgt
• Ahora JSP como espacio de nombres ?
• lthtml xmlnsutil"http//mytaglib"
• xmlnsc"http//java.sun.com/jsp/jstl/core"gt

29
2. En qué tecnologías se basa?
30
3. Los conceptos clave de la tecnología

• Componentes de interfaz de usuario
• Eventos
• Beans manejados
• Validadores
• Internacionalización y localización
• Conversores
• Navegación

31
3. Los conceptos clave de la tecnología

• Los componentes de la interfaz de usuario
• Son JavaBeans
• Se ejecutan en el lado del servidor
• Tienen estado
• Se organizan en árboles de vistas
• Representación específica renderer
• Familia de representaciones kits de renderer
• lt_at_ taglib uri"http//java.sun.com/jsf/html"
  prefix"h" gt

32
3. Los conceptos clave de la tecnología

• Los componentes de la interfaz de usuario
• lthcommandButton idsiguiente
  valuemsg.buttonHeader actionsigPagina/gt
• lthinputTextarea idtextArea rows4 cols7
  valueText goes here/gt

33
3. Los conceptos clave de la tecnología

• Los componentes de la interfaz de usuario
• Ejemplo (traducción de JSF a HTML) (1 de 2)

Enter address lthmessage style"color red"
for"useraddress" /gt lthinputText
id"useraddress" value"jsfexample.address"
required"true"/gt lthcommandButton
action"save" value"Save"/gt
34
3. Los conceptos clave de la tecnología

• Los componentes de la interfaz de usuario
• Ejemplo (traducción de JSF a HTML) (2 de 2)
• Enter address ltspan style"color red"gt
• Validation Error Value is required. lt/spangt
• ltinput id"jsftagsuseraddress" type"text"
  name"jsftagsuseraddress" value"" /gt
• ltinput type"submit" name"jsftags_id1"
  value"Save" /gt

35
3. Los conceptos clave de la tecnología

• Eventos
• Los componentes UI generan eventos
• Los listeners se implementan en backing beans o
  clases aparte
• 4 tipos
• Value-change events
• Action events
• Data model events
• Phase events

36
3. Los conceptos clave de la tecnología

• Eventos
• Ejemplo value-change event
• lthinputText
• valueChangeListenermyForm.processValueChanged
  
• /gt
• public void processValueChanged(ValueChangeEvent
  event)
• HtmlInputText sender (HtmlInputText)event.get
  Component()
• sender.setReadonly(true)
• changePanel.setRendered(true)

37
3. Los conceptos clave de la tecnología

• Eventos
• Ejemplo action event
• lthcommandButton id"redisplayCommand"
  type"submit" value"Redisplay"
• actionListener"myForm.doIt
• /gt
• public void doIt(ActionEvent event)
• HtmlCommandButton button
• (HtmlCommandButton)event.getComponent()
• button.setValue("It's done!")

38
3. Los conceptos clave de la tecnología

• Beans manejados (Managed beans)
• Beans de respaldo (Backing beans)
• JavaBeans especializados
• Contienen datos de componentes UI, implementan
  métodos de oyentes de eventos
• Controlador en el Modelo Vista Controlador(MVC)
• Backing bean por página, formulario,
• Componente UI y backing bean están sincronizados
• Son backing beans que usan la facilidad Manager
  Bean Creation Facility

39
3. Los conceptos clave de la tecnología

• Beans Manejados (Managed Beans)
• Ejemplo de declaración (faces-config.xml)

ltmanaged-beangt ltmanaged-bean-namegthelloBeanlt/ma
naged-bean-namegt ltmanaged-bean-classgt
com.virtua.jsf.sample.hello.HelloBean
lt/managed-bean-classgt ltmanaged-bean-scopegt
session lt/managed-bean-scopegt lt/managed-beangt
40
3. Los conceptos clave de la tecnología

• Beans Manejados (Managed Beans)
• Ejemplo de uso
• lthoutputText id"helloBeanOutput"
• valuehelloBean.numControls
• /gt

41
3. Los conceptos clave de la tecnología

• Validadores
• Aseguran la correcta introducción de valores
• Evitan escribir código Java y/o Javascript
• JSF provee de validadores estándar
• Podemos crear validadores propios
• Generan mensajes de error
• 3 tipos
• A nivel de componente UI
• Métodos validadores en los backing beans
  (validator)
• Clases validadoras (etiqueta propia anidada)

42
3. Los conceptos clave de la tecnología

• Validadores
• Estándar de JSF campo con valor requerido,
  validadores de la longitud de una cadena, y
  validadores de rango para enteros y decimales
• Ejemplos
• lthinputText id"userNumber valuevalue"NumberB
  ean.userNumber
• requiredtrue
• /gt
• lthinputTextgt
• ltfvalidateLength minimum"2" maximum"10"/gt
• lt/hinputTextgt

43
3. Los conceptos clave de la tecnología

• Internacionalización y localización
• Internacionalización habilidad de una aplicación
  de soportar diferentes lenguajes dependiendo de
  la región del planeta en que nos encontremos.
• Localización El proceso de modificar una
  aplicación para que soporte la lengua de una
  región.
• JSF ofrece el soporte, no las traducciones
• El usuario indica su lengua mediante el navegador

44
3. Los conceptos clave de la tecnología

• Internacionalización y localización
• Ejemplo (declaración en faces-config.xml)
• ltapplicationgt
• ltlocale-configgt
• ltdefault-localegtenlt/default-localegt
• ltsupported-localegtenlt/supported-localegt
• ltsupported-localegten_USlt/supported-localegt
• ltsupported-localegtes_ESlt/supported-localegt
• lt/locale-configgt
• ltmessage-bundlegtCustomMessageslt/message-bundlegt
• lt/applicationgt

45
3. Los conceptos clave de la tecnología

• Internacionalización y localización
• Ejemplo (resource bundles y uso)
• ltfloadBundle basename"LocalizationResources"
  var"bundle"/gt

lthoutputText value"bundle.halloween"/gt
46
3. Los conceptos clave de la tecnología

• Conversores
• Convierten el valor de un componente desde y a
  una cadena
• Cada componente se asocia a un sólo conversor
• El renderer lo usa para saber mostrar los datos
• JSF tiene definidos para fechas, números, etc.
• Podemos crear los nuestros propios
• Tienen en cuenta la localización y formato

47
3. Los conceptos clave de la tecnología

• Conversores
• Muestran un error si la entrada no es correcta
• Por defecto JSF asigna uno adecuado
• Se pueden definir de 4 formas
• Etiqueta propia anidada en la del componente
• En la etiqueta del componente con converter
• Etiqueta ltfconvertergt anidada
• Etiquetas predefinidas (otras) anidadas

48
3. Los conceptos clave de la tecnología

• Conversores
• Ejemplo (conversor predefinido)
• lthoutputText value"user.dateOfBirth"gt
• ltfconvertDateTime type"date"
  dateStyle"short"/gt
• lt/houtputTextgt

18/03/06
03/18/06
49
3. Los conceptos clave de la tecnología

• Navegación
• Habilidad de pasar de una página a la otra
• Lo controla el manejador de navegación
• Correspondencia salida/página caso de navegación
• Hay que definir las reglas de navegación

50
3. Los conceptos clave de la tecnología

• Navegación
• Ejemplo de declaración (faces-config.xml)
• ltnavigation-rulegt
• ltfrom-view-idgt/login.jsplt/from-view-idgt
• ltnavigation-casegt
• ltfrom-outcomegtsuccesslt/from-outcomegt
• ltto-view-idgt/mainmenu.jsplt/to-view-idgt
• lt/navigation-casegt
• ltnavigation-casegt
• ltfrom-outcomegtfailurelt/from-outcomegt
• ltto-view-idgt/login.jsplt/to-view-idgt
• lt/navigation-casegt
• lt/navigation-rulegt o

51
4. Integración con otros frameworks

• JSF con Struts

52
4. Integración con otros frameworks

• JSF con Spring e Hibernate

53
5. Resumen

• JSF es una tecnología de interfaces de usuario
  centrada en el MVC, interesante y en creciente
  auge
• Pretende reducir el salto entre las aplicaciones
  de escritorio y las web, abstrayendo del
  protocolo HTTP
• Promete reutilización, separación de roles,
  facilidad de uso y reducir el time-to-market
• Se puede combinar con otros frameworks para
  obtener un soporte más potente

54
6. Referencias

• Java Server Faces In Action, K.D. Mann Ed.
  Manning. 2005
• Integrating JSP/JSF and XML/XSLT
• http//www.theserverside.com/articles/article.tss
  ?lBestBothWorlds
• JSF KickStart A Simple JavaServer Faces
  Application
• http//www.programacion.com/java/tutorial/jap_jsf
  work/
• Integración de JSF, Spring e Hibernate para crear
  una Aplicación Web del Mundo Real
• http//www.exadel.com/tutorial/jsf/jsftutorial-kic
  kstart.html
• JSP 2.0 and JSTL Principles and Patterns
• web.princeton.edu/sites/isapps/jasig/2002WinterOrl
  ando/presentations/jsp20-jasig-2002.ppt