Lunes, 14 Julio 2014 00:00

Cargar tabla (datatable) - JSF

Escrito por 
Valora este artículo
(0 votos)

Ahora continuando con los ejemplos Web JSF, veremos como utilizar el componente datatable de JSF de manera sencilla y no tan complicada.


En primer lugar debemos tomar en cuenta que nos basamos en los siguientes posts para un mayor entendimiento:

Llenaremos la tabla de forma estatica, es decir con datos que permanecen declarados en una clase, en este caso en un bean.

Creamos nuestra clase beans de nombre Persona

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

En el Netbeans quedaria asi


Bien ahora en nuestra clase Beans, creada en los post anteriores, incluiremos las siguientes líneas

  1. public class Beans {
  2.   private Persona[] persona= new Persona[]{
  3.   new Persona("Tolaba", "Fabiola", "Paso de Jama"),
  4.   new Persona("Ramos", "Rafael", "Guemes"),
  5.   new Persona("Ortega", "Ariel", "Ledesma"),
  6.   new Persona("Nina", "Juan", "Sta. Barbara")};
  7.  
  8.     public Beans() {
  9.           }
  10.  
  11.   public Persona[] getPersona() {
  12.     return persona;
  13.   }
  14.  
  15.   public void setPersona(Persona[] persona) {
  16.     this.persona = persona;
  17.   }
  18.  
  19.  
  20. }

En imagen quedaria asi la clase Beans

Observamos que en la clase “Beans “  creamos una propiedad persona del tipo array, la cual la inicializamos con unos determinados nombres fijos en la clase, osea estaticos.
Lo siguiente a realizar es modificar nuestro “index.xhtml”, consideramos que ya esta configurado nuestra clase Beans en el facesconfig.xml referenciada como “clase” (PARA MAS INFORMACION VER LOS POSTS ANTERIORES SOBRE ESTE TEMA) con  las siguientes líneas:

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:f="http://java.sun.com/jsf/core"
  5.      xmlns:h="http://java.sun.com/jsf/html">
  6.   <h:head>
  7.     <title>Facelet Title</title>
  8.   </h:head>
  9.   <h:body>
  10.     <h:dataTable value="#{clase.persona}" var="per">
  11.             <h:column>
  12.               <f:facet name="header">
  13.                 <h:outputText value="NOMBRE"/>
  14.               </f:facet>
  15.               <h:outputText value="#{per.nombre}"/>
  16.             </h:column>
  17.             <h:column>
  18.               <f:facet name="header">
  19.                 <h:outputText value="APELLIDO"/>
  20.               </f:facet>
  21.               <h:outputText value="#{per.apellido}"/>
  22.             </h:column>
  23.             <h:column>
  24.               <f:facet name="header">
  25.                 <h:outputText value="DIRECCION"/>
  26.               </f:facet>
  27.               <h:outputText value="#{per.direccion}"/>
  28.             </h:column>
  29.           </h:dataTable>
  30.   </h:body>
  31. </html>



en  imagenes quedaria asi

Observamos la en primer nivel el tag <h:dataTable></h:dataTable>, que es la etiqueta padre para dibujar una tabla en jsf, luego aparece el tag <h:column></h:column> que nos dibuja las columnas a representar dentro de la tabla.
Dentro de el tag <h:column></h:column> nos encontramos con los tags:
<f:facet></f:facet> que es para representar encabezados y pies de columna, en este caso un encabezado, el titulo de nuestra columna, que esta contenida en un tag <h:outputText/>, en su propiedad value.
<h:outputText value="#{bean.propiedad}"/> nos da el valor que tendrá cada fila en cada columna, en este caso tenemos la el la clase Beans, referenciada como “clase” en el facesconfig.xml, con la propiedad persona
El árbol del proyecto, para en caso de netbeans nos queda de la siguiente manera


Habiendo hecho todo esto, podemos proceder a ejecutar el proyecto, el resultado si todo lo hicimos bien es el siguiente

Bien esto es todo por ahora, en el proximo post llenaremos el data table pero de manera dinamica en la cual los datos lo obtendremos de una base de datos MySql.Hasta pronto..

Visto 883 veces Modificado por última vez en Lunes, 01 Agosto 2016 13:31
Publicado en Programacion

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.

volver arriba