Está en la página 1de 8

MODIFICAR Y ELIMINAR FILAS DE UN TABLA DATATABLE JSF

Luego de unas pequeas vacaciones retornamos a los posts, en esta ocasin continuaremos con el post anterior sobre JSF, en la cual seleccionbamos una fila de un datatable jsf y tales datos lo mostrbamos en campos de texto inputtext jsf, una vez seleccionados podremos modificar o eliminar tales datos y luego reflejar los cambios en la tabla datatable jsf. Para estar al tanto de este simple ejemplo podemos revisar el post anterior

SELECCIONAR FILA EN TABLA DATATABLE JSF

En el post anterior tenamos nuestra clase java llamada lista, lo cual es nuestro backbean que trabaja con nuestro index.xhtml, en esta clase seencuentran los mtodos necesarios para agregar una fila a nuestra tabla o bien seeccionarla, ahora agregaremos 2 metodos mas para poder eliminar y modificar una fila de la tabla datatable jsf. A continuacin tenemos el cdigo de nuestra clase lista.

1. import java.util.ArrayList; 2. import javax.faces.component.html.HtmlDataTable; 3. 4. public class Lista { 5. 6. 7. 8. 9. 10. 11. 12. 13. private String txtNombre; private String txtApellido; private String txtDireccion; private ArrayList<Persona> lista= new ArrayList<Persona>(){}; private Persona persona; private int index; private HtmlDataTable tabla; public Lista() { persona= new Persona();

14.

15. public void cargarLista(){ 16. persona= new Persona(txtNombre, txtApellido, txtDireccion); 17. this.lista.add(persona); 18. 19. } 20. public void seleccionLista(){ 21. 22. 23. 24. 25. 26. } 27. public void eliminarLista(){ 28. 29. } 30. public void modificarLista(){ 31. 32. 33. 34. 35. 36. 37. 38. 39. } 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. } 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 setTabla(HtmlDataTable tabla) { this.tabla = tabla; } public HtmlDataTable getTabla() { return tabla; } persona.setNombre(this.txtNombre); persona.setApellido(this.txtApellido); persona.setDireccion(this.txtDireccion); try{ this.lista.set(index, persona); }catch(Exception e){ System.out.println(e); this.lista.remove(persona); persona=(Persona) tabla.getRowData(); this.index=tabla.getRowIndex(); this.txtApellido=persona.getApellido(); this.txtNombre=persona.getNombre(); this.txtDireccion=persona.getDireccion();

59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. }

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

En esta clase se encuentran los dos nuevos mtodos


1. public void eliminarLista(){ 2. 3. } 4. public void modificarLista(){ 5. 6. 7. 8. 9. 10. 11. 12. 13. } } persona.setNombre(this.txtNombre); persona.setApellido(this.txtApellido); persona.setDireccion(this.txtDireccion); try{ this.lista.set(index, persona); }catch(Exception e){ System.out.println(e); this.lista.remove(persona);

En el mtodo eliminarLista() solamente utilizamos el mtodo remove del ArrayList (del tipo persona) lista, para eliminar un objeto persona. En el mtodo modificarLista(), seteamos las propiedades del objeto persona con los valores introducidos en los campos de texto, luego utilizamos el mtodo set del ArrayList para modificar un objetos de la lista, al mtodo set de lista le debemos pasar el ndice del objeto a modificar (todo esto encerrado en un try-cath para atrapar excepciones en un caso de puntero nulo), en nuestro caso este ndice se llama index, que lo modificamos en el mtodo seleccionLista(), atraves del mtodogetRowIndex(). Ahora modificaremos nuestro index.xhtml, en la cual le agregaremos un botn que nos permitir modificar una fila seleccionada, a continuacin el cdigo

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. r="lis"> 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. 42. ></br> <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:column> <f:facet name="header"> <h:outputText value="SELECCIONAR"/> </f:facet> <h:commandLink action="#{lista.seleccionLista}"> SELECCION </h:commandLink> </h:column> </h:dataTable> </h:form> <br></br> <h:form> <h:outputLabel for="nombre"> Nombre </h:outputLabel> <h:inputText id="nombre" value="#{lista.txtNombre}"></h:inputText><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:form> <h:dataTable value="#{lista.lista}" binding="#{lista.tabla}" va

43. 44. 45. 46. 47. 48. 49. 50. 51.

<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:commandButton value="Modificar" action="#{lista.modificarLista}">< /h:commandButton> <h:commandButton value="Eliminar" action="#{lista.eliminarLista}"></h :commandButton> </h:form> </h:body>

52. </html>

Aqui le agregamos la siguiente linea

1. <h:commandButton value="Modificar" action="#{lista.modificarLista}"></h:com mandButton>

Que es nuestro boton, con el evento action apuntando al metodo modificarLista() de la clase lista. Nuestro facesconfig.xml no tiene modificacin y sigue de la siguiente manera
1. <?xml version='1.0' encoding='UTF-8'?> 2. <!-- =========== FULL CONFIGURATION FILE ================================== --> 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. 9. 10. <managed-bean-class>Lista</managed-bean-class> <managed-bean-name>lista</managed-bean-name> <managed-bean-scope>session</managed-bean-scope>

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

Bien estamos en condiciones de ejecutar nuestro index.xhtml

Vemos que nos muestra nuestro botn para poder modificar. Agregamos registros y seleccionamos uno

Modificamos los campos de entrada y pulsamos sobre modificar y observamos que se produce la modificacin

Ahora seleccionamos otro y pulsamos en eliminar y dicha fila se elimina.

Bueno eso es todo por este sencillo post, disculpen si hay errores, hasta pronto