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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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:


Ext.onReady(function() {
alert("Felicidades! Has configurado Ext correctamente!");
});


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:


Ext.onReady(function() {

});


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.


Ext.onReady(function() {

function procesarResultado (btn){
if(btn=='yes'){
Ext.Msg.alert('Resultado','SI estas emocionado!! Excelente!!');
}else{
Ext.Msg.alert('Resultado','NO estas emocionado!! pues nimodos!!');
}
}
});


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


var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];


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.


var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);


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.


var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: 'Compañia', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Precio', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Cambio', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Cambio', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Último cambio', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'grid',
title: 'Titulo de la tabla',
width: 500,
frame: true
});


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:


var win = new Ext.Window({title:'El titulo',width:500,height:250});
win.show();


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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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.


var Carrusel = new Class({

});


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.


var Carrusel = new Class({
Implements:[Events, Options], //Implementamos eventos y opciones
options:{

}
});


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.


var Carrusel = new Class({
Implements:[Events, Options],
options:{
images:[],
width: 420,
height: 294,
durationFx:1000,
durationDelay: 3000 //3 segundos
},
initialize:function(el,options){
this.setOptions(options || {});
}
});


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.


initialize:function(el,options){
this.setOptions(options || {});
this.el = $(el);
this.id = this.el.get('id');
this.build();
this.start();
}


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


build:function(){
//1.- Crear un div contenedor e inyectarlo dentro del elemento principal.
//2.- Crear un div para la imagen1 e inyectarlo al contenedor anterior
//3.- Crear un div para la imagen2 e inyectarlo al contenedor anterior
//4.- Crear las los efectos sobre los divs que contenedores de las imagenes
//5.- Iniciar con opacidad al 0%
}


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.


build:function(){
//1.- Crear un div contenedor e inyectarlo dentro del elemento principal.
var content = new Element('div',{id:this.id+'_content',styles:{position:'relative',width:this.options.width+'px',height:this.options.height+'px'}}).inject(this.el);
//2.- Crear un div para la imagen1 e inyectarlo al contenedor anterior
var img1 = new Element('div',{id:this.id+'_img1',styles:{width:'100%',height:'100%'}}).inject(content);
//3.- Crear un div para la imagen2 e inyectarlo al contenedor anterior
var img2 = new Element('div',{id:this.id+'_img2',styles:{position:'absolute',width:this.options.width+'px',height:this.options.height+'px',top:0,left:0}}).inject(content);
//4.- Crear las los efectos sobre los divs que contenedores de las imagenes
this.imgFx1 = new Fx.Tween(img1, 'opacity',{
duration:this.options.durationFx,
onComplete:function(){
this.nextImage();
}.bind(this)
});
this.imgFx2 = new Fx.Tween(img2, 'opacity',{duration:this.options.durationFx});
//5.- Iniciar con opacidad al 0%
this.imgFx1.set(0);
this.imgFx2.set(0);
}


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.


start:function(){
//1.- Revisar si hay imagenes para poder comenzar el carrusel
//2.- Disparar el evento onStart
//3.- Solicitar imagen
//4.- Hacer la trancision inicial
//5.- Crear un temporizador para ejecutar la transición periodicamente
}


El código de lo anterior es el siguiente.


start:function(){
//1.- Revisar si hay imagenes para poder comenzar el carrusel
if(this.options.images.length==0)
return;
//2.- Disparar el evento onStart
this.fireEvent('onStart');
this.index = -1;
this.isImg1OnTop = false;
//3.- Solicitar imagen
this.nextImage();
//4.- Hacer la trancision inicial
this.transition();
//5.- Crear un temporizador para ejecutar la transición periodicamente
this.timer = this.transition.periodical(this.options.durationDelay,this);
}


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:


nextImage: function(){
//1.- Se incrementa el contador
//2.- Se verifica la dimension del arreglo de imagenes, si llego al limite iniciar desde el principio
//3.- Se verifica si la imagen uno esta actualmente viendose, de esta forma se sabe a donde posicionar la siguietne imagen
}


El código de lo anterior es el siguiente:


nextImage: function(){
//1.- Se incrementa el contador
this.index++;
//2.- Se verifica la dimension del arreglo de imagenes, si llego al limite iniciar desde el principio
if(this.index>=this.options.images.length)
this.index = 0;
//3.- Se verifica si la imagen uno esta actualmente viendose, de esta forma se sabe a donde posicionar la siguietne imagen
if(this.isImg1OnTop)
$(this.id+'_img2').setStyle('background-image','url('+this.options.images[this.index]+')');
else
$(this.id+'_img1').setStyle('background-image','url('+this.options.images[this.index]+')');
}


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:


transition:function(){
this.fireEvent('onTransition');
this.imgFx1.start(this.isImg1OnTop?0:1);
this.imgFx2.start(this.isImg1OnTop?1:0);
this.isImg1OnTop = !this.isImg1OnTop;
}


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.


stop:function(){
this.fireEvent('onStop');
$clear(this.timer);
}

newImages:function(images){
this.options.images = images;
},
addImages:function(images){
this.options.images.merge(images);
},
addImage:function(image){
this.addImages([image]);
},
deleteImages:function(){
this.stop();
this.options.images.empty();
}


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:


//Utilizando las propiedades por default.
var car1 = new Carrusel('carrusel1',{images:['images/12.jpg','images/09.jpg','images/05.jpg']});

//Modificando todas las propiedades
var car4 = new Carrusel('carrusel4',{
durationDelay:7000,
durationFx:1500,
width: 500,
height: 280,
images:['images/08.jpg','images/06.jpg','images/13.jpg'],
onStart:function(){console.debug('comenzando...')},
onTransition:function(){console.debug('haciendo la transición')}
});


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:


var Carrusel = new Class({
Implements:[Events, Options],
options:{
images:[],
width: 420,
height: 294,
durationFx:1000,
durationDelay: 3000 //3 segundos
},
initialize:function(el,options){
this.setOptions(options || {});
this.el = $(el);
this.id = this.el.get('id');
this.build();
this.start();
},
build:function(){
//1.- Crear un div contenedor e inyectarlo dentro del elemento principal.
var content = new Element('div',{id:this.id+'_content',styles:{position:'relative',width:this.options.width+'px',height:this.options.height+'px'}}).inject(this.el);
//2.- Crear un div para la imagen1 e inyectarlo al contenedor anterior
var img1 = new Element('div',{id:this.id+'_img1',styles:{width:'100%',height:'100%'}}).inject(content);
//3.- Crear un div para la imagen2 e inyectarlo al contenedor anterior
var img2 = new Element('div',{id:this.id+'_img2',styles:{position:'absolute',width:this.options.width+'px',height:this.options.height+'px',top:0,left:0}}).inject(content);
//4.- Crear las los efectos sobre los divs que contenedores de las imagenes
this.imgFx1 = new Fx.Tween(img1, 'opacity',{
duration:this.options.durationFx,
onComplete:function(){
this.nextImage();
}.bind(this)
});
this.imgFx2 = new Fx.Tween(img2, 'opacity',{duration:this.options.durationFx});
//5.- Iniciar con opacidad al 0%
this.imgFx1.set(0);
this.imgFx2.set(0);
},
start:function(){
//1.- Revisar si hay imagenes para poder comenzar el carrusel
if(this.options.images.length==0)
return;
//2.- Disparar el evento onStart
this.fireEvent('onStart');
this.index = -1;
this.isImg1OnTop = false;
//3.- Solicitar imagen
this.nextImage();
//4.- Hacer la trancision inicial
this.transition();
//5.- Crear un temporizador para ejecutar la transición periodicamente
this.timer = this.transition.periodical(this.options.durationDelay,this);
},
stop:function(){
this.fireEvent('onStop');
$clear(this.timer);
},
transition:function(){
this.fireEvent('onTransition');
this.imgFx1.start(this.isImg1OnTop?0:1);
this.imgFx2.start(this.isImg1OnTop?1:0);
this.isImg1OnTop = !this.isImg1OnTop;
},
nextImage: function(){
//1.- Se incrementa el contador
this.index++;
//2.- Se verifica la dimension del arreglo de imagenes, si llego al limite iniciar desde el principio
if(this.index>=this.options.images.length)
this.index = 0;
//3.- Se verifica si la imagen uno esta actualmente viendose, de esta forma se sabe a donde posicionar la siguietne imagen
if(this.isImg1OnTop)
$(this.id+'_img2').setStyle('background-image','url('+this.options.images[this.index]+')');
else
$(this.id+'_img1').setStyle('background-image','url('+this.options.images[this.index]+')');
},
newImages:function(images){
this.options.images = images;
},
addImages:function(images){
this.options.images.merge(images);
},
addImage:function(image){
this.addImages([image]);
},
deleteImages:function(){
this.stop();
this.options.images.empty();
}
});


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


"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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.



"http://jasperreports.sourceforge.net/dtds/jasperreport.dtd">





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.


name="plantilla"
pageWidth="595"
pageHeight="842"
leftMargin="20"
rightMargin="20"
topMargin="20"
bottomMargin="20">

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:





x="430"
y="0"
width="100"
height="67"/>







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:


new java.util.Date()


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.



"http://jasperreports.sourceforge.net/dtds/jasperreport.dtd">



name="plantilla"
pageWidth="595"
pageHeight="842"
leftMargin="20"
rightMargin="20"
topMargin="20"
bottomMargin="20">

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.


package pruebas;
/**
* Generar un reporte con Jasper Report
* Por Crysfel Villa Roman
* 21/01/2008
*
* */
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

System.out.println("Done!");
}catch (Exception e){
System.out.println(e);
e.printStackTrace();
}
}
private static Collection populateData(){
Collection list = new ArrayList();
list.add(new Universidad("Universidad de Montemorelos","Dr. Oscar Castillo","Montemorelos NL.",new Integer(4800)));
list.add(new Universidad("Tecnológico de Monterrey","Dr. Jair Acosta","Monterrey NL.",new Integer(10956)));
list.add(new Universidad("Universidad Regiomontana","Dr. Meliza Orduñez","Monterrey NL.",new Integer(5200)));
list.add(new Universidad("Universidad Autónoma de México","Dr. Carlos Medina","Mexico DF.",new Integer(15700)));
list.add(new Universidad("Instituto Politécnico Nacional","Dr. Manuel Obrador","México DF.",new Integer(16380)));
list.add(new Universidad("Universidad del Valle de México","Dr. Héctor Solano","México DF.",new Integer(6280)));
return list;
}
}


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.


package pruebas;

}


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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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.




name="plantilla"
pageWidth="595"
pageHeight="842"
leftMargin="20"
rightMargin="20"
topMargin="20"
bottomMargin="20">

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.


--
-- Base de datos: `test`
--

--
-- Filtros para la tabla `facultades`
--
ALTER TABLE `facultades`
ADD CONSTRAINT `facultades_ibfk_1` FOREIGN KEY (`id_universidad`) REFERENCES `universidades` (`id_universidad`) ON DELETE CASCADE ON UPDATE CASCADE;


El siguiente paso es hacer el Query con el que se llenará la información, en este caso será el siguiente.


SELECT U.nombre AS universidad, U.domicilio, CURDATE( ) AS fecha, F.facultad, F.director, F.alumnos
FROM facultades F, universidades U
WHERE U.id_universidad = F.id_universidad
AND U.id_universidad =1


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.


SELECT U.nombre AS universidad, U.domicilio, CURDATE() AS fecha, F.facultad, F.director, F.alumnos
FROM facultades F, universidades U
WHERE U.id_universidad = F.id_universidad
AND U.id_universidad = $P{P_ID_UNIVERSIDAD}]]>


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.





x="500"
y="0"
width="33"
height="38"/>






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.



"http://jasperreports.sourceforge.net/dtds/jasperreport.dtd">



name="plantilla"
pageWidth="595"
pageHeight="842"
leftMargin="20"
rightMargin="20"
topMargin="20"
bottomMargin="20">

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.


package pruebas;
/**
* Generar un reporte con Jasper Report
* Por Crysfel Villa Roman
* 14/01/2008
*
* */
import java.sql.Connection;
import java.sql.DriverManager;
import java.util.HashMap;
import java.util.Map;

System.out.println("Done!");
}catch (Exception e){
System.out.println(e);
e.printStackTrace();
}
}
}


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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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.


#mover{
width:64px;
height:64px;
background-image:url(folder.png);
}
#cubos{
width:400px;
margin:100px auto;
}
.drop{
float:left;
margin:3px;
width:128px;
height:128px;
background-image:url(boteBacio.png);
}


Una vez lista la interfase, viene lo divertido, pues es hora de programar las acciones y eventos a realizar.

Mootools tiene una forma muy sencilla de realizar el Drag and Drop, simplemente al elemento que se hace “dragable” se le asignan los elementos que serán “dropables” para este elemento mediante un arreglo.

Con esto en mente tomamos todos los elementos que contengan la clase “drop”, para esto simplemente utilizamos la función doble dólar y le pasamos la expresión que necesitamos.


var drops = $$('#cubos .drop');
var clon;


Hasta aquí contamos con un arreglo de elementos, además de que se ha creado una variable llamada clon, la cual no contiene nada por ahora, esta variable clon lo que contendrá es una copia del elemento mover y se le modificará su propiedad de la transparencia, todo esto se realizará cuando se le presiona el Mouse sobre el elemento mover.

El pseudo código es el siguiente:


$('mover').addEvent('mousedown',function(event){
//detenemos la propagación del evento
//si no existe una instancia del clon, se copia el elemento mover
//asignamos las mismas coordenadas al clon del objeto mover
//agregamos el clon al dom
//le asignamos una opacidad al clon del 70%
//hacemos al clon dragable e iniciamos el evento manualmente
//asignamos el evento emptydrop al clon, el cual se ejecuta cuando
//se ha soltado el clon fuera de los elementos dropables, de esta manera
//podemos desaparecer al clon cuando se suelta en un lugar no deseado.
}});


Esto en javascript se escribe de la siguiente manera:


$('mover').addEvent('mousedown',function(event){
event = new Event(event).stop();
if(!$chk(clon)) clon = this.clone();
clon.setStyles(this.getCoordinates());
clon.inject(document.body);
clon.setStyle('opacity',0.7);
clon.makeDraggable({droppables:drops}).start(event);
clon.addEvent('emptydrop',function(){
if($chk(clon)){ clon.remove(); clon= null;}
});
});


Lo único importante para comentar, es prestar atención a la función makeDraggable, pues esta es la responsable de que los elementos se puedan arrastrar en el documento, además, dentro de las opciones que se le pasan esta la de droppables, la cual es el arreglo de elementos en los que puede ser soltado el elemento que estamos arrastrando.

Lo que sigue es programar los eventos para los elementos dropables, los cuales son tres, el over, que se ejecuta cuando el elemento que se esta arrastrando esta sobre el elemento en cuestión, el leave, que se ejecuta cada vez que el elemento que se esta arrastrando sale del elemento en cuestión, y el mas importante, el drop se ejecuta cuando el elemento que se esta arrastrando es soltado sobre el elemento en cuestión.

Con esto en mente codificamos lo siguiente


drops.setStyle('opacity',0.7);
drops.each(function(drop){
var fx = new Fx.Styles(drop, {duration:300, wait:false});
drop.addEvent('drop',function(){
if($chk(clon)){ clon.remove(); clon= null;}
this.setStyle('background-image','url(boteLleno.png)');
});
drop.addEvent('over',function(){
fx.start({'opacity':1});
});
drop.addEvent('leave',function(){
fx.start({'opacity':0.7});
});
});


Primero se ponen con opacidad en 70%, luego se itera el arreglo y a cada elemento se le asigna los eventos de los que he hablado anteriormente (drop, over, leave), en los eventos leave y over, únicamente se cambia la opacidad mediante una transición, esto es gracias a la clase Fx.Styles, y en el evento drop se verifica que exista una instancia del clon, de ser así se elimina, luego se cambia la imagen del bote vacío por el bote lleno.

Pues esto es todo, realmente sencillo, espero que todo este claro, a continuación pongo el código completo del ejemplo, simplemente copia y pega.


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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.



PUBLIC "-//JasperReports//DTD Report Design//EN"
"http://jasperreports.sourceforge.net/dtds/jasperreport.dtd">

Si te das cuenta, se le han especificado algunas propiedades, tales como el ancho, el largo y los márgenes de la pagina, estos datos corresponden a una hoja tamaño carta, los márgenes los puedes poner al gusto, dependiendo tus necesidades.

Los parametros
Ahora viene una de las partes mas importantes de este tutorial, y es que continuación se define dentro de la plantilla los parámetros a utilizar, hay que aclarar que los parámetros no es el contenido principal del reporte, simplemente es información útil para mostrar en el reporte, por ejemplo la fecha en que se genera el reporte, o el periodo que se esta desplegando en el reporte, el autor o cosas semejantes, son parámetros importantes del reporte, pero no la información principal del reporte, con esto en cuenta se definen los parámetros a utilizar.

Como puedes ver se utiliza la etiqueta <parameter /> la cual tiene dos propiedades, name que es el nombre o identificador con la que se hará referencia, y el tipo de dato que es, en este caso String, es importante mencionar que se debe escribir el paquete exacto donde se encuentra la clase.

La cabecera
Para la cabecera se mostrara el nombre de la institución en letras grandes y sobresalientes, se dibujara una línea horizontal debajo del nombre de la institución, se mostrara la facultad y la carrera. Todo esto lo pondremos dentro de la sección <title/> ya que esta únicamente se muestra una vez en el reporte, si existiese mas de una página, esto se muestra solo en la primera.





El único detalle a comentar es que se ha declarado la propiedad height de “50″, esto significa que todo el contenido debe ser menor o igual a 50 pixeles, es importante tener en cuenta este dato y no superarlo con el contenido, de lo contrario tendremos un error a la hora de compilar el jrxml.

Como el texto será dinámico, pues desde nuestra aplicación le pasaremos la información, utilizaremos un textField, declarándolo de esta manera.