Lucasianlabs JSF Advanced JSF

Presenta
Programación en Interfaces Web con

Java Server Faces
Curso WS46I
The Software Architecture And Engineering Company

Rev. 2005-Q2
(c) Lucasian Labs, 2003 – 2007

Prerrequisitos
 Fluidez en programación con el lenguaje Java.
 Experiencia practica en el desarrollo de soluciones
empresariales.
 Experiencia practica en el desarrollo de aplicaciones Web
(Servlet/JSP)
 Conocimiento básico de la plataforma J2EE.
 Conocimiento en Tag Libraries (JSTL).

Acerca del Instructor
• Consultor de los servicios profesionales de Lucasian Labs

especializado en:
– Entrenamiento
– Consultoría
– Desarrollo
– Mentoring

Introducción a Java Server Faces
Desarrollo rápido
de aplicaciones
Alta escalabilidad
Portable
Soportado

JSF (Java Server Faces)
• JSF es un framework para la construcción de la

presentación de aplicaciones WEB usando java.
• Facilita la creación de UI reutilizando componentes
predefinidos.
• Maneja automáticamente el estado de los
componentes.
• Por estar basado en MVC promueve una clara
separación entre la lógica y la presentación.
• Facilita el manejo de las conversiones entre la vista y
el modelo (converter).
• Facilita la organización de las validaciones alrededor de
objetos reutilizables (validator)
• Posibilita la creación de componentes personalizados
extendiendo cualquiera de los componentes básicos.
• Organiza la generación de eventos desde el cliente y
su manejo en el servidor.
Servicios de Java Server Faces
• Java Server Faces es un framework que cumple

completamente el patrón MVC.
• Manejo de conversiones definidas, pasando fácilmente
de la información recogida en presentación a modelo.
• Validación y tratamiento de excepciones.
• Esquema de Internacionalización basado en el
mecanismo propuesto por Java (i18n).
• Permite la construcción de componentes personalizados,
los cuales se construyen en base a los componentes
dados por Java Server Faces.
• Alternativa en el renderizado, por defecto se maneja el
renderizado en HTML.

JSF, Configuración de JDeveloper
• Copiar en un directorio la especificación estándar

proporcionada por Sun Microsystem.
• Definir la librerías de JSF en JDeveloper
– commons-beanutils.jar
– commons-collections.jar
– commons-digester.jar
– commons-logging.jar
– jsf-api.jar
– jsf-impl.jar

Creación Aplicación

Creación Proyecto

Configuración de Recursos

Configuración de Propiedades

Configuración de Librerías

Arquitectura de una aplicación JSF
JSF Page
Request
UIComponent
Response UIComponent
UIComponent
UIComponent
UIComponent
Java Bean
(Java Class)
Ejercicio
Objetivo :
• Desarrollar una aplicación para realizar la adicion de un
persona a un listado de contactos.
Pasos :
1. Construya un pagina prototipo para realizar el proceso de
autenticación de usuarios.
2. Declare la vista de la pagina faces.
3. Modifique los componentes HTML estándar por
componentes faces.
4. Construya un javaBean, con la información solicitada en
los formularios.
5. Asocie uno a uno los campos del javaBean al formulario.
6. Defina las acciones en el javaBean y asócielo al botón de
envió.

Primer ejercicio

Primer ejercicio

Ejercicio
Después de crear nuestro

prototipo, iniciamos el
cambio por componentes
Faces, los componentes a
utilizar en este ejercicio
son :
inputText, inputSecret,
commandButton.

Ejercicio
<form>
<table cellspacing="2" cellpadding="3" border="1" width="100%">
<tr>
<td>Usuario</td>
<td>
<input type="text“ name=“identificacion”/>
</td>
<td> </td>
</tr>
<tr>
<td>Password</td>
<td>
<input type=“password“ name=“nombre”/>
</td>
<td> </td>
</tr>
…
<tr>
<td> </td>
<td>
<input type="submit" value=“Enviar"/>
</td>
<td> </td>
</tr>
</table>
</form>

Ejercicio
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
<h:form>
<tr>
<td>Usuario</td>
<td>
<h:inputText id=“identificacion" />
</td>
<td> </td>
</tr>
<tr>
<td>Password</td>
<td>
<h:inputSecret id=“nombre" />
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<h:commandButton value="Enviar"/>
</td>
<td> </td>
</tr>
</table>
</h:form>
</f:view>
Definición del Modelo
import javax.faces.context.FacesContext;
public class SimpleForm {

private String identificacion;
private String usuario;
private String nombre;
private String apellido;
private String ciudad;
private String telefono;
-Generación de métodos asesores.

-La labor del constructor.
-El Contexto Faces.
FacesContext context= FacesContext.getCurrentInstance();

El archivo de configuración faces-config.xml
<managed-bean>
<managed-bean-name>SimpleForm</managed-bean-name>
<managed-bean-class>
com.lucasiandev.login.model.SimpleForm
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Java Bean JSF Page

(Java Class)

El archivo de configuración web.xml
<context-param>
<param-pame> Localización del
javax.faces.application.CONFIG_FILES archivo de configuración
</param-name> de JSF.
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class> Controlador Frontal de
javax.faces.webapp.FacesServlet Java Server Faces.
</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>
<servlet-mapping> Definición del mapeo

<servlet-name>FacesServlet</servlet-name> para el Controlador
<url-pattern>/faces/*</url-pattern>
</servlet-mapping> Frontal

Integración entre el
Modelo-Vista
<f:view>
<h:form id=“formulario”>
<tr>
<td>Identificacion</td>
<td>
<h:inputText id=“identificacion"
value=“#{SimpleForm.identificacion}”/>
</td>
<td> </td>
</tr>
<tr>
<td>Nombre</td>
<td>
<h:inputSecret id=“nombre"
value=“#{SimpleForm.nombre}”/>
</td>
<td> </td>
</tr>
</table>
</h:form>
</f:view>

El ciclo de vida Faces
El árbol de
componente
Revisar que
Restaure se debe
Request guardar
Vista
Aplicar los nuevos
valores
Response
Ejecutar
Validadores
Preparar y/o procesar

la respuesta
Modificar Modelo
Ejecutar la acción

Información del Contexto Faces
public SimpleForm()
{
FacesContext context= FacesContext.getCurrentInstance();
List listadoHijosVista= context.getViewRoot().getChildren();
Iterator iterador= listadoHijosVista.iterator();
while (iterador.hasNext())
{
UIComponent component= (UIComponent)iterador.next();
System.out.println(component);
}
}
-Haga un algoritmo recursivo para obtener el listado de

todos los componentes de una forma y sus valores.

El Objeto UIViewRoot
• Define la vista actual del cliente.

• Es posible obtener información como componentes
hijos, parámetros, lenguaje del cliente.
Vista
(mipagina.jsp)
Formulario
(formulario)
Identificacion Nombre Apellido

(input) (input) (input)
El ciclo de vida Faces
Tomado de : A first look at Java Server Faces

(Sun Microsystem)

Definición de acciones
public class SimpleJSFB {
public String ejecutar() {
//Aqui el codigo de la accion

return null;
}
-Cree un proceso el cual permita identificar que valores

han cambiado de su modelo, haga uso del método
clone() para guardar el estado anterior del objeto.

Integración entre el
Modelo-Vista-Acción
<f:view>
<h:form id=“formulario”>
<tr>
<td>
value=“#{SimpleForm.identificacion}”/>
</td>
<td> </td>
</tr>
<tr>
<td>Nombre</td>
<td>
<h:commandButton id=“accion"
action=“#{SimpleForm.ejecutar}”/>
</td>
<td> </td>
</tr>
</table>
</h:form>
</f:view>

Trabajando con componentes Visuales
directamente (Modelo)
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
public class SimpleJSFB {

private HtmlInputText identificacion;
private HtmlInputText nombre;
public SimpleJSFB() {
}
public void setUsername(HtmlInputText username) {

this.username = username;
}
public HtmlInputText getUsername() {

return usuario;
}
public void setPassword(HtmlInputSecret password) {

this.contrasena = contrasena;
}
public HtmlInputSecret getPassword() {

return password;
}
}
Trabajando con componentes Visuales
directamente (Vista)
<f:view>
<h:form id=“autenticacion”>
<tr>
<td>
binding=“#{SimpleJSFB.identificacion}”/>
</td>
</tr>
<tr>
<td>Nombre</td>
<td>
<h:inputSecret id=“nombre"
binding=“#{SimpleJSFB.nombre}”/>
</td>
</tr>
<tr>
<td><h:message for=“username”/></td>
<td>
<h:commandButton value="Enviar”
action=“#{SimpleJSFB.autenticarse}”/>
</td>
<td> </td>
</tr>
</table>
</h:form>
</f:view>
Navegación JSF
• Reglas definidas en documentos de configuracion que

permiten definir la navegacion entre los recursos o
paginas.
• Las reglas de navegacion trabajan en base a casos.
• Los casos definen, la vista de donde proviene y los

diferentes casos que aplican sobre la misma.

Navegación JSF
Definición de una regla de navegación
<navigation-rule>
<from-view-id>/paginaOrigen.jsp</from-view-id>
<navigation-case>
<from-outcome>exito</from-outcome>
<to-view-id>/paginaExito</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>error</from-outcome>
<to-view-id>/paginaError.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Los valores del tag from-outcome dependen del valor que

retorne el resultado de la acción de los JavaBeans que
realicen el proceso.

Ejercicio
• Completar el ejercicio anterior :

– Crear una pagina JSF la cual imprimirá en pantalla
la confirmacion sobre el formulario.
• Ejercicio de navegación : Realizar un formulario

que solicite la pagina a la que desea ir, este debe
tomar desde el Bean de lógica y validar la entrada del
usuario, para esto se definirán tres paginas. En el
caso que la pagina solicitada no exista se debe
presentar un error de navegación.

Componentes JSF.HTML
– inputText
<h:inputText id="address"
value="#{jsfexample.address}" />
– inputSecret
<h:inputSecret redisplay="false"
value="#{jsfexample.password}" />
– inputHidden
<h:inputHidden id="hidden" value="userPreference" />
– inputTextArea
<h:inputTextarea id="textArea" rows="4" cols="7"
value="Text goes here.."/>

Representación JSF
<h:inputText id="campoTexto" binding="#{CamposTexto.campoTexto}"/>
<h:inputSecret id="campoSecreto" binding="#{CamposTexto.campoSecreto}"/>
<h:inputHidden id="CampoOculto" bindig="#{CamposTexto.campoOculto}"/>
<h:inputTextarea id="campoTextArea" binding="#{CamposTexto.campoTextArea}"/>
Representación Modelo
private HtmlInputText campoTexto;
private HtmlInputSecret campoSecreto;
private HtmlInputHidden campoOculto;
private HtmlInputTextarea campoTextArea;

– outputText
<h:outputLabel for="address"> <h:outputText
id="addressLabel" value="User Home Address"/>
</h:outputLabel>
– Message
Enter address:
<h:message style="color: red" for="useraddress" />
<h:inputText id="useraddress“
value="#{jsfexample.address}" required="true"/>
<h:commandButton action="save" value="Save"/>

Representación JSF
<h:outputText id="cadenaTexto" binding="#{MensajeError.cadenaTexto}"/>
<h:message for="cadenaTexto"
id="mensajeError"
binding="#{MensajeError.mensajeError}"/>
<h:messages id="mensajesError" binding="#{MensajeError.mensajesError}"/>
private HtmlOutputText cadenaTexto;
private HtmlMessage mensajeError;
private HtmlMessages mensajesError;
public constructor() {
FacesContext contexto= FacesContext.getCurrentInstance();
FacesMessage mensaje1= new FacesMessage();

mensaje1.setSummary("Se genero el primer error ");
contexto.addMessage("formulario:cadenaTexto", mensaje1);
FacesMessage mensaje2= new FacesMessage();

mensaje2.setSummary("Se genero el segundo error ");
contexto.addMessage("formulario:cadenaTexto", mensaje2);
}
Ejercicio
• Objetivos :
Completar el ejercicio adicionando validaciones básicas sobre
los campos
• Plan de Trabajo :
El Formulario debe solicitar la siguiente información, con las
siguientes validaciones :
• Identificacion : Campo numérico y requerido
• Nombre : Campo requerido.
• Apellido : Campo requerido.
• Ciudad : Campo requerido.
• Teléfono : Campo numérico.
• Correo Electrónico : Campo requerido y debe contener el
símbolo de “@”

Ejercicio
• Consideraciones especiales :
– Cuando el valor del campo Identificación este correcto, no se debe
permitir que el usuario vuelva a cambiar su valor, a menos de que
pulse el botón de Cancelar.
TIP: Para que un campo este deshabilitado, use :
this.identificacion.setReadonly(true);
– El formulario debe tener dos botones :

• Almacenar : Presenta la información del usuario en consola
• Cancelar : Reinicia todos los input, valores vació y estilos
vacíos.
– Cada campo del formulario debe tener su propia área de

mensajes, y debe informar que validación no se realizo con éxito.
El sistema debe validar todos los campos (excepto los que ya se
pasaron con éxito).

– dataTable
<h:dataTable id="books"
value="#{BookStore.items}" var="store">
<h:column>
<h:outputText value="#{store.name}"/>
</h:column>
<h:column>
<h:outputText value="#{store.subject}"/>
</h:column>
<h:column>
<h:outputText value="#{store.price}"/>
</h:column>
</h:dataTable>

Representación JSF
<h:form id="formulario">
<h:dataTable id="contactos" binding="#{Table.table}" var="contacto">

<h:column>
<h:outputText value="#{contacto.nombre}"/>
</h:column>
<h:column>
<h:outputText value="#{contacto.direccion}"/>
</h:column>
<h:column>
<h:outputText value="#{contacto.telefono}"/>
</h:column>
<h:column>
<h:inputTextarea value="#{contacto.descripcion}" />
</h:column>
</h:dataTable>
<h:commandButton id="procesar"
action="#{Table.accesarTabla}"
value="Enviar"/>
</h:form>
private HtmlDataTable table;
public Table()
{
table= new HtmlDataTable();
Vector elementsOfTables= new Vector();
Columns column1= new Columns();
column1.setNombre("Diego");
column1.setDireccion("Carrera 10 # 2-90");
column1.setTelefono("88394484");
elementsOfTables.add(column1);

column2.setNombre("Armando");

table.setValue(elementsOfTables);

Representación Modelo Columns
private String nombre;
private String direccion;
private String telefono;
private String descripcion;
El resultado de la operación
public String accesarTabla()
{
Vector valuesOf= (Vector)this.table.getValue();
for (int counter=0; counter<valuesOf.size(); counter++)
{
Columns column= (Columns)valuesOf.get(counter);
System.out.println(column.getNombre() + "= " + column.getDescripcion());
}
return null;
}

– CommandButton
<h:commandButton id="submit"
value="#{msg.buttonHeader}" action="nextPage">
</h:commandButton>
– CommandLink
<h:commandLink id="link" action="goto">
<h:outputText value="#{msg.linkName}"/>
</h:commandLink>
– graphicImage
<h:graphicImage id="image" alt="jsf-sun"
url="/images/jsf-sun.gif"> </h:graphicImage>

Representación JSF
<h:commandButton id="boton" binding="#{Acciones.boton}" value="Texto Boton"/>
<h:commandLink id="vinculo"
binding="#{Acciones.vinculo}"
value="Texto Vinculo"/>
<h:graphicImage id="imagen"
binding="#{Acciones.imagen}"
url="images/code.gif" />
private HtmlCommandButton boton;
private HtmlCommandLink vinculo;
private HtmlGraphicImage imagen;

– selectOneBox
<h:selectOneBox id="pickCar"
value="#{carBean.currentCar}“ />
– selectManyCheckbox
<h:selectManyCheckbox id="cars"
value="#{carsBean.car}">
<f:selectItems value="#{carBean.carList}"/>
</h:selectManyCheckbox>
– selectOneRadio
<h:selectOneRadio value="#{carBean.currentCar}">
<f:selectItems value="#{carBean.carList}" />
</h:selectOneRadio>

Representación JSF
<h:selectBooleanCheckbox id="unChequeo" binding="#{Chequeo.unChequeo}"/>
<h:selectManyCheckbox id="muchosChequeo" binding="#{Chequeo.muchosChequeo}">

<f:selectItems value="#{Chequeo.listOfSeleccion}"/>
</h:selectManyCheckbox>
<h:selectOneRadio id="unRadio" binding="#{Chequeo.unRadio}">

<f:selectItems value="#{Chequeo.listOfSeleccion}"/>
</h:selectOneRadio>
private HtmlSelectBooleanCheckbox unChequeo;
private HtmlSelectManyCheckbox muchosChequeo;
private HtmlSelectOneRadio unRadio;
private Vector listOfSeleccion;

Llenando el listado de selección
public Chequeo()
{


listOfSeleccion= new Vector();

SelectItem itemSeleccion1= new SelectItem(column1, column1.getNombre());
listOfSeleccion.add(itemSeleccion1);
}

– selectOneMenu
<h:selectOneMenu id="selectCar"
value="#{carBean.currentCar}"> <f:selectItems
value="#{carBean.carList}" /> </h:selectOneMenu>
– selectManyMenu
<h:selectManyMenu id="cars_selectManyListbox"
value="#{carBean.car}">
<f:selectItems value="#{carBean.carList}">
</h:selectManyListbox>

Representación JSF
<h:selectOneMenu id="unMenu" binding="#{Seleccion.unMenu}">
<f:selectItems value="#{Seleccion.listOfSeleccion}"/>
</h:selectOneMenu>
<h:selectManyMenu id="muchosMenus" binding="#{Seleccion.muchosMenus}">

<f:selectItems value="#{Seleccion.listOfSeleccion}"/>
</h:selectManyMenu>
private HtmlSelectOneMenu unMenu;
private HtmlSelectManyMenu muchosMenus;
private Vector listOfSeleccion;

Llenando el listado de selección
public Seleccion()
{


column3.setNombre("Camilo");
listOfSeleccion= new Vector();

}

Conversiones y Validaciones
Request Value UIComponent
Validación Conversión
Response Value
Java Bean Model
(HtmlInputText)

Conversiones estándar
• Las conversiones son asociadas a un componente visual de la

pagina JSF.
<h:inputText id="valorNumerico" binding="#{Conversion.valorNumerico}">
<f:convertNumber minFractionDigits="2"/>
</h:inputText>
• Los objetos de conversión estándar

podemos encontrarlos en el tag
library de jsf_core.tld (f).
• Las conversiones permiten pasar

información de un tipo de dato
String a otro tipo de dato o bien
dar formato a un valor.
Number Converter
Representación JSF
<h:inputText id="valorNumerico" binding="#{Conversion.valorNumerico}">
<f:convertNumber minFractionDigits="2"/>
</h:inputText>
<h:commandButton id="btnEnviar" value="Enviar“

action="#{Conversion.ejecutar}"/>
private HtmlInputText valorNumerico;
public String ejecutar()

{
java.lang.Long value=
Long.valueOf(this.valorNumerico.getValue().toString());
System.out.println(value.longValue());
return null;
}

DateTime Converter
Representación JSF
<h:inputText id="valorFecha" binding="#{Conversion.valorFecha}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:inputText>
<h:commandButton id="btnEnviar" value="Enviar“

action="#{Conversion.ejecutar}"/>
private HtmlInputText valorFecha;
public String ejecutar() {
if (this.valorFecha.getValue()!=null) {
java.util.Date fecha= (java.util.Date)this.valorFecha.getValue();
System.out.println(fecha);
}
}

Lucasianlabs JSF Advanced JSF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lucasianlabs JSF Advanced JSF

Caricato da

Copyright:

Formati disponibili

Presenta

Programación en Interfaces Web con

The Software Architecture And Engineering Company

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

• Consultor de los servicios profesionales de Lucasian Labs

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

• JSF es un framework para la construcción de la

• Java Server Faces es un framework que cumple

(c) Lucasian Labs, 2003 – 2007

• Copiar en un directorio la especificación estándar

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

Después de crear nuestro

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

public class SimpleForm {

-Generación de métodos asesores.

(c) Lucasian Labs, 2003 – 2007

Java Bean JSF Page

(c) Lucasian Labs, 2003 – 2007

<servlet-mapping> Definición del mapeo

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

Preparar y/o procesar

(c) Lucasian Labs, 2003 – 2007

-Haga un algoritmo recursivo para obtener el listado de

(c) Lucasian Labs, 2003 – 2007

• Define la vista actual del cliente.

Identificacion Nombre Apellido

Tomado de : A first look at Java Server Faces

(c) Lucasian Labs, 2003 – 2007

public class SimpleJSFB {

public String ejecutar() {

//Aqui el codigo de la accion

-Cree un proceso el cual permita identificar que valores

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

public class SimpleJSFB {

public void setUsername(HtmlInputText username) {

public HtmlInputText getUsername() {

public void setPassword(HtmlInputSecret password) {

public HtmlInputSecret getPassword() {

• Reglas definidas en documentos de configuracion que

• Las reglas de navegacion trabajan en base a casos.

• Los casos definen, la vista de donde proviene y los

(c) Lucasian Labs, 2003 – 2007

Definición de una regla de navegación

Los valores del tag from-outcome dependen del valor que

(c) Lucasian Labs, 2003 – 2007

• Completar el ejercicio anterior :

• Ejercicio de navegación : Realizar un formulario

(c) Lucasian Labs, 2003 – 2007

(c) Lucasian Labs, 2003 – 2007

<h:inputSecret id="campoSecreto" binding="#{CamposTexto.campoSecreto}"/>