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
-
public class Persona {
-
-
this.apellido = apellido;
-
this.nombre = nombre;
-
this.direccion = direccion;
-
}
-
return apellido;
-
}
-
this.apellido = apellido;
-
}
-
return direccion;
-
}
-
this.direccion = direccion;
-
}
-
return nombre;
-
}
-
this.nombre = nombre;
-
}
-
}
En el Netbeans quedaria asi
Bien ahora en nuestra clase Beans, creada en los post anteriores, incluiremos las siguientes líneas
-
private Persona[] persona= new Persona[]{
-
new Persona("Tolaba", "Fabiola", "Paso de Jama"),
-
new Persona("Ramos", "Rafael", "Guemes"),
-
new Persona("Ortega", "Ariel", "Ledesma"),
-
new Persona("Nina", "Juan", "Sta. Barbara")};
-
-
}
-
-
public Persona[] getPersona() {
-
return persona;
-
}
-
-
public void setPersona(Persona[] persona) {
-
this.persona = persona;
-
}
-
-
-
}
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:
-
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml"
-
xmlns:f="http://java.sun.com/jsf/core"
-
xmlns:h="http://java.sun.com/jsf/html">
-
<h:head>
-
</h:head>
-
<h:body>
-
<h:dataTable value="#{clase.persona}" var="per">
-
<h:column>
-
<f:facet name="header">
-
<h:outputText value="NOMBRE"/>
-
</f:facet>
-
<h:outputText value="#{per.nombre}"/>
-
</h:column>
-
<h:column>
-
<f:facet name="header">
-
<h:outputText value="APELLIDO"/>
-
</f:facet>
-
<h:outputText value="#{per.apellido}"/>
-
</h:column>
-
<h:column>
-
<f:facet name="header">
-
<h:outputText value="DIRECCION"/>
-
</f:facet>
-
<h:outputText value="#{per.direccion}"/>
-
</h:column>
-
</h:dataTable>
-
</h:body>
-
</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..