09b jsf (1)

Taller de Sistemas de

Información 2

Java Server Faces 2.0

INCO - Facultad de Ingeniería – Montevideo, Uruguay 2

Contenido

¿Qué es JSF?

¿En qué tecnologías se basa?

Los conceptos clave de la tecnología


¿Qué es JSF?

La tecnología Java Server Faces (JSF) es

un framework para el desarrollo de

interfaces de usuario del lado de servidor

para aplicaciones Web basadas en

tecnología Java, hoy ya estamos en la

versión 2.0


¿Qué es JSF?

Los dos componentes principales son

Una librería de tags para JSP (versión 1.x)

Una API para manejo de eventos,

validadores, etc.

Version 1.x

<%@ taglib uri="http://java.sun.com/jsf/core"

prefix="f" %>

Version 2.0

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html">


¿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


¿Qué es JSF?

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


¿Qué es JSF?

JSF es similar a ASP.NET

Interfaz de usuario dirigida por eventos

Abstracción del protocolo HTTP

Controles en ASP .NET

De servidor

HTML

De validación

Tienen

correspondencia

en JSF



HTTP

Servlets

JavaBeans

JSP (versión 1.x)

Xhtml (versión 2.0)

Anotations (versión 2.0)

JSF 1.x JSF 2.0

JEE 5 o superior JEE 6 o superior

O 5 pero debe incluir libs.



Servlets

Amplía la funcionalidad del servidor

Acceso completo al API de Java

Se ejecuta en un contenedor de aplicaciones

Hasta la aparición de JSP, único modo de

generar páginas web dinámicas nativo de

java



Ejemplo código servlets.

MyTableData tableData = MyDAO.queryData();

PrintWriter writer = response.getWriter(); writer.println("<table border=\"1\">");

for (int i=0; i<tableData.getData().length; i++){

writer.println("<tr>");

writer.println("<td>"); writer.println(tableData.getData()[i]); writer.println("</td>");

writer.println("</tr>");

}

writer.println("</table>");



Servlets

Inconvenientes Poco legible

Mantenimiento costoso

El diseñador gráfico debe saber Java

A cada cambio: recompilar, empaquetar, desplegar

Uso actual de servlets Controlador en la arquitectura MVC

Pre procesamiento de peticiones



Java Server Pages (JSP)

Páginas HTML con scripting Java

Se traduce a un servlet en la primera petición

Semánticamente equivalente a los servlets

Facilitan el desarrollo y mantenimiento

Orientado al documento



<%

MyTableData tableData = MyDAO.queryData();

%>

<table border="1">

<%

for (int i = 0; i < tableData.getData().length;

i++) {

%>

<tr> <td>

<%= tableData.getData()[i] %>

</td> </tr>

<% }%>

</table>



JSP 1.x

Facilidad para manejo de JavaBeans

<jsp:useBean id=“user” class=“Cliente” scope=“session”>

<form method=“POST” action=“actualiza.ctrl”>

<input type=“text” name=“nombre” value=“

<jsp:getProperty name=“user” property=“name”/>

“/>

</form>

</jsp:useBean>



JSP 1.x

Otras etiquetas estándar de JSP

<jsp:forward page=“registro.jsp”>

<jsp:include page=“/servlet/ServletCookie”

flush=“true” />

<jsp:setProperty name=“cliente” property=“nif”

value=“53146712F” />



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:

<ssdd:enlace URL=“index.jsp” texto”inicio”/>



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



JSP 2.0

Evolución de JSP 1.2

Separación completa de roles

Todavía se habla de headers,

request, sesión, application…



JSP 2.0

Elementos principales:

Lenguaje de expresiones (EL)

Archivos de etiquetas

SimpleTag vs Tag

Mejorada la sintaxis XML



JSP 2.0

Lenguaje de expresiones (EL)

Mismo EL que JSTL, soportado nativamente

Que lo use gente que no sabe programar

Inspirado en JavaScript y XPath

Se pueden desactivar los scriptlets y

habilitar EL

${ <expresión> }



JSP 2.0

• Ejemplos de EL

((Duck) pageContext.getAttribute(”duck”)).getBeakColor()

${duck.beakColor}

<jsp:useBean id="foo" class="FooBean" />

<%= foo.getBar() %>

${foo.bar}

Con ELSin EL



JSP 2.0

Archivos 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



JSP 2.0• Ejemplo de uso de archivos de etiqueta.

<%@ tag name=”tableTag” %>

<%@ attribute name=”items” %>

<table width=”…” bgcolor=”…”>

<th>

<td>Name</td> <td>IQ</td>

</th>

<c:forEach var=”i” items=”${items}”>

<tr>

<td>${i.fullName}</td>

<td>${i.IQ}</td>

</tr>

</c:forEach>

</table>


Los conceptos clave de la

tecnología JSF

Componentes de interfaz de usuario

Eventos

Managed beans

Validadores

Internacionalización y localización

Conversores

Navegación



tecnología JSF

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

• <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>



tecnología JSF


<h:commandButton id=“siguiente”

value=“#{msg.buttonHeader}” action=“sigPagina”/>

action=“mybean.sigPagina” (En JSF 2.0)

<h:inputTextarea id=“textArea” rows=“4” cols=“7”

value=“Text goes here…”/>



tecnología JSF


• Ejemplo (traducción de JSF a HTML) (1 de 2)

Enter address: <h:message style="color: red" for="useraddress" />

<h:inputText id="useraddress" value="#{jsfexample.address}"

required="true"/>

<h:commandButton action="save" value="Save"/>



tecnología JSF


• Ejemplo (traducción de JSF a HTML) (2 de 2)

Enter address: <span style="color: red">

Validation Error: Value is required. </span>

<input id="jsftags:useraddress" type="text"

name="jsftags:useraddress" value="" />

<input type="submit" name="jsftags:_id1" value="Save" />

(Esto es en JSF 1.x)



tecnología JSF

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



tecnología JSF

Eventos

• Ejemplo: value-change event

<h:inputText

valueChangeListener=“#{myForm.processValueChanged}“

/>

public void processValueChanged(ValueChangeEvent event){

HtmlInputText sender = (HtmlInputText)event.getComponent();

sender.setReadonly(true);

changePanel.setRendered(true);

}



tecnología JSF

Eventos

• Ejemplo: action event

<h:commandButton id="redisplayCommand" type="submit"

value="Redisplay"

actionListener="#{myForm.doIt}“

/>

public void doIt(ActionEvent event){

HtmlCommandButton button =

(HtmlCommandButton)event.getComponent();

button.setValue("It's done!");

}



tecnología JSF

Managed beans

• Backing beans

JavaBeans especializados

Contienen datos de componentes UI, implementan métodos listener de eventos

Model View Controller (es la parte controller)

Backing bean por página, formulario, …

Componente UI y backing bean están sincronizados



tecnología JSF

Beans Manejados (Managed Beans)

• Ejemplo de declaración (faces-config.xml):

<managed-bean>

<managed-bean-name>helloBean</managed-bean-name>

<managed-bean-class>

com.virtua.jsf.sample.hello.HelloBean

</managed-bean-class>

<managed-bean-scope>

session

</managed-bean-scope>

</managed-bean>



tecnología JSF

Beans Manejados (Managed Beans)

• Ejemplo de uso:

<h:outputText id="helloBeanOutput"

value=“#{helloBean.numControls}“

/>

Utiliza EL parecido

al de JSP 2.0



tecnología JSF

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)



tecnología JSF

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:

<h:inputText id="userNumber“

valuevalue="#{NumberBean.userNumber}”

required=“true”

/>

<h:inputText>

<f:validateLength minimum="2" maximum="10"/>

</h:inputText>



tecnología JSF


• 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



tecnología JSF


• Ejemplo (declaración en faces-config.xml):

<application>

<locale-config>

<default-locale>en</default-locale>

<supported-locale>en</supported-locale>

<supported-locale>en_US</supported-locale>

<supported-locale>es_ES</supported-locale>

</locale-config>

<message-bundle>CustomMessages</message-bundle>

</application>



tecnología JSF


• Ejemplo (resource bundles y uso):

<f:loadBundle basename="LocalizationResources" var="bundle"/>

LocalizationResources_en.properties

halloween=Every day is like Halloween.

numberOfVisits=You have visited us {0} time(s), {1}. Rock on!

toggleLocale=Translate to Spanish

helloImage=../images/hello.gif

<h:outputText value="#{bundle.halloween}"/>



tecnología JSF

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



tecnología JSF

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 <f:converter> anidada

Etiquetas predefinidas (otras) anidadas

Co

nve

rso

res n

o p

red

efin

ido

s



tecnología JSF

Conversores

• Ejemplo (conversor predefinido):

<h:outputText value="#{user.dateOfBirth}">

<f:convertDateTime type="date" dateStyle="short"/>

</h:outputText>

18/03/0603/18/06



tecnología JSF

Navegación en JSF v1.x

• 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



tecnología

Navegacióno Ejemplo de declaración (faces-config.xml):

<navigation-rule>

<from-view-id>/login.jsp</from-view-id>

<navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/mainmenu.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>failure</from-outcome>

<to-view-id>/login.jsp</to-view-id>

</navigation-case>

</navigation-rule>

Página

origen

Página

destino

acción


Incorporaciones de JSF 2.0

Resumen de Conceptos

o Se escriben archivos .xhtml cuando eran .jsp

o Se usan anotaciones en lugar de escribir todas

las navegaciones, definiciones de beans, etc.

o Requiere Servlets 2.5, que antes no!

o No se usan las taglib.

o Los eventos retornan uri de paginas, no nombres

definidos.

o estas son algunas entre otras mejoras.

09b jsf (1)

Documents