PDF de programación - Sesión 1: Introducción a JSF

Experto Universitario Java Enterprise

Componentes de
presentación

•Sesión 1: Introducción a JSF

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Índice
• Framewoks RIA basados en el servidor
• Características de JSF
• Facelets
• Un ejemplo con RichFaces

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

2

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Ventajas RIA
• Aplicaciones RIA vs.

aplicaciones web
tradicionales
• Una única página
• Mayor interacción con el

usuario mediante
JavaScript

• Comunicación con el

servidor para actualizar
partes de la página

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

3

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Modelo RIA

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

4

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Solución 1: JavaScript
• Frameworks:

• jQuery
• Prototype
• ExtJS
• ...

Ejemplo de jQuery

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

5

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Solución 2: RIA basada en el servidor
• Frameworks:

Ejemplo de JSR RichFaces

• JSF
• GWT
• ZK
• ...

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

6

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Funcionamiento RIA basado en servidor (1)

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

7

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Funcionamiento RIA basado en servidor (2)

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

8

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Introducción a JSF
• JSF permite programar la interfaz de una aplicación
web (o aplicación cliente/servidor en general).
• Definición de la interfaz mediante componentes
• Conexión de la interfaz con el servidor, donde se situa la
lógica de negocio y los datos de la aplicación.
• Posibilidad de componentes ricos que incluyen código
Ajax.
• La definición de la interfaz de usuario se realiza de
forma declarativa: un fichero XML (HTML con JSP o
XHTML).

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

9

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

JavaServer Faces ofrece
• Una implementación del patrón MVC orientado a
entornos web, cliente/servidor
• Un conjunto estándar de componentes gráficos para
la web
• Vinculación entre componentes y beans de Java
• Soporte para validación y conversión automática de
datos
• Modelo de navegación entre páginas
• Modelo de eventos similar al de Swing
• Soporte para la internacionalización

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

10

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Funcionamiento básico de JSF

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

11

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Especificaciones de JSF
•

JSF 1.0 (marzo 2004) - Java EE 4
• Funcionamiento básico de JSF
• Beans gestionados
• Lenguaje JSF EL
• Componentes básicos
• Navegación entre vistas
JSF 1.2 (mayo 2006) - Java EE 5
• Correcciones
• Lenguaje EL unificado que integra JSP y JSF
JSF 2.0 (julio 2009) - Java EE 6
• Facelets
• Soporte para Ajax
• Componentes múltiples
• Gestión de recursos (hojas de estilo, imágenes, etc.)
• Facilidad de desarrollo y despliegue
JSF 2.1 (octubre 2010). Se lanza como versión de mantenimiento, con mínimos cambios con respecto a la anterior.
• Convierte las taglibs de JSP a facelet taglibs, permitiendo una mejor transición de JSF 1.2 a la última especificación
•
• Existen mapeos por defecto en el Faces Servlet
JSF 2.2 (en desarrollo)
• Podemos ver qué se cuece para la siguiente versión en http://jdevelopment.nl/jsf-22/

Incorpora mejores mecanismos de caché

•

•

•

•

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

12

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Implementaciones de JSF
• Librerías básicas

• Mojarra (Oracle/Sun)
• MyFaces (Apache)

• Librerías de componentes

• RichFaces (JBoss)
• ADF (Oracle)
• Tomahawk (Apache)
• IceFaces
• PrimeFaces
• OpenFaces

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

13

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

RichFaces

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

14

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Páginas JSF = XHTML

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

15

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Librerías de etiquetas de JSF

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

16

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Prefijos y cabecera XHTML

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"!xmlns:h="http://java.sun.com/jsf/html"!xmlns:f="http://java.sun.com/jsf/core"!xmlns:ui="http://java.sun.com/jsf/facelets"!xmlns:a4j="http://richfaces.org/a4j"!xmlns:rich="http://richfaces.org/rich"> Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Facelets
• Lenguaje de plantillas para componer las vistas JSF
• Algunas características

• Definición de plantillas (como en Tiles)
• Composición de componentes
• Etiquetas para definir funciones y lógica
• Desarrollo de páginas amistoso para el diseñador
• Posibilidad de crear librerías de componentes

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

18

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Etiquetas facelets

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

19

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Un ejemplo
• Plantilla: templates/principal.xhtml
• Menú: templates/includes/menu.xhtml
• Página principal: tareas.xhtml

Fichero menu.xhtml

Contenido variable definido en principal.xhtml la
etiqueta <ui:insert name=”contenido”>

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

20

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Fichero templates/principal.xhtml

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

21

<h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Tareas pendientes</title> <link rel="stylesheet" type="text/css" href="css/estilos.css"/> </h:head><h:body> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td colspan="2"><div class="titulo">Gestión de tareas</div></td> </tr> <tr> <td> <div class="menu"> <ui:include src="includes/menu.xhtml"/> </div> </td> <td valign="top"> <div class="contenido"> <rich:panel> <ui:insert name="contenido"> Contenido por defecto </ui:insert> </rich:panel> </div> </td> </tr> <tr> <td colspan="2"> <div class="pie"> &copy; 2011 - Especialista Universitario Java Enterprise </div> </td> </tr> </tbody> </table></h:body> Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Fichero templates/includes/menu.xhtml (I)

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"!xmlns:h="http://java.sun.com/jsf/html"!xmlns:f="http://java.sun.com/jsf/core"!xmlns:ui="http://java.sun.com/jsf/facelets"!xmlns:rich="http://richfaces.org/rich"><ui:composition> <rich:panel header="Menú" > <a href="#">Listar tareas</a><br/> <a href="#">Añadir nueva tarea</a> </rich:panel></ui:composition></html> Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Fichero templates/includes/menu.xhtml (II)
• En algunos casos se nos permite quitar las etiquetas html

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ui:composition xmlns="http://www.w3.org/1999/xhtml"!xmlns:h="http://java.sun.com/jsf/html"!xmlns:f="http://java.sun.com/jsf/core"!xmlns:ui="http://java.sun.com/jsf/facelets"!xmlns:rich="http://richfaces.org/rich"> <rich:panel header="Menú" > <a href="#">Listar tareas</a><br/> <a href="#">Añadir nueva tarea</a> </rich:panel></ui:composition> Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Fichero tareas.xhtml

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 1

24

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