ReportesEnNetBeansConIReport

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

y
Elaborado por: Diego E. Silva L. [[{TableOfContentsTitle=TablaDeContenidos} | {TableOfContents title='Tabla de contenidos'}]]

Introduccin
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. http://downloads.sourceforge.net/ireport/iReport-nb-0.9.2.nbm

Instalando el plugin
Despus de descargar el archivo .nbm, abrimos el IDE NetBeans. Entramos al men Tools > Plugins, y en la ficha Downloaded, hacemos clic en el botn Add plugins... Seleccionamos el archivo .nbm que previamente hemos descargado. Despus de esto se mostrar la ventana i sta para instalarse el plugin: l

"

"

'

cem s c c e e Y F e:P z -Ne e s ce m s C c e Nex c f e: F e:P z - e f Ce Pe c m s em s e f z s c

#  # # !  

Ins ID I s s m


fc e e e
    !  $       # ! # 

em s esc e em s
&   

e sm s e s e ce c


e
 #  $ $ % % 

e e

cem s c c e

Ins

cem s c c e C ntinue c e e
    #

N sm s

e e
    

me


s
$   % &  !   ! & 

e
#

e e c

ee

es s

e e se

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

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 segn la ubicacin donde se instal el mdulo no encuentra la ubicacin del .jar que necesitamos para nuestra aplicacin. Por tanto, lo configuraremos manualmente. Hacemos clic en el botn Add Jar/Folder.. y buscamos la carpeta donde est instalada el NetBeans. Veremos que dentro hay una carpeta llamada ireport

Entramos a esa carpeta, luego a modules > e t. Buscamos el archivo jasperreports-3.0.1.jar,lo seleccionamos
)

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 exista.

Creando un proyecto
Lo que haremos en esta aplicacin 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 botn llamado Mostrar Viajes para mostrar en un reporte todos los viajes relacionados a esta persona. Adems, habr un botn de opcin (Radio Button) que permitir escoger el formato del reporte: en PDF o en HTML. Crearemos un proyecto web llamado TravelReport el cual utili ar el framework Visual Web JavaServer Faces.
0

Adem s

m s
6

ec '
3

s e Re
B 5

s 2 0 5-s
C C

'

c
7 3 B

s
D

de e s
G U 7 9 6 D @ 6 B 6 D D

s
X Y 7 7 7 c 7 7 Y X Y f 7 @ @ @ 6 V D W ` 6 3 6 D W b d 6 e V @ D 6 B 6 D D @ 9 V D 3 B 6 D 6 W 6 a C D 3 7 7 8 7 Y Y c 7 @ 6 V D ` 6 6 @ 6 6 W e V 6 B 4 D B 7 B C

De e de c m e es se ecc m s L e s m s e e P ge1 js e e e dr e c m e e e ser " e ecc e ers :" Adems de e de c m e es rras ram s Listbox s am s de aj de be e acabam s de e ar. e ane de ropiedades escribimos como id de es e componente e alor pe sonasL . ambin pe aremos n Radio button g oup al costado de la lista. Pondremos formatoCG como alor de la propiedad id.
7 7 B 3 @ 6 B 6 3 3 D @ 7 3 @ 3 3 2 7 3 @ g p 4 V h h i

e acabamos de pe ar seleccionamos la opcin Configure Default Options L e o le damos clic derec o sobre el Radio button group para e tengan como en la siguiente imagen: File:Pantallazo-Options Customizer - formatoCG.png Le damos nue amente clic derec o seleccionamos Add inding attribute . Hacemos lo mismo con el componente personasL . Para finalizar con el diseo de esta pgina, pegaremos un componente button tendr como te to "Mostrar Reporte". l diseo de la pgina debe uedar as : File:Pantallazo- ravelReport - Page1.png
E V 4 e V 4 ` e V E i g ` ` c

ditamos las opciones

Accediendo a la base de datos

c E

ntramos al panel de Services del panel iz uierdo, o presionando Ctrl+5. Abrimos el nodo Databases, acemos clic derec o sobre la cone in a la base de datos travel seleccionamos Connect... eleccionamos el nodo Tables >> P RSON , lo arrastramos lo soltamos sobre el componente personasL . abremos ue se realiz a ue las opciones ue se mostrarn en el diseo sern "abc" tres veces. Hacemos clic derec o sobre personasL seleccionamos ind to data... Debe lucir as : File:Pantallazo- ind to Data - personasL .png
e f ` r i ` f e ` e d E i i s

Diseando el reporte

Lo que necesitamos antes de programar cmo debe mostrarse el reporte, es, justamente, dise ar el reporte. Presionamos Ctrl+N para mostrar el asistente para crear un nuevo archivo. Seleccionamos la categora Report y el tipo de archivo Report. File:Pantalla o-New File.png Clic en el botn Ne t. Escribimos viajes.jr ml como nombre del archivo, y en el campo Folder seleccionamos a travs del botn Browse la carpeta src/java/travelreport File:Pantalla o-New Report.png Clic en el botn Ne t. En la ventana donde se selecciona el Datasource, hacemos clic en el botn New.., y en la ventana de dilogo que se muestra, seleccionamos NetBeans Database JDBC Connection
u v u v v t

Clic en el botn Next. scribimos 'travelD como nombre,

w x

de la lista desplegable seleccionamos la cone in para la base de datos travel.

Podemos acer clic en el botn Test para comprobar ue est correcta la cone in. Clic en el botn Save. Clic en el botn Design query para disear la consulta del reporte. n este diseador de consultas, desplegamos la lista ue se encuentra en la parte media iz uierda seleccionamos la base de datos TRAV L. Con esto se mostrarn las tablas de la base de datos. File:Pantallazo- uery1.png Hacemos doble clic en la tabla TRIP. Un cono ue representa a la tabla TRIP se mostrar en el panel derec o de la ventana. Hacemos doble clic tambin en la tabla TRIPTYP . eremos ue se mostr la asociacin e istente entre ambas tablas. Activamos las casillas de verificacin de los campos D PDATE, DEPCITY y DESTCITY de la TRIP, y DESCRIPTION de la tabla TRIPTYPE.

Clic en el botn Ok l diseo de la consulta va a uedar as : File:Pantallazo- uery3.png Clic en el botn Ok Ahora vemos el comando QL generada por el diseador. File:Pantallazo-New File-2.png

Clic en el botn Ne t. En la seleccin de campos, hacemos clic en el botn ">>" para agregar todos los campos en el reporte. File:Pantalla o-New File-3.png Clic en el botn Ne t. En la seleccin de grupos, hacemos clic en el botn Ne t, ya que no haremos alguna agrupacin en el reporte. En la seleccin de dise o ("Layout") del reporte, seleccionamos Tabular Layout. File:Pantalla o-New File-4.png Clic en el botn Ne t. Finalmente, clic en el botn Finish. El IDE nos mostrar el dise o del reporte que acabamos de crear utili ando el asistente. Podemos editarlo para que lu ca como en la siguiente imagen: File:Pantalla o-NetBeans IDE 6.1-reporte1.png

Modificando el reporte para que permita parmetros.

Entramos a la opcin Window > Navigating > Report Inspector. Se abrir un panel llamado Report Inspector en la parte lateral i quierda 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:Pantalla o-NetBeans IDE 6.1-parameterPersonId.png Hacemos clic derecho en una ona en blanco del dise ador de reportes, y seleccionamos Edit uery. Se nos presentar el dise ador de consultas para el reporte actual. File:Pantalla o-Report query.png Tenemos dos caminos para agregar el parmetro personId en la consulta 1. Agregando el valor WHERE TRIP.PERSONID = $P{personId} desde la misma ventana de edicin del comando SQL.

y y y

2.

Utili ando el dise ador de reporte, haciendo clic en el botn Query designer. Para ello, desde el dise ador de consulta, damos clic derecho sobre el nodo WHERE y seleccionamos add condition
d

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}
e e e e e e e

Hacemos clic en el botn Ok para cerrar la ventana Report query Podemos hacer clic en el botn Preview de la barra de herramientas del diseo del reporte para ver una muestra de cmo se visualizara el reporte.

Adicionando Image ervlet a la aplicacin

g

Los reportes H ML de asperReports utilizan algunos recursos propios como ciertas imgenes que ayudan a mostr arse un reporte correctamente. Para ello, debemos agregar un ervlet de asperReports para que interprete las peticiones de imgenes usando sus propios recursos. Abrimos el archivo web.xml, seleccionamos la seccin Servlets, y hacemos clic en el botn Add Servlet Element que se encuentra en la parte superior derecha. la ventana de dilogo que se muestra, escribimos los siguientes valores:
i h

Clic en el botn OK

Programando el lan amiento del reporte.

Hasta ahora hemos hecho todo el dise o visual. Ahora haremos la parte de la programacin del botn 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 cdigo fuente de ApplicationBean1.java se abrir en el editor. sugerencia: podemos escribir las siguientes lneas de cdigo presionando Ctrl+Espacio cuando se desea escribir una clase o un mtodo de t manera que el IDE al nos pueda sugerir cules son las clases que se utili ar y agregar los imports necesarios. Tambin se puede copiar estas lneas de cdigo y pegarlas en el editor del IDE, y luego presionar Ctrl+Mayscula+I para importar las clases que se utili an en la clase
l m k

. Agregemos el siguiente mtodo:

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.getCon nection(); JasperPrint jasperPrint = JasperFillManager.fillReport(inputStream, params, conn); HttpServletResponse response = (HttpServletResponse) econtext.getResponse(); HttpServletRequest request = (HttpS ervletRequest) econtext.getRequest(); response.setContentType(tipo); if ("application/pdf".equals(tipo)) { exporter = new JRPdfExporter(); exporter.setParameter(JRExporterParameter.JASPER_PRINT, jasprPrint); e exporter.setParameter(JRExporterParameter. UTPUT_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. SEVERE, null, ex); throw new FacesException(ex); } fcontext.responseComplete();
o

Ahora, desde la ventana Page1.jsp hacemos doble clic en el botn Mostrar reporte. Con esto se mostrar el mtodo button1_action(). ditemos el mtodo 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();
q q q q

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;
q q q q q q

Ejecutando la aplicacin
Ejecutamos el proyecto con la tecla F6.

Seleccionemos una persona de la lista, seleccionamos una opcin del tipo de reporte (html o pdf) y hacemos clic en el botn "Mostrar reporte". Reporte en HTML:

Reporte en PDF: