Filtros & Eventos

Para filtrar los eventos podemos utilizar nuestras propias funciones. Dichas funciones pueden utilizan el potencial que nos brindan las expresiones regulares de Javascript. Un ejemplo de definición de una función de filtraje sería:

var regex = new RegExp(chain /* Patrón o cadena a filtrar */, "i");

filterMatcher = function(evt) {

return regex.test(evt.getDescription());

};

Se define una expresión regular con la cadena o patrón a buscar. En este caso, se buscará el string dentro de la descripción de cada evento (el texto que hay entre las etiquetas de <event></event>), los que valúen a cierto serán visibles y los que valúen a falso no se mostrarán. Después se asigna está función a las bandas del Timeline que queremos filtrar, y por último repintamos el Timeline:

for (var i = 0; bandIndices.length; i++)
{
var bandIndex = bandIndices[i];
timeline.getBand(bandIndex).getEventPainter().
setFilterMatcher(filterMatcher);
}

timeline.paint();

Para poder trabajar con filtros es necesario saber algunos métodos de la clase Event, estos métodos nos sirven para acceder a la información (los eventos) ya cargada con el método loadXML del objeto Timeline:

Straight from the code:
Timeline.DefaultEventSource.Event.prototype
Event Methods:
getID: function() { return this._id; },
isInstant: function() { return this._instant; },
isImprecise: function() { return this._start != this._latestStart
|| this._end != this._earliestEnd; },
getStart: function() { return this._start; },
getEnd: function() { return this._end; },
getLatestStart: function() { return this._latestStart; },
getEarliestEnd: function() { return this._earliestEnd; },
getText: function() { return this._text; },
getDescription: function() { return this._description; },
getImage: function() { return this._image; },
getLink: function() { return this._link; },
getIcon: function() { return this._icon; },
getColor: function() { return this._color; },
getTextColor: function() { return this._textColor; },
getProperty: ...
getWikiURL: function() { return this._wikiURL; },
getWikiSection: function() { return this._wikiSection; },
setWikiInfo: function(wikiURL, wikiSection) { ... }

Por último decir, que tengo la pestaña de Participante casi acabada. Tengo que ir implementando los demás filtros de forma más personalizada. Aparentemente la pestaña de Fechas y Acciones dentro de la página de registros, supondrán un poco más de dedicación.

“No cambié de canal, mañana más”

La notación JSON

Leyendo Introducción a AJAX, he encontrado que la notación utilizada en la mayoría de scripts de Timeline y en su definición, es la JSON, que es básicamente una forma estructurada de componer los objetos y arrays.

Según el libro: “La notación de objetos mediante JSON es una de las características principales de JavaScript y un mecanismo definido en los fundamentos básicos del lenguaje. JSON permite definir arrays y objetos de una manera concisa, lo que supone una gran ventaja respecto de la notación tradicional de los objetos y los arrays”.

Un ejemplo de la notación JSON para crear objetos sería:

var objeto = {
"propiedad1": valor_simple_1,
"propiedad2": valor_simple_2,
"propiedad3": [array1_valor1, array1_valor2],
"propiedad4": { "propiedad anidada": valor },
"metodo1": nombre_funcion_externa,
"metodo2": function() { ... },
"metodo3": function() { ... },
"metodo4": function() { ... }
};

Siguiendo con la lectura, he encontrado una sutil diferencia a la hora de crear objetos o como dice el libro, pseudoclases. La diferencia está en la propiedad prototype. Me explico, los métodos que se definen con protoype se crean una sola vez para todos los objetos, en cambio, si no utilizamos prototype, se crea el mismo método para cada objeto y en consecuencia ocupando más espacio. Utilizando protoype, podemos redefinir metodos de clases ya existentes o bien añadir nuevos.

Para ilustrarlo mejor adjunto un ejemplo de la propiedad prototype.

Clase original
function Factura(idFactura, idCliente) {
this.idFactura = idFactura;
this.idCliente = idCliente;
this.muestraCliente = function() {
alert(this.idCliente);
}
this.muestraId = function() {
alert(this.idFactura);
}
}

Clase que utiliza su prototype
function Factura(idFactura, idCliente) {
this.idFactura = idFactura;
this.idCliente = idCliente;
}
Factura.prototype.muestraCliente = function() {
alert(this.idCliente);
}
Factura.prototype.muestraId = function() {
alert(this.idFactura);
}

AJAX

Tras leer algunos apartados de Introducción a Javascript, que me han servido para solucionar algunos problemas que tenía con los Timelines, he comenzado a leer otro libro que también me puede ser de gran ayuda, se llama Introducción a AJAX, del mismo autor que Introducción al Javascript (Javier Eguíluz Pérez) y de la misma página web.

Este libro trata con más profundidad el tema DOM y Javascript, y por eso creo que me puede servir de cara a trabajar con Timelines.