Programando en Javascript es posible adoptar un enfoque orientado a objetos. De esta forma, mediante el mecanismo de ir extendiendo las clases según una jerarquía determinada, vamos obteniendo objetos adaptados a nuestras necesidades partículares que reducirán el tiempo de los desarrollos futuros.
OpenLayers es una librería Javascript que utiliza esta aproximación, mediante una jerarquía de clases que dan servicio a las diferentes funcionalidades para las que se ha pensado el programa.
Podemos utilizar la arquitectura de clases de OpenLayers para crearnos una librería de clases propia que tenga objetos tales como ‘
miMapa‘, que incluye ya los controles y capas que suelo utilizar, o ‘
miFeature‘ que incorpora determinadas features utilizadas por mi programa con sus propias características de visualización, por ejemplo.
Vamos a explicar en este artículo como crear una jerarquía propia de clases basada en la arquitectura proporcionada por OpenLayers.
Para ello utilizaremos primero una jerarquia simple de objetos comunes como la indicada en el siguiente esquema:
En ella definimos las clases ‘
Punto‘ y ‘
P3d‘. La clase
Punto tiene como atributos las coordenadas
x e
y correspondientes a la representación de un punto en dos dimensiones. De ella deriva la clase ‘
P3d‘ que añade una tercera coordenada
z. La clase ‘
P3d‘ hereda las propiedades y métodos de la clase ‘
Punto‘, algunos de los cuales los sobreescribe.
Para implementar este esquema en nuestro programa Javascript+OpenLayers utilizaremos dos archivos:
- Libreria js : La hemos llamado ‘clases1.js‘ y contiene las definiciones correspondientes a nuestra colección de clases.
- Fichero html : Lo hemos llamado ‘clases1.html‘ y deberá incluir el link a la librería de OpenLayers y a nuestra librería de clases ‘clases1.js‘. Además, el fichero ‘clases1.html‘, incorpora un pequeño script donde probamos la librería.
Vamos a analizar en primer lugar la librería ‘clases1.js‘. Es conveniente en primer lugar definir nuestro propio espacio de nombres, de forma que todas nuestras clases queden ‘aisladas’ del resto de librerías que utilize el programa. Hemos elegido llamar ‘MisGeos‘ a nuestro espacio de nombres. Para definirlo se utiliza la siguiente construcción:
MisGeos = {};
A continuación definimos la clase ‘MisGeos.Punto‘. Para ello utilizaremos el objeto-función ‘OpenLayers.Class‘ definido en la librería OpenLayers. Esta es la función encargada de crear nuevas clases y de gestionar el mecanismo de herencia. Para crear una nueva clase es necesario pasarle dos paramétros: La clase de la cual deriva nuestra nueva clase y, como segundo parámetro, un array asociativo con la definición de las nuevas propiedades y métodos que incorpora el nuevo objeto:
nuevaClase = OpenLayers.Class(
ClasePadre,
ArrayNuevasDefiniciones
);
El array del segundo parámetro tendrá la siguiente estructura:
ArrayNuevasDefiniciones= {
prop1: valor1,
prop2: valor2,
metodo1: function() {...},
metodo2: function(..) {....}
};
Vemos que cada elemento del Array es una definición de una propiedad o método y consta del nombre, los ‘dos puntos’ y la definición correspondiente. Lo veremos más claramente con el caso concreto de nuestra clase MisGeos.Punto:
MisGeos.Punto = OpenLayers.Class(MisGeos, {
initialize: function(xx, yy) {
this.x = xx;
this.y = yy;
},
x : null,
y : null,
toString : function() {
return "("+this.x+","+this.y+")";
}
});
Vemos que el constructor de la clase es una función especial que se debe de llamar ‘initialize‘. También hay que destacar cómo definimos las propiedades ‘x‘ e ‘y‘, a las que inicialmente asignamos un valor nulo, y cómo se procede a la asignación de sus valores. El constructor ‘initialize‘ recibe dos números ‘xx‘ e ‘yy‘ como parámetros y los asigna a las propiedades del objeto utilizando el ‘this‘. Este detalle es importante. Si no utilizamos ‘this‘, los valores serían asignados a ciertas variables ‘x‘ e ‘y‘ locales del propio método ‘initialize‘.
El método ‘toString()‘ muestra el contenido de las propiedades ‘x‘ e ‘y‘ de la instancia, encerrados entre paréntesis y separados por una coma.
Para crear una instancia de objeto de la clase MisGeos.Punto habrá que hacerlo de la siguiente manera:
var p1 = new MisGeos.Punto(-3.0,42.3);
Una vez creada la clase MisGeos.Punto, vamos a crear una clase ‘MisGeos.P3d‘ que derive de la anterior y añada una tercera coordenada. La forma de hacerlo es la siguiente:
MisGeos.P3d = OpenLayers.Class(MisGeos.Punto, {
initialize : function(xx, yy, zz) {
MisGeos.Punto.prototype.initialize.apply(
this, [xx, yy]);
this.z = zz;
},
z : null,
toString : function() {
return "("+this.x+", "+this.y+", "+this.z+")";
}
});
Aquí es importante darse cuenta de la manera de llamar al constructor de la clase base, MisGeos.Punto, desde el constructor de la clase ‘MisGeos.P3d‘:
clasebase.prototype.initialize.apply (
this,
[parametros pasados al constructor]
);
Además podemos ver que se sobreescribe el método ‘toString()‘ de la clase base para adaptarlo a la nueva clase.
Con esto queda creada la librería con nuestros dos tipos de objetos ‘Punto‘ y ‘P3d‘. Para probar la librería utilizaremos un sencillo script, que se ha añadido en la página html, y que tiene la siguiente forma:
P1 = new MisGeos.Punto(-3.09, 45.78);
document.write ( "Punto P1: " + P1.toString());
P2 = new MisGeos.P3d(10,20,30);
document.write ("P3d P2: " + P2.toString());
El código completo de los dos ficheros lo puedes ver en:
En un próximo artículo aplicaremos esta metodología a la creación de clases de mapas y features personalizados.
Santiago Higuera (11 Abril 2011)
![[Valid RSS]](http://www.feedvalidator.org/images/valid-rss-rogers.png "Feed RSS")
