Ejemplo 3: Reporte con datos

Introducción

Saludos a todos, hace ya tiempito que no escribía un nuevo capítulo del curso, les pido disculpas a los que siguen el curso, pero aquí va otro capítulo mas.

En este tercer ejemplo, implementé un reporte completo, con una consulta a una base de datos y con un encabezado de reporte y algunos datos en el detalle.

Para el ejemplo, utilicé el manejador de base de datos MySql, debido a que es muy conocido por todos, pero, para quienes quieran usar otro mas de su agrado, todas las configuraciones necesarias se las puede modificar en el archivo “build.properties” del ejemplo (además claro de añadir la librería jdbc necesaria a la carpeta “lib”).

Previo a la ejecución del ejemplo, debemos:

  1. Crear la base de datos que utilizaremos.
  2. Actualizar las configuraciones de la conexión a nuestra base de datos de ejemplo en el archivo “build.properties”.
  3. Finalmente, crear las tablas y llenar algunos datos a las mismas. Dentro del ejemplo, añadí los scripts sql que utilicé, ver archivo “data/sample3_mysql.sql”.

Ahora si, podemos comenzar con el ejemplo:

El ejemplo

Solo voy a explicar las diferencias con el segundo ejemplo, que no son muchas:

  • Se añadió una conexión a la base de datos para ejecutar el reporte.
  • Se añadió una consulta al diseño del reporte.
  • Se añadió los registros de la consulta al diseño del reporte.
  • Se añadió un encabezado y un detalle al diseño del reporte.
  • Se hizo una mejora a la interfaz de usuario, utilizando ahora el componente JRViewer para mostrar el resultado del reporte.

La conexión a la base de datos

La conexión a la base de datos es simplemente una conexión JDBC, que se instancia utilizando las configuraciones definidas previamente. Una vez creada la conexión, ésta se pasa como parámetro al momento de llenar el reporte, el código es el siguiente:


Connection connection=createConnection();
try {
jasperPrint =JasperFillManager.fillReport(
jasperReport,
new HashMap(),
connection);
} catch (JRException e) {.....}
finally {
try {
connection.close();
} catch (SQLException e) {.....}
}

Como se puede ver, creamos la conexión, llenamos el reporte y luego no debemos olvidar cerrar la conexión a la base de datos.

La consulta sql

Para añadir una consulta al reporte, debemos usar la clase “JRDesignQuery”, simplemente debemos instanciar esta clase, definimos la consulta y añadimos la instancia a nuestro objeto “jasperDesign”:


private JRDesignQuery createQuery(){
JRDesignQuery query=new JRDesignQuery();
query.setLanguage("sql");
query.setText("select p.personid as personId, " +
"p.name as personName, " +
"p.age as personAge, " +
"c.carid as carId, " +
"c.model as carModel, " +
"c.color as carColor " +
"from person p join car c on p.personid=c.ownerid " +
"order by personName");
return(query);
}
.....
jasperDesign.setQuery(createQuery());

Podemos utilizar otros lenguajes de consulta (como el de JPA por ejemplo si estamos usando JEE) usando el método “setLanguage” de “JRDesignQuery”.

Registros de la consulta

Ahora que añadimos la consulta, tenemos que definir los registros de la misma en el diseño del reporte, esto lo hacemos creando instancias de la clase “JRDesignField” y añadiéndolos al objeto “jasperDesign”. Esto lo podemos ver a continuación:


JRDesignField field=new JRDesignField();
field.setName(fieldName);
field.setValueClassName(fieldClass); //tipo de field

......

try {
jasperDesign.addField(field);
} catch (JRException e) {....}

Al instanciar el field, le damos un nombre y un tipo (java.lang.String, java.lang.Integer, etc). Luego lo añadimos a nuestro objeto que representa el diseño del reporte.

Banda encabezado y banda detalle

Se crean dos bandas (el mismo procedimiento que para la banda del título), y se les añaden componentes (campos de texto en este caso):


//The header band
jasperDesign.setColumnHeader(
createHeaderBand(
(JRDesignStyle) jasperDesign.getStylesMap().get("headerStyle")
)
);

//The detail band
jasperDesign.setDetail(
createDetailBand(
(JRDesignStyle) jasperDesign.getStylesMap().get("detailStyle")
)
);

....

private JRDesignBand createHeaderBand(JRDesignStyle style){
JRDesignBand header=new JRDesignBand();
header.setSplitAllowed(true);
header.setHeight(12);

JRDesignTextField headerTextField1= ..... ;
header.addElement(headerTextField1);

Para añadir la banda de encabezado de columna, usamos el método “jasperDesign.setColumnHeader”, y para el detalle del reporte utilizamos: “jasperDesign.setDetail”.

Utilizando el JRViewer

Primero expliquemos un poquito, el “JRViewer” es el componente de JasperReports que utilizamos para mostrar los reportes generados en la interfaz gráfica de nuestra aplicación de escritorio (para la que utilizamos la tecnología swing).

Este componente, de la forma que lo utilicé, solo requiere que le provea de un objeto de tipo “JasperPrint” (el resultado de llenar nuestro reporte), lo hago de la siguiente manera:


jasperPrint=((MyActionEvent)e).getResult();
jrViewer=new JRViewer(jasperPrint);
jrViewer.setBounds(10,40,620,400);
this.getContentPane().add(jrViewer);
this.setVisible(true);

“MyActionEvent” es un “ActionEvent” que tiene una propiedad en la que puedo almacenar el resultado de la generación del reporte (objeto de clase “JasperPrint”). El método “getResult” de “MyActionEvent” retorna un objeto de tipo “JasperPrint”.

No encontré un método en la clase “JRViewer” que me permita cambiar el contenido a dibujar cuando el objeto ya esta creado, entonces tuve que volver a crear la instancia después de cada ejecución de reporte y añadirla nuevamente en la interfaz gráfica del ejemplo.

Y listo, ese es el ejemplo, para ejecutarlo solo deben usar la tarea “runSample” del script de Ant que viene con el ejemplo.

Aquí como “bonus” o “yapa”(como diríamos en mi país), agrego el diagrama de clases de las que usamos del API de JasperReports para diseñar el reporte:
Diagrama de clases para el ejemplo 3

Como siempre, pueden descargar el ejemplo aquí: JRTutorialSample3

Espero sus comentarios.

2 comentarios el “Ejemplo 3: Reporte con datos

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s