Lunes, 14 Julio 2014 20:21

Seleccionar fila en tabla datatable - JSF

Escrito por 
Valora este artículo
(0 votos)

En este post continuaremos con el ejemplo anterior de JSF, pero a diferencia del post anterior, añadiremos a la tabla un enlace para que tengamos la posibilidad de seleccionar una determinada fila de la tabla “datatableJSF y mostrar los datos seleccionados en cajas de texto JSF. En primer lugar modificaremos nuestro bean “lista”, luego nuestra vista index.xhtml.

Para estar mas al tanto de nuestros ejemplos JSF podemos visitar el ultimo post realizado:

Bien empecemos a nuestra clase bean “lista”  que queda de la siguiente manera:import java.util.ArrayList;

  1. import javax.faces.component.html.HtmlDataTable;
  2.  
  3. public class Lista {
  4.   private String txtNombre;
  5.   private String txtApellido;
  6.   private String txtDireccion;
  7.   private ArrayList<Persona> lista= new ArrayList<Persona>(){};
  8.   private Persona persona;
  9.   private  HtmlDataTable tabla;
  10.   public Lista() {
  11.   }
  12. public void cargarLista(){
  13. persona= new Persona(txtNombre, txtApellido, txtDireccion);
  14. this.lista.add(persona);
  15.  
  16. }
  17. public void seleccionLista(){
  18.     persona=(Persona) tabla.getRowData();
  19.     this.txtApellido=persona.getApellido();
  20.     this.txtNombre=persona.getNombre();
  21.     this.txtDireccion=persona.getDireccion();
  22.  }
  23.  
  24.   public HtmlDataTable getTabla() {
  25.     return tabla;
  26.   }
  27.  
  28.   public void setTabla(HtmlDataTable tabla) {
  29.     this.tabla = tabla;
  30.   }
  31.  
  32.   public ArrayList<Persona> getLista() {
  33.     return lista;
  34.   }
  35.   public void setLista(ArrayList<Persona> lista) {
  36.     this.lista = lista;
  37.   }
  38.   public String getTxtApellido() {
  39.     return txtApellido;
  40.   }
  41.   public void setTxtApellido(String txtApellido) {
  42.     this.txtApellido = txtApellido;
  43.   }
  44.   public String getTxtDireccion() {
  45.     return txtDireccion;
  46.   }
  47.   public void setTxtDireccion(String txtDireccion) {
  48.     this.txtDireccion = txtDireccion;
  49.   }
  50.   public String getTxtNombre() {
  51.     return txtNombre;
  52.   }
  53.   public void setTxtNombre(String txtNombre) {
  54.     this.txtNombre = txtNombre;
  55.   }
  56. }


Esta clase tiene de nuevo,a diferencia del anterior post (CARGAR TABLA JSF (DATATABLE) CON ARRAYLIST, EN FORMA DINAMICA) :
La propiedad tabla del tipo HtmlDataTable, con esta propiedad haremos un binding (enlace) con la tabla datatable JSF del index.xhtml, es decir a travez de esta propiedad podremos obtener datos de la tabla y comportamientos de la misma.
El método “seleccionLista()”, este método será el encargado de atrapar la fila seleccionada, esto lo hace atravez del metodo getRowData() de la propiedad tabla, la cual nos devuelve un objeto, que lo casteamos al de tipo Persona, luego mostramos  la fila seleccionada en los mismos cajas de texto inputText, en los cual realizamos la entrada de alguna fila (fácilmente se los podría poner en otros diferentes, pero para este ejemplo lo haremos asi).
Esas son todas la modificaciones a  la clase lista, ahora procederemos a la modificación del index.xhtml, para agregar una columna en la cual se hara una selección de una determinada fila.
Nuestro index.xhtml es el contiene las siguientes líneas

  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:form>
  49.     </h:body>
  50. </html>


Lo que aqui agregamos es una etiqueta <h:commandLink> (también podría ser un botón) que es un enlace JSF (<a> en html), el cual en el evento action de la misma esta apuntando al método seleccionLista() del nuestra clase lista, para que esta se ejecute y muestre la fila seleccionada en los inputtext.
Y nos no olvidamos que también en el tag   <h:dataTable> agregamos el evento binding que esta asociado a la propiedad tabla del tipo HtmlDataTable de la clase lista, atravez de esta la asociamos a la clase backbean.
También encerramos al  <h:dataTable> en etiquetas <h:form>, para que se pueda enviar datos hacia el servidor.

Bien eso es todo luego tenemos el faceconfig.xml que no se lo modifica (respecto al ejemplo anterior) y que es el siguiente:

  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>


La clase Persona tal cual estaba en el ejemplo anterior, con las siguientes líneas:

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


Bien el árbol del proyecto queda como sigue


Ya estamos en condiciones de ejecutar el proyecto


Agregamos un par de registros


Observamos que aparece un enlace para hacer la selección
Realizamos una selección y tiene que aparecer en los campos de entrada como lo muestra la imagen


Bien vemos que funciona el ejemplo, es una de las maneras más sencillas de realizar una selección del una fila en una tabla JSF, si desean adquirir el proyecto con el codigo para Netbeans solo tienen que comentar y lo subire a la brevedad.

Visto 2852 veces

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.