Crysfel’s Blog

El día de hoy quiero continuar con el tutorial de JasperReport, he explicado una introducción a la estructura principal del reporte, el paso de parámetros al reporte y como llenar un reporte desde una base de datos incluyendo el Query dentro del jrxml, en esta ocasión explicaré como llenar un reporte por medio de una colección de objetos VO o DTO, como mejor los conozcas.

Objetivos.

1. Cómo poner acentos y eñes dentro del reporte jrxml.
2. Poner una imagen en formato gif.
3. Generar la fecha actual del sistema y desplegarla en el reporte con un formato legible.
4. Pasarle la información al reporte por medio de una colección de beans.
5. Cómo poner títulos a las columnas de la información desplegada.
6. Realizar un reporte como este.

Una vez definidos los objetivos se puede apreciar el alcance de este tutorial y así decidir si al lector le conviene continuar con la lectura de este tutorial.

En este tutorial voy a explicar como generar un reporte en PDF obteniendo la información de una base de datos, si eres realmente nuevo manejando Jasper Reports, te sugiero darle una leída a la introducción y al paso de parámetros.

El reporte que se generará en este tutorial contendrá un listado de facultades que pertenecen a una determinada universidad, esta información sacada de una base de datos.

La base de datos a utilizar es MySQL 5.0.45, así que es necesario agregar al classpath de tu proyecto el MySQL Conector, junto con todas las librerías necesarias (mencionadas en la introducción).

Una vez hecho esto, ha comenzar a codificar el JRXML, primero hay que crear el documento y pasarle dos parámetros, el primero es el id de la universidad que queremos generar el reporte, y el segundo parámetro es la url donde esta la imagen del logotipo de la universidad, hasta ahora tenemos.

La estructura de la base de datos es muy simple, consta de dos tablas, una se llama Universidades y la otra se llama Facultades, la tabla Universidades solo tiene tres campos, el id, el nombre de la universidad y el domicilio, la tabla facultades contiene cinco campos, el id, facultad, director, total de alumnos y una relación a la tabla universidades, a continuación muestro el SQL de la base de datos.

Desde hace un par de meses (uno o dos) me he estado introduciendo en el tema de XSS, hoy en día este tipo de ataques es el que más amenaza a los sistemas web, y es que cualquier sitio es vulnerable a sufrir un ataque XSS, desde un sencillo blog hasta los grandes sistemas como gmail, ebuy, myspace, el academico de la UM (Tiene varios), etc. En este post voy a aclarar algunas dudas que pudiesen existir, además que mostraré un ejemplo sencillo, todo esto con el afán de que los desarrolladores (programadores) se den cuenta del potencial de estos ataques y al desarrollar sus proyectos tengan en mente esto en todo momento.

¿Qué significa XSS?
En ingles Cross-Site Scripting (CSS), no confundir con Cascade Sheet Style, es por esta razón que se le a puesto una X en lugar de la C.

¿En que consiste un ataque XSS?
Básicamente un ataque XSS es inyectar código en la aplicación vulnerable, se puede alterar el DOM, robar cookies o inclusive ejecutar un archivo maligno.js donde las posibilidades son infinitas, pues pudieses modificar la base de datos mediante AJAX, en fin, un pequeño error puede abrir un universo de posibilidades, para mayor información al respecto te sugiero leer este articulo en la Wikipedia http://en.wikipedia.org/wiki/Cross_site_scripting.

El día de hoy quiero mostrar como realizar un Drag and Drop utilizando mootools, el ejemplo será sencillo pero se muestran los eventos necesarios para realizar algo más complejo. El ejemplo siguiente muestra lo que se planea realizar, arrastra la carpeta de la izquierda sobre cualquiera de los botes azules.

Hacer esto es muy sencillo, antes que nada hay que descargar la ultima versión de mootools (mootools-release-1.11.js actualmente), luego de esto la importamos al documento así:

El siguiente paso es crear el objeto que se arrastrara y los botecitos donde se soltará la carpeta, el HTML quedará de la siguiente manera.

Ahora mediante CSS acomodamos al tamaño correcto y le ponemos las imágenes respectivas.

Hoy quiero continuar el tema de generar reportes pdf por medio de JasperReports, este tutorial es mas avanzado que el anterior, así que te sugiero leer la introducción en caso de que seas realmente nuevo con esta herramienta.

Goals
Hoy tratare el tema de paso de parámetros al reporte, y se definiran algunos conceptos claves, al igual que se hará un plantilla donde se mostrara como dar formato a texto entre otras cosas mas.

Para comenzar es necesario poner el enviroment adecuado, ya sabes, agregar al classpath las librerías requeridas (Señaladas en la introducción), luego de esto creamos un archivo de texto llamado plantilla.jrxml y nos disponemos a diseñar la plantilla por medio de xml.

Preparando el papel
Para este tutorial se va a realizar un reporte que muestre los alumnos de una carrera x de una universidad z, no voy a pasarle la información de los alumnos, solo la información necesaria para generar una plantilla, El primer paso es agregar la cabecera y configurar el nodo principal.

El tutorial del día de hoy consta de realizar una lista de imágenes sorteable, en otras palabras, voy a mostrar como poder ordenar una lista de imágenes, con mootools esto es extremadamente sencillo, a continuación se muestra un ejemplo del tutorial terminado.

Que de beneficio tiene esto, pues imagínate que tienes en tu base de datos imágenes de productos de una tienda de aparatos electrónicos, y para cada aparato tienes una serie de imágenes, las cuales deben tener un orden, si las fuiste metiendo en orden pues que padre no, pero ¿que sucede si te equivocas? O si quieres que los usuarios mismos puedan elegir el orden en que aparezcan las imágenes, fácil, creas un campo en la tabla de imágenes donde introduzcas el orden de las imágenes, haces un Query trayéndolas ordenadas ascendentemente por medio de ese campo, pero para que los usuarios las ordenes debes ponerles una interfase fácil, pues si les pones una cajita y que ellos mismos introduzcan el numero de orden, para cada imagen, ¡imagínate! Muchos errores se ocasionaría, para estos casos es que es útil esta interfase, y a continuación muestro como hacerla.

El día de hoy quiero mostrar como hacer un visor de imágenes, con esta interfase es suficiente para realizar una galería, claro esta que esto es solo la GUI, el backend dependerá de las necesidades de cada proyecto en especifico.

Para que te des una idea de lo que mostrare en este tutorial, puedes ver el siguiente ejemplo.

¿Interesante no?, realizarlo es muy sencillo, así que para comenzar es necesario descargar la última versión de mootools (v1.11) e importarla a tu documento, pues es indispensable para este tutorial.