Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual Reportes JSP
Manual Reportes JSP
[email protected]
Javier Firmado digitalmente por Javier
Dominguez Geniz
Nombre de reconocimiento (DN):
Dominguez cn=Javier Dominguez Geniz, o=Geniz
SWF, ou, email=ajdgeniz@hotmail.
Netbeans 6.1 (Puede utilizar Sun Java Studio CReator, Sun Java Studio Enterprise e
inclusive versiones pasadas de Netbeans).
Tomcat 6.0, Sera nuestro servidor Web, viene incluido en el pack de Netbeans, o
podemos utilizar algún otro servidor Como GlassFish, JBoss e inclusive IBM
WebSphere.
Adobe Reader: Este será utilizado para ver nuestros reportes que estarán en formato
PDF.
MySQL 5.0: Sera el encargado de alojar a nuestra base de Datos.
Ireport y JasperReports 2.0.4.: El primero será el entorno grafico que nos ayudara a
crear el Reporte, mientras que de el segundo utilizaremos las librerías que nos
ayudaran a compilar y ejecutar el reporte que son las siguientes:
1. commons-beanutils-1.7
2. commons-collections-2.1
3. commons-digester-1.7
4. commons-javaflow-20060411
5. commons-logging-1.0.2
6. jasperreports-2.0.4
7. itext-1.3.1 (Importante tener esta librería ya que es la encargada de generar nuestro
reporte en PDF y otros formatos)
Para ejecutar este script, cópielo y guárdelo en un nuevo documento SQL, abra alguna
interfaz grafica de MySQL (Query Browser o MySQL- Front) y ejecute el Script.
El siguiente paso iniciaremos la creación del Reporte con ayuda de Ireport, para ello vaya al
menú InicioTodos los ProgramasJasperSoftIreport 2.04Ireport 2.0.4
Despues Coloque el valor 0 en la opción altura de banda y haga clic en aplicar. Repita este
proceso para la banda columnHeader, columnFooter,lastPageFooter,summary y noData.
Title: 80
pageHeader: 30
detail: 260
y pageFooter: 55
Consulta SQL y Como establecer una Conexión
Una vez que ya tenemos nuestro reporte listo para ser configurado, debemos empezar por
indicarle a Ireport que campos vamos a mostrar, de igual manera tendremos que establecer
una conexión para probar nuestro reporte para ello siga los siguientes pasos:
Una vez que nuestra conexión esta hecha diríjase al menú “”EDITAR””CONSULTA DE
INFORME” y deshabilite la casilla ya que esta opción le estará
pidiendo su password a medida que escriba la consulta, una vez que finalice la consulta
habilítela para que recupere todos los campos de la vista. Ahora proceda a escribir la
consulta, en este ejemplo escribiremos un SELECT sencillo que nos regresará todos los
campos que contiene la vista ordenados por ID:
también notara que en la parte de abajo se encuentra la lista de todos los campos de la vista y
además el tipo de dato JAVA al que pertenece cada uno, utilice esta información para los
campos de texto, de esta manera sabe el nombre de cada campo y el tipo primitivo de JAVA
al que pertenece.
Banda Title
En esta banda superior crearemos el encabezado del reporte como lo muestra la siguiente
figura, constará de un titulo, un subtitulo y dos imágenes, una en cada extremo, además de
una línea en la parte superior y otra en la inferior.
Haga clic en el botón imagen y dibuje un rectángulo donde aparecerá nuestro primer
logotipo que será en la parte izquierda, repita el proceso pero ahora del lado derecho, no se
preocupe porque no se vean imágenes aun, ya que se las asignaremos en unos segundos,
después inserte dos campos de “Texto Estático” haciendo clic en el botón fíjese bien que
sean estáticos y no “Campos de texto” ya que estos tiene otra función y los utilizaremos hasta
la banda de detalles. Colóquelos de cómo muestra la figura representativa a esta banda.
¡Revise respetar el espacio asignado para esa banda, este se encuentra delimitado por unas
líneas de color azul, y que de pasarse o abarcar parte de otra banda Ireport nos lanzara un
error al momento de la compilación y no conseguiremos ejecutar nuestro reporte!
Ya para acabar el formato del encabezado agregue dos líneas, una en la parte superior y otra
en la parte inferior haciendo clic en el botón
Ahora haga doble clic sobre los campos de texto y estos estarán listos para ser editados,
escriba lo que desee y presione ENTER para cerrar la edición, puede utilizar la barra de
herramientas “Formato de Texto”, para formatear el texto, solo seleccione el campo de texto
estático y utilice los botones que desee de esta barra:
Para insertar las imágenes de nueva cuenta haga doble clic sobre los objetos de imágenes
que coloco anteriormente, enseguida aparecerá un cuadro de dialogo que le pedirá ubicar la
imagen para ello haga clic en el botón buscar y localícela (Acepta tipos GIF y JPG), Si es
posible deje solo el nombre y la extensión de la imagen, borre el resto de la ruta y coloque las
imágenes en la misma carpeta que se localiza el reporte, esto nos ayudara a no tener
conflictos en dado caso que la carpeta de donde jalamos las imágenes no este disponible,
además también evitara que busque en alguna otra ruta en caso de que ejecutemos el reporte
en otra maquina. Repita el proceso para la otra Imagen. Y listo ahora tendremos el aspecto
deseado.
Banda pageHeader
Esta banda en realidad es el encabezado que tendrán el resto de las paginas por si llega a
generar mas de un reporte, ya que la banda title solo la colocara el reporte en nuestra primera
hoja, para elaborar esta banda inserte dos “Campo estáticos”(para el titulo del encabezado y
para el ID), una “línea”, además de un rectángulo y un “CAMPO DE TEXTO” que ya se
había mencionado anteriormente, este ultimo elemento contendrá el ID de cada registro
almacenado en la base de datos y será llenado dinámicamente en tiempo de ejecución, para
escribir los parámetros que recibirá coloque $F{campo de la tabla} donde: $Findica que será
un campo se la tabla, si fuera un parámetro coloque $P, dentro de las llaves{} coloque el
nombre del campo de la tabla tal y como lo asigno al crear la base de datos. Otra
consideración a tener es el tipo de dato que contendrá ya que tanto como base de datos como
reporte utilizan los tipos de datos de JAVA, si su dato es VARCHAR en MySQL entonces
asígnele un tipo STRING de JAVA, para ello seleccione el campo haciendo un clic sobre el y
vaya al menú propiedadesCampo de texto y seleccione el tipo de dato seleccionando una
opción de la lista desplegable de la opción “Clase de Expresión”, en este caso el ID es
numérico por lo que deberá seleccionar el tipo INTEGER. La edición de este tipo de campo
también se activa haciendo doble clic y en la ficha Expresión se escribe el formato antes
mencionado: $F{nombre_campo}
La banda negra es solo un rectángulo relleno de color negro, puede colocarlo o no según sus
gustos y necesidades.
Listo, nuestra segunda banda esta ahora diseñada. No olvide respetar los espacios y limites
de cada banda.
Banda detail
Esta es nuestra banda principal porque tiene como función principal mostrar todos los datos
de nuestra tabla o VISTA como lo es en este caso, para llenar puede ir insertando parejas de
campos “Estático” y ”Texto”, el estático será para poner los conceptos y el de texto será el
dato obtenido de la vista de la base de datos, para ello repita los pasos anteriormente
mencionados. Si lo hace de esta manera No olvide colocar el tipo de dato de cada Campo de
Texto. Y Recuerde Colocar el nombre de la columna dentro de las llaves tal y como lo asigno
en la Base de datos.
Otra manera de hacerlo y mucho mas fácil es yendo al panel”Estructura del Documento”
despliegue la carpeta CAMPOSSeleccione el campo que desea mostrar en el reporte y
arrástrelo a la banda DETAIL, arrastre todos los que desee a la banda y de esta manera
estará seguro que el nombre del campo y el tipo se agregaran automáticamente, repita
esta operación para cada campo de texto.
Una vez que están todos los campos solo colóqueles un campo estático y escríbale el
mensaje o concepto asociado con cada campo de texto, por el momento su apariencia deberá
quedar más o menos así:
Banda pageFooter
Para la elaboración de esta ultima banda puede seguir el diseño de este manual o colocarle lo
que desee esta banda fungirá como pie de pagina, cabe destacar que también mostrara la
fecha de creación del reporte y la numeración de las hojas, para la fecha y los N de pagina
dibuje tres campos de textos, edítelos y escríbales la sig. Información:
Listo !!! Ahora ya tenemos finalizado nuestro reporte con mas o menos la sig. Apariencia:
Diríjase al menú ConstruirEjecutar informe (Usando conexión activa) Y a continuación se
le pedirá su password, escríbalo. Si es que lo tiene de lo contrario déjelo en blanco
<%--
Document : index
Created on : 08-ene-2009, 20:17:03
Author : Geniz
--%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Mi primer Reporte en JSP!</h2>
<br>
<br>
<a href="Reportes.jsp">Generar Reporte</a>
</body>
</html>
Ahora busque la carpeta del proyecto en la ubicación que eligió y cree una nueva carpeta
llamada reportes dentro de buil\web, agregue las imágenes que utilizo en el reporte y también
el reporte compilado con extensión .JASPER, ahora los directorios deben estar mas o menos
así:
Ahora crearemos la página JSP que lanzara el reporte así que escriba el siguiente código
fuente:
Reportes.jsp
<%--
Document : Reportes
Created on : 08-ene-2009, 20:30:51
Author : Geniz
--%>
<%
/*Parametros para realizar la conexión*/
Connection conexion;
Class.forName("com.mysql.jdbc.Driver").newInstance();
conexion = DriverManager.getConnection("jdbc:mysql://localhost/Agenda","root","");
/* No enviamos parámetros porque nuestro reporte no los necesita asi que escriba cualquier
cadena de texto ya que solo seguiremos el formato del método runReportToPdf*/
Después has clic en el botón desplegar y ahora podras ver el nombre de tu proyecto como un
vinculo (significa que el archivo ya esta instalado en el servidor tomcat, ya no será necesario
correrlo desde Netbeans y cualquiera podrá verlo sabiendo su dirección IP):
Ya por ultimo solo da clic sobre el vinculo y listo tu aplicación empezara a ejecutarse
.