CanvasXpress - Powerful graphing tool

About this article

I’ve been using CanvasXpress for real time graphing for a corporative website.
As a team, we learned a lot about this library and how browsers interact with the canvas element, so this article is about sharing our gained experience and introducing the mostly unknown canvasXpress library.

I’ll looking forward to read your thoughts about any of this topics; other libraries, other technologies (like SVG) and of course you’re welcome to mail me any doubt you have and I’ll try to help.


About the author
I’m currently working for a multinational electric company. My focus is on RESTful web services, Spring MVC and HTML5.




Index

• 1 - Introduction to the Canvas element
• 2 - Examples of the Canvas element
• 3 - Canvas vs SVG
• 4 - CanvasXpress library
• 5 - Browser support
• 6 - Basic usage
• 7 - Real world scenario
• 8 - End

Introduction to the Canvas element

HTML5 brought to the web development world a huge amount of useful features. One of those features is the Canvas element.
The Canvas element allows dynamic content and scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model, that updates a bitmap and does not have a built in scene-graph.
We can say that Canvas is a drawable region in HTML code with a height and width attributes. Javascript code may access this region, allowing us to generate fully dynamic content as graphics, games, animations and so on.

Jasper Reports: Generación de documentos

Jasper Reports: Generación de documentos

Jasper Reports es una librería acompañada por un conjunto de herramientas que facilitan la generación de documentos mediante código.
Voy a explicar los conceptos básicos de Jasper y realizar u ejemplo 

1) Empezando con Jasper: Requerimientos y herramientas.

Se requieren varias librerías para utilizar Jasper. Las dejare en un zip para el que quiera probar pero en reglas generales si lo que se desea es generar un PDF las librerías son estas:

• Jakarta Commons BeanUtils Component (versión 1.8.0 en adelante) http://jakarta.apache.org/commons/beanutils/
• Jakarta Commons Collections Component (versión 2.1.1 en adelante) http://jakarta.apache.org/commons/collections/
• Jakarta Commons Javaflow (Sandbox version) http://jakarta.apache.org/commons/sandbox/javaflow/
• Jakarta Commons Logging Component (versión 1.0.4 en adelante) http://jakarta.apache.org/commons/logging/
  
• Jakarta Commons Digester Component (versión 1.7 en adelante) http://jakarta.apache.org/commons/digester/
• iText - Free Java-PDF library by Bruno Lowagie and Paulo Soares (versión 2.1.7 en adelante) http://www.lowagie.com/iText/

Y obviamente la libreria respectiva de Jasper que la pueden encontrar en este link.


Con esto tenemos todo para generar un reporte, pero hay otra herramienta mas que facilita la creación del diseño del documento: iReport.  

Luego de instalar correctamente iReport y tener todas las librerias en nuestro proyecto de prueba, ya podemos comenzar con el diseño del documento, pero antes hay que entender algunos conceptos.

2) fields, parameters y variables.

Hay varios elementos  a utilizar con iReport, como por ejemplo: title, page footer, etc. Pero quiero hacer énfasis en estos 3 porque son los que más confusiones producen.Fields : Son campos en una tabla, es decir si realizas una consulta SQL, puedes utilizar lo que la consulta devuelva para popular valores en el reporte. Se referencian con F${nombreCampo}.Parameters: Son objetos que pueden popularse mediante código.  Se referencian con P${nombreParametro}.Variables: Son expresiones que son inherentes al reporte. Por ejemplo si necesitas tener la fecha en el que se genero el reporte a pie de página lo ideal sería usar una variable. Se referencian con V${nombreVariable}.

Entendiendo esto, se hace más fácil utilizar iReport ya sabiendo que elementos necesitas colocar en pantalla.  Por ejemplo, si no realizas ninguna query y tenes el datasource vacio en la configuración del reporte pero de igual manera utilizas un field para mostrar en pantalla el valor deseado, nunca se asignara el valor cuando lo popules mediante código.

3) Diseñando el reporte.

Abrimos el iReport y clickeamos en Archivo->new. Seleccionamos iReport y el diseño blank A4.
Abrimos el iReport wizard y clickeamos siguiente ya que en este caso no utilizaremos consultas a una base de datos.

El iReport deberia estar de esta manera (o similar, dependiendo la version utilizada):
Ahora procedemos a crear algunos textos estaticos, por ejemplo “Nombre”, “Edad”, etc.
Para esto necesitamos visualizar la Paleta, asi que primero vamos a Ventana->Paleta o presionamos ctrl + shift + 8.

Con la paleta activa, arrastramos algunos elementos “static text” al reporte y les ponemos el nombre que queramos, quedaria algo asi:

A estos elementos podemos darle el formato que queramos y ponerle el texto que queramos. Cuando los elementos son del mismo tipo, pueden seleccionarse todos y modificar sus propiedades en la pestaña de propiedades a la derecha.
Luego de de modificarle el nombre a cada elemento, también decidí asignarle la propiedad “underline” además de modificar un poco el tamaño:

Ahora bien, esto es solo texto estático. Ahora necesitamos asignar los parámetros que van a recibir los valores, es decir, el combustible, la cantidad, y el responsable, para que el reporte pueda ser dinámico y generarse mediante código. En este caso utilizaremos los parameters.
Hacemos click derecho en parameters y agregamos los 3 parámetros que vamos a utilizar, luego los arrastramos a la posición deseada en nuestro reporte:
Cada elemento tiene infinidad de propiedades y en el caso de los elementos dinámicos –como los parameters- también permiten expresiones (del tipo, if x then y).

Por ahora dejaremos esto así y pasaremos al código, pero antes, click derecho a la izquierda en el elemento principal del árbol, es decir el que tiene el nombre del reporte, propiedades y modificar language a Java.

Ahora sí, algo de código:

4) Compilando el reporte y populando parámetros:

El código habla por sí solo más aun cuando esta comentado:
final String RUTA_JRXML
= "C:/Users/matias.j.de.marco/Desktop/JasperTutorial/Report1.jrxml";
final String RUTA_JASPER
= "C:/Users/matias.j.de.marco/Desktop/JasperTutorial/Report1.jasper";

try {
//Se compila el jrxml que genera el iReport.
//Esto genera un archivo .jasper.
JasperCompileManager.compileReportToFile(RUTA_JRXML);
} catch (JRException e) {
//Atrapa la excepción y manejala correctamente.
}

//Ahora creamos un hashmap que tendra los valores a
//llenar en el reporte
//nombreEniReport, valor
Map pars = new HashMap();

pars.put("combustible", "Gas natural");
pars.put("cantidad", "1000");
pars.put("responsable", "Matias De Marco");

JasperPrint jasperPrint = null;
try {
//Se llena el reporte.
jasperPrint = JasperFillManager.fillReport(
RUTA_JASPER, pars,
new JREmptyDataSource());
} catch (JRException e) {
//Atrapa la excepción y manejala correctamente.
}

//Se exporta a PDF
try {
JasperExportManager.exportReportToPdfFile(jasperPrint,
"reporte.pdf");
} catch (JRException e) {
//Atrapa la excepción y manejala correctamente.
}
Como verán, a modo de ejemplo están todas las rutas hardcodeadas, pero las rutas en una aplicación real se obtienen en forma dinámica como recurso (a partir de una ruta relativa o alguna ruta definida ya sea en Struts o en WebSphere).
Los valores a popular, obviamente se pueden obtener de algún objeto que provenga ya sea de un servicio o directamente de algún form, o de cualquier otro objeto que contenga datos.
Ejemplo del PDF:

5) Posibles problemas.

Obviamente los diseños de los reportes no son así de sencillos en una petición real ni los valores se obtienen tan fácilmente.
Hay problemas que suelen suceder a menudo cuando se utiliza Jasper por primera vez, por ejemplo:

1. ClassCastException.
   En el iReport cada elemento tiene su tipo, que aunque por defecto es siempre String, puede modificarse para que sea Double, Integer, y demás tipos de datos.
   
   Si vemos en la asignación del parámetro cantidad, está siendo pasado como una cadena pero si recibiésemos un Double en lugar de un String tenemos dos opciones:
   
   1) Parsear el valor del Double a String.
   2) Modificar el tipo de dato en iReport a Double.
   
   Ambas son opciones son validas y sencillas. Las propiedades del tipo de dato pueden modificarse en la pestaña propiedades a la derecha en el iReport.
2. 
   
3. Valores nulos.

Cuando no se popula un parámetro, los valores se asignan en null automáticamente. Por ejemplo si no asignamos nada al parámetro “responsable” este aparecería en null en el PDF generado.

Hay dos soluciones para esto.

1) Usando expressions. Click derecho en cada campo y presionar en “Edit Expression”. Luego hacer algo como esto:

($P{responsable } == null ? "" : $P{responsable})

2) La otra forma es seleccionando todos los campos y en propiedades setear “Blank when null”. Muchísimo más sencillo que la primer solución.

6) JRXML.

A esta altura vale aclarar que clickeando en la pestaña XML del iReport podemos visualizar el XML puro de todo lo que estuvimos diseñando con iReport.
Sabiendo esto, se pueden agregar elementos, propiedades, formato, expresiones, y muchas cosas más simplemente codificando en XML.

Puede ser engorroso por ejemplo, mover elementos de posición tocando directamente el XML, ya que con el iReport solo se seleccionan y se mueven los elementos donde gustes, pero codificar directo en el XML puede ser muy útil para agregar reglas de formato y tags HTML.

7) Formato HTML.

A veces se requieren formatos que son difíciles de realizar en Java solamente con el manejo de Strings. Por ejemplo expresar 102 en un simple String Java no es fácil sobre todo si el encoding utilizado no soporta este tipo de símbolos.
Para esta tarea, iReport soporta diversos tags html que pueden servir para dar el formato que queramos. Para ello, primero hay que habilitar la propiedad “markup”a los elementos.
Seleccionamos los elementos que queramos y en propiedades vamos a “markup” y seleccionamos “styled”.

Ahora volvamos al código y modifiquemos los valores en el HashMap de esta manera:  

 

pars.put("combustible", "Gas natural");
pars.put("cantidad", "1000³");
pars.put("responsable", "Matias De Marco");

El tag “<sup>” en este caso se refiere a superscript, y veremos que ahora el resultado en el PDF es este:

8) Libros recomendados:

• JasperReports 3.5 for Java Developers, by David Heffelfinger
• JasperReports 3.6 Development Cookbook, by Bilal Siddiqui

Collusion: Observa quienes te rastrean!

Es muy comun que los sitios rastreen mediante cookies cuales son tus gustos personales en pos de poder "ofrecerte" anuncios acordes.
Este es uno de los negocios mas rentables que existe en la actualidad y es uno de los pilares de las grandes compañias.

Gary Kovacs, el CEO de Mozilla, presento durante TED 2012 un addon para Firefox que permite ver en tiempo real que sitios estan siguiendo tu actividad mientras navegas.

Collusion crea una matriz de puntos grises que marcan los sitios que has visitado o estás visitandos. Estos puntos se conectan a otros puntos de color rojo que son los sitios que te estan rastreando mediante cookies.

La idea que plantea Kovacs es lanzar Collusion a gran escala en pos de poder tener una vision mas detallada de cuales son los sitios que rastrean nuestra información, como, y por que. El saber esto nos podria permtir en un futuro resguardar nuestra privacidad y nuestra actividad en la red.

Kovacs dijo:

“Estamos siendo observados. Es el momento de observar a los observadores”.

Se puede descargar Collusion en el sitio de Mozilla.

Fallo de seguridad en el router COMTREND. Una de suspenso.

Ya habíamos hablado de este fallo en otra oportunidad. De como SeguridadWireless al descubrir el fallo decidió no revelar los detalles técnicos por el momento en pos de darle tiempo a las compañías para que puedan solucionarlo.

Haciendo la buena obra del día

En el día anterior un usuario posteo en el hacker.net una duda respecto de un ejecutable que se transmitía mediante Facebook. La pregunta era si el link que contenía el mensaje era o no era un virus.