Introducción

El lanzamiento de Sencha ExtJS 4 estuvo marcado por la integración nativa de gráficos, tal es así que inmediatamente la comunidad pidió esta característica para Touch. Algunos decidieron exportar los gráficos de ExtJS4 a Touch de manera independiente (sin apoyo oficial), como es el caso de Oppo-Touching.

En esta entrada vamos a generar 2 componentes visuales, un Semaforo y un Medidor de aguja, ambos totalmente compatibles con Sencha Touch ayudandonos de Oppo-Touching 2.0.

Aclaración 1: de aquí en adelante nos vamos a referir tanto a Oppo-touching como a ExtJS4-Charts como lo mismo, y en preferencia, a este último ya que contamos con la API oficial.

Instalación

Descargamos el framework desde el repositorio de Google Codes y como cualquier otro proyecto javascript, solo basta con importar el archivo .js en el header del index.html de nuestra aplicación para poder usarlo.

La Arquitectura básica de los componentes es una Superficie (Surface), en el siguiente nivel los motores que renderizan el gráfico (que pueden ser VML, SVG o Canvas, lo que nos brinda una excelente covertura en los navegadores), y en el último nivel los Sprites que vienen a ser los elementos individuales que componen el gráfico.

Los motores no son mas que las diferentes opciones para dibujar que nos provee HTML5: Canvas, SVG y, el propietario de IE, VML.

Los Sprites son los objetos que componen la superfície del dibujo, existen diferentes tipos y opciones. Estos tienen varias propiedades como el tipo, ancho, alto, coordenada X e Y, relleno, etc.

Para construir nuestro componente personalizado vamos a trabajar agregando y dándoles distintas propiedades a nuestros sprites con el objeto de cumplir con todos los requerimientos que tengamos del componente.

Vamos a tener 2 tipos de Sprites, Estáticos o Dinámicos por así decir, los primeros se dibujarán al momento de renderizar el gráfico y no los modificaremos en toda la vída de este, y los dinámicos van a variar según el comportamiento que le demos a estos, como es la lúz que se enciende en el caso de semáforo, o la aguja en el medidor.

Como vamos a extender la clase Ext.draw.Component, los sprites estáticos los agregaremos al momento de crearse mediante un arreglo de items que nos provee esta clase. Es realmente importante crearlos y aplicar estos dentro del constructor mediante la función Ext.apply() ya que sino no podremos crear mas de 1 instancia del gráfico.
En cambio, los dinámicos los agregaremos al momento de renderizar el dibujo y los mantendremos referenciados mediantes variables para poder luego actualizarle sus propiedades.

Semáforo

Comenzaremos con una versión simplificada de nuestro componente, y a medida que avancemos le iremos agregando el comportamiento deseado y las características própias.

// file: Semaforo.js

var	rojoApagado 	  = '#0f0000',
	verdeApagado	  = '#000f00',
	amarilloApagado   = '#0f0f00',
	rojoIluminado	  = '#ff0000',
	verdeIluminado    = '#00ff00',
	amarilloIluminado = '#ffff00';

Ext.bairesit.draw.Semaforo = Ext.extend(Ext.draw.Component, {

	/**
	*	Extendemos el método 'constructor' para darle nuestras
	*	propiedades personalizadas, como ser el valorActual,
	*	los límites con los que encenderá cada lúz, los sprites, etc.
	*/
	constructor:function(config) {
		var valorActual			= null;
		var limiteObjetivo		= null;
		var limiteAlerta		= null;
		var esAutoRedibujar		= false;
		var spriteLuzEncendida		= new Array();
		var gradients			= [{
							id    : 'gradientIdSemaforo',
							angle : 45,
							stops : {
								0   : {color: '#e0fea7'},
								100 : {color: '#ffdeb3'}
							}
						}];
		var circuloLuzEncendida		= [{
							type  : 'circle',
							fill  : verdeIluminado,
							radius: 15,
							x     : 30,
							y     : 0,
							stroke: "333"
						}];
		var items 			= new Array({
							type  : 'circle',
							radius: 0,
							x     : 1,
							y     : 1
						},{
							type  : 'circle',
							radius: 1,
							x     : 180,
							y     : 120
						},{
							type  : 'rect',
							width : 40,
							height: 110,
							fill  : 'url(#gradientIdSemaforo)',
							x     : 10,
							y     : 10,
							stroke: "000"
						},{
							type  : 'circle',
							radius: 15,
							fill  : rojoApagado,
							x     : 30,
							y     : 30,
							stroke: "333"
						},{
							type  : 'circle',
							radius: 15,
							fill  : amarilloApagado,
							x     : 30,
							y     : 65,
							stroke: "333"
						},{
							type  : 'circle',
							radius: 15,
							fill  : verdeApagado,
							x     : 30,
							y     : 100,
							stroke: "333"
						});
		config = Ext.apply({
			items              : items,
			gradients          : gradients,
			valorActual        : valorActual,
			limiteAlerta       : limiteAlerta,
			limiteObjetivo     : limiteObjetivo,
			esAutoRedibujar    : esAutoRedibujar,
			spriteLuzEncendida : spriteLuzEncendida,
			circuloLuzEncendida: circuloLuzEncendida
		}, config);

		Ext.bairesit.draw.Semaforo.superclass.constructor.apply(this, arguments);
	},

	onRender: function(){
		Ext.bairesit.draw.Semaforo.superclass.onRender.apply(this, arguments);

		this.spriteLuzEncendida[0] = this.surface.add(this.circuloLuzEncendida[0]);

		if (this.valorActual != null){
			this.redraw();
		}

	}
}

Los Sprites dinámicos que queremos mantener en variables para poder modificar los agregamos al extender la función onRender, para así luego por ejemplo, si actualizamos el valorActual y queremos iluminar el foco correspondiente, le actualizamos sus atributos de la siguiente manera:

iluminarSemaforo: function () {
	var ejeY= 0;
	var urlFill='';

	if (this.valorActual >= this.limiteAlerta){
		ejeY    = 30;
		urlFill = rojoIluminado;
	} else {
		if (this.valorActual <= this.limiteObjetivo){
			ejeY    = 100;
			urlFill = verdeIluminado;
		} else {
			ejeY    = 65
			urlFill = amarilloIluminado;
		}
	}

	this.spriteLuzEncendida[0].setAttributes({
		y	: ejeY,
		fill	: urlFill
	});
	this.spriteLuzEncendida[0].redraw();
}

Gradientes

Una forma de mejorarle el aspecto es utilizando gradientes de colores para realzar la calidad gráfica. Si bien con Ext.draw.Component podemos generar y utilizar gradientes, éstos pueden ser solamente ‘lineales’. Para las luces iluminadas del semaforo es mucho mas elegante un grandiente radial y un hack para utilizarlos es definiendolos directamente en el index.html de manera explícita dentro de las etiquetas body:

			...

Una vez definido, para poder utilizarlo solo deberemos referenciarlos con el id, por ejemplo: fill: 'url(#radialGradientRojo)'.

Basicamente este componente ya funciona y podemos seguir extendiendolo y agregandole mas sprites y características como ser un título, una leyenda que muestre el valorActual, un store que almacene el historial, la posibilidad de dibujar la tendencia que viene teniendo lo que estemos midiendo, etc.

En la imagen 02 se puede apreciar el resultado final del componente y una serie de estados de ejemplo.

Medidor de Aguja

Crear un medidor de agujas supone un mayor trabajo ya que implican cálculos adicionales y una gran cantidad de sprites dinámicos.

Los requerimientos que tenemos son:

• Setear los limites inferiores y superiores.
• Limites de objetivo y de alerta.
• Apreciar graficamente el estado del valor actual.
• Posibilidad de visualizar el limite del objetivo.
• Posibilidad de apreciar la tendencia.
• Posibilidad de apreciar la evolución del valor actual.

Dividimos en SubComponentes y los clasificamos:

Bien, una vez que desglosamos los componentes requeridos, comenzamos con la construcción de los componentes estáticos:

// file: Medidor.js
Ext.bairesit.draw.Semaforo = Ext.extend(Ext.draw.Component, {

	constructor:function(config) {
        ...
        var items     = [{ // Punto para asegurar los límites del gráfico
                              type  : 'circle',
                              radius: 0,
                              x     : 1,
                              y     : 1
                        },{ // Punto para asegurar los límites del gráfico
                              type  : 'circle',
                              radius: 1,
                              x     : 415,
                              y     : 140
                        },{   // medio círculo
                              type  : 'path',
                              fill  : 'url(#gradientIdMedidor)',
                              path  : "M30,130 C36,-2 224,-2 230,130 L 200,130 C 194,38 66,38 60,130 z","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea de cierre
                              type  : 'path',
                              fill  : '#000',
                              path  : "M25 130L 235 130","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 18°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M37.272 99.871L 32.517 98.326","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 36°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M51.121 72.691L 46.076 69.752","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 54°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M72.691 51.121L 69.752 47.076","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 72°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M99.871 37.272L 98.8326 32.517","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 90°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M130 25L 130 35","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 108°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M160.129 37.272L 161.674 32.517","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 126°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M187.309 51.121L 190.248 47.076","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 144°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M208.879 72.691L 212.924 69.752","stroke-width":"1",
                              stroke: "#000"
                        },{   // línea a los 162°
                              type  : 'path',
                              fill  : '#fff',
                              path  : "M222.728 99.871L 227.483 98.326","stroke-width":"1",
                              stroke: "#000"
                        },{   // circulo aguja
                              type  : 'circle',
                              fill  : 'url(#radialGradientCentroAguja)',
                              radius: 8,
                              x     : 130,
                              y     : 130
                        }];

        config = Ext.apply({
            items : items,
            ...
        }, config);

        Ext.bairesit.draw.Medidor.superclass.constructor.apply(this, arguments);
    }
	...
}

Ahora agregamos los sprites dinámicos, como ser los Valores del Eje:

constructor:function(config) {
	...
	var items ...
	var spriteAxis      = new Array();
	var axis      = [{
				  type  : 'text',
				  text  : 0,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 1,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 1,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 2,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 2,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 3,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 3,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 4,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 4,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 5,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 5,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 6,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 6,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 7,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 7,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 8,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 8,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 9,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 9,
				  y     : 10
			},{
				  type  : 'text',
				  text  : 10,
				  fill  : '#000',
				  font  : '10px Arial',
				  x     : 130 + 10,
				  y     : 10
			}];

	config = Ext.apply({
		items              : items,
		gradients          : gradients,
		valorActual        : valorActual,
		valorMaximo        : valorMaximo,
		valorMinimo        : valorMinimo,
		limiteObjetivo     : limiteObjetivo,
		limiteAlerta       : limiteAlerta,
		esMinimoMejor      : esMinimoMejor,
		esAutoRedibujar    : esAutoRedibujar,
		axis               : axis,
		spriteAxis         : spriteAxis,
		...
	}, config);
	Ext.bairesit.draw.Medidor.superclass.constructor.apply(this, arguments);
},

anguloARadian: function (angulo){
	var radianes = 0;
	radianes = (angulo * Math.PI) / 180;
	return radianes;
},

calcularCoordenadaX: function (anguloGrados, radio, offset){
	var radianes = this.anguloARadian(anguloGrados);
	var x = (offset + (Math.cos(radianes) * radio));
	return x;
},

calcularCoordenadaY : function (anguloGrados, radio, offset){
	var radianes = this.anguloARadian(anguloGrados);
	var y = (offset - (Math.sin(radianes) * radio));
	return y;
},

dibujarAxis: function(){
	var i = 0, texto = '', arreglo;
	var paso = (this.valorMaximo - this.valorMinimo) / 10;
	for ( i = 0 ; i <= 10 ; i++ ){
		this.axis[i].text = this.valorMinimo + (paso * i);
		this.axis[i].x = 130 + (i * paso);

		/* Dibujo los numeros de la escala */
		arreglo = (String(this.axis[i].text)).split(".");
		texto = arreglo[0] + '.' + ( arreglo[1] ? arreglo[1].substring(0, 1) : '0');

		this.spriteAxis[i].setAttributes({
			text : texto,
			x    : this.calcularCoordenadaX (180-(180/10*i), 115, 120),
			y    : this.calcularCoordenadaY (180-(180/10*i), 110, 125)
		});

		this.spriteAxis[i].redraw();
	}
},

onRender: function(){
	Ext.bairesit.draw.Medidor.superclass.onRender.apply(this, arguments);
	...
	for ( i = 0 ; i <= 10 ; i++ ){
		this.spriteAxis[i] = this.surface.add(this.axis[i]);
	},
	...
},

Agregamos la Aguja:

constructor:function(config) {
	...
	var spriteAguja     = new Array();
	var circulo   = [{
		type  : 'circle',
		fill  : 'url(#radialGradientCentroAguja)',
		radius: 8,
		x     : 130,
		y     : 130
	}];
	var aguja     = [{
		type  : 'path',
		fill  : 'url(#gradientId)',
		path  : "M 93,95 "+10+","+0+" 107,95 z","stroke-width":"1",
		stroke: "#333"
	}];

	config = Ext.apply({
		spriteAguja        : spriteAguja,
		aguja              : aguja,
		circulo            : circulo,
		...

	}, config);
	Ext.bairesit.draw.Medidor.superclass.constructor.apply(this, arguments);
},

dibujarAguja: function () {
	var opacity = 0;
	var radio, angulo, alfa, puntaX0, puntaY0, beta, puntaX1, puntaY1, gama, puntaX2, puntaY2;
	if ((this.valorMinimo <= this.valorActual) && (this.valorActual <= this.valorMaximo)){
		radio = 90;
		angulo = (((this.valorActual - this.valorMinimo) /(this.valorMaximo - this.valorMinimo)) * 180) ;

		alfa    = 180 - angulo + 90;
		puntaX0 = this.calcularCoordenadaX (alfa, 6, 130);
		puntaY0 = this.calcularCoordenadaY (alfa, 6, 130);

		beta    = 180 - angulo;
		puntaX1 = this.calcularCoordenadaX (beta, radio, 130);
		puntaY1 = this.calcularCoordenadaY (beta, radio, 130);

		gama    = 180 - angulo - 90;
		puntaX2 = this.calcularCoordenadaX (gama, 6, 130);
		puntaY2 = this.calcularCoordenadaY (gama, 6, 130);

		opacity = 1;
		/* Dibujo la Aguja */
		this.spriteAguja[0].setAttributes({
			path:   "M "+puntaX0+","+puntaY0+" "+
			puntaX1+","+puntaY1+" "+
			puntaX2+","+puntaY2+" z",
			"stroke-width":"1"
		});
	}
	this.spriteAguja[0].setAttributes({opacity:opacity});
	this.spriteCirculo[0].setAttributes({opacity:opacity});
	this.spriteAguja[0].redraw();
	this.spriteCirculo[0].redraw();
},

onRender: function(){
	Ext.bairesit.draw.Medidor.superclass.onRender.apply(this, arguments);
	...
	for (var r = 0; r < this.aguja.length ; r = r+1){
		this.spriteAguja[r]   = this.surface.add(this.aguja[r]);
	};

	for (var b = 0; b < this.circulo.length; b = b+1){
		this.spriteCirculo[b] = this.surface.add(this.circulo[b]);
	};
	...
},
...

Gráfico de Líneas

Para poder mostrar la evolución del valor actual decidimos utilizar un gráfico de línea provisto por Oppo-touching, y la manera de activarlo es mediante un doble click (o doble tap) en la flecha de tendencia. Para ello, luego de renderizar el componente, le anexamos el comportamiento al sprite de la tendencia.

afterRender:function(){
	Ext.bairesit.draw.Medidor.superclass.afterRender.call(this);
	for (var i = 0 ; i < this.spriteTendencia.length ; i++ ){
		this.spriteTendencia[i].el.on(
			'doubletap',
			this.mostrarDetalle,
			this
		)
	}
},
mostrarDetalle: function (){
	var desplegableHistorial = new Ext.bairesit.draw.LineChart({
		tituloEjeY   : this.tituloEjeY,
		tituloEjeX   : this.tituloEjeX,
		maxY         : this.valorMaximo,
		titulo       : this.titulo,
		store        : this.store,
		esMinimoMejor: this.esMinimoMejor
	});
	desplegableHistorial.setCentered(true);
	desplegableHistorial.show();
}

// file: LineChart.js
Ext.namespace('Ext.bairesit.draw');

	var naranja              = "#eea800";
	var esmeralda            = "#00eeca";
	var amarillo             = "#ffffda";
	var verde                = "#dfffdf";
	var azul                 = "#0080ff";
	var rojo                 = "#FFCCCC";
	var tituloAlertaPeligro  = "Límite Alerta-Peligro";
	var tituloObjetivoAlerta = "Límite Objetivo-Alerta";
	var tituloPeligroAlerta  = "Límite Peligro-Alerta";
	var tituloAlertaObjetivo = "Límite Alerta-Objetivo"
	var colorSeparadorSup    = naranja;
	var colorSeparadorInf    = esmeralda;
	var coloresAscendentes   = [amarillo,verde,azul];
	var coloresDescendentes  = [amarillo,rojo,azul];
	var fondo                = rojo;
	var colores              = coloresAscendentes;
	var tituloSuperior       = tituloAlertaPeligro;
	var tituloInferior       = tituloObjetivoAlerta;

Ext.bairesit.draw.LineChart = Ext.extend(Ext.Panel, {

    ui          : 'dark',
    fullscreen  : true,
    floating    : true,
    modal       : true,
    centered    : true,
    layout      : 'fit',

    constructor:function(config) {
        var maxY          = maxY;
        var titulo        = titulo;
        var tituloEjeY    = tituloEjeY;
        var tituloEjeX    = tituloEjeX;
        var esMinimoMejor = esMinimoMejor;
        var dockedItems   = [{
                                dock  : 'top',
                                xtype : 'toolbar',
                                title : titulo
                            }];

        config = Ext.apply({
            titulo      : titulo,
            tituloEjeY  : tituloEjeY,
            tituloEjeX  : tituloEjeX,
            dockedItems : dockedItems
        }, config);

        Ext.bairesit.draw.LineChart.superclass.constructor.apply(this, arguments);
    },

    initComponent: function(config){
        Ext.bairesit.draw.LineChart.superclass.initComponent.apply(this, arguments);
        this.setTitulo(this.titulo);
    },

    /**
     * Lazy creation
     * When the parent is added into UI display list at the first time, we add the charting
     */
    doComponentLayout : function(width, height, isSetSize) {
        width  = width  * 0.8;
        height = height * 0.7;
        this.display(width, height);
        Ext.bairesit.draw.LineChart.superclass.doComponentLayout.apply(this, arguments);
    },

    display:function(width, height) {
        if(this.chart != null && this.chart.width == width && this.chart.height == height) {
            return;
        }

        if (!this.esMinimoMejor){
            colores             = coloresDescendentes;
            fondo               = verde;
            tituloInferior      = tituloPeligroAlerta;
            tituloSuperior      = tituloAlertaObjetivo;
            colorSeparadorSup   = esmeralda;
            colorSeparadorInf   = naranja;
        }

        Ext.chart.theme.Objetivo = Ext.extend(Ext.chart.theme.Category5, {
            constructor: function(config) {
                Ext.chart.theme.Category5.prototype.constructor.call(this, Ext.apply({
                    seriesThemes: [{
                                      fill          : colorSeparadorSup,
                                      stroke        : colorSeparadorSup,
                                      'stroke-width': 1.5
                                  },{
                                      fill          : colorSeparadorInf,
                                      stroke        : colorSeparadorInf,
                                      'stroke-width': 1.5
                                  }, {
                                      fill: azul
                                  }],
                    colors      : colores
                }, config));
            }
        });

        this.chart = new Ext.chart.Chart({
            insetPadding: 30,
            shadow      : true,
            theme       : 'Objetivo',
            legend      : {
                            position: 'right',
                            boxFill : '#eee'
                          },
            axes        : [{
                            type    : 'Numeric',
                            minimum : 0,
                            maximum : this.maxY,
                            position: 'left',
                            fields  : ['valor','objetivo','alerta'],
                            title   : this.tituloEjeY,
                            grid: {
                                odd: {
                                    opacity         : 1,
                                    fill            : fondo,
                                    stroke          : fondo,
                                    'stroke-width'  : 0.5
                                },
                                even: {
                                    opacity         : 1,
                                    fill            : fondo,
                                    stroke          : fondo,
                                    'stroke-width'  : 0.5
                                }
                            }
                        },{
                            type    : 'Category',
                            position: 'bottom',
                            fields  : ['mes'],
                            title   : this.tituloEjeX,
                            label   : { rotate: { degrees : 315 } }
                        }],
            series      : [{
                            type        : 'line',
                            title       : tituloSuperior,
                            axis        : 'left',
                            fill        : true,
                            xField      : 'mes',
                            yField      : 'alerta',
                            style       : { opacity: 1 },
                            showMarkers : false
                        },{
                            type        : 'line',
                            title       : tituloInferior,
                            axis        : 'left',
                            fill        : true,
                            xField      : 'mes',
                            yField      : 'objetivo',
                            style       : { opacity: 1 },
                            showMarkers : false
                        },{
                            type        : 'line',
                            title       : 'Valor',
                            axis        : 'left',
                            xField      : 'mes',
                            yField      : 'valor',
                            highlight   : {
                                            size: 7,
                                            radius: 7
                                        },
                            markerCfg   : {
                                            type          : 'circle',
                                            size          : 4,
                                            radius        : 4,
                                            'stroke-width': 0
                                        }
                        }]
        });
        this.chart.setSize(width, height);
        this.add(this.chart);
        this.chart.bindStore(this.store,true);
    },

    setTitulo: function(titulo){
        this.dockedItems.items[0].title = titulo;
    },

    refresh:function(data){
        this.dockedItems.items[0].title = this.titulo;
        this.chart.bindStore(data, true);
        this.chart.redraw();
    }
});

Resultado Final

Para finalizar, revisamos nuevamente todo el código, perfeccionamos todos los detalles, y testeamos.

La siguiente imagen es una captura de los componentes una vez finalizado el trabajo:

Aclaraciones finales

A esta altura muchos se preguntarán porque no decidimos utilizar Sencha Touch Charts para la confección de nuestros componentes, para ello tenemos en nuestro descargo que al momento de comenzar el trabajo aun no estaban disponibles ningunas de las versiones de Touch Charts y que estas fueron liberadas practicamente al finalizar con la confección de los gráficos. Sin embargo, igualmente intentamos migrar el código para que funciones con el paquete oficial de Sencha pero no tuvimos éxito debido a que Sencha decidió utilizar solamente el motor Canvas para la capa media por una cuestión de compatibilidad con la mayor parte de dispositivos móviles (Android anterior a 3.1 no soporta SVG). Siendo el mayor problema para nosotros que con Canvas todo el gráfico se comporta como una unidad y no nos permite definirle comportamiento a los sprites individualmente como ser el reconocimiento de eventos. Entre nuestros requerimientos se encontraba que el componente sea capaz de mostrar la evolución de los valores y la manera elegida fue que el sprite de la flecha de tendencia reconozca el doble click. Canvas no nos permite esto, por lo tanto, decidimos continuar con el desarrollo utilizando Oppo-touching.

Conclusiones

Podemos concluir que en los casos en que no dispongamos de gráficos que cumplan con nuestros requerimientos, utilizando Oppo-touching (y en algunos casos Touch-Charts) podemos generar nuestros própios componentes, ya que esta librería nos provee todas las herramientas para ello.

Utilizar el addons Touch-Charts con soporte oficial de Sencha nos permitiría ciertas ventajas que no disponemos con Oppo-touching ya que este esta basado en ExtJS4-Charts y no fue pensado para interactuar con dispositivos móviles, con pantallas de tamaños reducidos, con el cambio de orientación horizontal o vertical, con capacidades de procesamiento limitadas, reconocimiento de eventos táctiles, etc.

Como desafio hacia el futuro, esperamos poder migrar a Touch-Charts y de alguna manera cumplir con todos los requerimientos mediante una activación alterna de la vista previa de la evolución histórica del estado.

Referencias

• Oppo-Touching
• ExtJS 4
• Sencha Touch Charts
• Repositorio Github

Por el equipo del Laboratorio de Investigación Tecnológica (LIT) de Baires IT

Con la aceptación del estandar HTML5 por parte de los browsers mas importantes y el rápido crecimiento de las ventas de los smartphones y tablets todas las miradas se posaron en desarrollar aplicaciones RIA.

En Baires IT no sólo desarrollamos aplicaciones RIA con Sencha Ext que nos ofrece una excelente base, sino también soluciones específicas para dispositivos móviles. En este artículo mostraremos el empleo de Sencha Touch para este fin.

Introducción

Sencha Touch es un framework JavaScript Web RIA basado en Sencha ExtJS orientado a los dispositivos móviles y las prestaciones de estos. Entre sus características mas destacadas en encuentran el manejo de eventos táctiles, geolocalización, integración de datos (JSON, XML, YQL, etc), rápida construcción, multiplataforma, alta escalabilidad, etc.

Para introducirnos vamos a construir una aplicación que nos geolocalice en un mapa, y podamos consultar datos remotos sobre el estado actual del clima.

Además de Sencha Touch vamos a necesitar un servidor web y PHP, en nuestro caso utilizaremos Apache 2.2.17 y PHP 5.3.5.

Instalación

Para instalar el framework es tan simple como descargarlo desde la página oficial de Sencha, lo descomprimimos y lo colocamos dentro una carpeta de nuestro proyecto web. Para utilizarlo alcanza con refereciarlo en la sección de scripts de nuestro index.html.

Creación de una Aplicación

En nuestro proyecto web generaremos una estructura como la siguiente:

Debemos generar un archivo app.js en el que incluiremos el siguiente código para definir la aplicación:

GeoWeather = new Ext.Application({
    name: "GeoWeather",
    launch: function() {
        this.views.viewport = new this.views.Viewport();
    }
});

Para instanciar el Viewport y sus características deberemos crear el archivo Viewport.js:

GeoWeather.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen:true,
    tabBar: {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    },
    defaults: {
        layout: {
           pack: 'fit'
        }
    },
    items: [
        GeoWeather.views.TabAbout
    ]
});

y finalmente el contenido de tabAbout.js:

GeoWeather.views.TabAbout = new Ext.Panel({
    title: "About",
    iconCls: "info",
    fullscreen: true,
    styleHtmlContent: true,
    html: "
Desarrollado por el Laboratorio de Investigación Tecnológica (LIT) de Baires IT

",
    dockedItems:[{
            xtype: 'toolbar',
            dock: 'top',
            id: 'barraTabAbout',
            title: 'About...'
    }]
});

Y finalmente referenciamos los nuevos archivos js en el index.html para que los cargue el browser:

<script src="app/views/tabAbout.js" type="text/javascript"></script>
<script src="app/views/Viewport.js" type="text/javascript"></script>
 ...

El resultado visto con Chrome y con un emulador de Android 2.3.1 es el siguiente:

Geolocalizando

HTML5 definió en su estandar que los browsers permitan geolocalizar al visitante y así aprovechar esta información con diferentes fines. Por supuesto Sencha adoptó esta característica y la extendió al asociarle métodos y eventos para así enriquecer las Aplicaciones Web RIA que se pueden lograr con este framework.

Agregaremos un subdirectorio ‘util’ al directorio ‘app’ de nuestro proyecto, y crearemos un archivo tools.js.

En este definiremos la función obtenerCoordenadasSencha() y la llamaremos justo antes de que se cree el Viewport:

function obtenerCoodenadasSencha(){
    var geo = new Ext.util.GeoLocation({
        listeners: {
            locationupdate: function (geo) {
                localStorage.setItem('HomeLatitud',geo.latitude);
                localStorage.setItem('HomeLongitud',geo.longitude);
                localStorage.setItem('latitud',geo.latitude);
                localStorage.setItem('longitud',geo.longitude);
                alert('Usted se encuentra en ' +
                        'Latitud:'+geo.latitude+', ' +
                        'Longitud:'+geo.longitude);
            },
            locationerror: function (   geo,
                                        bTimeout,
                                        bPermissionDenied,
                                        bLocationUnavailable,
                                        message) {
                if(bTimeout){
                    alert('Timeout occurred.');
                }
                else{
                    alert('Error occurred.');
                }
            }
        }
    });
}

Ya podemos observar que utilizamos ademas localStorage que es un almacenamiento definido por HTML5.

Hasta aquí el resultado visto con Chrome:

Consultar datos a otros Data Web Services

En los comienzos de la informática, las mayoria de las aplicaciones eras procesos batch que tenían una entrada de datos, un proceso y una salida. Hace unos años esto fue cambiando y las aplicaciones se convirtieron en productoras y consumidoras de datos de manera dinámica. Para las Aplicaciones Web RIA es fundamental este dinamismo.

Anteriormente destacamos como una de las características de Sencha Touch era el tener un potente paquete de manejo de Datos. Esta característica nos brinda muchas posibilidades a la hora de seleccionar la fuente, ya sea AJAX, JSON, YQL, etc y utilizarlos en nuestros Templates o Stores.

En esta sección vamos a enfocarnos en algunas de las posibilidades con las que podemos trabajar:

• Hacer una peticion JSON remota y aplicarla directamente en un XTemplate:

function hacerPeticionJSON(lat, lon) {
    Ext.util.JSONP.request({
        url: 'http://free.worldweatheronline.com/feed/weather.ashx',
        callbackKey: 'callback',
        params: {
            key: 'fccb3b08c6141118112306',
            q: lat +','+ lon,
            format: 'json',
            num_of_days: 5
        },
        callback: function(result) {
            var weather = result.data.weather;
            if (weather) {
                var panel = GeoWeather.views.TabPronostico,
                            weatherTpl = panel.tplPronostico;
                panel.update('');
                panel.update(weatherTpl.applyTemplate(weather));
            } else {
                alert('No hay datos de Pronóstico para esta ubicación\n'
                    + ' lat:' + lat
                    + ' long:'+ lon);
            }
        }
    });
}

• Definir y rellenar de manera estática un Store en la aplicación

// Definimos y registramos un Modelo
Ext.regModel('CodigoDescripcion', {
    fields: ['codigo', 'descripcion']
});

// Creamos el Store y le rellenamos los datos de manera estática
GeoWeather.views.descripcionStore = new Ext.data.JsonStore({
    model  : 'CodigoDescripcion',
    sorters: 'codigo',
    data: [
        { codigo: '113', descripcion: 'Despejado'},
        { codigo: '116', descripcion: 'Parcialmente Nublado'},
        { codigo: '119', descripcion: 'Nublado'},
        { codigo: '122', descripcion: 'Encapotado'},
        { codigo: '143', descripcion: 'Bruma'},
		...
    ]
});

• Hacer un requerimiento de datos externos, guardarlos en JsonStore y usarlos cuando se desee

// Definimos y registramos un Modelo
Ext.regModel('CiudadesApi', {
    fields: ['areaName', 'country' ,'region' ,'latitude', 'longitude']
});

// Creamos el Store
GeoWeather.views.cityStore = new Ext.data.JsonStore({
    model  : 'CiudadesApi',
    sorters: 'areaName'
});

// definimos una funcion que hace un requerimiento de datos
// y el callback rellena el Store con los datos obtenidos.
function consultaCiudades(ciudad) {
    var error = false;
    Ext.util.JSONP.request({
        url: 'app/util/CityJson.php',
        callbackKey: 'callback',
        params: {
            key: 'fccb3b08c6141118112306',
            query: ciudad,
            format: 'json',
            num_of_results: 10
        },
        callback: function(result) {
            var error = false;
            if (result){
                ciudades = result.result;
                if (ciudades) {
                    GeoWeather.views.cityStore.add(ciudades);
                    showDesplegableCiudades();
                } else {
                    error=true;
                }
            } else {
                error = true;
            }
            Ext.getBody().unmask();
            if (error){
                alert('No se han encontrado resultados para su consulta');
            }
        }
    });
}

// Definimos una lista que hace uso del Store definido y llenado anteriormente
GeoWeather.views.PanelCiudadesList = new Ext.List({
    store:GeoWeather.views.cityStore,
    fullscreen: true,
    itemTpl : new Ext.XTemplate(
        '',
                '{[this.retornaValor(values.value)]}',
         '',
        '',
            ' - ({[this.retornaValor(values.value)]})',
        '',
        ' - ',
        '',
            '{[this.retornaValor(values.value)]}',
        '',
        {
        compiled: true,
        retornaValor: function(valor){
            return (valor);
        }}),
        onItemDisclosure: function(record){
            var latLon = record.data.latitude+','+record.data.longitude;
            localStorage.setItem('latitud',record.data.latitude);
            localStorage.setItem('longitud',record.data.longitude);
            moverMapa(record.data.latitude,record.data.longitude);
            cerrarDesplegableCiudades();
        }
});

• También podemos almacenarla dentro de un localStorage complementando y extendiendo HTML5.

// Definimos y registramos un Modelo
Ext.regModel('ModeloVientos', {
    fields: [ 'id', 'siglaIngles', 'siglaEspaniol', 'direccion'],
    proxy: {
        type: 'localstorage',
        id  : 'vientos'
    }
});

// Creamos el Store
GeoWeather.views.vientoStore = new Ext.data.Store({
    model  : 'ModeloVientos',
    sorters: 'siglaIngles'
});

// Agregamos los datos que deseamos almacenar en la localStorage.
// Estos datos al estar guardados en la localStorage pueden ser accedidos de cualquier otro módulo del sitio
// no necesariamente programados en Sencha Touch/ExtJS ya que se guardaron en la cache del navegador.
GeoWeather.views.vientoStore.load();
GeoWeather.views.vientoStore.add({siglaIngles: 'N',     siglaEspaniol:'N',   direccion:'Norte'});
GeoWeather.views.vientoStore.add({siglaIngles: 'NNE',   siglaEspaniol:'NNE', direccion:'Nornoreste'});
GeoWeather.views.vientoStore.add({siglaIngles: 'NE',    siglaEspaniol:'NE',  direccion:'Noreste'});
GeoWeather.views.vientoStore.add({siglaIngles: 'ENE',   siglaEspaniol:'ENE', direccion:'Estenoreste'});
GeoWeather.views.vientoStore.add({siglaIngles: 'E',     siglaEspaniol:'E',   direccion:'Este'});
GeoWeather.views.vientoStore.add({siglaIngles: 'ESE',   siglaEspaniol:'ESE', direccion:'Estesureste'});
...
GeoWeather.views.vientoStore.sync();

Como vemos, las posibilidades son amplias, lo cual nos brinda una libertad de seleccionar la mas apropiada a nuestro requerimiento.

Agregando otras pestañas

El siguiente paso es agregar las demás pestañas, definirle los templates, rellenarlos, etc.

El mapa es un elemento provisto por Google, para lo cual debemos estudiarnos las API de ellos.

Resultado Final

Una vez pulidos los detalles menores vemos la aplicación en todo su esplendor.

Conclusiones:

Si bien podemos decir que con la llegada de HTML5 las Aplicaciones Web RIA se manifestaron mas que interesantes a la hora de una solución rápida y multiplataforma, no podemos dejar de decir que Sencha nos dió el impulso final para comenzar a desarrollar aplicaciones para dispositivos móviles permitiendonos desarrollar aplicaciones web móviles que se ven y se sienten nativas en iPhone, Android, y BlackBerry.

Referencias:

• Sencha Touch

Las bases de datos documentales ofrecen una alternativa interesante para almacenar la definición de un formulario, sin perjuicio de la utilización de una base de datos relacional para la persistencia de los datos ingresados por el usuario. En este artículo se muestra cómo es posible generar una interfaz dinámica en HTML con muy poco código, haciendo uso de inputEx. Además se propone almacenar el documento con la definición de dicha interfaz en CouchDB, empleando JSON y accediendo a la misma mediante REST.

Introducción

CouchDB es una base de datos orientada a documentos, sin esquema, desarrollada en Erlang. Tiene una interfaz REST, por lo que no es necesario ningún driver propietario para la conexión, y los datos son intercambiados utilizando la popular notación JSON. Posee características que favorecen la alta escalabilidad, como la tecnología en la cual está desarrollada, la capacidad de replicación automática, etc.

inputEx es un framework Javascript Web RIA basado en Yahoo! UI (YUI), que permite generar formularios HTML dinámicamente en el cliente, a partir de un objeto Javascript, habitualmente representado utilizando notación JSON.

RESTTemplate es una clase de utilidad provista por Spring 3 que nos posibilita interactuar con servicios REST de manera sencilla. En nuestro ejemplo la utilizaremos para acceder a CouchDB.

Para este artículo se utilizó Ubuntu Linux 10.04.

Instalación de CouchDB

    $ sudo apt-get install couchdb

Una vez instalada, es posible verificar su correcto funcionamiento utilizando el comando curl:

    $ curl http://localhost:5984/
    {"couchdb":"Welcome","version":"1.0.0"}

Creación de un formulario HTML inicial

Para crear un formulario HTML de manera rápida, podemos ayudarnos con el “Form Builder” de inputEx:

http://neyric.github.com/inputex/tools/builder/index.html

Como resultado de la creación del formulario, obtenemos un fragmento de JSON que insertaremos en CouchDB.

Carga del formulario en CouchDB

Ingresando a http://localhost:5984/_utils/ se accede a Futon, la interfaz de administración de CouchDB.

Desde allí es posible crear una base de datos llamada “forms” presionando el botón “Create database”.

Dentro de la base de datos recién creada, presionar el botón “New Document”. Puede observarse un documento con un único field llamado “_id” y un valor generado automáticamente.

Seleccionar la pestaña “Source” y hacer doble clic en el código JSON, pegando el código generado en el Form Builder de inputEx.

Importante: No eliminar el atributo “_id” generado automáticamente por CouchDB, ya que es necesario para la identificación del documento.

Esta es la configuración del formulario recientemente creado:

Desde nuestra aplicación Spring 3, agregamos un Controller que interactúe con la base de datos y nos retorne el JSON necesario para renderizar el formulario.

    @Controller
    public class FormController {
        ...
        @RequestMapping("/form/${id}")
        public String showForm(ModelMap model, @PathVariable String id) {
            // Recuperación del JSON del formulario desde CouchDB
            String form = restTemplate.getForObject(url, String.class, id);
            // Se coloca en el Model de Spring MVC
            model.put("formDefinition", form);
            // Se indica al view resolver que muestre la vista llamada dynamicForm
            // (que será resuelta a dynamicForm.jsp)
            return "dynamicForm";
        }
    }

Finalmente, escribimos la página JSP (dynamicForm.jsp) responsable de generar dinámicamente el formulario, haciendo uso de inputEx:

    ...
    <script type="text/javascript">
        var formDef = ${formDefinition};
        formDef.parentEl = 'formContainer';
        YAHOO.util.Event.onDOMReady(function(){ new inputEx.Form(formDef); });
    </script>
    ...

Lo único que hace la página JSP es volcar el JSON retornado por CouchDB en un objeto inputEx.Form.

Este es el resultado terminado:

La configuración del formulario dinámico se encuentra en la base de datos, por lo que es posible regresar a Futon y agregar un fragmento de JSON dentro de la colección “fields”, con los datos de un nuevo campo “birthday”:

    fields: [
    ...
        {
            "name": "birthday",
            "type": "datepicker",
            "label": "Fecha de Nac."
        },
    ...
    ]

Refrescando la página, sin necesidad de reiniciar la aplicación, se puede apreciar el resultado de la modificación:

Para más detalles, el código fuente completo del ejemplo se encuentra en: http://github.com/bairesit/dynamicforms/archives/master

Conclusión

Es posible combinar una base de datos documental, que intercambie datos en formato JSON, con la interfaz web para la generación rápida y ágil de contenido dinámico. Si bien podríamos haber almacenado el JSON en un archivo de texto, o .js, nos pareció interesante externalizarlo a una DB, para lograr el mayor grado de dinamismo y facilidad de administración posibles.

Por el Laboratorio de Investigación Tecnológica (LIT) de Baires IT