Una tabla con datos de una base de datos MySQL con PrimeFaces (Paso a paso)

Hola gente,

una vez más con PrimeFaces, esta vez iremos un poco más allá, crearemos una tabla que mostrará datos de una base de datos MySQL. Además está tabla permitirá ordenar y filtrar y paginar los datos. Un "chiche!".

Como en el tutorial anterior, nos basaremos en el proyecto inicial creado en el post: "Primeros pasos con PrimeFaces, Eclipse y Tomcat (Paso a paso)"

Vamos a comenzar con una modificando el Filtro (LoginFilter.java) y nos aseguramos que la nueva versión contenga las líneas que muestro en negrita a continuación:

private boolean noProteger(String urlStr) {
  /*
  * Este es un buen lugar para colocar y programar todos los patrones que
  * creamos convenientes para determinar cuales de los recursos no
  * requieren protección. Sin duda que habría que crear un mecanizmo tal
  * que se obtengan de un archivo de configuración o algo que no requiera
  * compilación.
  */
  if (urlStr.indexOf("/login.xhtml")!= -1)
    return true;
  if (urlStr.indexOf("/javax.faces.resource/") != -1)
    return true;
  return false;
}

Luego en la clase LoginBean

  FacesContext.getCurrentInstance().addMessage(null, msg);
  context.addCallbackParam("estaLogeado", logeado);
  if (logeado)
    context.addCallbackParam("view", "ventas.xhtml");
}

A raíz de esta modificación, ya estoy arrepentido de haber hecho el post anterior ya que la intención fue dar una idea genérica de como se hace para proteger recursos mediante algún sistema de control de acceso con artefactos Web Java, pero por simplista he caído en lo burdo, a este sistema le falta mucho y las falencias son grandes y es debido a que no se trata de un tema trivial, veré si en el futuro me redimo y vemos algo un poco más adecuado a la realidad, por ejemplo Spring Security, en fin ya veremos las ganas y el tiempo que son dos cosas que no regalan ni se compran.

Bien hecha la mea culpa comencemos.

Creando un DataSource accesible mediante JNDI

Para definir un recurso de este tipo, solo debemos crear un archivo xml llamada "context.xml" en la carpetaWebContent/META-INF cuyo contenido debe ser:

<?xml version="1.0" encoding="UTF-8"?>
<Context>
  <Resource auth="Container" description="BD Practico" 

     name="jdbc/practico" type="javax.sql.DataSource"       password="xxxxx" driverClassName="com.mysql.jdbc.Driver"      maxIdle="2" maxWait="5000" validationQuery="select 1"      username="root" url="jdbc:mysql://localhost:3306/practico" maxActive="4" />
  <WatchedResource>WEB-INF/web.xml</WatchedResource>
  <WatchedResource>META-INF/context.xml</WatchedResource> </Context>

Sin entrar en mucho detalle acerca de la definición del pool de conexiones, solo diremos que los datos principales que contiene este archivo son aquellos referidos a los que requiere el driver JDBC los cuales he resaltado en negrita, un atributo fundamental es el nombre de recurso que estamos creado que es "jdbc/practico" y colocar la password correcta.

Una vez que disponemos de este archivo debemos colocar en el classpath el driver JDBC de MySQL que pueden descargar desde aquí: https://cdn.mysql.com/Downloads/Connector-J/mysql-connector-java-5.1.23.zip, una vez que descarguen este archivo deben descomprimir solo mysql-connector-java-5.1.23-bin.jar que se encuentra dentro del zip y copiarlo o linkearlo (como ya hemos visto) dentro de la carpeta WebContent/WEB-INF/lib

Obteniendo una conexión del pool y alacenandola en el contexto global de la aplicación

Ya hemos realizado la configuración necesaria para que Tomcat cree un pool de conexiones al iniciar, es nuestro trabajo ahora obtener una referencia a ese pool y pedirle una conexión a la base de datos para ser utilizada en la aplicación. Es buena práctica hacer esto una sola vez y al inicio de la aplicación. Afortunadamente la especificación web de java nos provee de una serie de herramientas para poder hacerlo, en este caso haremos uso de los métodos callback de control de ciclo de vida, también se los llama listeners, usaremos particularmente el listener a nivel de contexto, el cual posee dos métodos que son llamados por el contenedor (tomcat) cuando se inicia y cuando finaliza. 

Crear un listener es muy sencillo, se trata de una clase java que debe implementar para este caso la interfaceServletContextListener y estar marcado con la anotación @WebListener, el código se muestra a continuación:

package ar.com.magm.web.listeners;

import java.sql.Connection;
import java.sql.SQLException;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;
import javax.sql.DataSource;

@WebListener
public class InitListener implements ServletContextListener {  public InitListener() { }

  public void contextInitialized(ServletContextEvent sce) {
    DataSource fuenteDatos = null;
    Context ctx;
    try {
      ServletContext sc = sce.getServletContext();
      ctx = new InitialContext();
      fuenteDatos = (DataSource) ctx.lookup("java:comp/env/jdbc/practico");

      Connection cn = fuenteDatos.getConnection();

      sc.setAttribute("datasource", cn);

    } catch (NamingException e) {
      throw new RuntimeException(e.getMessage());
    } catch (SQLException e) {
      throw new RuntimeException(e.getMessage());
    }
  }

  public void contextDestroyed(ServletContextEvent sce) { }
}

En las líneas: ServletContext sc = sce.getServletContext();
ctx = new InitialContext();
fuenteDatos = (DataSource) ctx.lookup("java:comp/env/jdbc/practico");
Obtenemos una referencia al recurso mediante JNDI y el nombre que establecimos en el archivo de configuración.

La línea:

Connection cn = fuenteDatos.getConnection();

Obtiene la conexión.

La línea:  sc.setAttribute("datasource", cn);
almacena en el contexto global de la aplicación la instancia de la conexión con el nombre datasource.
Una vez que contamos con este listener es muy sencillo acceder desde la aplicación a esta conexión.   Bien hasta aquí no hemos tocado un tema importante, a que base de datos nos conectamos, pues bien es una base de datos que he utilizado desde hace años para diversos ejemplos y la pueden descargar desde aquí, el archivo esBDDump.sql y se encuentra dentro de archivos.zip. Una vez descargado el zip y descomprimido el archivo .sql, y desde una consola escribimos:

$ mysql --user=UnUsuarioVálido --password=LaClave < BDDump.sql

Esto creará la base de datos practico en la instancia de MySQL.

Creando la vista del usuario

Ahora crearemos la vista del usuario, se trata como ya hemos visto antes de un archivo .xhtml, en este caso"ventas.xhtml", en este archivo crearemos una tabla en la cual mostraremos información de ventas que saldrán de la siguiente consulta SQL: SELECT    YEAR(fecha) AS anio,    MONTH(fecha) AS mes,    zona,    cliente,    SUM(importe*cantidad) AS ventas  FROM    dw_ventasfact v INNER JOIN clientes c ON v.idCliente=c.idCliente                    INNER JOIN zonas z ON z.idZona=c.idZona  GROUP BY    zona,    cliente,    anio,    mes  ORDER BY    anio,   mes,   zona,   cliente

Para nuestro caso una venta tiene los atributos que se muestran en la imagen, o sea: año, mes, zona, cliente e importe de venta. Para representar cada venta (cada hecho), o cada fila que retorne la consulta, crearemos una clase java.

Ahora veremos el código de la vista, o sea del archivo "ventas.xhtml":

<html xmlns="https://www.w3c.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html"
      xmlns:f="https://java.sun.com/jsf/core"
      xmlns:p="https://primefaces.org/ui">
<h:head></h:head>
<h:body style="text-align:center">
  <h:form>

    <p:dataTable id="tablaDeDatos" var="venta"
      value="#{ventasBean.ventas}" widgetVar="tablaDeVentas"
      emptyMessage="No hay ventas con este criterio de filtrado"
      filteredValue="#{ventasBean.ventasFiltradas}" paginator="true"
      rows="10" style="width:800px">

      <f:facet name="header">
        <p:outputPanel>
          <h:outputText value="Buscar en todos:" />
          <p:inputText id="globalFilter" onkeyup="tablaDeVentas.filter()" style="width:150px" />
        </p:outputPanel>
      </f:facet>

      <p:column id="zonaCol" filterBy="#{venta.zona}" headerText="Zona"
        filterMatchMode="exact" filterOptions="#{ventasBean.zonasOptions}">
        <h:outputText value="#{venta.zona}" />
      </p:column>

      <p:column id="clienteCol" filterBy="#{venta.cliente}"
        headerText="Cliente" filterMatchMode="startsWith">
        <h:outputText value="#{venta.cliente}" />
      </p:column>


      <p:column id="anioCol" filterBy="#{venta.anio}" headerText="Año"
        filterMatchMode="startsWith">
        <h:outputText value="#{venta.anio}" />
      </p:column>

      <p:column id="mesCol" filterBy="#{venta.mesLetra}" headerText="Mes"
        filterMatchMode="exact" filterOptions="#{ventasBean.mesesOptions}">
        <h:outputText value="#{venta.mesLetra}" />
      </p:column>

      <p:column id="ventasCol" headerText="Importe Venta" style="text-align:right">
        <h:outputText value="#{venta.ventaFormat}"/>
      </p:column>

    </p:dataTable>
  </h:form>

</h:body>
</html>   El resultado final se verá así:    

Bien, ese es todo el código de la vista del cliente, la analizaremos por partes:

  Este tag:     <p:dataTable id="tablaDeDatos" var="venta"
      value="#{ventasBean.ventas}" widgetVar="tablaDeVentas"
      emptyMessage="No hay ventas con este criterio de filtrado"
      filteredValue="#{ventasBean.ventasFiltradas}" paginator="true"
      rows="10" style="width:800px"> define la tabla de datos que se llama "tablaDeDatos" (id="tablaDeDatos"), los valores que se mostrarán en la tabla se obtendrán de: ventasBean.ventas (value="#{ventasBean.ventas}") que es una lista de instancias de Venta que es la clase java que representa solo una venta y que aún no hemos creado, por cada instancia que se recorra de la lista se crea una variable llamada venta (var="venta"). La lista que se encuentra en ventasBean.ventas contiene todas las ventas que obtenemos de la consulta SQL, este componente permite que se apliuen filtros sobre esa lista y lo implementa utilizando una segunda lista, esta es: ventasBean.ventasFiltradas (filteredValue="#{ventasBean.ventasFiltradas}") lo bueno de esto es que no tenemos que preocuparnos mas que por definir esta lista en el server, PrimeFaces la mantiene por nosotros. La lista se paginará automáticamente y mostrará 10 filas por página, el ancho de la lista será de 800 píxeles (paginator="true" rows="10" style="width:800px"). También se podrá realizar una búsqueda global (en cualquier columna), está búsqueda y filtrado se produce en el cliente, por ello debemos definir el nombre que tendrá el elemento html (el widget) en el cliente y este será: tablaDeVentas (value="#{ventasBean.ventas}"). Por último diremos que si no existen items ante algún criterio de búsqueda se mostrará el mensaje: "No hay ventas con este criterio de filtrado" (emptyMessage="No hay ventas con este criterio de filtrado").

El filtro que mencioné en el último párrafo se fine con el tag:

 <p:inputText id="globalFilter" onkeyup="tablaDeVentas.filter()"       style="width:150px" /> El widget tablaDeVentas posee automáticamente un método llamada filter(), al cual se llamará cada vez que finalice la presión de una tecla (onkeyup), el método de filtrado descartará todas las filas en las cuales no se encuentre en algún lugar el valor que escribamos en el campo de entrada con id="globalFilter", esto es siempre así, el id debe ser ese y ningún otro, esto la verdad que no me gusta demasiado, pero en fin...

Ahora solo resta definir las columnas que mostraremos en esta tabla de datos.

  La columna que muestra la zona se define el el tag:
  <p:column id="zonaCol" filterBy="#{venta.zona}" headerText="Zona"
  filterMatchMode="exact" filterOptions="#{ventasBean.zonasOptions}">
  <h:outputText value="#{venta.zona}" />
</p:column>
Para todas las columnas definiremos un id, en este caso id="zonaCol", también el texto que se mostrará en la cabecera, en este caso: headerText="Zona", también definiemos cual es el componente que renderizará el valor en cada celda, en este caso lo hacemos con el tag: <h:outputText value="#{venta.zona}" /> donde podemos ver que se utiliza el atributo zona del bean venta, recordemos que este bean lo definimos cuando definimos la tabla (var="venta").  No entraré en detalle sobre estos atributos para las próximas columnas.
Particularmente para la columna zona definimos un filtro que será una lista desplegable que contiene todas las zonas posibles, a esto lo hacemos en: filterOptions="#{ventasBean.zonasOptions}", el bean ventasBean poseerá una lista especial llamada zonasOptions que otorgará la lista de zonas que mencionamos. Además definimos que cada vez que se selccione una zona se realice una búsqueda por exactamente igual en: filterMatchMode="exact". El filtro en acción se ve así:
  La columna que muestra el cliente se define el el tag:
<p:column id="clienteCol" filterBy="#{venta.cliente}"
  headerText="Cliente" filterMatchMode="startsWith">
  <h:outputText value="#{venta.cliente}" />
</p:column>
La diferencia más grande (amén del valor que se muestra) es el filtro, solo hemos definido que se buscará todos aquellos valores que comiencen con: filterMatchMode="startsWith", si no se define otra cosa se utiliza un campo de texto en el cual debemos escribir el criterio de filtrado como se ve en la siguiente imagen:     El resto de las columnas están definidas utilizando conceptos que hemos explicado ya, por ello omitiré explicaciones al respecto.   El bean que representa una venta.   Como ya he comentado antes, crearemos una clase java que representará cada venta y que instanciaremos en el bean que posee las listas de ventas más adelante.

La clase se llama: ar.com.magm.model.Venta y el código es:

package ar.com.magm.model;
import java.io.Serializable; import java.text.DecimalFormat;
public class Venta implements Serializable {   private static final long serialVersionUID = 8060348552656940209L;
  public static long getSerialversionuid() {     return serialVersionUID;   }
  private int anio;   private String cliente;   private int mes;   private String mesLetra;   private double venta;   private String zona;
  public Venta(String zona, String cliente, int anio, int mes,                String mesLetra, double venta) {     super();     this.zona = zona;     this.cliente = cliente;     this.anio = anio;     this.mes = mes;     this.mesLetra = mesLetra;     this.venta = venta;   }
  public int getAnio() {     return anio;   }   public String getCliente() {     return cliente;   }   public int getMes() {     return mes;   }   public String getMesLetra() {     return mesLetra;   }   public double getVenta() {     return venta;   }
  public String getVentaFormat() {     DecimalFormat df = new DecimalFormat("0.00");     return df.format(venta);   }
  public String getZona() {     return zona;   } }  

No hay mucho que decir de este bean, solo que tenemos un par de getters especiales, por un lago uno que nos retorna el nombre del mes getMesLetra() y el importe formateado getVentaFormat().

El bean manejado por faces que mantiene las listas de ventas.

Bien, es hora de crear el controlador que es una clase llamada ar.com.magm.web.primefaces.VentasBean y cuya configuración en faces-config.xml es: 

<managed-bean>
  <managed-bean-name>ventasBean</managed-bean-name>
  <managed-bean-class>ar.com.magm.web.primefaces.VentasBean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Notemos que el scope de este bean es session, si la lista fuese común a todos los usuarios, el scope correcto seríaapplication ya que no sería necesario crear más instancias. En algún post futuro haremos uso de esto.   El código completo del bean es el siguiente:   package ar.com.magm.web.primefaces;
import java.io.Serializable; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.faces.context.FacesContext; import javax.faces.model.SelectItem; import javax.servlet.ServletContext; import ar.com.magm.model.Venta;
public class VentasBean implements Serializable {   private static final long serialVersionUID = -6690574219803425728L;
  private String[] meses = new String[] { "Enero", "Febrero", "Marzo",     "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre",     "Octubre", "Noviembre", "Diciembre" };
  private String sql = "SELECT year(fecha) as anio, month(fecha) as mes, zona, cliente, sum(importe*cantidad) as ventas FROM dw_ventasfact v INNER JOIN clientes c ON v.idCliente=c.idCliente INNER JOIN zonas z ON z.idZona=c.idZona GROUP BY zona, cliente, anio, mes ORDER BY anio,mes,zona,cliente";   private List<Venta> ventas;     private List<Venta> ventasFiltradas;   private List<String> zonas;
  public VentasBean() {     processList(null);   }
  public SelectItem[] getMesesOptions() {     SelectItem[] r = new SelectItem[13];     r[0] = new SelectItem("", "Todos");     for (int t = 0; t < meses.length; t++)       r[t + 1] = new SelectItem(meses[t], meses[t]);     return r;   }
  public List<Venta> getVentas() {     return ventas;   }
  public List<Venta> getVentasFiltradas() {     return ventasFiltradas;   }
  public SelectItem[] getZonasOptions() {     SelectItem[] r = new SelectItem[zonas.size() + 1];     r[0] = new SelectItem("", "Todas");     for (int t = 0; t < zonas.size(); t++)       r[t + 1] = new SelectItem(zonas.get(t), zonas.get(t));     return r;   }
  private void processList(Object args[]) {     ventas = new ArrayList<Venta>();     zonas = new ArrayList<String>();     ServletContext sc = (ServletContext) FacesContext.getCurrentInstance()                                         .getExternalContext().getContext();     Connection cn = (Connection) sc.getAttribute("datasource");     try {       PreparedStatement pst = cn.prepareStatement(sql);       if (args != null) {         for (int t = 0; t < args.length; t++) {           pst.setObject(t + 1, args[t]);         }       }       ResultSet rs = pst.executeQuery();       while (rs.next()) {         String zona = rs.getString("zona");         Venta venta = new Venta(zona, rs.getString("cliente"),                                 rs.getInt("anio"), rs.getInt("mes"),                                 meses[rs.getInt("mes") - 1],                                  rs.getDouble("ventas"));         ventas.add(venta);         if (!zonas.contains(zona))           zonas.add(zona);       }     } catch (SQLException e) {       e.printStackTrace();     }   }
  public void setVentasFiltradas(List<Venta> ventasFiltradas) {     this.ventasFiltradas = ventasFiltradas;   } }
Como pueden ver en el constructor se llama al método que llena la lista de ventas (List<Venta> ventas) processList(), lo hace en base a los datos obtenidos de la consulta sql además llena una lista con las zonas (List<String> zonas). También es necesario mencionar como obtenemos la conexión que almacenamos en el contexto general, primero obtenemos el contexto: ServletContext sc = (ServletContext) FacesContext.getCurrentInstance()                                      .getExternalContext().getContext(); Luego usamos el contexto para obtener la conexión: Connection cn = (Connection) sc.getAttribute("datasource");
La lista List<Venta> ventasFiltrada junto a los métodos setVentasFiltradas() y getVentasFiltradas() es lo único que necesitamos para que los filtros se procesen correctamente del lado del server.   El método getVentas() es el fundamental, el que provee los datos iniciales de la lista de ventas y el que se utiliza para generar las listas filtradas.   Por último los métodos getMesesOptions() y getZonasOptions() retornan un arreglo de objetos SelectItem que utilizará el componente tabla para renderizar los filtros de las columnas de zona y mes.   Bien, esto es todo por ahora, recuerden que disponen del proyecto eclipse completo en: https://github.com/magm3333/workspace-pftuto   Saludos  

Mariano