Search:

HOME / Community / Wiki / ReportesEnNetBeansConIReport

ReportesEnNetBeansConIReport

Reportes en NetBeans 6.1 con iReport/JasperReports y Visual Web JavaServer Faces

Elaborado por: Diego E. Silva L.

[[{TableOfContentsTitle=TablaDeContenidos} | {TableOfContents title='Tabla de

contenidos'}]]

Introducción

Microsoft tiene su Visual Studio, Java tiene a NetBeans.

Microsoft tiene su Crystal Reports, Java tiene JasperReports.

Java no tiene nada qué envidiar a Visual Studio. Ni menos en los reportes.

JasperReports es un framework bastante completo para desarrollar reportes tanto

web como desktop en Java.

Aunque el formato fuente de un reporte en JasperReports es un archivo XML, existe

una herramienta que permite crear un reporte de manera visual. Su nombre: iReport.

Pero como estamos usando como IDE a NetBeans, podemos elaborar nuestro reporte

sin salir del IDE. Para ello, existe un plugin (archivo .nbm) para NetBeans que muestra

el iReport dentro del mismo IDE.

Not logged in. Log in, Register

NetBeans WikiNavigation

Main Page

User FAQ

Developer

FAQ

Communi

ty Docs

Developm

ent

Quality

Dream

Team

Popular

Projects

Bug

http://downloads.sourceforge.net/ireport/iReport-nb-0.9.2.nbm

Instalando el plugin

Después de descargar el archivo .nbm, abrimos el IDE NetBeans. Entramos al menú

Tools > Plugins, y en la ficha Downloaded, hacemos clic en el botón Add plugins...

Seleccionamos el archivo .nbm que previamente hemos descargado. Después de esto

se mostrará la ventana lista para instalarse el plugin:

Y hacemos clic en el botón Install. Se nos mostrará la siguiente ventana:

File:Pantallazo-NetBeans IDE Installer.png

Clic en Next. Aceptamos los términos de la licencia, y hacemos clic en Install. Nos

mostrará la ventana de advertencia ya que el plugin es posible que no sea confiable:

File:Pantallazo-Verify Certificate.png

Pero como sabemos de dónde lo hemos descargado, hacemos clic en Continue.

Al finalizar la instalación del plugin, veremos que hay una opción nueva en la barra de

herramientas,

y se muestra un panel nuevo de salida llamado "iReport output"

DashBoar

d

Hudson

Sources

Nightly

Wiki

Etiquette

Formattin

g Rules

Terms Of

Use

Toolbox

What

links here

Related

changes

Special

pages

Printable

version

Permanen

t link

Page

Discu

ssion

View

source

History

NetBeans.org

Join

News

Releases

&

Planning

Mailing

Lists

Bugzilla

Contribut

Verificando la biblioteca instalada.

Entremos a Tools > Libraries y seleccionemos la biblioteca JasperReports 2.0.5-

snapshot. Revisemos el panel del classpath y veremos que hay una referencia

marcada de rojo.

Pues bien, significa que según la ubicación donde se instaló el módulo no encuentra

la ubicación del .jar que necesitamos para nuestra aplicación. Por tanto, lo

configuraremos manualmente.

Hacemos clic en el botón Add Jar/Folder.. y buscamos la carpeta donde está instalada

el NetBeans. Veremos que dentro hay una carpeta llamada ireport

File:Pantallazo-Browse JAR-Folder.png

Entramos a esa carpeta, luego a modules > ext.

Buscamos el archivo jasperreports-3.0.1.jar,lo seleccionamos

File:Pantallazo-Browse JAR-Folder-1.png

e

Teams

Guideline

s

Projects

y hacemos clic en Add JAR/Folder.

Como podemos deducir, el problema que no encontraba el archivo jasperreports-

2.0.5.jar era porque no existía.

Creando un proyecto

Lo que haremos en esta aplicación es mostrar en una lista todas las personas

registradas en la base de datos TRAVEL. El usuario seleccionará uno de ellos, y hará

clic en un botón llamado Mostrar Viajes para mostrar en un reporte todos los viajes

relacionados a esta persona. Además, habrá un botón de opción (Radio Button) que

permitirá escoger el formato del reporte: en PDF o en HTML.

Crearemos un proyecto web llamado TravelReport el cual utilizará el framework

Visual Web JavaServer Faces.

Además, agregamos la biblioteca 'JasperReports 2.0.5-snapshot'

La página con la lista de personas

De la paleta de componentes seleccionamos un Label y lo soltamos en el Page1.jsp.

El texto que tendrá el componente label será "Seleccione una persona:".

Además, de la paleta de componentes arrastramos un Listbox y lo soltamos debajo

del label que acabamos de pegar. En el panel de propiedades escribimos como id de

este componente el valor personasLB.

También pegaremos un Radio button group al costado de la lista. Pondremos

formatoCG como valor de la propiedad id.

Luego le damos clic derecho sobre el Radio button group que acabamos de pegar y

seleccionamos la opción Configure Default Options... Editamos las opciones para que

tengan como en la siguiente imagen:

File:Pantallazo-Options Customizer - formatoCG.png

Le damos nuevamente clic derecho y seleccionamos Add Binding attribute. Hacemos

lo mismo con el componente personasLB.

Para finalizar con el diseño de esta página, pegaremos un componente button y

tendrá como texto "Mostrar Reporte".

El diseño de la página debe quedar así:

File:Pantallazo-TravelReport - Page1.png

Accediendo a la base de datos

Entramos al panel de Services del panel izquierdo, o presionando Ctrl+5. Abrimos el

nodo Databases, hacemos clic derecho sobre la conexión a la base de datos travel y

seleccionamos Connect...

Seleccionamos el nodo Tables >> PERSON, lo arrastramos y lo soltamos sobre el

componente personasLB. Sabremos que se realizó ya que las opciones que se

mostrarán en el diseño serán "abc" tres veces.

Hacemos clic derecho sobre personasLB y seleccionamos Bind to data... Debe lucir

así:

File:Pantallazo-Bind to Data - personasLB.png

Diseñando el reporte

Lo que necesitamos antes de programar cómo debe mostrarse el reporte, es,

justamente, diseñar el reporte.

Presionamos Ctrl+N para mostrar el asistente para crear un nuevo archivo.

Seleccionamos la categoría Report y el tipo de archivo Report.

File:Pantallazo-New File.png

Clic en el botón Next.

Escribimos viajes.jrxml como nombre del archivo, y en el campo Folder

seleccionamos a través del botón Browse la carpeta src/java/travelreport

File:Pantallazo-New Report.png

Clic en el botón Next.

En la ventana donde se selecciona el Datasource, hacemos clic en el botón New.., y

en la ventana de diálogo que se muestra, seleccionamos NetBeans Database JDBC

Connection

Clic en el botón Next.

Escribimos 'travelDB como nombre, y de la lista desplegable seleccionamos la

conexión para la base de datos travel.

Podemos hacer clic en el botón Test para comprobar que esté correcta la conexión.

Clic en el botón Save.

Clic en el botón Design query para diseñar la consulta del reporte.

En este diseñador de consultas, desplegamos la lista que se encuentra en la parte

media izquierda y seleccionamos la base de datos TRAVEL. Con esto se mostrarán las

tablas de la base de datos.

File:Pantallazo- query1.png

Hacemos doble clic en la tabla TRIP. Un ícono que representa a la tabla TRIP se

mostrará en el panel derecho de la ventana. Hacemos doble clic también en la tabla

TRIPTYPE. Veremos que se mostró la asociación existente entre ambas tablas.

Activamos las casillas de verificación de los campos DEPDATE, DEPCITY y DESTCITY

de la TRIP, y DESCRIPTION de la tabla TRIPTYPE.

Clic en el botón Ok

El diseño de la consulta va a quedar así:

File:Pantallazo- query3.png

Clic en el botón Ok

Ahora vemos el comando SQL generada por el diseñador.

File:Pantallazo-New File-2.png

Clic en el botón Next.

En la selección de campos, hacemos clic en el botón ">>" para agregar todos los

campos en el reporte.

File:Pantallazo-New File-3.png

Clic en el botón Next.

En la selección de grupos, hacemos clic en el botón Next, ya que no haremos alguna

agrupación en el reporte.

En la selección de diseño ("Layout") del reporte, seleccionamos Tabular Layout.

File:Pantallazo-New File-4.png

Clic en el botón Next. Finalmente, clic en el botón Finish.

El IDE nos mostrará el diseño del reporte que acabamos de crear utilizando el

asistente. Podemos editarlo para que luzca como en la siguiente imagen:

File:Pantallazo-NetBeans IDE 6.1-reporte1.png

Modificando el reporte para que permita parámetros.

Entramos a la opción Window > Navigating > Report Inspector. Se abrirá un panel

llamado Report Inspector en la parte lateral izquierda inferior.

Hacemos clic derecho sobre el nodo Parameters y Add parameter. Con esto se

agregará un nuevo nodo llamado parameter1.

Lo seleccionamos y modificamos las propiedades colocando lo siguiente:

name: personId

Default value expresion: "1"

use as a prompt: (sin seleccionar)

File:Pantallazo-NetBeans IDE 6.1-parameterPersonId.png

Hacemos clic derecho en una zona en blanco del diseñador de reportes, y

seleccionamos Edit query. Se nos presentará el diseñador de consultas para el

reporte actual.

File:Pantallazo-Report query.png

Tenemos dos caminos para agregar el parámetro personId en la consulta

1. Agregando el valor WHERE TRIP.PERSONID = $P{personId} desde la

misma ventana de edición del comando SQL.

2. Utilizando el diseñador de reporte, haciendo clic en el botón Query designer.

Para ello, desde el diseñador de consulta, damos clic derecho sobre el nodo

WHERE y seleccionamos add condition

De cualquier manera, el query debe ser similar a este:

SELECT

TRIP."DEPDATE" AS TRIP_DEPDATE,

TRIP."DEPCITY" AS TRIP_DEPCITY,

TRIP."DESTCITY" AS TRIP_DESTCITY,

TRIPTYPE."DESCRIPTION" AS TRIPTYPE_DESCRIPTION

FROM

"TRAVEL"."TRIPTYPE" TRIPTYPE INNER JOIN "TRAVEL"."TRIP"

TRIP ON TRIPTYPE."TRIPTYPEID" = TRIP."TRIPTYPEID"

WHERE

TRIP.PERSONID = $P{personId}

Hacemos clic en el botón Ok para cerrar la ventana Report query

Podemos hacer clic en el botón Preview de la barra de herramientas del diseño del

reporte para ver una muestra de cómo se visualizaría el reporte.

Adicionando ImageServlet a la aplicación

Los reportes HTML de JasperReports utilizan algunos recursos propios como ciertas

imágenes que ayudan a mostrarse un reporte correctamente. Para ello, debemos

agregar un Servlet de JasperReports para que interprete las peticiones de imágenes

usando sus propios recursos.

Abrimos el archivo web.xml, seleccionamos la sección Servlets, y hacemos clic en el

botón Add Servlet Element que se encuentra en la parte superior derecha. En la

ventana de diálogo que se muestra, escribimos los siguientes valores:

Clic en el botón OK

Programando el lanzamiento del reporte.

Hasta ahora hemos hecho todo el diseño visual. Ahora haremos la parte de la

programación del botón Mostrar reporte.

Regresamos a la ventana Page1.jsp y estando en el modo "Design" vamos a la

ventana Navigator. Examinamos los nodos y le damos doble clic en el nodo

ApplicationBean1. El código fuente de ApplicationBean1.java se abrirá en el editor.

sugerencia: podemos escribir las siguientes líneas de código presionando

Ctrl+Espacio cuando se desea escribir una clase o un método de tal manera que el

IDE nos pueda sugerir cuáles son las clases que se utilizará y agregará los imports

necesarios. También se puede copiar estas líneas de código y pegarlas en el editor

del IDE, y luego presionar Ctrl+Mayúscula+I para importar las clases que se utilizan

en la clase

.

Agregemos el siguiente método:

public void jasperReport(String tipo, String dataSourceName,

Map<String, String> params) throws ClassNotFoundException {

ExternalContext econtext = getExternalContext();

InputStream inputStream =

ApplicationBean1.class.getResourceAsStream("/travelreport/viajes

.jasper");

if (inputStream == null) {

throw new ClassNotFoundException("Archivo

viajes.jasper no se encontró");

}

FacesContext fcontext =

FacesContext.getCurrentInstance();

try {

JRExporter exporter = null;

Context ctx=new InitialContext();

DataSource ds=(DataSource)

ctx.lookup(dataSourceName);

Connection conn=ds.getConnection();

JasperPrint jasperPrint =

JasperFillManager.fillReport(inputStream, params, conn);

HttpServletResponse response = (HttpServletResponse)

econtext.getResponse();

HttpServletRequest request = (HttpServletRequest)

econtext.getRequest();

response.setContentType(tipo);

if ("application/pdf".equals(tipo)) {

exporter = new JRPdfExporter();

exporter.setParameter(JRExporterParameter.JASPER_PRINT,

jasperPrint);

exporter.setParameter(JRExporterParameter.OUTPUT_STREAM,

response.getOutputStream());

} else if ("text/html".equals(tipo)) {

exporter = new JRHtmlExporter();

exporter.setParameter(JRExporterParameter.JASPER_PRINT,

jasperPrint);

exporter.setParameter(JRExporterParameter.OUTPUT_WRITER,

response.getWriter());

exporter.setParameter(JRHtmlExporterParameter.IMAGES_URI,

request.getContextPath() + "/image?image=");

}

if (exporter != null) {

exporter.exportReport();

}

} catch (Exception ex) {

Logger.getLogger(ApplicationBean1.class.getName()).log(Level.SEV

ERE, null, ex);

throw new FacesException(ex);

}

fcontext.responseComplete();

}

Ahora, desde la ventana Page1.jsp hacemos doble clic en el botón Mostrar reporte.

Con esto se mostrará el método button1_action(). Editemos el método para que luzca

así:

public String button1_action() {

try {

Map<String, String> params = new HashMap<String,

String>();

params.put("personId",

getPersonasLB().getSelected().toString());

String dataSourceName =

getSessionBean1().getPersonRowSet().getDataSourceName();

String tipo = (String) formatoCG.getSelected();

getApplicationBean1().jasperReport(tipo,

dataSourceName, params);

} catch (Exception ex) {

Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null,

ex);

error(ex.toString());

}

return null;

}

Ejecutando la aplicación

Ejecutamos el proyecto con la tecla F6.

Seleccionemos una persona de la lista, seleccionamos una opción del tipo de reporte

(html o pdf) y hacemos clic en el botón "Mostrar reporte".

Reporte en HTML:

Reporte en PDF:

Recursos

El código fuente del proyecto utilizado en este tutorial se encuentra aquí http://diesil-

java.googlecode.com/files/TravelReport.tar.gz

Ver también

Generating Reports and PDFs From a Web Application

Using Databound Components to Access a Database

This page was last modified on 5 November 2009, at 15:44.

This page has been accessed 8,540 times.

Shop   SiteMap   About Us   Contact   Legal   By use of this website, you agree to the NetBeans Policies and Terms of Use

Compani

 Sponsored by 

on Projects: