Crysfel’s Blog

En el último proyecto en el cual he trabajado, he utilizado un framework javascript que vale la pena hablar de él en este blog, y se trata de Ext Js, una excelente librería para crear interfaces de usuario, Ext nos facilita mucho el trabajo a los desarrolladores, pues en unas cuantas líneas de javascript podemos hacer interfaces realmente buenas.

En este artículo quiero mostrar como hacer mensajes, tablas y ventanas, con esto pretendo dar una introducción a esta fantástica librería y así mostrar la facilidad en el desarrollo de software.

Ya hace rato que salió la nueva versión de mootools (la 1.2beta2), hoy quiero mostrar como escribir una clase con esta nueva versión, es muy similar a la versión anterior, pero algunas cosas cambiaron.

Objetivo
El principal objetivo de este artículo es mostrar algunas buenas prácticas al escribir clases, para que sean reutilizables no solo por el propio autor, sino también por otros desarrolladores, esto hay que tenerlo en mente siempre que escribimos una clase, la clase que se escribirá hará algo asi (En las feeds no se aprecia el efecto debido a que no se ejecuta el javascript):

Este carrusel de imágenes (slideshow) es idéntico (a nivel visor) al que ya he mostrado anteriormente, solo que esta vez el código estará mucho mas limpio y mejor diseñado, completamente orientado a objetos y podrá ser muy flexible para ser utilizado por algún otro desarrollador.

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.

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.