.:: Seam City ::. » javascript

Marcas de Google Maps con menu contextual

Tes — Fri, 04 Jul 2008 08:34:49 +0000

En un post anterior hablaba de como añadir un tooltip personalizado a nuestras marcas de google maps, que permitia mostrar cualquier objeto DOM como si fuese un tooltip de la marca.

Siguiendo la misma idea, podemos hacer un menu contextual para las marcas, que se active al hacer click sobre ellas, y contenga acciones a ejecutar sobre la marca en cuestion.

Para ello seguiremos los siguientes pasos:

Crear el menu y sus acciones
Asignar el menu a la marca, y una referencia de la marca al menu para poder ejecutar acciones sobre ella
Mostrar el menu con el evento onclick y ocultarlo al seleccionar una opción

ver ejemplo

Marcas de Google Maps con tooltip personalizado

Tes — Tue, 01 Jul 2008 06:12:33 +0000

Al situar el ratón encima de una imagen o cualquier elemento del DOM, éste es capaz de mostrar en un tooltip el texto de su atributo 'title',

ejemplo

En las marcas de Google Maps este efecto puede conseguirse especificando el atributo 'title' en el constructor de la marca.

var coords = new GLatLng(41.647471, -0.885569);
var mark = new GMarker(coords, {title:'texto de ejemplo'})

ver ejemplo

El problema es que esta opción es muy limitada, ya que se restringe al uso de texto plano. Lo ideal sería poder mostrar cualquier elemento del DOM que queramos, con su HTML y su CSS.
Para conseguirlo vamos a seguir estos pasos:

Crear el nodo del DOM que queramos mostrar o coger un nodo ya existente y ponerlo como un atributo de la marca
Al escuchar el evento mouseover de la marca, añadir el nodo al div contenedor del mapa en el la posición en la que se encuentra la marca
Al escuchar el evento mouseout de la marca, eliminar el nodo del div contenedor del mapa para ocultarlo.

ver ejemplo

Cómo limitar el zoom y el desplazamiento en Google Maps

Tes — Fri, 20 Jun 2008 08:43:58 +0000

En ocasiones nos interesa restringir el desplazamiento del usuario sobre el mapa a un área determinada, o limitar los niveles de zoom máximo y mínimo.

En el caso del zoom la solución es bastante sencilla. Solo hay que sobreescribir los métodos getMinimumResolution() y getMaximumResolution() de cada uno de los tipos de mapas GMapType presentes en nuestro mapa.
Para el caso del desplazamiento, la solución es algo más compleja. Consiste en escuchar el evento move, que es lanzado por el objeto GMap cuando hay un desplazamiento, y comprobar las coordenadas del mapa tras el desplazamiento. Si estas coordenadas quedan fuera del área a la que queremos limitar el desplazamiento, usamos el metodo GMap.setCenter para que el mapa quede dentro de nuesta área.

Esta clase implementa la funcionalidad deseada:

/****** TRestricter **********************************************/

// Constructor
TRestricter = function (map) {
this.map = map;
}
// Función que activa la limitación del desplazamiento entre la esquina inferior izquierda
// y la esquina superior derecha
TRestricter.prototype.restrict = function (sw, ne) {
this.map._allowedBounds = new GLatLngBounds(sw, ne);
GEvent.addListener(this.map, 'move', this.checkBounds);
}
// Función que desactiva la limitación del desplazamiento
TRestricter.prototype.unrestrict = function () {
this.map._allowedBounds = null;
}
// Listener encargado de comprobar el desplazamiento
TRestricter.prototype.checkBounds = function() {
if (!this._allowedBounds || this._allowedBounds.contains(this.getCenter())) return;
var x = Math.min(Math.max(this.getCenter().lng(), this._allowedBounds.getSouthWest().lng()), this._allowedBounds.getNorthEast().lng());
var y = Math.min(Math.max(this.getCenter().lat(), this._allowedBounds.getSouthWest().lat()), this._allowedBounds.getNorthEast().lat());
this.setCenter(new GLatLng(y,x));
}
// Establece los límites de zoom del mapa
TRestricter.prototype.zoomLevels = function (min, max) {
var array = this.map.getMapTypes() || [];
for (var i=0; i
array[i].getMinimumResolution = function () { return min };
array[i].getMaximumResolution = function () { return max };
}
}

Y aquí tenemos un ejemplo de la clase en acción

Arrays asociativos en javacript

Tes — Tue, 17 Jun 2008 09:50:14 +0000

En javascript se llama array asociativo a aquellos que en vez de estar organizados con indices numericos en funcion de su posicion dentro del array, están organizados por claves no numericas.
Este tipo de arrays puede ser muy útil si tenemos listas de objetos que poseen un identificador.

var array_asociativo = new Array();

array_asociativo['uno'] = 'brinkindans';

array_asociativo['dos'] = 'crusaito';

array_asociativo['tres'] = 'maiquel yason';

array_asociativo['cuatro'] = 'robocó';

alert(array_asociativo('tres')); // --> maiquel yason

Como se puede obervar este tipo de arrays se acerca mas al concepto de Map que al de Array.
Esto ocurre porque los arrays en javascript heredan de la clase Object.
El codigo anterior seria equivalente a este:

var array_asociativo = new Object();

array_asociativo.uno = 'brinkindans';

array_asociativo.dos = 'crusaito';

array_asociativo.tres = 'maiquel yason';

array_asociativo.cuatro = 'robocó';

alert(array_asociativo('tres')); //--> maiquel yason

En ambos casos podemos acceder a sus propiedades utilizando la notación de paréntesis o la notacion de puntos.

alert(array_asociativo('uno')); //--> brinkindans

alert(array_asociativo.dos); //--> crusaito

El principal problema con estos arrays viene cuando queremos iterar por ellos. Al no estar organizados por indices, no nos vale el típico "for( i=0; i Deberemos usar un "for in"

for(var i in array_asociativo) {

alert(i); // Nombre de la clave

alert(array_asociativo(i)); // valor

}

Sin embargo al iterar de esta forma no solo se enumeran las propiedades del objeto en cuestión, si no también sus funciones por lo que deberíamos hacer una comprobación de tipos mediante el operando "typeof". Este operando devuelve un String con el tipo del operador sobre el que se ejecuta.
Aqui están los resultado al ejecutar el operador "typeof" sobre cada uno de los tipos de javascript.

typeof new Object() //--> 'object'

typeof new Array() //--> 'object' , ya que los arrays heredan de los objetos

typeof alert //--> 'function', ya que alert() es una función

typeof 'cadena' //--> 'string', ya que 'cadena' es un String

typeof 21 //--> 'number', ya que es un numero

typeof true //--> 'boolean'

typeof null //--> 'object', null también es considerado como un objeto

typeof undefined //--> 'undefined'

Diferencias entre null y undefined

Tes — Wed, 11 Jun 2008 07:16:23 +0000

En javascript existen cinco tipos primitivos de datos: undefined, null, boolean, number y string.
A primera vista no se aprecia la diferencia entre los tipos undefined y null.

El tipo undefined corresponde a las variables que han sido definidas y todavía no se les ha asignado un valor.
El tipo null se suele utilizar para representar objetos que en ese momento no existen.

Sin embargo aunque son conceptos distintos el operando de igualdad los considera iguales. No así el operando typeof o el operador de igualdad estricta ===.

(undefined == null) //--> true

(undefined === null) //--> false

(typeof undefined == typeof undefined null) //--> false

Si intentamos operar con una variable que tiene valor null, según el contexto devolverá los siguientes resultados.

Boolean: false

Numeric: 0

String: “null”

Si intentamos operar con una variable que tiene valor undefined, según el contexto devolverá los siguientes resultados.

Boolean: false

Numeric: NaN

String: “undefined”

Extendiendo el objeto Array

Tes — Fri, 30 May 2008 11:58:50 +0000

Una de las mejores características de javascript es que se pueden añadir funciones a las 'clases' en cualquier momento a traves de la propiedad prototype.
Aprovechando esta capacidad podemos extender el objeto Array para añadirle funcionalidades de búsqueda y eliminación.

array.indexOf
Devuelve el indice del array en el que se encuentra el elemento. Devuelve -1 si no encuentra el elemento

Array.prototype.indexOf = function(element) {
for (var i = 0; i <this.length; i++) {
if(this[i] == element) return i;
}
return -1;
};

array.exists
Devuelve true si el elemento se encuentra en el array, haciendo uso de la funcion indexOf

Array.prototype.exists = function(element) {
return this.indoexOf(element) != -1;
};

array.filter
Devuelve un array que contiene solo los elementos para los que la función pasada como argumento devuelve true

Array.prototype.filter = function(fn) {
var array = [];
for (var i = 0; i <this.length; i++) if(fn(this[i])) array.push(this[i]);
return array;
};

array.removeIndex
Elimina todos los elementos del array que están entre los índices from y to. Si solo se especifica valor para from, se elimina solo el elemento que se encuentra en ese índice.

Array.prototype.removeIndex = function(from, to) {
if (from <0) return;
var rest = this.slice((to || from) + 1 || this.length);
this.length = from <0 ? this.length + from : from;
return this.push.apply(this, rest);
};

array.remove
Elimina un elemento del array, usando las funciones removeIndex e indexOf

Array.prototype.remove = function(e) {
return this.removeIndex(this.indexOf(e));
};

array.execute
Ejecuta la función fn pasandole como argumento cada elemento del array
si le pasamos el argument obj, se ejecutara la funcion fn como si perteneciese al objeto obj

Array.prototype.execute = function(fn, owner) {
for (var i=0; i<;this.length; i++){
if (owner) fn.call(owner, this[i]);
else if (typeof this[i] != 'function') fn(this[i]);
}
}

array.foreach
Ejecuta la función fn en cada elemento del array, pasandole como argumentos los elementos contenidos en el array args
si le pasamos el argument obj, se ejecutara la funcion fn como si perteneciese al objeto obj

Array.prototype.foreach = function(fn, args) {
for (var i=0; ilength; i++) {
fn.apply(this[i], args);
}
}

Incluir código javascript en un documento XHTML

Tes — Mon, 26 May 2008 11:01:17 +0000

Si estás trabajando con Seam, muy probablemente estés utilizando Facelets para la vista y páginas xhtml.
Si intentas incluir código javascript en un documento XHTML directamente puede que de algunos problemas con los símbolos < ("menor que",<) y & (amperstand), ya que el navegador los intentará interpretar como partes de etiquetas xhtml y dará algún error de sintaxis.

Para evitar ésto podemos escribir nuestro javascript entre etiquetas CDATA. Ésta etiqueta lo que hace es indicarle al validador de XHTML que ignore todo lo que se encuentre en su interior. El problema es que algunos navegadores no entienden la etiqueta CDATA, por lo que deberemos comentar la etiqueta CDATA. De esta forma, si el navegador no la sabe interpretar, la ignorará.

Bloquear la pantalla con javascript

Tes — Fri, 23 May 2008 11:48:15 +0000

Hay ocasiones en las aplicaciones web que nos interesa bloquear la pantalla del navegador para impedir al usuario interactuar con la aplicación.
Un ejemplo es durante una llamada ajax que tarda un cierto tiempo y queremos mostrar el típico mensaje "loading" y poner el fondo con un tono oscuro, o para pedir nombre de usuario y contraseña.

Una solución simple para este problema consiste en poner un div que ocupe toda la pantalla y se sitúe por encima del resto de componentes. Así todos los clicks del ratón se realizarán sobre nuestro div en vez de sobre el botón que se ve debajo.
Después, mediante javascript muestras el div bloqueador. No te olvides de proporcionar alguna forma para quitar este elemento.
Estas propiedades del div se pueden especificar en una clase css

.blocker {
position: absolute;
top: 0px;
left: 0px;
height:100%;
width:100%; /* hacemos que ocupe toda la pantalla a cualquier resolución*/
z-index: 50; /* lo colocamos por encima del resto de componentes*/
background: url(b.png) repeat; /*Color de fondo semitransparente*/
}

Si queremos añadir algun mensaje o una ventana con la que se desee interactuar, solo tenemos que colocar un div que quede por encima del anterior.

.popup{
z-index: 100; /* un z-index mayor al del blocker */
background-color: white; /* Un color de fondo para que se vea sobre la capa anterior*/
}

Ver ejemplo de bloqueo de pantalla

Si usas jQuery (o librerias similares) dispondrás de buenos plugins (como facebox) para hacer esto mismo con muchas mas opciones y efectos.

checkbox y evento onclick

Tes — Wed, 19 Mar 2008 16:35:32 +0000

Si alguna vez has usado la funcion toggle de jQuery con un checkbox habrás comprobado que las acciones del toggle se ejecutan, pero el checkbox no se marca (o no se desmarca).
Esto ocurre porque estamos reemplazando el comportamiento nativo del checkbox por el nuestro propio. Para evitar este comportamiento, debemos registrar el listener con el evento onchange o el evento onclick. (NOTA: Parece ser que internet explorer 6 no maneja bien el evento onchange).

Para solucionar este problemilla, podemos escribir nuestra propia función toggle para checkboxes:

$('#checkbox').click(function(){
if (this.checked) alert('checkbox activado');
else alert('checkbox desactivado')
});

Aqui puedes ver un ejemplo completo

XML, tildes y javascript

Tes — Wed, 19 Mar 2008 16:22:05 +0000

Al leer un documento xml codificado en UTF-8 que contiene tildes o eñes con javascript, las interpretará como simbolos extraños .
Para solucionar este problema se debe establecer la codificacion en latin9 (ISO-8859-15), modificando la primera linea del archivo XML.

<?xml version="1.0" encoding="ISO-8859-15"?>