Primeros pasos con JavaServer Faces usando Eclipse

Este tutorial ayuda a dar los primeros pasos con el absolutamente nuevo framework JavaServer Faces (JSF). Una aplicacin de ejemplo (una biblioteca) ser creada paso a paso ilustrando los diferentes elementos del framework. La aplicacin de ejemplo tendr las siguientes funcionalidades:

Mostrar una descripcin del libro (listado de libros) Agregar, editar y borrar un libro.

Generales
Autor: Sascha Wolski http://www.laliluna.de/tutorials.html Tutorials for Struts, EJB, xdoclet, JSF, JSP and eclipse. Traduccin: Sebastin Arechederreta Nota de la traduccin: Algunos terminos en ingls se mantienen para evitar confusiones con otras palabras. Las opciones de Eclipse no han sido traducidas ni las capturas de pantallas ni el cdigo fuente a fin de poder seguir otros materiales publicados en el sitio de laliluna. Fecha: 21 de Diciembre de 2004 Cdigo fuente: Los fuentes no incluyen archivos de proyecto de eclipse o bibliotecas. Cree un nuevo proyecto siguiendo el tutorial, agregue las bibliotecas tal cual se explica en el tutorial y luego copie el cdigo fuente en su nuevo proyecto. http://www.laliluna.de/assets/tutorials/first-java-server-faces-tutorial.zip Version PDF del Tutorial (ingls): http://www.laliluna.de/assets/tutorials/first-java-server-faces-tutorial-es.pdf Herramientas para el desarrollo. Eclipse 3.x MyEclipse plugin 3.8 (Una poderosa y barata extensin para Eclipse para desarrollo de Aplicaciones Web y EJB (J2EE). Creo que hay una versin de prueba disponible en MyEclipse.) Servidor de Aplicacin Jboss 3.2.5 Aqu se puede usar Tomcat si se quiere.

Creacin de un proyecto JavaServer faces

Cree un nuev proyecto web. File > New > Project.

Ponga un buen nombre y agregue las bibliotecas JSTL al proyecto.

Agregue las capacidadades JavaServer faces. Botn derecho sobre el proyecto y seleccione MyEclipse > Add JSF Capabilities.

La clase Book (Libro)

Agregue un nuevo paquete de.laliluna.tutorial.library y cree una nueva clase Book.

Abra la clase y agregue las siguientes propiedades privadas:

id author title

available

Genere los mtodos get y set para cada propiedad. Botn derecho sobre laventana de edicin y elija Source > Generate Getter- and Setter Methods.

Adems tiene que agregar un constructor, para que establezca las propiedades si inicializa una instancia del nuevo objeto. El siguiente cdigo muestra la clase book.
public class Book implements Serializable { // private private private private ------------------ Propiedades long id; String author; String title; boolean available; --------------------------------

// ------------------ Constructores ------------------------------public Book(){} public Book(long id, String author, String title, boolean available){ this.id = id; this.author = author; this.title = title; this.available = available; } // ------------------ Mtodos Get y set ---------------------

public String getAuthor() {

return author; } public void setAuthor(String author) { this.author = author; } public boolean isAvailable() { return available; } public void setAvailable(boolean available) { this.available = available; } public long getId() { return id; } public void setId(long id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; }

Agregue un get y set para la clase.

/** * Establece las propiedades * @param book */ public void setBook(Book book){ this.setId(book.getId()); this.setAuthor(book.getAuthor()); this.setTitle(book.getTitle()); this.setAvailable(book.isAvailable()); } /** * @return objeto book */ public Book getBook(){ return new Book(this.getId(), this.getAuthor(), this.getTitle(), this.isAvailable());

La clase database
Usamos una clase para obtener algunos datos de prueba sin necesidad de usar una base de datos. Descargue la aplicacin de ejemplo de este tutorial y copie la clase SimulateDB.java que est en la carpeta src/de/laliluna/tutorial/library/ en el paquete de.laliluna.tutorial.library.

La clase BookList
Cree una class BookList en el paquete de.laliluna.library. Esta clase incluye las propiedades de libros, que se presentan en la lista de libros. Genere los mtodos get y set para las propiedades de los

libros y cambie el mtodo get como sigue.

public class BookList { // ------------------------- Propiedades --------------------------Collection books; // ------------------------- Get y Set -------------------/** * @return collection de libros */ public Collection getBooks(){ SimulateDB simulateDB = new SimulateDB(); /* Obtiene el session map del contexto externo */ Map session = FacesContext.getCurrentInstance(). getExternalContext().getSessionMap(); /* Lies alle Bcher auf der simulierten Datenbank aus */ books = simulateDB.getAllBooks(session); } return books;

/** * @param books Los libros a definir. */ public void setBooks(Collection books) { this.books = books; }

Su explorador de paquete se parecer a la siguiente imagen.

Mtodos Action listener (interface de oyente)

Para permitir que el usuario pueda agergar, editar o boorar un libro, tenemos que incluir las funcionalidades apropiadas. Estas funcionalidades sern implementadas en mtodos / clases action listener. Si un evento ocurre (por ej.: un usuario hace clic en un enlace) un mtodo action listener

ser llamado y procesado. Abra la clase Book y agregue cuatro mtodos, que efectuen las siguientes funcionalidades.

Inicializar un libro Editar un libro Guardar un libro Borrar un libro

Inicializar un libro
/** * Inicia las propiedades de la clase con * @param event */ public void initBook(ActionEvent event){ /* * inicia el objeto book */ this.setBook(new Book()); null

Editar un libro
/** * Obtiene el libro a editar y lo asigna al bean * * @param event */ public void selectBook(ActionEvent event){ SimulateDB simulateDB = new SimulateDB(); /* * Obtiene el session map del contexto externo */ Map session = FacesContext.getCurrentInstance().getExternalContext(). getSessionMap(); /* * Encuentra el componente UIParameter component por expresin */ UIParameter component = (UIParameter) event.getComponent().findComponent ("editId"); /* * ajusta el valor del componente UIParameter */ long id = Long.parseLong(component.getValue().toString()); /* * obtiene el libro por id y lo pone en una propiedad loca */ this.setBook(simulateDB.loadBookById(id, session));

Guardar un libro
/** * Agrega o actualiza un libro en la base de datos simulada. * Si el id del libro no existe el libro se agregar * de lo contrario ser actualizado * * @param event */ public void saveBook(ActionEvent event){ SimulateDB simulateDB = new SimulateDB(); /* * Obtiene el session map del contexto externo */ Map session = FacesContext.getCurrentInstance().getExternalContext(). getSessionMap(); /* * Agrega o actualiza el libro en la base de datos simulada. */ simulateDB.saveToDB(this.getBook(), session);

Borrar un libro
/** * Elimina un libro de la base de datos simulada * * @param event */ public void deleteBook(ActionEvent event){ SimulateDB simulateDB = new SimulateDB(); /* * Obtiene el session map del contexto externo */ Map session = FacesContext.getCurrentInstance().getExternalContext(). getSessionMap(); /* * Encuentra el componente UIParameter por expresin */ UIParameter component = (UIParameter) event.getComponent().findComponent ("deleteId"); /* * ajusta el valo del componente UIParameter */ long id = Long.parseLong(component.getValue().toString()); /* * Elimina el libro por id */ simulateDB.deleteBookById(id, session);

El archivo faces-config.xml
El archivo faces-config.xml es el archivo de configuracin central de JavaServer faces. Aqu se define el flujo de trabajo de la applicacin (en que accin que sitio ser procesado) , el manejo de las clases bean por JSF y otras cosas ms. El flujo de trabajo de la aplicacin biblioteca es como se muestra a continuacin:

Definimos una regla de navegacin para esta flujo de trabajo. Abra el archivo faces-config.xml y agregue la siguiente configuracin.
<faces-config> <!-- Reglas de navegacin --> <navigation-rule> <description>Lista de libros</description> <from-view-id>/listBooks.jsp</from-view-id> <navigation-case> <from-outcome>editBook</from-outcome> <to-view-id>/editBook.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <description>Agrega o edita un libro</description> <from-view-id>/editBook.jsp</from-view-id> <navigation-case> <from-outcome>listBooks</from-outcome> <to-view-id>/listBooks.jsp</to-view-id> <redirect/> </navigation-case> </navigation-rule> </faces-config>

<navigation-rule>

Define una regla de navegacin

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

Define el archivo jsp para el que la regla de navegacin es relevante.

<navigation-case>

Define un caso de navegacin

<from-outcome>editBook</from-outcome>

Define el nombre para este caso de navegacin

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

Redirecciona al archivo JSP

<redirect/>

Todos los parmetros guardados en la solicitud se perdern cuando establezca esta marca. Si quiere acceder a las clases bean en sus archivos JSP, tiene que registrar las clases bean en facesconfig.xml Agregue el siguiente cdigo.
<!-- Gestin de beans --> <managed-bean> <description> Book bean </description> <managed-bean-name>bookBean</managed-bean-name> <managed-bean-class>de.laliluna.tutorial.library.Book</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <managed-bean> <description> BookList Bean </description> <managed-bean-name>bookListBean</managed-bean-name> <managed-bean-class>de.laliluna.tutorial.library.BookList</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>

<managed-bean>

Define un bean gestionado

<managed-bean-name>bookBean</managed-bean-name>

Define un nombre para el bean gestionado. Este nombre es el que se usa en el archivo JSP.
<managed-bean-class>de.laliluna.tutorial.library.Book</managed-bean-class>

Define la clase que representa el bean.

<managed-bean-scope>request</managed-bean-scope>

Define en que estructura el bean es guardado.

Creacin de archivos JSP

Como primer paso creamos un archivo JSP que se llame index.jsp, el cual llevar al usuario al listado de libros.

index.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

<jsp:forward page="/listBooks.faces" /> </body> </html>

El segundo paso ser crear el listado de libros.

listBooks.jsp
<%@ page language="java" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName() +":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Listado de libros</title> </head> <body> <f:view> <h:form id="bookList"> <h:dataTable id="books" value="#{bookListBean.books}" var="book" border="1"> <h:column> <f:facet name="header"> <h:outputText value="Autor"/> </f:facet> <h:outputText value="#{book.author}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Titulo"/> </f:facet> <h:outputText value="#{book.title}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Disponible"/> </f:facet> <h:selectBooleanCheckbox disabled="true" value="#{book.available}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Editar"/> </f:facet> <h:commandLink id="Edit" action="editBook" actionListener="#{bookBean.selectBook}"> <h:outputText value="Editar" /> <f:param id="editId" name="id" value="#{book.id}" /> </h:commandLink> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Eliminar"/>

</f:facet> <h:commandLink id="Delete" action="listBooks" actionListener="#{bookBean.deleteBook}"> <h:outputText value="Eliminar" /> <f:param id="deleteId" name="id" value="#{book.id}" /> </h:commandLink> </h:column> </h:dataTable> <h:commandLink id="Add" action="editBook" actionListener="#{bookBean.initBook}"> <h:outputText value="Agregar un libro" /> </h:commandLink> </h:form> </f:view> </body> </html>

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

Con la directiva taglib incluimos la biblioteca de marcas JSF

<f:view>

Confecciona un componente de vista. Todas las otras marcas deben estar incuidas dentro de este tag.
<h:form id="bookList">

Define un formulario HTML.

<h:dataTable id="books" value="#{bookListBean.books}" var="book" border="1">

Define una tabla HTML. La marca es usada para recorrer la lista de datos como un bucle for. El valor del parmetro asigna una lista de datos, en nuestro caso la lista de libros de la biblioteca. Con el parmetro var se define la variable usada para acceder a un elemento (un libro) de la lista con la marca (loop).
<h:column> <f:facet name="header"> <h:outputText value="Autor"/> </f:facet> <h:outputText value="#{book.author}" /> </h:column>

Muestra una columna con su cabecera. <f:facet name="header"> muestra la cabecera <h:outputText value="Autor"/> imprime una etiqueta en la cabecera. <h:outputText value="#{book.author}" /> referencia a la propiedad author del elemento actual de la lista.
<h:commandLink id="Edit" action="editBook" actionListener="#{bookBean.selectBook}">

Muestra un enlace HTML, que envia el formulario. El parmetro action define el caso de

navegacin, que tiene que ser procesado al enviar el formulario. En nuestro caso es el caso editBook, que hemos agregador antes en faces-config.xml. Asignamos el mtodo action listener al enlace con el parmetro actionListener. Despus que el usuario envie el formulario el mtodo ser procesado. El ltimo archivo JSP incluye un formulario para agregar o editar un libro.

editBook.jsp
<%@ page language="java" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName() +":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Agrega / Edita un libro</title> </head> <body> <f:view> <h:form> <h:inputHidden id="id" value="#{bookBean.id}"/> <h:panelGrid columns="2" border="1"> <h:outputText value="Autor:" /> <h:inputText id="author" value="#{bookBean.author}"> </h:inputText> <h:outputText value="Titulo:" /> <h:inputText id="title" value="#{bookBean.title}"> </h:inputText> <h:outputText value="Disponible:" /> <h:selectBooleanCheckbox id="available" value="#{bookBean.available}" /> </h:panelGrid> <h:commandButton value="Guardar" action="listBooks" actionListener="#{bookBean.saveBook}" /> </h:form> </f:view> </body> </html>

<h:inputHidden id="id" value="#{bookBean.id}"/>

Define un elemento oculto HTML. Value se refiere al bean bookBean que sera gestionado y su propiedad id que est indicada en el archivo faces-config.xml.
<h:panelGrid columns="2" border="1">

Muestra una tabla HTML con 2 columnas.

<h:inputText id="author" value="#{bookBean.author}">

Define un campo de texto HTML. Value se refiere a la propiedad author de nuestra clase Book.
<h:commandButton value="Guardar" action="listBooks" actionListener="#{bookBean.saveBook}" />

Define un botn de envo HTML con el valor Guardar y la accin listBooks. El mtodo action listener saveBook ser procesado si el usuario enva el formulario.

Prueba de la aplicacin
Inicie jboss y genere el proyecto como un Packaged Archive.

Llame al proyecto ahora http://localhost:8080/LibraryWeb/