Lunes, 14 Julio 2014 20:26

Modificar y eliminar filas de una tabla datatable - JSF

Escrito por 
Valora este artículo
(0 votos)

Luego de unas pequeñas vacaciones retornamos a los posts, en esta ocasión continuaremos con el post anterior sobre JSF, en la cual seleccionábamos una fila de un datatable jsf y  tales datos lo mostrábamos 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

En el post anterior teníamos nuestra clase java  llamada “lista”, lo cual es nuestro backbean que trabaja con nuestro index.xhtml, en esta clase seencuentran los métodos 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 continuación tenemos el código de nuestra clase lista.
 

  1. import java.util.ArrayList;
  2. import javax.faces.component.html.HtmlDataTable;
  3.  
  4. public class Lista {
  5.   private String txtNombre;
  6.   private String txtApellido;
  7.   private String txtDireccion;
  8.   private ArrayList<Persona> lista= new ArrayList<Persona>(){};
  9.   private Persona persona;
  10.   private int index;
  11.   private  HtmlDataTable tabla;
  12.   public Lista() {
  13.     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.     persona=(Persona) tabla.getRowData();
  22.     this.index=tabla.getRowIndex();
  23.     this.txtApellido=persona.getApellido();
  24.     this.txtNombre=persona.getNombre();
  25.     this.txtDireccion=persona.getDireccion();
  26.  }
  27. public void eliminarLista(){
  28.     this.lista.remove(persona);
  29. }
  30. public void modificarLista(){
  31.     persona.setNombre(this.txtNombre);
  32.     persona.setApellido(this.txtApellido);
  33.     persona.setDireccion(this.txtDireccion);
  34.     try{
  35.     this.lista.set(index, persona);
  36.     }catch(Exception e){
  37.       System.out.println(e);
  38.     }
  39. }
  40.   public HtmlDataTable getTabla() {
  41.     return tabla;
  42.   }
  43.  
  44.   public void setTabla(HtmlDataTable tabla) {
  45.     this.tabla = tabla;
  46.   }
  47.  
  48.   public ArrayList<Persona> getLista() {
  49.     return lista;
  50.   }
  51.   public void setLista(ArrayList<Persona> lista) {
  52.     this.lista = lista;
  53.   }
  54.   public String getTxtApellido() {
  55.     return txtApellido;
  56.   }
  57.   public void setTxtApellido(String txtApellido) {
  58.     this.txtApellido = txtApellido;
  59.   }
  60.   public String getTxtDireccion() {
  61.     return txtDireccion;
  62.   }
  63.   public void setTxtDireccion(String txtDireccion) {
  64.     this.txtDireccion = txtDireccion;
  65.   }
  66.   public String getTxtNombre() {
  67.     return txtNombre;
  68.   }
  69.   public void setTxtNombre(String txtNombre) {
  70.     this.txtNombre = txtNombre;
  71.   }
  72. }


En esta clase se encuentran los dos nuevos métodos

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


En el método eliminarLista() solamente utilizamos el método remove del ArrayList (del tipo persona) lista, para eliminar un objeto persona.
En el método modificarLista(),  seteamos las propiedades del objeto persona con los valores introducidos en los campos de texto, luego utilizamos el método set del ArrayList para modificar un objetos de la lista, al método 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 método seleccionLista(), atraves del método getRowIndex().
Ahora modificaremos nuestro index.xhtml, en la cual le agregaremos un botón que nos permitirá modificar una fila seleccionada, a continuación el código

  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.      xmlns:h="http://java.sun.com/jsf/html"
  4.      xmlns:f="http://java.sun.com/jsf/core">
  5.     <h:head>
  6.         <title>Ejemplo JSF</title>
  7.     </h:head>
  8.     <h:body>
  9.       <h:form>
  10.             <h:dataTable value="#{lista.lista}" binding="#{lista.tabla}" var="lis">
  11.             <h:column>
  12.               <f:facet name="header">
  13.                 <h:outputText value="NOMBRE"/>
  14.               </f:facet>
  15.               <h:outputText value="#{lis.nombre}"/>
  16.             </h:column>
  17.             <h:column>
  18.               <f:facet name="header">
  19.                 <h:outputText value="APELLIDO"/>
  20.               </f:facet>
  21.               <h:outputText value="#{lis.apellido}"/>
  22.             </h:column>
  23.             <h:column>
  24.               <f:facet name="header">
  25.                 <h:outputText value="DIRECCION"/>
  26.               </f:facet>
  27.               <h:outputText value="#{lis.direccion}"/>
  28.             </h:column>
  29.             <h:column>
  30.              <f:facet name="header">
  31.               <h:outputText value="SELECCIONAR"/>
  32.              </f:facet>
  33.               <h:commandLink action="#{lista.seleccionLista}">
  34.                 SELECCION
  35.               </h:commandLink>
  36.             </h:column>
  37.           </h:dataTable>
  38.       </h:form>
  39.       <br></br>
  40.       <h:form>
  41.       <h:outputLabel for="nombre"> Nombre </h:outputLabel>
  42.       <h:inputText id="nombre" value="#{lista.txtNombre}"></h:inputText><br></br>
  43.       <h:outputLabel for="apellido"> Apellido </h:outputLabel>
  44.       <h:inputText id="apellido" value="#{lista.txtApellido}"></h:inputText><br></br>
  45.       <h:outputLabel for="direccion"> Direccion </h:outputLabel>
  46.       <h:inputText id="direccion" value="#{lista.txtDireccion}"></h:inputText><br></br>
  47.       <h:commandButton value="Agregar" action="#{lista.cargarLista}"></h:commandButton>
  48.       <h:commandButton value="Modificar" action="#{lista.modificarLista}"></h:commandButton>
  49.       <h:commandButton value="Eliminar" action="#{lista.eliminarLista}"></h:commandButton>
  50.       </h:form>
  51.     </h:body>
  52. </html>


Aqui le agregamos la siguiente linea
    

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

Que es nuestro boton, con el evento action apuntando al metodo modificarLista() de la clase lista.
Nuestro facesconfig.xml no tiene modificación 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.    xmlns="http://java.sun.com/xml/ns/javaee"
  5.    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  6.    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.   <managed-bean-name>lista</managed-bean-name>
  10.   <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 botón para poder modificar.
Agregamos registros y seleccionamos uno


Modificamos los campos de entrada y pulsamos sobre modificar y observamos que se produce la modificación


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…
 

Visto 4259 veces

1 comentario

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.