La verdad es que es divertido trabajar en algo que realmente me agrada, mucho mas divertido que andar haciendo reportes o catálogos jejejejeje…. actualmente estoy comenzando la parte donde el jugador pordrá crear su ciudad, posicionar sus edificios por toda la pantalla.

Estoy abierto a escuchar ideas, si alguno de los lectores se interesa en darme alguna idea o sugerencia, será mas que bienvenida, en cuanto tenga la primera versión pondré una beta para que puedan probar el juego.

El tiempo de desarrollo no lo he definido aún, puesto que tengo muchas actividades y trabajo que me consume la mayor parte del tiempo (quizzpot por ejemplo ) pero si voy a trabajar lo mas rápido posible.

Theme Forest es un lugar donde puedes comprar templates a un precio muy accesible y de muy buena calidad, asi que se los recomiendo ampliamente, si me quieres ayudar a continuar impartiendo el curso que estoy dando en quizzpot lo puedes hacer registrando en themeforest.net, ellos me darán un pequeña comisión de tu primer deposito

En este sitio he comprado algunos templates realmente buenos

En este otro sitio he comprado el audio del intro de los video que se imparten en quizzpot.

En este sitio quiero comprar una animación en flash para ponersela al intro de los tutoriales en quizzpot, tienen una gran variedad de animaciones y efectos.

O bien comprar un video ya hecho, realmente no lo he decidido.

En este otro sitio puedes comprar PSDs, Texturas y demas recursos para diseñadores.

Pues bien ya lo saben, la próxima vez que inicien algún proyecto web pueden ir a estos sitios a comprar buenos recursos, recuerden utilizar el siguiente link http://themeforest.net?ref=stock, de esta forma me ayudarán a comprar las animaciones que me hacen falta

saludos

http://www.quizzpot.com/

Quizzpot es el nombre del proyecto, una escuela online donde se imparten cursos de herramientas para el desarrollo web/software mediante video y además es totalmente gratuito!

Actualmente estoy impartiendo el curso de Ext Js, hay un Quizz (Exámen) para probar tus conocimiento, y he subido los primeros 2 temas del curso, el objetivo es completar el curso en 4 meses apartir de hoy

Realmente que estoy muy contento con este nuevo lanzamiento y espero que puedan visitar el sitio.

Apartir del último post en este blog, me surgió la idea de iniciar un sitio donde sea especializado en cursos impartidos mediante video de forma gratuita, la idea es realizar un temario, lo mejor estructurado posible, exponiendo desde los temas mas sencillos hasta temas mas complejos, al final del curso realizar un examen de avaluación personal.

Actualmente tengo ya listo el temario del primer curso, este será impartido por mi, el curso será sobre Ext Js, lo cual me parece un excelente curso para iniciar con este proyecto, he comenzado a realizar los primeros temas, es por eso que no he podido darle seguimiento a los videotutoriales en este blog, pero ahora en este nuevo sitio del cual les estoy hablando no solo serán tutoriales, será un curso completo con ejercicios y examenes de evaluación

Agradesco a todos los lectores que me siguen en este blog y espero que para el mes de febrero puedan visitarme en este nuevo proyecto.

saludos.

Puedes ver el demo del tutorial aqui o descarga el código fuentes desde aqui.

Éste screencast es el primero de muchos mas, la idea es que de aquí en adelante todos los tutoriales sean en video, creo que es mas sencillo verlo que leerlo, cualquier duda o comentario con respecto al tutorial pueden hacerlo en los comentarios.

La página es de la Iglesia a la cual asisto, asi que estan invitados a visitarla y participar, la dirección es:

http://www.nuevorepueblo.com/

Saludos

Bueno, seguiré escribiendo mas de Ext Js, ya que es una librería maravillosa, espero que pronto logre terminar el artículo siguiente, pues hace meses que lo comencé y no lo he podido continuar, a todos los lectores gracias y sigan mandando sus comentarios.

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.

Primeramente es necesario mencionar que Ext Js originalmente surgió como una extensión de la librería de Yahoo, con esto me refiero a que Ext Js nos da funcionalidad de más alto nivel, el manejo del DOM, AJAX y funcionalidades básicas son hechas por la librería YUI, pues Ext Js se enfoca en componentes o widgets.

Al ser diseñada desde un principio como una extensión montada sobre YUI, ahora es posible utilizarlas con otras librerías como JQuery o Prototype. Solo es necesario utilizar el “adapter” adecuado, y Ext JS utilizará la librería que uno necesite o conozca mejor para realizar las operaciones de bajo nivel, como manejo de eventos, consultas al DOM, manejo del CSS y todo lo que es posible hacer con tu librería favorita.

Una vez que tenemos una idea general de lo que se trata Ext Js, el siguiente paso es descargar la última versión liberada, para poder continuar con esta introducción.

Una vez descargado, es necesario importar al documento tu librería favorita, el adapter correspondiente y el archivo “Ext-all.js”, estas son las posibles combinaciones que puede hacer, y el orden en que deben estar:

Utilizando Ext en modo Stand-alone, al decir stand alone significa que Ext Js utilizará su propia librería, que se llama Ext base, la cual contiene todo lo necesario para manejo de Dom, Ajax, animaciones, etc.
——————————————————————-
ext-base.js
ext-all.js (o los componentes que necesites)

Utilizando Yahoo! UI (.12+)
——————————————————————-
yui-utilities.js
ext-yui-adapter.js
ext-all.js (o los componentes que necesites)

Utilizando jQuery (1.1+), jQuery es una de las librerías mas populares dentro de los desarrolladores, es por eso que Ext js ha creado un adapter para que podamos utilizar esta librería, los archivos a importar son los siguientes:
——————————————————————-
jquery.js
ext-jquery-adapter.js
ext-all.js (o los componentes que necesites)

Utilizando Prototype (1.5+) / Scriptaculous (1.7+), prototype fué uno de los primeros frameworks javascript, es muy popular y me atreveria a decir que la mas utilizada entre desarrolladores.
——————————————————————-
prototype.js
scriptaculous.js?load=effects (o cualquier cosa que necesites cargar de scriptaculous)
ext-prototype-adapter.js
ext-all.js (o los componentes que necesites)

En este tutorial se explica en modo “stand-alone”, esto por que mi librería favorita no esta soportada por Ext Js (Mootools, que por cierto, hay un adapter de terceros para la versión Ext 1.1), por lo tanto se incluye al documento “adapter/ext/ext-base.js” y “ext-all.js”, para esto crea un carpeta en tu disco duro (donde quieras), copia los archivos anteriores a esta nueva carpeta, y además copia la carpeta “resources”, pues en esta se encuentran las imágenes y hojas de estilo necesarias para los componentes, además es necesario importar “ext-all.css”, crear el archivo HTML donde se trabajará, una buena practica es separar el HTML del javascript, entonces creamos el archivo “introduccion.js” donde se escribirá todo el javascript de este tutorial, los imports deben quedar así:

En el archive introduccion.js colocar el siguiente código:

Este mensaje tiene que aparecer si todo esta configurado correctamente, además de que se ejecutara cuando el DOM este listo para ser utilizado.

Mensajes
Lo primero que mostraré es la forma de mandar mensajes al usuario, como alertas, confirmaciones, errores, etc. Lo que se hará ahora es cambiar el archivo introducción.js por lo siguiente:

Al hacer esto, se esta mandando un alert al usuario, pero con la interfaz de Ext, como puedes ver es algo muy sencillo y se ve muy bien, ahora voy a mostrar un método con más opciones de configuración para mandar mensajes y tener control sobre los botones que ha presionado el usuario.

Lo más importante a resaltar es notar la diferencia entre la forma de mostrar el mensaje, en el primer ejemplo es el método alert, recibiendo dos parámetros, siendo que en el segundo ejemplo el método show recibe un solo parámetro, el cual es un objeto con propiedades de configuración.

Otro punto importante es que la propiedad fn permite referenciar la función que manejará los eventos del usuario, cuando de clic en algún botón, la función que se ha especificado aquí será disparada, te recomiendo comiences a jugar un poco cambiando algunas opciones, puede encontrar las opciones permitidas en el API de Ext Js.

Grids o Tablas
La tabla o grid, es el componente más popular de este framework, ya que es muy sencillo hacer tablas con capacidades realmente buenas.

Primeramente se necesita la información que va a ser desplegada, contenida en un array por cada renglón que se quiere desplegar, en proyectos reales esta información puede venir de una base de datos o de un webservice, para este ejemplo “hardcode”.

El siguiente paso es crear un lector que pueda interpretar esta información, para poder procesarla en la tabla, existen varios tipos de lectores, para este caso se utiliza el de ArrayReader, pues la información anterior es un array, es muy común utilizar el lector de XML cuando usamos Ajax.

Como se puede notar, se le ha asignado un nombre a cada columna, al igual que el tipo de dato que esta contiene, en el caso de la fecha se ha creado un formato de despliegue, es importante especificar el tipo de dato, pues al momento de ordenar la tabla, es de vital importancia.

El último paso es crear la tabla, donde se le pasará la información, contenida en el arreglo, y el lector de esta.

Con la clase Ext.grid.GridPanel se crean las tablas, es necesario darle la información a desplegar, por medio de la propiedad “store”, las columnas que va a contener, donde a cada columna se le especifica su titulo, su tamaño, si será ordenable y lo más importante, el “dataIndex” que es donde se relaciona la columna con la información en el Lector, la opción renderTo, es el ID del elemento donde se quiere colocar la tabla en el documento.

Pues esto es todo lo necesario para crear una tabla, realmente sencillo y como se puede observar, la tabla se ve muy bien.

Ventanas
Para finalizar con este tutorial voy a mostrar como crear ventanas con toda la funcional necesaria.

Crear ventanas es muy sencillo, simplemente se ahce algo como esto:

La clase Ext.Window es la responsable de crear una ventana totalmente configurable, en este ejemplo únicamente se le esta especificando las dimensiones y el título, pero también se puede configurar si se quiere que la ventana no se cierre, o que no se pueda redimensionar y muchas otras cosas mas que recomiendo y se vea el api para poder jugar con estas propiedades.

Es importante mencionar que con el método show se muestra la ventana, de lo contrario no se verá nada.

Conclusión
En este tutorial simplemente he mostrado algo de lo que se puede hacer con esta maravillosa librería, realmente que es sencillo y rápido desarrollar aplicaciones complejas.

Espero que esta corta introducción le pueda servir a mas de uno, y si tienen algún comentario o duda la pueden dejar en el formulario inferior de esta misma página, como parte complementaria al tutorial se puede descargar los archivos de ejemplo.

Hoy exactamente este blog cumple un año de estar online, estoy contento de haber iniciado este proyecto, he recibido comentarios muy buenos sobre el mismo y también he tenido la oportunidad de poder ayudar a muchas personas.

Las estadísticas han ido en aumento, recuerdo el primer mes cuando solo entraban una o dos personas al día, era un poco triste, pero hoy el numero se ha incrementado considerablemente, tanto por los que entran directamente al sitio como por los que me siguen por las feeds.

Espero poder continuar con este blog por muchos años mas, compartiendo tutoriales e información importante, y como siempre se aceptan comentarios y sugerencia, al igual que peticiones, mientras este en mis manos haré lo posible por seguir colaborando con la comunidad.

Saludos

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.

Para comenzar hay que descargar la librería de mootools (1.2beta2) e importarla a la página:

Definir una Clase con Mootools
La clase que hará el trabajo se llamará Carrusel, y para declararla vasta con hacer lo siguiente.

Agregar soporte para eventos y opciones
Generalmente una clase lleva Opciones, Eventos y un constructor, no son obligatorios, pero para reutilizar y distribuirla a otras personas, es mejor pensar a futuro.

Notar que entre cada propiedad o método se separa mediante una coma simple “,”, esto debido al estandar de JSON para javascript.

Para dar soporte de Eventos a la clase hay que implementar la clase Events, al igual que la clase Options si se quiere que la clase sea capas de manejar opciones de una manera sencilla. Este punto en especifico es algo que cambió en esta versión, anteriormente era diferente la manera de implementar clases, ahora esta mucho mas claro y entendible.

Lo siguiente es definir las propiedades (opciones) que la clase tendrá. Tomando en cuenta que es un carrusel de imágenes, tendremos entonces imágenes, sus dimensiones y control sobre el tiempo del efecto de transición y el tiempo a entre cada una.

Es importante notar que el constructor esta recibiendo dos parámetros, un elemento y opciones.

Las opciones funcionan de la siguiente manera, inicialmente se declaran con los valores por default, en este caso images es un arreglo vacío, width vale 420 y así con las demás, en caso de que en el constructor no se le pasen opciones, entonces las opciones por default serán usadas, este comportamiento se logra gracias a la función this.setOptions, que es la encargada de sobrescribir las opciones por default.

Dentro del constructor de la clase se pueden poner llamadas a otras funciones de la misma clase y hacer cualquier otra cosa, en este caso, voy a crear dos propiedades de clase y dos métodos, por ahora.

Hasta aquí únicamente he creado la propiedad this.el, que es la que guardará una referencia al elemento que se recibe, la propiedad this.id, es el identificador del elemento, esto lo hago por conveniencia, pues mas adelante se hará uso de este varias veces, el método build es el responsable de crear la estructura del visor de imágenes, ósea el html necesario, el método start es el encargado de iniciar la animación.

A continuación voy a mostrar en pseudos código lo que el método build hará.

El div del punto uno es necesario, pues es posible que el donde se aloje el carrusel sea otro div posicionado absoluto o flotante, mediante este primer div contenedor nos aseguramos que el carrusel se pueda desplegar correctamente en cualquier lugar.

Una vez claro lo que se hará, codificarlo con mootools es muy sencillo, para crear los divs se utiliza la clase Element, y para los efectos la clase Fx.Tween, el código del método queda de la siguiente manera.

Lo mas interesante para comentar, es que en el punto numero cuatro, no solo se creó el efecto sobre la imagen uno, si no que también se agregó un evento, onComplete, este evento se dispara cuando el efecto sobre la imagen uno ha terminado, entonces la única instrucción aquí es cambiar a la siguiente imagen, el cual es otro método de la clase que mas adelante explicaré. Si eres observador al evento onComplete se le agregó también un bind(this) ,esto es de suma importancia, pues con esta instrucción es posible hacer referencia a la misma clase desde el evento, de no agregar esta instrucción el evento no sabría en que contexto buscar el método nextImage().

El siguiente método a implementar es el start, el cual es el encargado de iniciar con la animación. El pseudo código es el siguiente.

El código de lo anterior es el siguiente.

Es importante mencionan lo que sucede en la instrucción numero dos, para disparar el evento es necesario implementar la clase Events, la cual importamos al principio, this.fireEvent permite disparar eventos, en este caso se dispara el evento cuando se inicia la animación, estos eventos son provistos por los programadores que utilicen esta clase en algún futuro o por nosotros mismo, esto es muy útil si queremos reutilizar esta clase, añadiéndole comportamientos extras cuando sucedan los eventos, es por eso que siempre que se escribe una clase se debiera pensar en agregar eventos, personalmente siempre lo hago y me ha resultado de gran ayuda en el futuro.

En el método start esta haciendo una llamada al método nextImage, este método es el responsable de establecer la imagen al contendor correspondiente, verificando que al término de las imágenes inicie nuevamente desde la imagen número uno, esta función también es invocada cuando termina el efecto de la transición sobre la imagen uno, esto se especifico en la función build, en pseudo código esto es:

El código de lo anterior es el siguiente:

El método start también esta llamando a la función transition, la responsabilidad del método transition es realizar el efecto sobre los contenedores de la imágenes, esto es muy sencillo:

Lo único que se esta haciendo aquí es disparar el evento onTransition, e iniciando el desvanecido de 0 a 100 por ciento, dependiendo de imagen uno.

Por último se crearán algunos métodos para ser utilizados por otros desarrolladores o por nosotros mismos en otras circunstancias, primeramente un método que detenga al carrusel, otros método para controlar las imágenes, estas pueden provenir de una llamada AJAX o de cualquier otro lugar.

Utilizar el carrusel o slideshow
Para utilizar el carrusel hay que crear instancias de esta clase, la forma más básica de su uso es:

Hay que recordar que deben existir los elementos en el documento para que funcione correctamente, con esto me refiero a que el HTML debe contener algo como esto para cada instancia del carrusel:

El código completo de la clase carrusel.js es el siguiente:

El código del documento HTML que lo invoca es:

Conclusión
Si lo has notado, para escribir esta clase se han creado varios métodos, cada uno con una responsabilidad especifica, la clase esta muy entendible y fácil de utilizar, esto es lo que se debe tener en cuanta cuando se escriben clases.

Espero que este tutorial sea de utilidad para mas de uno, saludos.

Gracias a Joe Hewitt, el creador de firebug, que ha puesto esta herramienta disponible para todos los demás exploradores como un archivo javascript, esta versión de firebug es mas ligera y no tiene todo lo que la extensión para firefox, pero es de gran ayuda, simplemente tienes que incluir el archivo javascript en tu página y listo, puedes descargar Firebug Lite desde aquí .

Ahora bien, cuando se esta en la etapa de desarrollo, es recomendable agregar el archivo javascript, pero cuando se sube a producción hay que quitarlo para no desperdiciar ancho de banda, al hacer esto todas las llamadas al objeto console, el encargado de debuguear, marcarán error, para corregir eso simplemente hay que pegar las siguientes líneas de código antes de hacer cualquier llamada al objeto console.

Con esto se crea el objeto console y ya no marcará errores la aplicación.

Saludos.

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.

Cómo poner acentos y eñes.
Lo primero es definir la cabecera del archivo jrxml, y dentro de este especificarle el encode a utilizar dentro del documento, generalmente el encode por de facto es UTF8, pero este encode no soporta los caracteres extendidos, que es donde se encuentran los acentuados y la eñe, es por eso que si no ponemos el encode correcto, al compilar el reporte obtendremos un error, para evitar esto, es necesario indicar que el encode a utilizar sea ISO-8859-1, el cual contiene los caracteres necesarios para el español.

Paso de parámetros e información.
Lo siguiente es pasarle algunos parámetros para desplegar el titulo, y el subtitulo, además de declararse las Fields de la información a desplegar en el reporte.

A diferencia del tutorial anterior, únicamente se le ha suprimido el Query que consultaba la base de datos, esto es por que ahora la información se le pasará directamente desde Java por medio de una colección de DTOs (Data Transfer Object).

Más adelante explicaré mas a detalle el paso de información, por ahora basta con declarar la información a desplegar en la parte del detail.

Poner una imagen en formato gif.
En esta sección se definirá el background y la cabecera del documento, en el tutorial anterior explique cómo hacerlo, el día de hoy será exactamente igual con la diferencia de que en lugar de pasarle una imagen JPG se le pasará una imagen GIF, además de que las medidas y posiciones son diferentes, todo esto escrito en código es:

Hasta aquí no hay nada nuevo, excepto que en el campo donde se despliega la fecha, en lugar de sacarla de la base de datos como en el tutorial anterior, ahora se generará directamente en el reporte, esto es muy sencillo de hacer, únicamente hay que crear una instancia de la clase Date dentro de la expresión del campo:

El formato es exactamente igual al tutorial anterior.

Poner títulos a las columnas.
Anteriormente no se le había agregado cabeceras a las columnas de la información, pero si había mencionado en la introducción que esto es posible, a continuación se muestra cómo por medio de la sección <columnHeader> se puede realizar.

Si te das cuenta, esta sección no tiene nada especial que no se haya cubierto en los tutoriales anteriores, simplemente son textos estáticos distribuidos en forma linear, es aquí donde se ha necesitado poner acentos, los cuales son correctamente soportados gracias a que se ha especificado el encoding correcto al inicio del documento.

Desplegar la información principal.
Esta es la sección principal del reporte, las columnas donde se muestra la información. En el tutorial anterior explicaba que esta sección es iterada sobre el data source provisto, anteriormente la consulta SQL generaba una colección de información regresada por la base de datos, en esta ocasión la colección se le pasará desde Java. Al diseñar el reporte esto no tiene ninguna implicación, simplemente se acomodan los campos en las posiciones deseadas, todo esto exactamente igual al tutorial anterior, pero con diferente información a desplegar.

El reporte completo.
Esto es todo en cuanto al diseño del reporte, todo ha sido semejante por no decir igual al reporte del tutorial anterior, únicamente cambiamos el encoding para que aceptara acentos, se le agregó una nueva sección al reporte para desplegar los titulos de las columnas, la fecha se ha generado directamente en el reporte y se suprimió la consulta SQL a la base de dato, el reporte completo es el siguiente.

Ahora viene la parte interesante en Java, la cual cambiará muy poco conforme al tutorial anterior.

Generar el reporte con Java.
Para generar el reporte son necesarios cuatro pasos, muy sencillos por cierto. El paso número uno es llenar el data source con la información a enviar, el paso dos compilar el reporte, paso tres llenarlo con la información y parámetros necesarios, paso cuatro exportar el reporte al formato deseado, en este caso pdf.

Lo mas importante a resaltar aquí es la clase net.sf.jasperreports.engine.data.JRBeanCollectionDataSource la cual es la encargada de entregar la información al reporte. Esta clase se instancia con una colección de Objetos DTO. En este caso el objeto es Universidad, que contiene las mismas propiedades que el reporte desplegará con sus respectivos getters y setters.

Para ejemplo se ha hardcodeado la información en el método populateData, en la vida real esto no se hace, este método debiera ser implementado de acuerdo a las necesidades del desarrollador, ya sea consultando una base de datos, un webservice, un archivo de texto, etc.

A continuación el bean necesario para llenar el reporte.

Lo más importante aquí es que las propiedades deben corresponder a los campos declarados en el reporte, de esta manera el motor de JasperReports puede relacionarlas y desplegar la información.

El código es muy claro y sencillo, si se siguen los cuatro pasos no se tendrá problema para generar el reporte, al igual que en los tutoriales anteriores voy a poner el proyecto para eclipse, con el ejemplo, para ser descargado.

Po último quiero dar una disculpa por referirme tanto al tutorial anterior, pero tanto este como el tutorial anterior son muy semejantes.

Saludos.

En la versión anterior el método set, de la clase Element, solo aceptaba un parámetro, ahora en esta nueva versión es posible pasarle un objeto con todas las opciones que querramos.

Ejemplo: En la versión anterior haciamos algo así para acceder a las propiedades de los elmentos.

En esta nueva versión podemos hacer lo siguiente, claro que lo anterior lo podemos seguir haciendo:

Como se puede ver, ahora podemos asignarle varios parámetros a la vez, pero hay que notar que también se pueden declarar eventos.

Para mayor información ver el blog oficial, también recomiendo descargar esta nueva versión.

Saludos y a experimentar!.

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 siguiente paso es hacer el Query con el que se llenará la información, en este caso será el siguiente.

He sacado la fecha del sistema para mostrar como dar formato a una fecha en JasperReport. Ahora hay que introducir el Query al reporte y pasarle el parámetro necesario para que podamos sacar dinámicamente, desde Java, la universidad que queramos.

La etiqueta es la que almacena el Query que se ejecutará cuando el reporte sea mandado a llenar desde Java. Algo importante a mencionar es que se han creado varias field (campos), uno para cada campo regresado por el Query, el name de cada campo debe coincidir con los capos o alias devueltos por el Query, de esta manera se puede accesar a la información y colocarla en el reporte.

Como he mencionado en la introducción hay varias secciones en un reporte, y una de ellas es el background, hasta ahora no he mencionado nada sobre esta sección, pero como su nombre lo indica, esta sección es el fondo del documento, aquí se puede poner la plantilla de la empresa, o cualquier cosa, en este caso se pondrá una imagen que es el logotipo de la universidad, todo esto resumido en código queda de la siguiente manera.

Para poner una imagen se utiliza la etiqueta <image> y la url se le pasa mediante el parámetro $P{LOGO_URL}.

La siguiente sección es el titulo del documento, aquí se pondra con letras grandes el nombre de la universidad, el domicilio y la fecha en que se ha generado el reporte, además de una línea divisoria, esto se hace de la siguiente manera.

No me voy a detener a explicar la parte de la interface pues esto lo he explicado en el paso de parámetros a un reporte, lo que si hay que tomar en cuenta es que a diferencia del tutorial anterior, ahora, en lugar de imprimir parámetros se esta imprimiendo lo que proviene de la base de datos, mediante $F{universidad}, mediante el operador $F{} se accesa a los campos declarados en el Query, únicamente se escribe dentro de las llaves el nombre del campo a acceder.

Otra diferencia a notar es que al textfield de la fecha se le agrego una propiedad pattern=”EEEEE dd MMMMM yyyy”, este patrón se puede cambiar al gusto, es posible poner algo como “dd/MM/yyyy” para desplegar la fecha en formato “21/10/2008″.

Ahora la última parte interesante de este tutorial es la sección “detail”. Es aquí donde se desplegará la información del reporte, esta queda de la siguiente manera.

Como se puede ver, solo se han declarado tres textfields, y se ha impreso en ellas lo que proviene de la base de datos, esta sección es diferente a todas las demás, pues esta sección itera el resultset (en este caso) o bien un listado de beans enviado desde Java.

Ya esta listo el reporte, que al final queda de la siguiente manera.

Lo siguiente es compilar el jrxml y generar el pdf mediante java, esto es muy sencillo y se logra con muy pocas lineas de código.

Primero es necesario conectarse a la base de datos, puede ser cualquier base de datos, pero en este ejemplo es MySQL.
El segundo paso es compilar el reporte.
El tercer paso es llenar el reporte con la información de la base de datos y pasarle los parámetros necesarios.
El cuarto paso es exportarlo al formato deseado.
Por ultimo se cierra la conexión a la base de datos.

A diferencia de los tutoriales anteriores en este voy a poner el proyecto configurado con las librerías y códigos necesarios, para que lo instales en el eclipse y lo puedas ejecutar, esto por que en los tutoriales pasados algunas personas no pudieron completar el tutorial, el proyecto lo puedes descargar desde aqui.

Saludos.

Espero sigan visitando este blog o que lo esten revisando por los feeds.

saludos a todos.

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

¿Qué puedo hacer como usuario para protegerme?
Muchas de las veces personas malintencionadas encuentran una vulnerabilidad en un sitio, y por medio de ingeniería social logran hacer que el usuario de clic sobre un link maligno, al hacer esto la victima ah sido afectada. Para protegerte lo que puedes hacer es utilizar plugins para Firefox que deshabilitan el Javascript en las páginas, permitiéndote ejecutar solo aquellas que tu autorices, puedes descargar el plugin desde aquí https://addons.mozilla.org/es-ES/firefox/addon/722

¿Qué puedo hacer como desarrollador?
Como programador, tu trabajo es validar cada una de las entradas recibidas por formularios o parámetros de la url, tipos de dato, longitudes de cadenas, limpiar caracteres o tags exclusivos de html.

¿Como identifico una vulnerabilidad?
Detectarlo depende de ciertos skills, entre mas experiencia tengas te será más fácil aún, para encontrarlos simplemente prueba enviar a cada parámetro enviado al servidor series de caracteres como estas:

Este es el mas tonto, si un sitio cuenta con esto, es que realmente fue desarrollado por un completo inepto (Sin animo de ofender a nadie).

Estos dos en caso de que tengan filtradas las comillas

Este es muy útil algunas veces, para que veas que no solo con etiquetas <script> se puede realizar un ataque.

Una pequeña para cuando te restringen el tamaño de un campo.