Guia Iweb

Departamento de Sistemas, Estadistica e Informatica
Facultad de Ingeniera UNC

Ingeniera deWeb
2012 Edwin Valencia Castillo
JSF 2 - GUIA DE ESTUDIO

JSF (Java Server Faces) es un framework estndar para la construccin de aplicaciones web.
Configuracin
Como el resto de tecnologas J2EE para la web, JSF se basa en el uso de servlets. Su filosofa de
funcionamiento consiste en colocar un nico servlet que recoja todas las peticiones de la
aplicacin, en vez de obligar a los desarrolladores a definir un servlet por cada tipo de peticin.
El servlet, de la clase javax.faces.webapp.FacesServlet, se tiene que definir en el fichero
web.xml de la aplicacin, y configurar adems el tipo de peticiones que debe procesar:

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup> </servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
El servlet de JSF implementa un ciclo de vida bien definido, de forma que a cada paso de dicho
ciclo se invoca a los distintos componentes de la aplicacin dndoles la oportunidad de realizar
algn tipo de proceso en cada una de las fases. Esta forma de trabajar es una constante en
todos los frameworks de este tipo, y tiene la ventaja aadida de que no impide que se definan
otros servlets, listeners o fitros propios.

faces-config.xml
Aunque no es estrictamente necesario, puede crearse un fichero con el nombre faces-config.xml
dentro del directorio WEB-INF del war, o dentro del directorio META-INF de un jar incluido en
WEB-INF/lib. Este fichero contiene configuracin ms especfica referida a JSF que
preferentemente se define utilizando anotaciones en las clases:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
</faces-config>
Para evitar conflictos debidos al orden de carga de los ficheros de configuracin, JSF permite
indicar un orden de carga concreto. Para ello, cada fichero recibe un nombre, y utilizando la
Ingeniera deWeb
etiqueta absolute-ordering se puede indicar un orden de forma absoluta haciendo referencia a
dichos nombres:
<name>principal</name>
<absolute-ordering>
<name>primero</name>
<name>segundo</name>
<name>tercero</name>
<others/>
</absolute-ordering>
Adems, si fuera necesario, se puede indicar un orden de carga relativo utilizando las etiquetas
ordering, before y after:

aadiendo una propiedad javax.faces.CONFIG_FILES al contexto con la lista de ficheros
separados por coma:

<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>primero,segundo,tercero</param-value> </context-param>
Facelets
Facelets es el lenguaje que se utiliza para escribir las pginas en JSF, tambin referidas
normalmente como vistas. Es similar a JSP, pero tiene algunas ventajas sobre este:
- Utiliza el estndar XHTML
- No permite embeber cdigo Java
- Permite utilizar Expression Language (EL)
- Permite utilizar libreras de acciones, incluidas las de JSTL
- Permite definir plantillas
- Compila y renderiza ms rpido
En la prctica, una vista escrita con Facelets no difiere mucho de un documento JSP:

<!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">
<h:head>
<title>Hola JSF</title>
</h:head>
<h:body>
<h:outputText value="${1 + 1}"/>
</h:body>
</html>
< name>primero</name>
< ordering>
<before>
<name>segundo</name>
</before>
< /ordering >

Una forma alternativa de incluir ficheros de configuracin es definirlos dentro de web.xml ,
Ingeniera deWeb
Un tema al que hay que prestar atencin son los namespaces, para no confundirlos con los de
JSP. Por lo dems las vistas siguen la convencin y apariencia similar a un documento JSP. Una
forma alternativa de escribir las vistas es utilizar el atributo jsfc sobre los elementos HTML
originales:

<head jsfc="h:head">
<title>Hola JSFC</title>
</head>
<body jsfc="h:body">
<span jsfc="h:outputText" value="${1 + 1}"/>
</body>
</html>
Cuando JSF analiza los nodos, detecta la presencia del atributo y utiliza su valor en vez del tipo
original del nodo.
La ventaja de esta forma de nomenclatura es que el fichero original puede renderizarse por
cualquier navegador y manipularse con cualquier editor, aunque no se resuelvan las acciones.
No obstante, esta forma de escribir las vistas no la utiliza prcticamente nadie.
Tag Libraries
Facelets permite utilizar las libreras de acciones ya existentes, como las de JSTL por ejemplo, a
la par que ofrece una serie de libreras propias:

Librera Namespace Prefijo
core http://java.sun.com/jsf/core f
html http://java.sun.com/jsf/html h
composite http://java.sun.com/jsp/jstl/composite composite
facelets http://java.sun.com/jsf/facelets ui
Managed Beans
Una de las caractersticas de JSF es que permite a las aplicaciones web trabajar con clases POJO
(Plain Old Java Object) en vez de servlets. Estas clases, al ser gestionadas por JSF, reciben el
nombre de managed beans.
@ManagedBean
La anotacin @ManagedBean permite denotar una clase como un bean:

Ingeniera deWeb
@ManagedBean public
class Hello {
private String saludo = "Hola Bean";
public void setSaludo(String saludo) {
this.saludo = saludo;
}
public String getSaludo() {
return saludo;
}
}
La anotacin admite un parmetro llamado name que permite indicar el nombre por el que se
puede referenciar al bean en Facelets dentro de una vista. Si no se indica, por defecto es igual
el nombre de la clase con la primera letra en minscula:

#{hello.saludo}
JSF se encarga de instanciar los beans cuando es necesario, aunque por defecto la inicializacin
es perezosa, se crean slo cuando se necesitan por primera vez. No obstante, la anotacin
@ManagedBean admite un segundo parmetro llamado eager que permite que se instancien al
arrancar la aplicacin:

@ManagedBean(eager=true)
public class Hello { ...
No obstante, este tipo de inicializacin slo tiene sentido en beans que tienen un mbito global.
Es decir, que se encuentran definidos a nivel de aplicacin.
Scope
La forma de definir el mbito de un bean es utilizar una de las siguientes anotaciones:
- @ApplicationScoped: mbito a nivel de aplicacin, persistente durante toda la vida de la
misma.
- @SessionScoped: mbito a nivel de sesin, persistente dentro del conjunto de peticiones de
una sesin HTTP.
- @ViewScoped: mbito a nivel de vista, persistente dentro de las peticiones realizadas a una
vista concreta.
- @RequestScoped: mbito a nivel de peticin, persistente durante una peticin HTTP.
- @NoneScoped: Sin mbito definido, se crea un bean nuevo cada vez que se referencia.
Utilizado cuando un bean utiliza a otro.
- @CustomScoped: mbito no estndar, definido por la aplicacin. Raramente utilizado.

@ManagedProperty
La anotacin @ManagedProperty representa una forma adecuada de inyectar dependencias
entre beans, de forma similar a la anotacin @Inject.
Sirva de ejemplo un tpico bean DAO definido a nivel de aplicacin:

@ManagedBean(name="libroDao")
Ingeniera deWeb
@ApplicationScoped public
class LibroDao { ...
Para que otro bean haga referencia a l basta con aadir la anotacin @ManagedProperty sobre
la propiedad de la clase que se quiere contenga la referencia:

@ManagedBean(name="dependi
ente")
@SessionScoped public
class Dependiente {
@ManagedProperty(value="#{
libroDao}") private
LibroDao libroDao;
public void setLibroDao(LibroDao libroDao) {
this.libroDao = libroDao; } ...
JSF instanciar la clase DAO una vez por aplicacin, y la inyectar en cada instancia de la clase
dependiente creada por sesin.
Notar que el parmetro value admite una expresin EL, no es slo una simple cadena de texto.
Esto permite por ejemplo hacer referencia a un bean concreto evaluado en tiempo de ejecucin
en funcin de una condicin, no es slo una simple referencia esttica a un nombre.
Configuracin
De forma alternativa, en vez de utilizar anotaciones, los beans se pueden definir en el fichero de
configuracin faces-config.xml:

<managed-bean>
<managed-bean-name>hello</managed-bean-name>
<managed-bean-class>com.company.beans.Hello</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
<managed-property>
<property-name>saludo</property-name>
<property-class>java.lang.String</property-class>
<value>Hola Config</value>
</managed-property>
</managed-bean>
La sintaxis es muy intuitiva y la configuracin no debera representar ninguna dificultad. En la
documentacin de referencia puede encontrarse los detalles necesarios para realizar
configuraciones que impliquen el uso de colecciones, enumerados, u otro tipo de construcciones
ms elaboradas.

Navegacin
Las reglas de navegacin determinan que pgina se tiene que visualizar en cada momento,
normalmente en respuesta a la pulsacin de un botn o enlace por parte de un cliente. JSF
implementa una regla de navegacin de manera implcita, pero permite definir otro tipo de
reglas de forma explcita por parte de las aplicaciones.
Navegacin Implcita
La regla implcita consiste en buscar una pgina con el mismo nombre que el atributo action
del componente que inici la navegacin.
Ingeniera deWeb
Sirva de ejemplo un botn con la siguiente definicin:

<h:form>
<h:commandButton value="Enviar" action="envio"/> </h:form>
Al pulsarse el botn, JSF intentar navegar automticamente hacia una pgina llamada
envio.xhtml. Si no se encuentra se navegar a la pgina actual.
Un detalle importante a tener en cuenta es que el botn tiene que estar contenido dentro de un
formulario para que se ejecute la accin correctamente.
Navegacin Explcita
Lo normal dentro de una aplicacin es que la navegacin se dirija hacia una pgina u otra en
funcin del resultado (outcome) de aplicar algn tipo de lgica de negocio.
JSF permite que los mtodos de los beans llamados en respuesta a acciones por parte de los
clientes retornen el nombre de la pgina a la que tienen que dirigirse. Si un mtodo retorna una
cadena de texto, dicho valor retornado se interpreta como el nombre de la pgina destino de la
accin. Si el mtodo retorna null, o es un mtodo que no retorna valor (void), se interpreta
que la pgina destino es la actual.
Sirva de ejemplo un botn con la siguiente definicin:

<h:form>
<h:commandButton value="Comprar" action="#{tienda.comprar}"/> </h:form>
Dentro del mtodo comprar del bean tienda se puede evaluar si la accin de compra puede
realizarse y navegar hacia una pgina de envo o una de error:

@ManagedBean public class
Tienda { public String
comprar() {
return correcto ? "envio" : "error";
} ...
Si se retorna "envio" se navegar hacia la pgina envio.xhtml, y en caso contrario hacia
error.xhtml.

Configuracin
Para evitar tener que especificar el nombre concreto de las pginas dentro de los mtodos, se
puede hacer que estos retornen un valor indicativo del resultado de la accin, en vez del
nombre de la pgina. El valor retornado puede ser cualquiera, pero normalmente se utilizan las
cadenas "success", "failure", "login" y "no results".
Continuando con el ejemplo del apartado anterior, habra que modificar el mtodo del bean de la
siguiente forma:

public String comprar() {
return correcto ? "success" : "failure";
}
Ingeniera deWeb
Y configurar dentro del fichero faces-config.xml las reglas de navegacin, partiendo de la pgina
donde se lanza la accin, e indicando la pgina a la que se debe navegar en funcin del
resultado de la accin:

<navigation-rule>
<from-view-id>/tienda.xhtml</from-view-id>
<navigation-case>
<from-action>#{tienda.comprar}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/exito.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{tienda.comprar}</from-action>
<from-outcome>failure</from-outcome>
<to-view-id>/fracaso.xhtml</to-view-id>
</navigation-case> </navigation-rule>

Validadores
JSF proporciona una serie de validadores estndar a travs de sus libreras de acciones, a la par
que permite definir validadores propios por parte de cada aplicacin. Su propsito es validar la
informacin introducida en el cliente, a travs de un formulario normalmente.
Estndar
Los validadores estndar se encuentran dentro de la librera core de JSF, y se usan en
conjuncin con los componentes HTML de la librera html.
- f:validateLength: Valida que la longitud de una cadena de texto est dentro de un rango.
- f:validateDoubleRange: Valida que un valor numrico est dentro de un rango.
- f:validateLongRange: Valida que un valor numrico, o una cadena de texto convertible a
nmero, est dentro de un rango.
- f:validateRegEx: Valida que un valor case con una expresin regular.
- f:validateRequired: Valida que un elemento tenga valor. Es equivalente al atributo
requiredde HTML.
- f:validateBean: Registra un validador personalizado para el bean.
En el siguiente ejemplo se muestra un formulario para la introduccin de un nombre que debe
tener al menos cinco caracteres de longitud:

<h:form id="formulario">
<h:outputLabel for="nombre" value="Nombre:"/>
<h:inputText id="nombre" value="#{usuario.nombre}">
<f:validateLength minimum="5"/>
</h:inputText>
<h:commandButton type="submit" value="Enviar" action="enviar"/>
<h:message for="nombre" style="color: red;"/>
</h:form>
Si el valor no pasa la validacin se muestra un mensaje en el elemento h:message con el
siguiente detalle:
Ingeniera deWeb

formulario:nombre: Error de validacin: el largo es inferior que el mnimo
permitido de '5'
Un aspecto que resulta un tanto confuso a veces es que JSF inicializa las cadenas de texto con
una cadena vaca por defecto, y no a nulo. Si se quiere cambiar este comportamiento se puede
aadir un parmetro al contexto a travs del fichero web.xml de la siguiente forma:

<context-param> <param-
name>
javax.faces.INTERPRET_EMPTY_STRING_SUBMITTED_VALUES_AS_NULL
</param-name>
<param-value>true</param-value>
</context-param>
Anotaciones
JSF permite utilizar el conjunto de anotaciones estndar definido por la especificacin JavaBean
Validation. Estas anotaciones se aplican a las propiedades de los bean y permiten indicar las
condiciones que deben de cumplir para considerarse vlidas.
Algunas de las anotaciones disponibles:
- @AssertFalse: Valida que el valor es false.
- @AssertTrue: Valida que el valor es true.
- @DecimalMax: Valida que el valor es menor o igual que el indicado en la anotacin. -
@DecimalMin: Valida que el valor es mayor o igual que el indicado en la anotacin.
- @Digits: Valida que el valor tiene como mucho la cantidad de enteros y decimales indicados
en la anotacin.
- @Future: Valida que el valor es una fecha a futuro.
- @Max: Valida que el valor es un entero menor o igual que el indicado en la anotacin. - @Min:
Valida que el valor es un entero mayor o igual que el indicado en la anotacin.
- @NotNull: Valida que el valor no es nulo.
- @Null: Valida que el valor es nulo.
- @Past: Valida que el valor es una fecha del pasado.
- @Pattern: Valida que el valor casa la expresin regular indicada en la anotacin.
- @Size: Valida que la longitud del valor est dentro de un rango indicado en la anotacin.
En el siguiente ejemplo se muestra un bean con anotaciones de validacin sobre sus
propiedades:

Ingeniera deWeb

implemente, como por ejemplo la desarrollada por Hibernate, y que puede obtenerse aadiendo
la siguiente dependencia en el fichero pom.xml de Maven :

Binding
Otra forma de definir validadores por parte de una aplicacin es utilizar las facilidades de
binding que ofrece JSF.
De forma general, el binding es el proceso de asociar el valor de un componente a una
propiedad de un bean, de manera que cuando cambia el valor del componente se refleja en el
bean, y cuando cambia en el bean se refleja en el componente.
JSF extiende el concepto de binding al permitir asociar un validador a una propiedad de un
bean:

<f:validateLength binding="#{usuario.validador}"/> </h:inputText>
En buena lgica, la propiedad del bean debe ser del mismo tipo que el validador:

@ManagedBean public
class Usuario {
private LengthValidator validador = new LengthValidator();
public LengthValidator getValidador() {
validador.setMinimum(10); return validador; } ...
Lo interesante del cdigo es que las propiedades del validador pueden hacerse variar de forma
dinmica dentro del bean. Por ejemplo, el tamao mnimo puede hacerse que cambie en funcin
de alguna lgica determinada, y dicho cambio afectara inmediatamente al componente.

Validator
Otra posibilidad que ofrece JSF a la hora de definir validadores es crear una clase que
implemente la interface Validator. Los validadores implementados de esta forma se anotan
con @FacesValidator o se definen dentro del fichero faces-config.xml. Normalmente tienen que
@ManagedBean
public class Usuario {
@NotNull
@Size(min=5, max=25)
private String nombre;
@NotNull
@Past
private Date nacimiento;
@AssertTrue
private Boolean activo;
...

No obstante, para utilizar estas anotaciones es necesario disponer de una librera (jar) que las
< dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>4.3.0.Final</version>
< /dependency >

Ingeniera deWeb
implementar otras interfaces como StateHolder e incluirse dentro de una TLD para poder ser
utilizados como una accin ms dentro de una vista.
Una alternativa ms sencilla que ofrece JSF es implementar un mtodo propio dentro de un
bean sin que la clase del bean tenga que heredar de ninguna otra ni implementar ninguna
interface. Basta con que el mtodo que se quiera utilizar como validador tenga los mismos
parmetros que admite la interface definida por Validator:

@ManagedBean public
class Usuario {
public void validateNombre(FacesContext context,
UIComponent toValidate,
Object value) {
String nombre = (String)value;
if (nombre.equals("admin")) {
((UIInput)toValidate).setValid(false);
FacesMessage message = new FacesMessage("Tramposo!");
context.addMessage(toValidate.getClientId(context), message);

} }
...
El valor a validar se recibe en el parmetro value. El componente siendo validado en
toValidate. Y el contexto en context. Si el valor no pasa la validacin se debe cambiar a
falsela propiedad valid del componente y opcionalmente aadir un mensaje al contexto. Para
utilizar un mtodo de validacin propio se debe utilizar el atributo validator del componente:

JSF proporciona una serie de conversores estndar a travs de sus libreras de acciones, a la par
que permite definir conversores propios por parte de las aplicaciones.
El propsito es convertir la informacin introducida en el cliente, en formato de texto a travs de
un formulario, a su correspondiente tipo dentro de un bean. Y convertir la informacin de los
beans en el servidor a su correspondiente representacin en modo texto para el cliente.
Estndar
Los conversores estndar de JSF se encuentran definidos dentro del paquete
javax.faces.convert, y sus nombres son lo suficientemente intuitivos como para saber que
tipo convierte cada uno de ellos:
- NumberConverter
- DateTimeConverter
- ShortConverter
- LongConverter
- IntegerConverter
- BigIntegerConverter
...
< h:inputText ... value="#{usuario.nombre}" validator="#{usuario.validateNombre}">
...

Conversores
Ingeniera deWeb
- FloatConverter
- DoubleConverter
- BigDecimalConverter
- BooleanConverter
- CharacterConverter
- ByteConverter
- EnumConverter
Para especificar que conversor utilizar dentro de un componente de forma explcita se utiliza el
atributo converter:

<h:inputText converter="javax.faces.convert.IntegerConverter"/>
No obstante, esto no hace falta en la mayora de los casos, pues los conversores se aplican
automticamente en funcin del tipo de valor asociado a cada componente.

NumberConverter y DateTimeConverter
Slo dos de los conversores estndar estn asociados a acciones y pueden utilizarse mediante
un tag: NumberConverter y DateTimeConverter.
La accin NumberConverter admite atributos que permiten especificar el detalle con el que tiene
que representarse una cantidad:

<h:outputText value="#{pedido.total}">
<f:convertNumber currencySymbol="" type="currency"/>
</h:outputText>
La accin DateTimeConverter admite atributos que permiten especificar el detalle con el que
tiene que representarse una fecha:
<h:outputText value="#{persona.nacimiento}">
<f:convertDateTime pattern="dd/MM/yyyy"/> </h:outputText>
Adems de los mostrados en los ejemplos, las acciones admiten otros atributos ms que pueden
consultarse en la documentacin oficial de referencia.
Binding
De igual forma que se explic para los validadores, se puede definir una propiedad dentro de un
bean que acte como conversor personalizado:

@ManagedBean public
class Usuario {
private DateTimeConverter conversor = new DateTimeConverter();
public DateTimeConverter getConversor() {
conversor.setPattern("dd/MMM");
return conversor;
} ...
Y utilizando las facilidades de binding de JSF, usarlo en un componente:

Ingeniera deWeb

Converter
JSF permite a las aplicaciones implementar sus propios conversores. Un conversor es una clase
que implementa la interface Converter.
Un conversor se declara realizando la configuracin correspondiente dentro del fichero
facesconfig.xml, o de forma mucho ms comoda utilizando la anotacin @FacesConverter en la
clase que lo implementa:

@FacesConverter(value="conversor") public
class Conversor implements Converter { ...
La anotacin @FacesConverter admite dos atributos. El atributo value que permite especificar
un nombre identificador para el conversor. Y el atributo forClass que permite especificar el
nombre de una clase. Si se indica el nombre de una clase entonces JSF utilizar
automticamente el conversor para los objetos de dicha clase.
La interface Converter obliga a implementar dos mtodos. El mtodo getAsString para
convertir el objeto a texto. Y el mtodo getAsObject para convertir texto en el objeto:

public String getAsString(FacesContext context, UIComponent component, Object
value) { ... }
public Object getAsObject(FacesContext context, UIComponent component, String
value) { ...
}
Para utilizar un conversor propio dentro de un componente se tiene que utilizar la
accinf:converter utilizando su identificador:

...
<f:converter converterId="conversor"/> ...
Un conversor puede decidir elevar una excepcin si una determinada conversin no puede
realizarse, y aadir los mensajes de error oportunos al contexto.

Listeners
JSF notifica a las aplicaciones la ocurrencia de determinados eventos, y los listeners son los
objetos receptores de dichos eventos.
Se distinguen dos tipos de eventos. Por una parte los eventos de aplicacin, asociados a
componentes, como la pulsacin de un botn por ejemplo. Y por otra parte los eventos de
sistema, que ocurren en determinados momentos del tiempo a lo largo del ciclo de vida de un
componente o una aplicacin JSF.
Eventos
< h:outputText value="#{usuario.nacimiento}" >
<f:convertDateTime binding="#{usuario.conversor}"/>
< /h:outputText >

Ingeniera deWeb
Todos los eventos heredan de la clase FacesEvent, y las clases principales son SystemEvent y
PhaseEvent, para los eventos del ciclo de vida de la aplicacin, ComponentSystemEvent para los
eventos del ciclo de vida de los componentes, ActionEvent para las acciones ejecutadas sobre
los componentes de la interface de usuario, y ValueChangeEvent para los cambios de valor de
los componentes.
A partir de SystemEvent se definen los siguientes tipos de eventos:
- PostConstructApplicationEvent: Emitido justo despus de arrancar la aplicacin.
- PreDestroyApplicationEvent: Emitido justo antes de parar la aplicacin.
- ExceptionQueuedEvent: Emitido al producirse una excepcin inesperada.
A partir de ComponentSystemEvent se definen los siguientes tipos de eventos:
- PostAddToViewEvent: Emitido justo despus de que un componente se aade a una vista.
- PostConstructViewMapEvent: Emitido justo despus de que se cree una vista.
- PostRestoreStateEvent: Emitido justo despus de que un componente se restaure.
- PostValidateEvent: Emitido justo despus de que un componente se valide.
- PreDestroyViewMapEvent: Emitido justo antes de que una vista se destruya.
- PreRenderComponentEvent: Emitido justo antes de que un componente se renderice.
- PreRenderViewEvent: Emitido justo antes de que una vista se renderice.
- PreValidateEvent: Emitido justo antes que un componente se valide.
SystemEventListener
Los listeners de eventos del sistema son clases que
implementan la interfaceSystemEventListener. Esta interface obliga a
implementar el mtodo processEvent que recibe el evento, y el mtodo
isListenerForSource que permite decidir si se quieren recibir eventos en funcin de su origen:

public class Sistema implements SystemEventListener {
public void processEvent(SystemEvent event){
... } public boolean isListenerForSource(Object
source) {
...
} ...
Los listeners que capturan el ciclo de vida de la aplicacin se declaran en el fichero
facesconfig.xml indicando el nombre de la clase que los implementan y las clases de eventos
que quieren recibir:

<application>
<system-event-listener> <system-event-listener-class>
com.company.listeners.Sistema
</system-event-listener-class> <system-event-class>
javax.faces.event.PostConstructApplicationEvent
</system-event-class>
</system-event-listener>
</application>

ComponentSystemEventListener
Ingeniera deWeb
Los eventos del ciclo de vida de los componentes se capturan con listeners que implementan la
interface ComponentSystemEventListener. Esta interface es igual que
SystemEventListener pero carece del mtodo isListenerForSource, ya que estos listeners se
registran sobre un componente determinado:

public class Componente implements ComponentSystemEventListener {
public void processEvent(SystemEvent event){
...
} ...
Se puede utilizar las anotaciones @ForListener y @ForListeners para indicar las clases de los
eventos concretos que se quieren capturar.
En una vista se asocian a un componente utilizando la accin f:event, indicando en el
atributotype el tipo de evento concreto que se quiere capturar.
...
<f:event type="preRenderView" listener="#{componente.escuchador}"/>
...
PhaseListener
Los listeners de eventos de fase son similares a los de sistema, pero tienen una menor
granularidad. Son clases que implementan la interface PhaseListener y reciben los eventos
antes y despus de cada fase, al tiempo que permiten definir que fase quieren procesar:

ActionListener
Un listener de acciones sobre un componente es una clase que implementa la
interfaceActionListener. Esta interface obliga a implementar el mtodo processAction que
recibe un objeto con el detalle del evento, particularmente con una referencia al origen del
mismo:

public class Accion implements ActionListener {
public void processAction(ActionEvent event) throws AbortProcessingException
{
...
} ...
Para utilizar el listener dentro de un componente hay que hacer referencia al mismo indicando el
nombre de la clase:

public class CustomPhaseListener implements PhaseListener{

public void afterPhase(PhaseEvent event) {
...
}
public void beforePhase(PhaseEvent event) {
...
}
public PhaseId getPhaseId() {
...
}
}

En una vista se pueden asociar a un componente utilizando la accin f:phaseEvent .
Ingeniera deWeb
<h:commandLink id="enlace" action="enlazar">
<h:outputText value="#{usuario.nombre}"/>
<f:actionListener type="com.company.listeners.Accion"/> </h:commandLink>
Una alternativa que evita tener que declarar una clase es definir el mtodo en un bean:

<h:inputText ... value="#{usuario.nombre}" actionListener="#{usuario.accion}"/>
De forma alternativa, se puede utilizar la accin f:setPropertyActionListener que es una
facilidad que ofrece JSF para establecer el valor de un bean cuando ocurre una accin sin
necesidad de crear un mtodo:

ValueChangeListener
Dentro de los eventos de aplicacin se distingue un caso especial correspondiente al cambio de
un valor de un componente, como cuando se cambia el valor de un checkbox.
Un listener de eventos por cambio de valor es una clase que implementa la
interfaceValueChangeListener. Esta interface obliga a implementar el
mtodo processValueChange que recibe un objeto con el evento que contiene el valor anterior
y el nuevo:

public class Cambio implements ValueChangeListener{
public void processValueChange(ValueChangeEvent event)
throws AbortProcessingException {
...
} ...
Para utilizar el listener con un componente hay que aadir la
accin f:valueChangeListener con el nombre de la clase que lo implementa:

<h:inputText id="nombre" value="#{usuario.nombre}"
onchange="submit()">
<f:valueChangeListener type="com.company.listeners.Cambio"/>
</h:inputText>
Una alternativa que evita tener que declarar una clase es definir el mtodo en un bean:

@ManagedBean public
class Usuario {
@ManagedBean
public void accion(ActionEvent event) throws AbortProcessingException {
...
}
...

Y referenciar a dicho mtodo directamente con el atributo actionListener :

...
<f:setPropertyActionListener target="#{requestScope.seleccionado}"
value="#{articulo}"/>
...

Ingeniera deWeb
public void cambio(ValueChangeEvent event)
...
} ...
Y referenciar a dicho mtodo directamente con el atributo valueChangeListener:

Binding
De igual forma que lo explicado para validadores y conversores, JSF permite aplicar las
capacidades de binding a los listeners. Para ello hay que declarar una propiedad dentro de un
bean con el mismo tipo del listener:
@ManagedBean
ValueChangeListener escuchador = new ValueChangeListener() {
public void processValueChange(ValueChangeEvent arg0)
...
}
};
public ValueChangeListener getEscuchador() {
return escuchador; } ...
Y hacer referencia a la propiedad del bean dentro del componente:

<f:valueChangeListener binding="#{usuario.escuchador}"/>
</h:inputText>

Templating
JSF proporciona un sistema de construccin de vistas basado en el uso de plantillas reutilizables
a travs de la librera de acciones facelets.
Plantillas
Una plantilla es un fichero XTHML vlido que establece como se disponen los elementos dentro
de una vista de forma genrica. Acta como un patrn donde se definen una serie de variables y
su disposicin. Las pginas que utilizan plantillas, llamadas pginas cliente, establecen el valor
de las variables que al renderizar se mostrarn segn la disposicin predefinida.
Sirva de ejemplo la siguiente plantilla que define una vista con una disposicin clsica con una
cabecera y un cuerpo:

xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="titulo">Ttulo por defecto</ui:insert></title>
</head>
<body>
< h:inputText ... value="#{usuario.nombre}"
valueChangeListener="#{usuario.cambio}"/>

Ingeniera deWeb
<div class="cabecera">
<ui:insert name="cabecera"/>
</div>
<div class="contenido">
<ui:insert name="contenido"/>
</div>
</body> </html>
Cada accin ui:insert define una variable con un nombre. En la plantilla de ejemplo hay
definidas tres variables. Una para el ttulo de la pgina, con un valor por defecto por si la pgina
cliente no lo establece. Y dos para el cuerpo, formado por una cabecera y un contenido.
Pginas Cliente
Una pgina cliente es un fichero XHTML vlido que hace referencia a una plantilla y establece los
valores de las variables definidas en la plantilla.
Sirva de ejemplo la siguiente pgina que hace referencia a la plantilla definida en el partado
anterior:

xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="plantilla.xhtml">
<ui:define name="titulo">Ttulo</ui:define>
<ui:define name="cabecera">Cabecera</ui:define>
<ui:define name="content">
<ui:include src="contenido.xhtml"/>
</ui:define>
</ui:composition>
</body>
</html>
La accin ui:composition indica la plantilla que debe utilizarse. La accin ui:define establece
el valor de una variable de la plantilla. Y la accin ui:include permite incluir el contenido de
otros ficheros.
Cuando JSF procesa la accin ui:composition ignora el resto del contenido de la pgina, lo que
evita que la pgina HTML resultante final tenga varios bloques de la
forma <html><body>...</body></html>. Si se quiere incluir todo el contenido de la pgina se
tiene que utilizar la accin ui:decorate.
Todos los elementos presentes en una vista son organizados por JSF en forma de rbol de
componentes. Si se quiere insertar un componente directamente en el rbol, sin utilizar una
plantilla, se puede utilizar la accin ui:component. Esta accin excluye el resto de contenido de
la pgina, si se quiere incluir todo hay utilizar la accin equivalente ui:fragment. Parmetros
Una forma alternativa de definir plantillas es utilizar variables con expresiones EL:

<head>
<title><h:ouputText value="#{titulo}"/></title> </head>
Y en las pginas clientes pasar el valor utilizando la accin ui:param:

Ingeniera deWeb

Depuracin
Para poder hacer un anlisis del proceso de resolucin de plantillas y variables en tiempo de
ejecucin se puede aadir la accin ui:debug. Esta accin abre una ventana en el navegador
cliente cuando se pulsa shift+control+d con informacin detallada, aunque admite un atributo
hotkey que permite cambiar la tecla por defecto.

Composite Components
Los componentes compuestos son tipos especiales de plantillas que actan, como su propio
nombre indica, como componentes.
La idea general es definir elementos que implementan una determinada funcionalidad y pueden
reutilizarse. La librera de acciones composite de JSF permite desarrollar componentes usando
XHTML sin tener que escribir cdigo Java.
Componentes
La definicin de un componente se divide en dos partes. Por una parte la interface, y por otra
parte la implementacin.
La interface se declara utilizando la accin composite:interface. En ella se declaran, entre
otros, los atributos que se quiere tenga el componente. Estos atributos actan como variables
de instancia y se gestionan como un Map de pares (nombre, valor).
Por su parte, la implementacin se declara utilizando la accin composite:implementation. En
ella se disponen los elementos que forman parte del cuerpo del componente y se puede hacer
referencia a los atributos definidos en la interface.
Sirva de ejemplo el siguiente componente:

xmlns:composite="http://java.sun.com/jsf/composite"
<h:body>
<composite:interface>
<composite:attribute name="nombre" required="false"/>
</composite:interface>
<composite:implementation>
<h:outputText value="Hola "/>
<h:outputText value="#{cc.attrs.nombre}"/>
</composite:implementation>
</h:body>

</html>
< ui:composition template="plantilla.xhtml">
<ui:param name="titulo" value="Ttulo"/>
< /ui:composition >

< ui:debug/ >

Ingeniera deWeb
En la interface del componente de ejemplo se ha definido un atributo opcional llamado nombre, y
en la implementacin se muestra el texto "Hola" junto con el valor del atributo. Como se
observa, para acceder a los atributos se utiliza la variable cc (composite component). Esta
variable es definida por JSF y est disponible para su uso dentro de las expresiones de EL.
Para continuar con el ejemplo supondremos que el componente se guarda con el
nombresaludo.xhtml dentro del directorio resources/libreria del war de la aplicacin. Donde el
nombreresources es obligatorio, viene impuesto por JSF. El nombre libreria es el nombre de la
libreria de componentes que se quiere utilizar, que puede puede ser cualquiera. Y el nombre
saludo es el nombre que identifica al componente, que tambin puede ser cualquiera. Para
utilizar el componente dentro de una pgina tiene que incluirse el
namespacehttp://java.sun.com/jsf/composite/libreria, hacer referencia al componente utilizando
un tag con el nombre del componente, y dar valor a los atributos definidos en su interface:
xmlns:libreria="http://java.sun.com/jsf/composite/libreria">
<body>
<libreria:saludo nombre="mundo"/>
</body>

</html>

Conversores, Validadores y Listeners
Para que un componente sea realmente reutilizable se tiene que poder cambiar el
comportamiento de sus elementos internos desde fuera del mismo. Para poder aplicar
conversores, validadores y listeners a dichos elementos se tiene que utilizar las
accionescomposite:valueHolder, composite:editableValueHolder y composite:actionSour
ce. Cada una de ellas expone una interface que puede ser utilizada por las pginas para ajustar
determinados aspectos del comportamiento de un componente a sus necesidades.
Por ejemplo, en el siguiente componente se declara un formulario con un par de valores, uno
inmutable (ValueHolder) y otro editable (EditableValueHolder), junto con un botn
(ActionSource):

<composite:attribute name="valor" required="false"/>
<composite:attribute name="texto" required="false"/>
<composite:valueHolder name="etiquetaValor" targets="form:etiqueta"/>
<composite:editableValueHolder name="editorTexto" targets="form:editor"/>
<composite:actionSource name="botonEnviar" targets="form:boton"/>
<h:form id="form">
<h:outputText id="etiqueta" value="#{cc.attrs.valor}">
<h:inputText id="editor" value="#{cc.attrs.texto}"/>
<h:commandButton id="boton" value="Enviar"/>
Ingeniera deWeb
</h:form>
La interface declarada de esa forma permite asociar los conversores, validadores y listeners que
se quieran a los elementos internos desde una pgina que utilice el componente:

<libreria:componente>
<f:convertNumber for="etiquetaValor" pattern="#,##0.00"/>
<f:validateLength for="editorTexto" maximum="10"/>
<f:actionListener for="botonEnviar" binding="#{bean.listener}"/>
</libreria:componente>

Acciones
En la interface de un componente, adems de atributos que actan como variables, se pueden
definir atributos que actan como mtodos. Sirva de ejemplo el cuerpo del siguiente
componente:

<composite:attribute name="metodo" method-signature="java.lang.String
action()"/>
<h:commandButton value="Mtodo" action="#{cc.attrs.metodo}"/>
El atributo metodo se ha declarado utilizando method-signature que permite especificar la
definicin de un mtodo.
Una pgina que incluya el componente debe suministrar la implementacin del mtodo:

<libreria:saludo metodo="#{hello.saludo}"/>
El mtodo puede estar definido en un bean, y seguir la nomenclatura definida en el
componente:

@ManagedBean public class
Hello { public String
metodo() { return
"Hola mundo";
}
...

Ingeniera deWeb
Libreras JSF
JSF incorpora una serie de libreras de acciones estndar. En este artculo se revisan los tags
disponibles en cada una de ellas.

Librera Namespace Prefijo
core http://java.sun.com/jsf/core f
html http://java.sun.com/jsf/html h
composite http://java.sun.com/jsp/jstl/composite composite
facelets http://java.sun.com/jsf/facelets ui
HTML Tag Library
Esta librera de acciones contiene etiquetas equivalentes para cada uno de los componentes
HTML estndar. - h:body: Equivale a un elemento <body> en HTML.
<h:body> ...
</h:body>

- h:head: Equivale a un elemento <head> en HTML.

- h:outputStyleSheet: Enlaza una hoja de estilo. Equivale a un elemento <link> en HTML.
<h:outputStylesheet library="css" name="estilos.css"/>
El atributo library indica que estilos.css debe encontrarse en el directorio resources/css.

- h:outputScript: Equivale a un elemento <script> en HTML. <h:outputScript
library="js" name="script.js"/>
El atributo library indica que script.js debe encontrarse en el directorio resources/js.

- h:panelGroup: Grupo de componentes. Utiliza un elemento <div> o <span> de HTML para

- h:form: Formulario de entrada de datos. Equivale a un elemento <form> en HTML.
<h:form> ...
</h:form>
< h:head>
<title>Ttulo<title>
< h:head >

encapsular los componentes.
< h:panelGroup id="contenido">
...
< /h:panelGroup >


-
Ingeniera deWeb
h:outputLabel: Utilizado para asociar una etiqueta a un campo de entrada de datos de un
formulario. Equivale a un elemento <label> en HTML.

- h:inputText: Utilizado para introducir una lnea de texto. Equivale a un elemento <input
type="text"> en HTML.
<h:inputText id="nombre" value="#{libro.titulo}" required="true"/>

- h:inputTextarea: Utilizado para introducir un texto con varias lneas. Equivale a un
elemento<textarea> en HTML.

- h:inputSecret: Utilizado para la introduccin de informacin sensible, como contraseas,
para que no se muestre lo que se teclea. Equivale a un elemento <input type="password">
en HTML.

- h:inputHidden: Utilizado para introducir variables escondidas dentro de una pgina. Equivale
a un elemento <input type="hidden"> en HTML.

- h:selectOneListbox: Permite seleccionar un elemento de una lista. Equivale a un element
<select> en HTML.
<h:selectOneListbox value="#{cosecha.fecha}">
<f:selectItem itemValue="1" itemLabel="2000"/>
<f:selectItem itemValue="3" itemLabel="2002"/> </h:selectOneListbox>
Las listas se apoyan en la accin selectItem de la librera core que debe incluirse a travs del
namespace xmlns:f="http://java.sun.com/jsf/core".

- h:selectManyListbox: Permite seleccionar mltiples elemento de una lista. Equivale a un
elemento <select> en HTML con el atributo multiple con valor multiple.

< h:outputLabel for="nombre" value="Nombre:"/ >

< h:inputTextarea id="sinopsis" value="#{libro.sinopsis}"/ >

< h:inputSecret id="clave" value="#{usuario.clave}"/ >

< h:inputHidden id="secreto" value="#{oculto}"/ >

< code>
< h:selectManyListbox value="#{cosecha.fecha}">
...
< /h:selectManyListbox >


-
Ingeniera deWeb
- h:selectOneMenu: Permite seleccionar un elemento de un desplegable. Equivale a un
elemento <select> en HTML con el atributo size igual a 1.
<h:selectOneMenu value="#{cosecha.fecha}">
<f:selectItem itemValue="1" itemLabel="2000"/> ...
</h:selectOneMenu>
h:selectManyMenu: Permite seleccionar mltiples elementos de una lista. Equivale a un
elemento <select> en HTML con el atributo multiple con valor multiple y size igual a 1.
<h:selectManyMenu value="#{cosecha.fecha}">
type="checkbox"> en HTML.
<h:selectBooleanCheckbox value="#{chat.ausente}"/>

- h:selectManyCheckbox: Lista de checkboxes. Equivale a una lista de elementos <input
type="checkbox"> en HTML.
<h:selectManyCheckbox value="#{habitacion.extras}">
<f:selectItem itemValue="1" itemLabel="Caja fuerte"/>
<f:selectItem itemValue="2" itemLabel="Secador"/>
<f:selectItem itemValue="3" itemLabel="Baera"/>
</h:selectManyCheckbox >

- h:selectOneRadio: Permite seleccionar un elemento de un conjunto de opciones. Equivale a
un elemento <input type="radio"> en HTML.
<h:selectOneRadio value="#{usuario.sexo}">
<f:selectItem itemValue="1" itemLabel="Hombre"/>
<f:selectItem itemValue="2" itemLabel="Mujer"/> </h:selectOneRadio>

- h:commandButton: Enva los datos de un formulario al servidor. Equivale a un
elemento<input> en HTML, donde el atributo type puede tener el valor submit, reset o image.
<h:commandButton type="submit" value="Enviar" action="envio"/>

- h:button: Equivale a un elemento <input type="button"> en HTML.
<h:button value="Comprobar"/>

...
< /h:selectManyMenu >

-

h:selectBooleanCheckbox :

Checkbox . Equivale a un elemento < input

-
Ingeniera deWeb

- h:message: Muestra un mensaje de error asociado a un componente sobre el que se ha
aplicado la configuracin regional. Su uso principal es definir el estilo con el que debe
mostrarse. Utiliza un elemento <span> de HTML para encapsular el mensaje. <h:message
for="nombre" style="color: red;"/>
- h:messages: Muestra varios mensajes de error a los que se le ha aplicado la configuracin
regional. Su uso principal es definir el estilo con el que deben mostrarse. Utiliza un
elemento<span> para encapsular cada mensaje de forma individual.
<h:messages style="color: red;"/>
- h:outputText: Muestra una lnea de texto plano.
h:outputFormat: Muestra un mensaje de texto al que se le pueden pasar parmetros. No
utiliza ningn elemento HTML para encapsular el mensaje.
<h:outputFormat value="Bienvenida al {0}">
<f:param value="convento"/>
</h:outputFormat>
Los parmetros se apoyan en la accin param de la librera core que debe incluirse a travs del
namespace xmlns:f="http://java.sun.com/jsf/core".

- h:graphicImage: Imagen. Equivale a un elemento <img> en HTML.
<h:graphicImage value="resources/images/logo.png"/>
- h:commandLink: Enlace a otra pgina o elemento de la pgina actual que genera una
accin. Equivale a un elemento <a href> en HTML. <h:commandLink
value="Liga Mgica"/>

- h:outputLink: Enlace a otra pgina o elemento de la pgina actual que no genera ninguna
accin. Equivale a un elemento <a> en HTML. <h:outputLink value="Liga Ordinaria"/>
- h:link: Equivale a un elemento <a> en HTML.
<h:link value="Login Annimo" outcome="login" >
<f:param name="usuario" value="anonimo"/> </h:link>

- h:panelGrid: Organiza los componentes de una forma tabular. Equivale a maquetar utilizando
los elementos <table>, <tr> y <td> en HTML.
<h:panelGrid columns="2">

...
< /h:panelGrid >


-
Ingeniera deWeb
- h:dataTable: Muestra los objetos de una coleccin organizados de forma tabular. Equivale a
un elemento <table> en HTML.
<h:dataTable value="#{pedido.lineas}"
var="linea" styleClass="tabla"
headerClass="cabecera"
rowClasses="impar,par">
<h:column>#linea.articulo</h:column>
<h:column>#linea.precio</h:column>
</h:dataTable>

- h:column: Columna de datos en una tabla HTML. Se usa en conjuncin con h:dataTable

Atributos
Asociados a cada accin hay una serie de atributos. Por una parte los estndares
correspondientes a cada elemento HTML, y por otra parte los definidos por JSF:
Ingeniera deWeb

- id: Identificador de componente. Si no se especifica JSF genera uno automticamente.
<h:inputText id="nombre" ...

- value: Valor asociado a un componente.
<h:outputText value="#{pedido.total}" ...
- binding: Propiedad de un bean al que se asocia el valor de un componente.
<h:selectBooleanCheckbox binding="#{usuario.sexo}" ...
- immediate: Especifica cuando se tiene que ejecutar los eventos y aplicar validadores y
conversores.

- rendered: Especifica una condicin que debe cumplirse para que un componente se
renderice.

- style: Estilos CSS indicados directamente sobre un componente.
<h:message for="nombre" style="color: red;" ...
- styleClass: Referencia a una clase CSS especificada en una hoja de estilos.
<h:dataTable id="tablero" styleClass="estilizado" ...

Core Tag Library
Esta librera de acciones proporciona funciones de uso general.
- f:verbatim: Renderiza el contenido tal cual se suministra. til para aadir bloques
HTML propios que no deben procesarse por JSP.
<f:verbatim><div class="especial"></f:verbatim> ...
<f:verbatim></div></f:verbatim>

- f:view: Contenedor principal de todos los componentes de una vista. til para aadir el
tipo de contenido, el juego de caracteres o la configuracin regional.
<f:view contentType="text/html" encoding="UTF-8">
- f:subview: Contenedor de todos los componentes incluidos a travs de una accin
jsp:include o c:import. Es obligatorio utilizarlo cuando se quiere incluir una pgina JSP o JSF
utilizando las acciones jsp:include o c:import.
<f:subview>
< h:commandLink id="continuar" immediate="true" ...

< h:commandLink id="pagar" rendered="#{pedido.total > 0}" ...

...
< /f:view >


-
Ingeniera deWeb

<jsp:include page="un.jsp"/>
</f:subview>

- f:viewParam: Captura el valor de los parmetros HTTP de una peticin. Utilizado
conjuntamente con f:metadata.
<f:metadata>
- f:metada: Define un bloque de metainformacin para una vista. Utilizado en conjuncin
con f:viewParam.
- f:localBundle: Carga un recurso de mensajes de texto de forma local a una vista y lo
expone como un Map de (clave, texto). Los ficheros de mensajes tienen que estar ubicados
dentro de una carpeta del directorio resources dentro del war de la aplicacin.
<f:loadBundle basename="i18n" var="mensajes"/>
Si se quieren cargar los mensajes de forma global para toda una aplicacin se pueden declarar
en el fichero faces-config.xml.
<application>
<resource-bundle>
<base-name>i18n</base-name>
<var>mensajes</var>
</resource-bundle>
</application>
Para utilizar los mensajes hay que utilizar el nombre de la variable indicada y la clave del
mensaje correspondiente.
<h:outputText value="#{mensajes.clave}"/>
- f:facet: Aade una caracterstica a un componente. Dicha caracterstica acta como "rol" de
dicho componente para distinguirlo del resto.
<h:dataTable value="#{usuarios}" var="usuario">
- f:validateRequired: Fuerza a que un componente se le tenga que introducir un valor.
<f:viewParam name="idUsuario" value="#{bean.idUsuario}"/>
< /f:metadata >

<h:column>
<f:facet name="header">
<h:outputText value="Nombre"></h:outputText>
</f:facet>
<h:outputText value="#{usuario.nombre}"></h:outputText>
</h:column>
...
< /h:dataTable >

Ingeniera deWeb
<h:inputText ... value="#{usuario.password}">
- f:validateLength: Aade un validador de tipo LengthValidator a un componente.
Comprueba que la longitud de la cadena de texto que almacena el valor est dentro de un
rango.
<h:inputText ... value="#{cliente.nombre}">
<f:validateLength minimum="3" maximum="25"/> </h:inputText>
f:validateDoubleRange: Aade un validador de tipo DoubleRangeValidator a un
componente. Comprueba que la variable numrica que almacena el valor est dentro de un
rango.

- f:validateLongRange: Aade un validador de tipo LongRangeValidator a un componente.
Comprueba que la variable numrica que almacena el valor, o la cadena de texto que
representa un nmero, est dentro de un rango.
<h:inputText ... value="#{cliente.cuentas}">
- f:validateRegex: Aade un validador de tipo RegExValidator a un componente. Comprueba
que la cadena de texto que almacena el valor case con un patrn dado.
<h:inputText ... value="#{cliente.alias}">
- f:validator: Aade un validador a un componente que llama a un mtodo concreto dado.
<h:inputText ... value="#{usuario.nombre}" validator="#{usuario.validateNombre}">

- f:validateBean: Delega la validacin de un componente a un validador de tipo
BeanValidatorpersonalizado.
- f:convertNumber: Aade un convertidor de tipo NumberConverter a un componente.
Especifica como convertir un valor numrico desde y haca su representacin en formato de
texto.

<f:validateRequired/>
< /h:inputText >

< h:inputText ... value="#{cliente.saldo}">
<f:validateDoubleRange minimum="0.01"/>
< /h:inputText >

<f:validateLongRange minimum="1"/>
< /h:inputText >

<f:validateRegex pattern="[a-zA-Z0-9]+"/>
< /h:inputText >

< h:outputText value="#{pedido.total}">
<f:convertNumber currencySymbol="" type="currency"/>
< /h:outputText >


-
Ingeniera deWeb
...
...

- f:convertDateTime: Aade un convertidor de tipo DateTimeConverter a un componente.
Especifica como convertir un valor de tipo fecha desde y haca su representacin en formato
de texto.

- f:converter: Aade un convertidor especfico a un componente.
<h:selectOneMenu value="#{cliente.ciudad}">
<f:converter converterId="ciudadConverter"></f:converter>
<f:selectItems value="#{pais.ciudades}"></f:selectItems> </h:selectOneMenu>

- f:actionListener: Aade un listener de accin a un componente.
<h:commandLink id="enlace" action="enlazar">
<f:actionListener type="com.company.listeners.Accion"/> </h:commandLink>

- f:valueChangeListener: Aade un listener por cambio de valor a un componente.
<f:valueChangeListener binding="#{usuario.escuchador}"/> </h:inputText>

- f:setPropertyActionListener: Aade un listener especial a un componente cuyo nico
propsito es establecer el valor de la propiedad de un bean cuando un formulario es enviado al
servidor.

- f:event: Aade un listener de eventos del ciclo de vida de un componente.
<f:event type="preRenderView" listener="#{componente.escuchador}"/>
- f:phaseListener: Aade un listener de eventos de ciclo de vida de fase a una vista.
...
<f:phaseListener binding="#{usuario.escuchador}"/> ...

- f:ajax: Aade una accin Ajax a un componente. Esta accin permite que se ejecute cdigo
en el servidor sin tener que recargar la pgina. Los atributos principales son execute y render
que especifican listas de componentes, separadas por espacio, que tienen que ejecutarse en el
servidor al realizar la llamada y recibir la respuesta respectivamente.
< h:outputText value="#{persona.nacimiento}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
< /h:outputText >

...
<f:setPropertyActionListener target="#{requestScope.seleccionado}"
value="#{articulo}"/>
...

Ingeniera deWeb
<h:outputText id="resultado" value="#{bean.resultado}"/>
- f:attribute: Aade un atributo a un componente.
<h:commandButton">
<f:attribute name="value" value="Botn"/>
</h:commandButton>
El cdigo anterior es equivalente a la siguiente declaracin utilizando la forma clsica de escribir
los atributos:
<h:commandButton" value="Botn"/>
Tambin puede utilizarse para aadir atributos de forma genrica y que puedan ser utilizados
desde los mtodos de los beans.
<h:commandButton actionListener="#{bean.escuchador}">
<f:attribute name="nombre" value=valor"/> </h:commandButton>
Desde un listener, por ejemplo, puede accederse a los atributos con la siguiente cadena:
event.getComponent().getAttributes().get("nombre");
f:param: Aade un parmetro genrico a un componente. Se utiliza en conjuncin con otras
acciones.

- f:selectItem: Representa un elemento dentro de una lista. Se utiliza en conjuncin con
elementos select de HTML.
<h:selectOneRadio value="#{usuario.sexo}">
<f:selectItem itemValue="1" itemLabel="Hombre"/>
<f:selectItem itemValue="2" itemLabel="Mujer"/> </h:selectOneRadio>

- f:selectItems: Representa una lista de elementos. Se utiliza en conjuncin con
elementosselect de HTML.
<h:selectOneMenu ...>
<f:selectItems value="#{paleta.colores}"/> </h:selectOneMenu>

Facelets Tag Library
Esta librera de acciones proporciona facilidades para la construccin de componentes y vistas
basadas en plantillas.
- ui:composition: Define una disposicin de una pgina basada en una plantilla. El contenido
definido fuera de esta accin es ignorado.
<ui:composition template="plantilla.xhtml">
< h:commandButton value="Comprobar">
<f:ajax render="resultado"/>
< /h:commandButton>

< h:outputFormat value="Bienvenida al {0}">
<f:param value="convento"/>
< /h:outputFormat >

...
< /ui:composition >


-
Ingeniera deWeb

- ui:decorate: Acta de forma similar a la accin ui:composition, pero sin ignorar el
contenido que se encuentra fuera de la accin.

- ui:insert:Especifica un nombre que las pginas cliente deben utilizar para insertar contenido
dentro de una plantilla.
<ui:insert name="contenido"/>
- ui:define: Define contenido a ser insertado dentro de una plantilla utilizando el nombre
indicado dentro de la misma.
<ui:define name="titulo">Ttulo</ui:define>
- ui:include: Incluye un fichero dentro de otro. La ruta del fichero indicado es relativa a la del
fichero que lo incluye.
<ui:include src="contenido.xhtml"/>
- ui:param: Utilizado para pasar valores a plantillas.

- ui:component: Define un componente. Acta de forma similar a la accin ui:composition
pero sin definir una plantilla. El contenido de la accin es aadido directamente al rbol de
componentes de la vista. El contenido definido fuera de esta accin es ignorado.
<ui:component>
- ui:fragment: Acta de forma similar a la accin ui:component, pero sin ignorar el contenido
que se encuentra fuera de la accin.

- ui:debug: Aade un componente de depuracin a un pgina. Al pulsar shift+control+d en el
navegador del cliente abre una ventana con informacin detallada. Admite un atributo que
permite cambiar la tecla por defecto.
<ui:debug hotkey="e"/>

- ui:repeat: Sustituye el uso de h:dataTable y c:forEach
cuando atributo jsfc para definir las vistas.
se utiliza el

< ui:composition template="plantilla.xhtml">
<ui:param name="titulo" value="Ttulo"/>
< /ui:composition >

<h:outputText value="${1 + 1}"/>
< /ui:component >

Ingeniera deWeb
< composite:interface>
< /composite:interface >

<div jsfc="ui:repeat" value="#{libros}" var="libro" ...

- ui:remove: Usado cuando se utiliza el atributo jsfc para definir las vistas. Los elementos
HTML con esta accin no se tienen en cuenta.
<div jsfc="ui:remove" ...

Composite Tag Library
Esta librera de acciones proporciona facilidades para la construccin de componentes.
- composite:interface: Declara la interface de un componente.
<composite:attribute name="nombre"/>
- composite:attribute: Define un atributo en la interface de un componente. Los atributos
pueden ser variables o mtodos.
<composite:attribute name="texto" required="false"/>
<composite:attribute name="valor" type="java.lang.String"/>
<composite:attribute name="metodo"
method-signature = "java.lang.String accion()"/>

- composite:facet: Define un facet (rol) en la interface de un componente.
<composite:facet name="cabecera"/>
<composite:facet name="contenido"/>
composite:valueHolder: Expone una interface ValueHolder para una serie de elementos
internos de un componente. Las pginas que utilicen el componente pueden utilizar la interface
para variar el comportamiento de dichos elementos inyectando conversores por ejemplo.
<composite:valueHolder name="estatico" targets="form:etiqueta"/>

- composite:editableValueHolder: Expone una interface EditablesValueHolder para una
serie de elementos internos de un componente. Las pginas que utilicen el componente
pueden utilizar la interface para variar el comportamiento de dichos elementos inyectando
validadores por ejemplo.
<composite:editableValueHolder name="editable" targets="form:editor"/>
- composite:actionSource: Expone una interface ActionSource para una serie de elementos
internos de un componente. Las pginas que utilicen el componente pueden utilizar la
interface para variar el comportamiento de dichos elementos inyectando listeners por ejemplo.


-
Ingeniera deWeb


<composite:actionSource name="accionable" targets="form:boton"/>
- composite:clientBehavior: Expone una interface ClientBehaviorHolder para una serie de
elementos internos de un componente. Las pginas que utilicen el componente pueden utilizar
la interface para variar el comportamiento de dichos elementos inyectando listeners por
ejemplo.
<composite:clientBehaviour name="accionable" targets="form:boton"/>
- composite:extension: Permite aadir cualquier tipo de contenido XML que no forma parte de
JSF a un elemento declarado en la interface, como por ejemplo microdata.

- composite:implementation: Define la implementacin de un componente. Desde EL se
puede hacer referencia al propio componente a travs la variable cc (composite component), y
a los atributos definidos en la interface con su propiedad attrs.
<h:outputText value="#{cc.attrs.nombre}"/>

- composite:renderFacet: Fuerza que se renderice el facet indicado:

- composite:insertChildren: Establece que el contenido hijo declarado dentro de una pgina
que utiliza el componente debe aadirse a la pgina final resultante.
<div>
<composite:insertChildren/>
</div>
Esta accin resulta de utilidad para aadir contenido a un componente por parte de una pgina
que lo utilice:
< html ...
xmlns:md="...">
...
<composite:attribute name="atributo">
<composite:extension>
<md:propiedad>valor</md:propiedad>
</composite:extension>
</composite:attribute>
< composite:interface >

< composite:implementation>
<composite:renderFacet name="cabecera"/>
<composite:renderFacet name="contenido"/>
< /composite:implementation >

Ingeniera deWeb
<libreria:componente>
<outputText value="Aparecer donde est la etiqueta
insertChildren"/>
</librera:componente>

- composite:insertFacet: Inserta el contenido de un facet:
<composite:insertFacet name="cabecera"/>
<composite:insertFacet name="contenido"/>

Ingeniera deWeb
DESARROLLANDO UNA APLICACIN EMPRESARIAL
1. Introduccin
La presente gua busca describir paso a paso la creacin de una aplicacin empresarial utilizando JEE
especficamente usando las siguientes tecnologas:
Java EE 7 como plataforma
GlassFish 3.1.2 Server, como servidor de despliegue de nuestra aplicacion
JSF 2.1 para el modulo web
JPA 2.0 para administrar las clases de persistencia
EJB 3.1 para escribir nuestros java beans empresariales que implementen la logica del negocio
EclipseLink 2.3 para ORM (Object Relational Mapping) para maperar nuestras relaciones(tablas) a
clases entidad
MySQL Server 5.1 como DBMS (Database Management Server)
El entorno de desarrollo utilizado es eclipse indigo R2.
Como ejercicio de prctica se propone desarrollar una aplicacin web que permita gestionar servicios
on line para una biblioteca, ver el archivo adjunto con el script sql para mysql.
Los pasos a seguir son los siguientes:
Crear la aplicacin web, utilizando la recomendacin JSF2, es decir el uso de Plantillas Facelets.
Crear la aplicacin ejb, que contendr las clases de entidad, los ejbs dao y negocio
Crear y configurar el Datasource JDNI para Mysql en Glassfish
Accesar a los java beans desde la aplicacin JSF
Configuracin inicial de eclipse
a. Crear un directorio de trabajo donde gestionaremos nuestros proyectos, en nuestro caso
D:\workspace
b. Desempaquetar el archivo libraries.rar dentro del folder workspace
c. Ejecutar eclipse y seleccionar el espacio de trabajo definido en el paso a. la vista es la siguiente:

d. Vamos a configurar el servidor de aplicaciones glassfish, para hacer esto hacemos clic en new
server wizard de la ficha server:
Ingeniera deWeb

e. Seleccionamos dentro del folder GlassFish, el adaptador GlassFish 3.1.2, y hacemos click en next.

f. Indicamos el directorio del servidor de aplicaciones (el instalador fue desempaquetado en
c:\glassfish3).

g. Para que glassfish funcione adecuadamente, es necesario referenciar un jdk y no un jre, entonces
hacer click en Installed JRE preferences y agregar al jdk como JRE instalado, como se muestra a
continuacin:
Ingeniera deWeb

Seleccionar el JRE definido y click en finish

Cambiar Default JRE por el JDK seleccionado previamente

h. Hacer click en finish para terminar el proceso, el resultado es el siguiente

2. El sistema de plantillas Facelets
.

Se basa en el uso de las siguientes etiquetas:
ui:composition: envuelve un conjunto de componentes para ser reutilizados en otra pgina, es la
etiqueta que: o envuelve o puede envolver la plantilla. o se utiliza para hacer referencia a una
plantilla.
Todo lo que quede fuera de la etiqueta ui:composition no ser renderizado.
Ingeniera deWeb
ui:define: define un contenido nombrado para ser insertado en una plantilla, su contenido es un
conjunto de componentes y se identifica con un name. Ese conjunto de componentes ser
insertado en una etiqueta ui:insert con el mismo name.
ui:insert: declara un contenido nombrado que debe ser definido en otra pgina,
ui:decorate: es la etiqueta que sirve para hacer referencia a una plantilla, como la etiqueta
ui:composition, solo que con ui:decorate lo definido antes y despus de la etiqueta s ser
renderizado,
ui:param: nos sirve para declarar parmetros y su valor en el uso de plantillas y componentes por
composicin,
ui:include: es una etiqueta que sirve para incluir en una pgina el contenido de otra, como si el
contenido de esta ltima formase parte de la primera.
Siguiendo las recomendaciones de facelets, las plantillas las incluiremos dentro del directorio
WEBINF/facelets/templates/, de modo que no sean visibles desde el contenedor web.

1. Crear una aplicacin web dinmica JSFLab04WEB,

En la opcin configuration, seleccionar JavaServer Faces v2.0 Project, click en next>next, en la
ventana web Module, seleccionar la casilla Genera web.xml deployment descriptor, y click en next.

Ingeniera deWeb
Ahora hay que seleccionar la librearia JSF a utilizar, y seleccionamos finish, de acuerdo a la
siguiente:

Nuestro proyecto se ha creado, ahora procederemos a configurar nuestra plantilla.
Ahora, probaremos si JSF esta trabajando apropiadamente. Para hacerlo crearemos nuestra pgina
prueba. Hay que recordar que las paginas web en una aplicacin web dinmica son creadas en el
folder WebContent o en sus subfolderes. Las pginas fuera de este folder no sern publicadas por
el servidor y no se tendrn acceso desde la web.
Entoces, click derecho en el folder WebContent en el explorador de proyectos y click en
new>XHTML Page. Escribir prueba en el campo nombre y click en finish, como se muestra en la
figura:
Ingeniera deWeb

Click derecho en el archivo prueba.xhtml y click en Run As > Run on Server y veremos el mensaje
de exito en el browser, pero dese cuenta que todavia se muestra en el browser /faces/test.xhtml.
Necesitamos que se muestre test.jsf. Esto se logra haciendo pequeos cambios en nuestro archivo
web.xml

Abra el archivo web.xml y haga que parezca como lo siguiente. Encontrara el archivo web.xml bajo
/WebContent/WEBINF/web.xml

Abrir el archivo prueba.xhtml y agregar el siguiente mensaje en el body:

< ? xml

version = "1.0"

encoding = "ISO 8859 1 " ?>
<! 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" >

< head >

< meta

http equiv = "Content Type"

content = "text/html;

charset=ISO 8859 1 "

/>

< title > Insert

title

here < / title >

< / head >

< body >

< div

style = " background color :

navy ;

with : 100 % ; color : white " >

JSF

ESTA

FUNCIONANDO

CORRECTAMENTE

< / div >

< / body >

< / html >
Ingeniera deWeb

En Servlet mapping, se ha especificado que el patron url sera *.jsf. Nuestra pagina de bienvenida
sera index.jsf, ahora click derecho en la pagina prueba.xhtml otra vez y click en Run As > Run on
Server y veremos que la url ahora se esta mostrando con test.jsf como se puede ver en la figura:

La mejor forma de trabajar con facelets es creando una plantilla, entonces, a continuacin
crearemos las paginas header, footer y composition.
En JSF 2.0, los facelts se crean usando plantillas y composicion de paginas. Veamos como se usan
las plantillas para crear facelets. Siguiendo las recomendaciones de facelets, las plantillas las
incluiremos dentro del directorio /WebContent/WEBINF/facelets/templates/, de modo que no
sean visibles desde el contenedor web. Procedamos a crear dichos folders, haciendo click derecho
en WEBINF y click New > Folder.
Click derecho en el folder templates y click en New > XHTML Page. Si la opcin XHTML no se
muestra aqui, hacer click en New > Other, y bajo GlassFish seleccionar XHTML Page como se
muestra en la figura:
Ingeniera deWeb

Colocar el nombre del archivo a template y click Next. En la siguiente ventana seleccionar New
Facelet Template. como se muestra en la figura y hacer click en Finish.

Ingeniera deWeb

Click derecho en el folder templates para crear el archivo header.xhtml seleccionando New Facelet
Header como se muestra en la siguiente figura, y click en finish:

Siga los mismos pasos para crear el archivo footer.xhtml en el folder templates seleccionando New
Facelet Footer como se muestra en la figura:
Ingeniera deWeb

Esta pagina template se utilizara para crear nuestras paginas xhtml. Pueden ver que hemos creado
reas para la cabecera (header), el pie (footer) usando la etiqueta de insercion <ui>. Observe que
hemos creado rea de contenido usando la etiqueta de insercion <ui>, pero no incluimos la pagina.
Nuestras pginas de composicin estarn aqu, como lo veremos mas adelante. Ahora
Ingeniera deWeb
procederemos a crear nuestras pginas de composicin mediante esta plantilla (template.xhtml).
Click derecho en el folder WebContent y crear una nueva pgina compuesta llamada index.xhtml
seleccionando New Composition Facelet Page como se muestra a continuacin:

Abre tu pgina compuesta y elimina las etiquetas header y footer, estos cargaran de la pgina
plantilla. Coloca la ruta de pagina plantilla en la etiqueta <ui:composition>. Agrega los mensajes
apropiados en el rea de contenido. Tu pgina se vera as:

Abre las pginas header y footer y agrega los mensajes apropiados. Ejecuta tu proyecto.
Finalmente el explorador de proyecto y la ventana del navegador se vern como sigue:

<! 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:ui = "http://java.sun.com/jsf/facelets"

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

xmlns:f = "http://java.sun.com/jsf/core" >

< ui:composition

template = "/WEB INF/facelets/templates/template.xhtml" >

< ui:define

name = "content" >

< p > Esta

parte

conforma

la

pagina

compuesta . < / p >

< / ui:define >

< / ui:composition >

< / html >

Ingeniera deWeb

A continuacin mejoraremos nuestro proyecto, agregando una hoja de estilos, para ello crearemos
un el folder resources y dentro de este el folder css (donde crearemos nuestro archivo con los
estilos principales) y el folder images, para almacenar las imgenes que necesitemos, tal como se
muestra a continuacion:
Click derecho en el folder css y crear un archivo con extensin
css llamado default.css, y agregar el
No olvide eliminar los estilos de los archivos header.xhtml y footer.xhtml y modificar el archivo
template.xhtml con el siguiente cdigo
< h:head > h:outputStylesheet name="default.css"

siguiente cdigo:

#header {

float :

left ;

font size : 32 px ;

width :

100 % ;

line height : 48 px ;

margin :

0 px

auto ;

background color :

navy ;

color :

white ;

text align :

center ;

}

#content {

background color :

#04859d ;

}

#footer {

float :

left ;

width :

100 % ;

background color :

navy ;

color : white ;

text align :

center ;

}

Ingeniera deWeb

<
<
<title
Bibliotecario
library="css"/>
><ui:insert name="title">Sistema de Control
</ui:insert></title>
/ h:head >
3. Configurando la conexin a la base de datos desde
eclipse
Para realizar esta etapa del tutorial, primero se debe tener instalado el DBMS MySQL Server y tener ubicado
el conector correspondiente, el conector se puede obtener
de la direccin: http://www.mysql.com/downloads/connector/j/, utilizaremos la versin
5.1.20 (la ultima disponible cuando se realizo este tutorial).
Instalado ya MYSQL, abrir una consola MySQL y crear la base de datos BIBLIOTECADB

Cierre la consola.
En el Data Source Explorer de Eclipse, click derecho en Database Connections y hacer click en new,
seleccionar el connection profile MySQL y colocar el nombre del perfil de conexin a bibliotecadb luego
hacer click en next, tal como se muestra en la figura:

En la ventana New Connection Profile, hacer click en el botn New Driver Definition en la ventana
Available drivers templates, seleccionar MySQL JDBC Driver versin 5.1. luego click en la ficha JAR List,
seleccionar el conector registrado por default y eliminarlo (Remove JAR/Zip), luego hacer click en el
boton Add JAR/Zip, como se muestra a continuacin:
Ingeniera deWeb

A travs del explorador seleccionar el conector correspondiente mysqlconnectorjava5.1.20bin y
seleccionarlo.

Hacer click en abrir, luego click en Ok de la ventana Driver definition.
Con el conector ya configurado, procedemos a registrar las propiedades de la conexin a la base de
datos, ingresando el nombre de la base de datos, la url, el usuario y password, para verificar que existe
conexin, hacer click en el botn Test Connection, posteriormente, hacer click en finish, segn como se
detalla en la siguiente figura:

Ingeniera deWeb

En el Data Source Explorer se puede observar la conexin realizada:

Para crear las tablas en la base de datos, ejecutar el script sql proporcionado, desde la perspectiva
Database Development, a travs del SQL scrapbook

Ingeniera deWeb

4. Creando la aplicacin EJB y las clases entidad
A continuacin detallaremos los pasos necesarios para crear nuestra aplicacin EJB, a travs de la cual
se tendr acceso a los datos desde nuestra aplicacin web previamente desarrollada.
Con la perspectiva Java EE activa, desde el men File>new, seleccionar EJB Project, en dicha ventana
ingresar el nombre de nuestro proyecto JSFLab04EJB, verificar que el Target runtime sea GlassFish
3.1.2, y hacer click en el botn Modify de Configuration, se abre la ventana Project Faces, donde
agregaremos a nuestro proyecto la Faceta JPA, que nos permitir utilizar la API de persistencia JPA, tal
como se muestra a continuacin:

Luego hacemos click en Ok, y en la ventana EJB Project hacemos click en next>next, abrindose la
ventana JPA Facet, configurndolo segn lo mostrado, y para finalizar haciendo click en finish, tal como
se muestra a continuacin:

Ingeniera deWeb
Podemos observar que se ha creado el proyecto

En el folder ejbModule hacemos click derecho en new y seleccionamos JPA Entities from Tables en la
ventana Select Tables, seleccionamos las tablas y hacemos click en next:

En la siguiente ventana verificamos la correcta asociacin de tablas y presionamos next, en la ventana
Customize Default Entity Generation configuramos key generator y Package y hacemos click en finish,
tal como se muestra a continuacion:
Ingeniera deWeb

Eclipse creara clases entidad por cada tabla, el resultado es el siguiente:

Ahora que hemos creado nuestras clases entidad, crearemos la lgica del negocio, en el que iremos
creando nuestros java beans llamados EJBs. Antes de crear nuestros EJBs, crearemos un nombre de
origen de datos JNDI.
5. Creando y configurando un origen de datos JNDI para
MySQL en GlassFish 3.1.2 Server
En esta parte crearemos un nombre de origen de datos JNDI para que trabaje con nuestros
EJBs(Enterprise Java Beans).
Lo primero que hay que hacer es copiar el archivo mysqlconnectorjava5.1.20bin.jar en el folder lib
del servidor GlassFish. La ruta de acceso debe tener este aspecto: glassfish3\glassfish\lib. Reiniciar
eclipse y hacer lo siguiente:
Ingeniera deWeb
En la parte inferior en la ficha Servers, en la ventana de eclipse click derecho en GlassFish 3.1.2,
seleccionar GlassFish > View Admin Console. (Recuerde que GlassFish debe estar iniciado)

Esto abrir la consola de administracion en la ventana del navegador. Una vez abierto, en el panel del
lado izquierdo bajo Resources, click en JDBC y en JDBC Connection Pools. En el lado derecho click en el
botn new.

En la ventana New JDBC Connection Pool, ingresar el Pool Name MYSQL_Pool, seleccionar
javax.sql.DataSource como Resource Type, y MySQL como Database Driver Vendor. En la esquina
superior izquierda hacer click en el boton next.

En el listado de propiedades adicionales, encuentra las siguientes propiedades y completar como sigue:
Url: jdbc:mysql://:3306/bibliotecadb
URL: jdbc:mysql://:3306/bibliotecadb
Port: 3306
DatabaseName: el nombre de tu base de datos (en nuestro caso bibliotecadb)
ServerName: localhost
User: root
Password: el password de MySQL

Ingeniera deWeb
Click en finish y veremos el pool creado en la lista, haga click y luego click en el botn ping para probar
si el pool ha sido creado satisfactoriamente. Sino fuese el caso, revisar las propiedades otra vez.

Debajo de JDBC click en JDBC Resources, click en new. En la ventana New JDBC Resource seleccionar
MYSQL_Pool desde Pool Name, y colocar el nombre JNDI jdbc/bibliotecadsn; no olvide hacer click en
Ok en la esquina superior derecha.

Ahora que ya tenemos creado nuestro DataSource, configuraremos nuestro archivo persistence.xml
para accesar a esta fuente de datos. Abre tu persistence.xml, que se encuentra dentro del folder JPA
Content.

En las opciones de navegacion del archive xml, click en Connection y realizar los cambios que se
muestran en la siguiente figura:

Grabar los cambios y verificar que el archive xml en la ficha Source sea similar a:

Ingeniera deWeb

En el cdigo se ha especificado una unidad de persistencia llamada JSFLab04EJB. Como tipo de
transaccin utilizaremos JTA (Java Transaction API). Como JTA DataSource, se ha especificado
jdbc/bibliotecadsn, que nosotros creamos con anterioridad, y finalmente tenemos especificado
nuestras clases entidad que han sido mapeadas de la base de datos.
6. Creando la lgica de la aplicacin
Los EJB que conforman la capa modelo y son responsables de la lgica de la aplicacin se reparten en
dos paquetes (ejb.dao, ejb.negocio).
La distincin entre ambos paquetes se debe a su orientacin. El paquete ejb.dao contiene EJB
orientados principalmente a dar soporte a los casos de uso tpicos en las tareas de mantenimiento de
una Base de Datos (operaciones CRUD [create, read, update, delete]: acceso, altas, bajas y
modificaciones). El paquete ejb.negocio ofrece soporte a casos de uso un poco ms especficos de ms
alto nivel que hacen uso los EJBs del anterior paquete.
En ambos casos se ha seguido la misma convencin de nombrado:
XxxxDAO.java XxxxService.java: Clase de implementacin del EJB (@Stateless o @Stateful)
XxxxDAOLocal.java XxxxServiceLocal.java: Interfaz local del EJB (@Local)
XxxxDAORemote.java XxxxServiceRemote.java: Interfaz remoto del EJB (@Remote) Por
simplicidad ambas interfaces (local y remota) coinciden, aunque no suele ser lo habitual. Paquete
ejb.dao
El paquete ejb.dao provee de EJBs para implementar las operaciones bsicas sobre las entidades que
componen la aplicacin.
La funcionalidad ofrecida por este conjunto de EJB se corresponde de un modo genrico con el patrn
DAO (Data Access Object), que oculta las tecnologas y el modo de acceso a los datos, delegando, en
este caso, las operaciones concretas en el EntityManager de JPA.
En este caso se ha definido un DAO genrico (GenericDAO) con operaciones bsicas (crear, buscar por
ID, actualizar, borrar y otros mtodos comunes). De esta clase heredan los dems EJBs (y sus interfaces
local y remoto), aadiendo nuevas operaciones, usualmente operaciones de bsqueda especficas.
Como ejemplo implementaremos las clases GenericDAO y UsuarioDAO, las otras clases seguirn la
misma estructura.
GenericDAO: Operaciones bsicas sobre las entidades (independientes de la Entidad concreta)
UsuarioDAO: Operaciones sobre Usuarios.

Paquete ejb.negocio
En este paquete se incluyen EJBs que implementan caso de uso especficos de la aplicacin. En general
proveen de operaciones de mayor complejidad que las del paquete ejb.dao, responsabilizndose de
coordinar las invocaciones de otros EJBs encargados del manejo de datos. En este caso se implementa
un patrn Service Facade puro.
Ingeniera deWeb
GestorUsuariosService: EJB sin estado responsable de la autenticacin y de la gestin de usuarios
(creacin de nuevos Usuarios, junto con la alta de su respectivo Usuario, y modificacin de los datos del
usuario)
Ahora crearemos un clase interfaz GenericDAOInterface y posterioremente la clase GenericDAO,
haciendo click derecho en el paquete ejbModule de nuestro proyecto EJB y click en New > Interface,
ingresar el nombre del paquete 'ejb.beans, el nombre de interfaz GenericDAOInterface y luego click en
finish.

El cdigo de la interfaz GenericDAOInterface, ser:
Creada la interfaz GenericDAOInterface procedemos a crear la clase GenericDAO, haciendo click derecho en
el paquete ejb.dao, new> Class, luego ingresar el nombre de la clase GenericDAO, en la opcin Interfaces
agregar la interfaz ejb.dao.GenericDAOInterface<T>, se finaliza haciendo click en
finish.
package

ejb.dao;

import

java.util.List;

public

interface

GenericDAOInterface<T>

{

public

void

create(T

entity);

public

void

delete(T

entity);

public

T

update(T

entity)

;

public

T

findByID(Object

entityID);

public

List<T>

findAll();

public

int

count();

}

Ingeniera deWeb

El cdigo fuente de la clase GenericDAO, es:
package ejb.dao;
import
java.lang.reflect.ParameterizedType;
import java.util.List;
import javax.persistence.EntityManager; import
javax.persistence.PersistenceContext; import
javax.persistence.criteria.CriteriaQuery;
public class GenericDAO<T> implements GenericDAOInterface<T>
{
private final static String UNIT_NAME = "JSFLab04EJB"; //Nombre de la Unidad de persistencia
@PersistenceContext(unitName = UNIT_NAME)
protected EntityManager em;

@Override
public void create(T entity) {
em.persist(entity); //crea una tupla en la bd
}

@Override
public void delete(T entity) {
T entityToBeRemoved = em.merge(entity);
em.remove(entityToBeRemoved); //elimina una tupla en la bd
}

@Override
public T update(T entity) {
return em.merge(entity); // Actualiza los datos de "entidad" en su correspondiente tupla BD
}

@SuppressWarnings("unchecked")
@Override
public T findByID(Object entityID) {
Class<T> entityClass = (Class<T>) ((ParameterizedType)
getClass().getGenericSuperclass()).getActualTypeArguments()[0];
// Identifica la clase real de las entidades gestionada por este objeto (T.class)
return em.find(entityClass, entityID); //retorna un objeto que coincide con el ID
}

@Override
@SuppressWarnings({ "unchecked", "rawtypes" })
Ingeniera deWeb
public List<T> findAll() { //Devuelve la lista de objetos T
CriteriaQuery cq = em.getCriteriaBuilder().createQuery();
cq.select(cq.from(entityClass));
return em.createQuery(cq).getResultList();
}

@Override
@SuppressWarnings({ "rawtypes", "unchecked" })
public int count() { //devuelve la cantidad de objetos almacenados en la bd
javax.persistence.criteria.CriteriaQuery cq = em.getCriteriaBuilder().createQuery();
javax.persistence.criteria.Root<T> rt = cq.from(entityClass);
cq.select(em.getCriteriaBuilder().count(rt));
javax.persistence.Query q = em.createQuery(cq);
return ((Long) q.getSingleResult()).intValue();
} }

Ahora crearemos nuestros EJBs. Para crear un enterprise java bean, click derecho en el paquete
ejbModule>ejb.dao de nuestro proyecto EJB y click New > Other. De la lista de asistentes seleccionar
Session Bean (EJB 3.x) bajo EJB y hacer click en Next.

Ingresar el nombre de la clase UsuarioDAO y click en el botn browser de Superclass, buscar la clase
GenericDAO que pertenezca al paquete ejb.dao y seleccionarlo. Luego seleccionar 'State type' como
'Stateless' tambien check en Local para crear una interfaz local y hacer click en finish.

Se ha creado la clase UsuarioDAO y su interfaz UsuarioDAOLocal, ahora indicaremos las operaciones a
implementar en la interfaz, ingresando el siguiente cdigo tanto en la interfaz como en la clase:
Cdigo para la interfaz UsuarioDAOLocal
Ingeniera deWeb

De manera similar implementar para las otras clases entidad.
Ahora crearemos la clase GestorUsuariosService y su interfaz dentro de un paquete ejb.negocio, como
se muestra:

Ingeniera deWeb
Cdigo para la interfaz GestorUsuariosServiceLocal
package ejb.negocio;

import javax.ejb.Local;
import entidades.Usuario;

@Local
public interface GestorUsuariosServiceLocal {
boolean autenticarUsuario(String login, String password);
Usuario actualizarPassword(int idUsuario, String password);
boolean existeUsuario(String login);
Usuario actualizarUltimoAcceso(int idUsuario);
}

Cdigo para la clase GestorUsuariosService
Ingeniera deWeb

Nuestro proyecto EJB quedara como se muestra a continuacion:
Ingeniera deWeb

7. Implementando un CRUD con JSF 2.0 en una pagina
web

En los puntos previos hemos creado nuestra lgica del negocio a travs de EJBs, ahora vamos a crear
nuestra aplicacin web.
Como ejemplo se creara un facelet mantenimientoUsuarios.xhtml que nos permita listar los usuarios
registrados; adems tambin crearemos otros facelets que nos permitan modificar y agregar nuevos
usuarios.
Primero agregaremos un botn en la pgina index.xhtml, que nos permita llamar al facelet
mantenimientoUsuarios.xhtml, el cdigo es:

<h:form>
<h1> Opciones</h1>
<h:commandButton action="usuarios/mantenimientoUsuarios" value="Mantenimiento de Usuarios" />
</h:form> </ui:define>

Al ejecutar nuestro proyecto, se vera as:

Ahora en nuestro proyecto web crearemos nuestra lgica web usando beans administrados (managed
bean) que nos permitan accesar a la lgica del negocio desde los facelets.
Por lo tanto, hacer click derecho en el paquete src y crear una nueva clase haciendo click en New >
class. Dar el nombre del paquete web.beans, y el nombre de la clase UsuarioManagedBean, y click
finish.
Ingeniera deWeb

El cdigo para la clase UsuarioManagedBean, es:

Ingeniera deWeb
package web.beans;

import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import ejb.dao.UsuarioDAOLocal; import
entidades.Usuario;

@ManagedBean (name = "usuarioMB")
@SessionScoped
public class UsuarioManagedBean {
private Usuario usuario = new Usuario();
@EJB
UsuarioDAOLocal servicioUsuarios;

public Usuario getUsuario() {
return usuario;
}

public void setUsuario(Usuario usuario) {
this.usuario = usuario;
}

public List<Usuario> listarUsuarios() {
return servicioUsuarios.findAll();
}

public String nuevoUsuario( ) {
servicioUsuarios.create(usuario);
return "mantenimientoUsuarios";
}

public void reset() {
usuario = new Usuario();
}

En el cdigo anterior hemos inyectado nuestro EJB UsuarioDAOLocal usando la anotacin @EJB. Esto
permite acceder a los EJBs directamente en nuestra clase ManagedBean. Como se puede ver hemos
llamado a distintos mtodos directamente de la interfaz UsuarioDAOLocal.java.
En los pasos siguientes crearemos nuestra pgina web para dar mantenimiento a los usuarios. Click
derecho en el folder WebContent y crear un folder usuarios luego crear una pgina compuesta
mantenimientoUsuarios.xhtml, dentro de WebContent>usuarios y colocar el cdigo siguiente:

public

void

eliminarUsuario( int

idUsuario)

{

Usuario

us

=

servicioUsuarios .findByID(idUsuario);

servicioUsuarios .delete(us);

}

public

String

actualizarUsuario(){

servicioUsuarios .update( usuario ; )

return

( "mantenimientoUsuarios" ) ;

retorna //

el

nombre

del

facelet

para

la

navegacion

}

}

Ingeniera deWeb
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="../WEBINF/facelets/templates/template.xhtml">
<f:view>
<h:form>
<h1><h:outputText value="Listado de Usuarios"/></h1>
<h:dataTable value="#{usuarioMB.listarUsuarios()}" var="item">
<h:column>
<h:outputText value="IdUsuario"/>
</f:facet>
<h:outputText value="#{item.idUsuario}"/>
</h:column>
<h:column>
<h:outputText value="Nombre"/>
</f:facet>
<h:outputText value="#{item.nombreUsuario}"/>
</h:column>
<h:column>
<h:outputText value="Apellidos"/>
</f:facet>
<h:outputText value="#{item.apellidoUsuario}"/>
</h:column>
<h:column>
<h:outputText value="Direccion"/>
</f:facet>
<h:outputText value="#{item.direccionUsuario}"/>
</h:column>
<h:column>
<h:outputText value="Correo Electronico"/>
</f:facet>
<h:outputText value="#{item.emailUsuario}"/>
</h:column>
<h:column>
<h:outputText value=""/>
</f:facet>
<h:commandButton action="editarUsuario" value="Editar">
<f:setPropertyActionListener target="#{usuarioMB.usuario}" value="#{item}" />
</h:commandButton>
<h:outputText value=" "/>

Ahora vamos a probar nuestra aplicacin, para ello tenemos que crear un proyecto empresarial, que
estar compuesto de los proyectos JSFLab04EJB y JSFLab04WEB, haciendo click en el men File > New
> Enterprise Application Project y asignar el nombre JSFLab04EAR y hacer click en Next.

< h:commandButton action = "#{usuarioMB.eliminarUsuario(item.idUsuario)}"

value = "Eliminar" />

/ < h:column >

< / h:dataTable >

< br />

< h:commandButton

action = "crearUsuario"

value = "Nuevo

Usuario" >

/ < h:commandButton >

< / h:form >

/ < f:view >

< / ui:define >

< / ui:composition >

< / html >

Ingeniera deWeb

Luego seleccionar los proyectos depedientes de este proyecto y click en Finish:

Ahora procedemos a ejecutar el proyecto empresarial el resultado obtenido seria:

Y al hacer click en el botn Mantenimiento de Usuarios, el resultado obtenido seria:
Ingeniera deWeb

Completamos la funcionalidad de la aplicacin implementado los facelets crearUsuario.xhtml y
editarUsuario.xhtml, crendolos dentro del folde usuarios

El cdigo fuente para el facelet crearUsuario.xhtml ser:
<f:view>
<h2>Registro de Nuevos Usuarios</h2>
<h:form id="form">
<h:outputLabel for="nombre">Nombre</h:outputLabel>
<h:inputText id="nombre" value="#{usuarioMB.usuario.nombreUsuario}" required="true">
<f:ajax event="blur" render="nombreMessage" />
</h:inputText>
<h:message id="nombreMessage" for="nombre" />
<h:outputLabel for="apellidos">Apellidos</h:outputLabel>
<h:inputText id="apellidos" value="#{usuarioMB.usuario.apellidoUsuario}" required="true">
<f:ajax event="blur" render="apellidosMessage" />
</h:inputText>
<h:message id="apellidosMessage" for="apellidos" />
<h:outputLabel for="direccion">Direccion</h:outputLabel>
<h:inputText id="direccion" value="#{usuarioMB.usuario.direccionUsuario}" required="true">
<f:ajax event="blur" render="direccionMessage" />
</h:inputText>
<h:message id="direccionMessage" for="direccion" />
<h:outputLabel for="email">Email</h:outputLabel>
<h:inputText id="email" value="#{usuarioMB.usuario.emailUsuario}" required="true">
<f:ajax event="blur" render="emailMessage" />
</h:inputText>
<h:message id="emailMessage" for="email" />
<h:outputLabel for="telefono">Telefono</h:outputLabel>
<h:inputText id="telefono" value="#{usuarioMB.usuario.telefonoUsuario}" required="true">
<f:ajax event="blur" render="telefonoMessage" />
</h:inputText>
<h:message id="telefonoMessage" for="telefono" />
<h:outputLabel for="password">Password</h:outputLabel>
<h:inputSecret id="password" value="#{usuarioMB.usuario.passwordUsuario}" required="true" redisplay="true">
<f:ajax event="blur" render="passwordMessage" />
</h:inputSecret>
Ingeniera deWeb
<h:message id="passwordMessage" for="password" /> <h:panelGroup />
</h:panelGrid>
<h:commandButton value="Grabar" action="#{usuarioMB.nuevoUsuario()}" >
</h:commandButton>
<h:commandButton value="reset" action="#{usuarioMB.reset}" >
<f:ajax execute="@form" render="@form" />
</h:commandButton>
<h:messages globalOnly="true" layout="table" />
</h:form>
</f:view>
</ui:define>
</ui:composition>
</html>

El cdigo para el facelet editarUsuario.xhtml ser:

<f:view>
<h2>Editar Usuario</h2>
<h:form id="form">
<h:outputLabel for="nombre">Nombre</h:outputLabel>
<h:inputText id="nombre" value="#{usuarioMB.usuario.nombreUsuario}" required="true">
<f:ajax event="blur" render="nombreMessage" />
</h:inputText>
<h:message id="nombreMessage" for="nombre" />
<h:outputLabel for="apellidos">Apellidos</h:outputLabel>
<h:inputText id="apellidos" value="#{usuarioMB.usuario.apellidoUsuario}" required="true">
<f:ajax event="blur" render="apellidosMessage" />
</h:inputText>
<h:message id="apellidosMessage" for="apellidos" />
<h:outputLabel for="direccion">Direccion</h:outputLabel>
<h:inputText id="direccion" value="#{usuarioMB.usuario.direccionUsuario}" required="true">
<f:ajax event="blur" render="direccionMessage" />
</h:inputText>
<h:message id="direccionMessage" for="direccion" />
<h:outputLabel for="email">Email</h:outputLabel>
<h:inputText id="email" value="#{usuarioMB.usuario.emailUsuario}" required="true">
<f:ajax event="blur" render="emailMessage" />
</h:inputText>
<h:message id="emailMessage" for="email" />
<h:outputLabel for="telefono">Telefono</h:outputLabel>
<h:inputText id="telefono" value="#{usuarioMB.usuario.telefonoUsuario}" required="true">
<f:ajax event="blur" render="telefonoMessage" />
</h:inputText>
<h:message id="telefonoMessage" for="telefono" />
<h:outputLabel for="password">Password</h:outputLabel>
<h:inputSecret id="password" value="#{usuarioMB.usuario.passwordUsuario}" required="true" redisplay="true">
<f:ajax event="blur" render="passwordMessage" />
</h:inputSecret>
<h:message id="passwordMessage" for="password" />
<h:panelGroup />
</h:panelGrid>
<h:commandButton value="Actualizar" action="#{usuarioMB.actualizarUsuario()}" >
</h:commandButton>
<h:commandButton value="reset" action="#{usuarioMB.reset}" >
<f:ajax execute="@form" render="@form" />
</h:commandButton>
<h:messages globalOnly="true" layout="table" />
</h:form>
</f:view>
</ui:define>
</ui:composition>
</html>

Guia Iweb

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guia Iweb

Загружено:

Авторское право:

Доступные форматы

Departamento de Sistemas, Estadistica e Informatica

Facultad de Ingeniera UNC

Вам также может понравиться