CARGAR TABLA JSF (DATATABLE) CON ARRAYLIST, EN FORMA DINAMICA

Atendiendo a varios pedidos de amigos, hoy haremos otro post sobre jsf, en este caso llenaremos un datatable jsf dinmicamente a travez de unArrayList, en donde en una pagina index.xhtml tedremos una tabladatatable y los campos de entrada inputtext, en los cuales introduciremos los datos a llenar en nuestra tabla.A continuacin les presento una imagen del resultado final que obtendremos.

Para tener un mayor entendimiento podemos revisar los siguientes posts:

1. 2. 3. hola mundo 2con JSF hola mundo con JSF 2 navegacion con JSF

Bien ahora empezamos, como siempre como ide utilizaremos Netbeans, en este caso la versin 6.8, sobre un entorno Windows. En primer lugar nos creamos un proyecto, yo lo llame AplicacionWebJSF

Elegimos el servidor

Y por ultimo para la creacin del proyecto elegimos en framework, en este caso Java Server Faces

Bien ya tenemos el proyecto ahora, crearemos nuestro primer Beans que lo llamaremos Persona, este beans es simplemente una clase Java, que estar ubicada en el paquete por defecto de nuestro proyecto

Nuestra clase persona es un beans que cuenta con sus propiedades nombre,

apellido y direccin con sus correspondientes metodos accesores (get y set), tiene el siguiente cdigo
1. 2. public class Persona { 3. private String nombre; 4. private String apellido; 5. private String direccion; 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. } } public void setNombre(String nombre) { this.nombre = nombre; } public String getNombre() { return nombre; } public void setDireccion(String direccion) { this.direccion = direccion; } public String getDireccion() { return direccion; } public void setApellido(String apellido) { this.apellido = apellido; } public String getApellido() { return apellido; } public Persona(String nombre, String apellido, String direccion){ this.nombre = nombre; this.apellido = apellido; this.direccion = direccion; public Persona() { }

Ya tenemos la clase persona, ahora crearemos otra clase BackBeans que la llamaremos Lista, esta ser la encargada de trabajar de tras de nuestro index.xhtml, ser la clase asociada a nuestra pagina, creamos la clase de la misma manera que la clase Persona que tambin estar ubicada en el paquete por defecto, la clase lista contiene el siguiente codigo
1. import java.util.ArrayList; 2. 3. public class Lista { 4. 5. 6. 7. 8. 9. 10. 11. private String txtNombre; private String txtApellido; private String txtDireccion; private String txtDireccion3; private ArrayList<Persona> lista= new ArrayList<Persona>(){}; private Persona persona; public Lista() { }

12. public void cargarLista(){ 13. persona= new Persona(txtNombre, txtApellido, txtDireccion); 14. this.lista.add(persona); 15. } 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. } public void setTxtDireccion(String txtDireccion) { this.txtDireccion = txtDireccion; } public String getTxtDireccion() { return txtDireccion; } public void setTxtApellido(String txtApellido) { this.txtApellido = txtApellido; } public String getTxtApellido() { return txtApellido; } public void setLista(ArrayList<Persona> lista) { this.lista = lista; } public ArrayList<Persona> getLista() { return lista; } public void setTxtDireccion3(String txtDireccion3) { this.txtDireccion3 = txtDireccion3; public String getTxtDireccion3() { return txtDireccion3;

39. 40. 41. 42. 43. 44. 45. 46. } 47.

} public String getTxtNombre() { return txtNombre; } public void setTxtNombre(String txtNombre) { this.txtNombre = txtNombre; }

En esta clase contamos con las siguientes propiedades

txtnombre, esta propiedad estar asociada al inputtext de la pagina index.xhtml, en donde se introduce el nombre. txtapellido, esta propiedad estar asociada al inputtext de la pagina index.xhtml, en donde se introduce el apellido. txtdireccion, esta propiedad estar asociada al inputtext de la pagina index.xhtml, en donde se introduce el direccion. lista, que es un ArrayList con la estructura de la clase Persona.

Por otro lado tenemos sus correspondientes mtodos accesores y un mtodo llamado cargarLista, que es el mtodo de capturar cuando se haga click en el botn y cargar a la lista un objeto Persona. Ahora crearemos el archivo de configuracin facesconfig.xml sobre el directorio WEB-XML

Nuestro facesconfig.xml contiene las siguientes lneas

1. 2. <?xml version='1.0' encoding='UTF-8'?> 3. <faces-config version="2.0" 4. 5. 6. 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"> 7. <managed-bean> 8. <managed-bean-class>Lista</managed-bean-class>

9. 10.

<managed-bean-name>lista</managed-bean-name> <managed-bean-scope>session</managed-bean-scope>

11. </managed-bean> 12. </faces-config>

En este configuramos la clase BackBeans para que pueda ser asociada a nuestro index.xhtml. Por ultimo modificaremos nuestro index.xhtml con las siguientes lneas
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml" 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. ></br> xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Ejemplo JSF</title> </h:head> <h:body> <h:outputText value="#{lista.txtDireccion3}"></h:outputText> <h:dataTable value="#{lista.lista}" var="lis"> <h:column> <f:facet name="header"> <h:outputText value="NOMBRE"/> </f:facet> <h:outputText value="#{lis.nombre}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="APELLIDO"/> </f:facet> <h:outputText value="#{lis.apellido}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="DIRECCION"/> </f:facet> <h:outputText value="#{lis.direccion}"/> </h:column> </h:dataTable> <br></br> <h:form> <h:outputLabel for="nombre"> Nombre </h:outputLabel> <h:inputText id="nombre" value="#{lista.txtNombre}"></h:inputText><br

34. 35. 36. 37. 38. 39. 40.

<h:outputLabel for="apellido"> Apellido </h:outputLabel> <h:inputText id="apellido" value="#{lista.txtApellido}"></h:inputText ><br></br> <h:outputLabel for="direccion"> Direccion </h:outputLabel> <h:inputText id="direccion" value="#{lista.txtDireccion}"></h:inputTe xt><br></br> <h:commandButton value="Agregar" action="#{lista.cargarLista}"></h:co mmandButton> </h:form> </h:body>

41. </html>

En este archivo solamente creamos la tabla, los campos de entrada y el boton de envio. Bien el rbol de nuestro proyecto queda de la siguiente manera

Ahora tansolamente, si es que todo lo hicimos bien nos queda ejecutar nuestro proyecto web: En la siguiente imagen observamos que se ejecuto bien

Ahora llenamos los campos de entrada

Le damos click en agregar

Obtenemos buenos resultados, pues se agrego a la tabla Agregamos otro

Bien con esto hemos realizado el llenado de un datatable de manera dinmica, ose interactuando con el servidor y la pagina actualizndose, espero que haya servido de

ayuda a alguien. A continuacin pongo para descarga el proyecto, si te sirvi solo comenta!!! Descarga proyecto.rar