Primeros pasos con JavaServer Faces usando Eclipse

Transcripción

1 Primeros pasos con JavaServer Faces usando Eclipse Este tutorial ayuda a dar los primeros pasos con el absolutamente nuevo framework JavaServer Faces (JSF). Una aplicación de ejemplo (una biblioteca) será creada paso a paso ilustrando los diferentes elementos del framework. La aplicación de ejemplo tendrá las siguientes funcionalidades: Mostrar una descripción del libro (listado de libros) Agregar, editar y borrar un libro. Generales Autor: Sascha Wolski Tutorials for Struts, EJB, xdoclet, JSF, JSP and eclipse. Traducción: Sebastián Arechederreta Nota de la traducción: Algunos terminos en inglés se mantienen para evitar confusiones con otras palabras. Las opciones de Eclipse no han sido traducidas ni las capturas de pantallas ni el código fuente a fin de poder seguir otros materiales publicados en el sitio de laliluna. Fecha: 21 de Diciembre de 2004 Código 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 código fuente en su nuevo proyecto. Version PDF del Tutorial (inglés): Herramientas para el desarrollo. Eclipse 3.x MyEclipse plugin 3.8 (Una poderosa y barata extensión para Eclipse para desarrollo de Aplicaciones Web y EJB (J2EE). Creo que hay una versión de prueba disponible en MyEclipse.) Servidor de Aplicación Jboss Aquí se puede usar Tomcat si se quiere.

2 Creación de un proyecto JavaServer faces Cree un nuev proyecto web. File > New > Project. Ponga un buen nombre y agregue las bibliotecas JSTL al proyecto.

3 Agregue las capacidadades JavaServer faces. Botón derecho sobre el proyecto y seleccione MyEclipse > Add JSF Capabilities.

4

5 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

6 available Genere los métodos get y set para cada propiedad. Botón derecho sobre laventana de edición y elija Source > Generate Getter- and Setter Methods. Además tiene que agregar un constructor, para que establezca las propiedades si inicializa una instancia del nuevo objeto. El siguiente código muestra la clase book. public class Book implements Serializable { // Propiedades private long id; private String author; private String title; private 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; // Métodos Get y set public String getauthor() {

7 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 book public void setbook(book book){ this.setid(book.getid()); this.setauthor(book.getauthor()); this.settitle(book.gettitle()); this.setavailable(book.isavailable()); * 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 aplicación 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 métodos get y set para las propiedades de los

8 libros y cambie el método get como sigue. public class BookList { // Propiedades Collection books; // Get y Set * 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 Bücher auf der simulierten Datenbank aus books = simulatedb.getallbooks(session); return books; * books Los libros a definir. public void setbooks(collection books) { this.books = books; Su explorador de paquete se parecerá a la siguiente imagen. Métodos 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 serán implementadas en métodos / clases action listener. Si un evento ocurre (por ej.: un usuario hace clic en un enlace) un método action listener

9 será llamado y procesado. Abra la clase Book y agregue cuatro métodos, 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 null event public void initbook(actionevent event){ * inicia el objeto book this.setbook(new Book()); Editar un libro * * Obtiene el libro a editar y lo asigna al bean * 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 expresión 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));

10 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 * 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 * 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 expresión 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);

11 El archivo faces-config.xml El archivo faces-config.xml es el archivo de configuración central de JavaServer faces. Aquí se define el flujo de trabajo de la applicación (en que acción que sitio será procesado), el manejo de las clases bean por JSF y otras cosas más. El flujo de trabajo de la aplicación biblioteca es como se muestra a continuación: Definimos una regla de navegación para esta flujo de trabajo. Abra el archivo faces-config.xml y agregue la siguiente configuración. <faces-config> <!-- Reglas de navegación --> <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 navegación <from-view-id>/listbooks.jsp</from-view-id> Define el archivo jsp para el que la regla de navegación es relevante. <navigation-case> Define un caso de navegación <from-outcome>editbook</from-outcome>

12 Define el nombre para este caso de navegación <to-view-id>/listbooks.jsp</to-view-id> Redirecciona al archivo JSP <redirect/> Todos los parámetros guardados en la solicitud se perderán 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 código. <!-- Gestión 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. Creación 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>

13 <jsp:forward page="/listbooks.faces" /> </body> </html> El segundo paso será crear el listado de libros. listbooks.jsp page language="java" %> taglib uri=" prefix="h" %> taglib uri=" 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"/>

14 </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=" prefix="h" %> taglib uri=" 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 parámetro asigna una lista de datos, en nuestro caso la lista de libros de la biblioteca. Con el parámetro 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 parámetro action define el caso de

15 navegación, 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 método action listener al enlace con el parámetro actionlistener. Después que el usuario envie el formulario el método será procesado. El último archivo JSP incluye un formulario para agregar o editar un libro. editbook.jsp <%@ page language="java" %> <%@ taglib uri=" prefix="h" %> <%@ taglib uri=" 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.

16 <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 botón de envío HTML con el valor Guardar y la acción listbooks. El método action listener savebook será procesado si el usuario envía el formulario. Prueba de la aplicación Inicie jboss y genere el proyecto como un Packaged Archive. Llame al proyecto ahora