Lunes, 14 Julio 2014 20:16

Cargar tabla con arraylist (datatable) - JSF

Escrito por 
Valora este artículo
(0 votos)

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

Bien ahora empezamos, como siempre como ide utilizaremos Netbeans, en este caso la versión 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 creación 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 dirección con sus correspondientes metodos accesores (get  y set), tiene el siguiente código

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


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 también 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.   private String txtNombre;
  5.   private String txtApellido;
  6.   private String txtDireccion;
  7.   private String txtDireccion3;
  8.   private ArrayList<Persona> lista= new ArrayList<Persona>(){};
  9.   private Persona persona;
  10.   public Lista() {
  11.   }
  12. public void cargarLista(){
  13. persona= new Persona(txtNombre, txtApellido, txtDireccion);
  14. this.lista.add(persona);
  15. }
  16.   public String getTxtDireccion3() {
  17.     return txtDireccion3;
  18.   }
  19.   public void setTxtDireccion3(String txtDireccion3) {
  20.     this.txtDireccion3 = txtDireccion3;
  21.   }
  22.   public ArrayList<Persona> getLista() {
  23.     return lista;
  24.   }
  25.   public void setLista(ArrayList<Persona> lista) {
  26.     this.lista = lista;
  27.   }
  28.   public String getTxtApellido() {
  29.     return txtApellido;
  30.   }
  31.   public void setTxtApellido(String txtApellido) {
  32.     this.txtApellido = txtApellido;
  33.   }
  34.   public String getTxtDireccion() {
  35.     return txtDireccion;
  36.   }
  37.   public void setTxtDireccion(String txtDireccion) {
  38.     this.txtDireccion = txtDireccion;
  39.   }
  40.   public String getTxtNombre() {
  41.     return txtNombre;
  42.   }
  43.   public void setTxtNombre(String txtNombre) {
  44.     this.txtNombre = txtNombre;
  45.   }
  46. }
  47.  


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 métodos accesores y un método llamado cargarLista, que es el método de capturar cuando se haga click en el botón y cargar a la lista un objeto Persona.

Ahora crearemos el archivo de configuración facesconfig.xml sobre el directorio WEB-XML


Nuestro facesconfig.xml contiene las siguientes líneas

  1.  
  2. <?xml version='1.0' encoding='UTF-8'?>
  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>


En este configuramos la clase BackBeans para que pueda ser asociada a nuestro index.xhtml.
Por ultimo modificaremos nuestro index.xhtml con 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:outputText value="#{lista.txtDireccion3}"></h:outputText>
  10.       <h:dataTable value="#{lista.lista}" 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:dataTable>
  30.       <br></br>
  31.       <h:form>
  32.       <h:outputLabel for="nombre"> Nombre </h:outputLabel>
  33.       <h:inputText id="nombre" value="#{lista.txtNombre}"></h:inputText><br></br>
  34.       <h:outputLabel for="apellido"> Apellido </h:outputLabel>
  35.       <h:inputText id="apellido" value="#{lista.txtApellido}"></h:inputText><br></br>
  36.       <h:outputLabel for="direccion"> Direccion </h:outputLabel>
  37.       <h:inputText id="direccion" value="#{lista.txtDireccion}"></h:inputText><br></br>
  38.       <h:commandButton value="Agregar" action="#{lista.cargarLista}"></h:commandButton>
  39.       </h:form>
  40.     </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 dinámica, ose interactuando con el servidor y la pagina actualizándose, espero que haya servido de ayuda a alguien.
A continuación pongo para descarga el proyecto, si te sirvió solo comenta!!!

 

Visto 2419 veces

1 comentario

  • Enlace al Comentario isa Jueves, 13 Noviembre 2014 05:46 publicado por isa

    Te agradezco el tiempo y dedicación por el aporto muy bueno gracias por compartir

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.