Archivo de noviembre de 2012

AS3 – tabIndex en campos de texto TLFTextField

Publicado por Iván Gajate el 26 de noviembre de 2012 en AS3, Flash | Los comentarios están cerrados.

Ya vimos como asignar el orden de tabulación en varios campos de texto, sin embargo si los campos de texto son de tipo TLFTextField (para poder escribir en idiomas no latinos entre otras cosas), la forma normal de hacerlo no funciona, Adobe explica aquí como se hace.

InteractiveObject(miCampo.getChildAt(1)).tabIndex = 3;

He escrito esta clase para simplificar el proceso de asignar el orden de tabulación de varios campos de texto, sean TLFTextField o TextField normales:

import es.yporqueno.utils.TextFieldUtils;
 
es.yporqueno.utils.TextFieldUtils.setTabOrder([campo1, campo2, campo4, campo3], stage);

 

function setTabOrder(fields:Array, st:Stage):void {
	if (fields.length == 0) {return;}
	var i:uint = 1;
	for each (var f:Object in fields) {
		if (es.yporqueno.utils.ObjectUtils.getClass(f) == TLFTextField) {
			InteractiveObject((f as TLFTextField).getChildAt(1)).tabIndex = i;
		} else if (es.yporqueno.utils.ObjectUtils.getClass(f) == TextField) {
			InteractiveObject(f).tabIndex = i;
		}
		i++;
	}
 
	var firstField:Object = fields[0];
	if (es.yporqueno.utils.ObjectUtils.getClass(firstField) == TLFTextField) {
		st.focus = InteractiveObject((firstField as TLFTextField).getChildAt(1));
	} else if (es.yporqueno.utils.ObjectUtils.getClass(firstField) == TextField) {
		st.focus = InteractiveObject(firstField);
	}
}

 

Descargar TextFieldUtils.as (Hace uso de otras clases del paquete)

Descargar todo el paquete es.yporqueno

Oaxoa

Publicado por Iván Gajate el 26 de noviembre de 2012 en Desarrollo Web, Sitios Destacados | Los comentarios están cerrados.

He re-encontrado este blog de Pierluigi Pesenti y me he vuelto a quedar absorto con sus aplicaciones con Perlin Noise, lo de los rayos es la leche…

http://blog.oaxoa.com/category/perlinnoise/

 

AS3 – Tipo de clase de un objeto

Publicado por Iván Gajate el 24 de noviembre de 2012 en AS3, Flash | 1 comentario »

A veces necesitamos saber que clase de objeto tenemos en el escenario, por ejemplo para recorrerlos todos y si son de tipo TextField hacer algo.

Para eso podemos acceder a través de esta función:

 

function getClass(obj:Object):Class {
	return Class(getDefinitionByName(getQualifiedClassName(obj)));
}
import es.yporqueno.utils.ObjectUtils;
 
var miObjeto:MovieClip = new MovieClip();
 
trace(es.yporqueno.utils.ObjectUtils.getClass(miObjeto));    // [class MovieClip]

Este tipo de funciones las voy a ir recopilando en una clase ObjectUtils.

Descargar ObjectUtils.as

Descargar todo el paquete es.yporqueno

Bloquear el scroll con css

Publicado por Iván Gajate el 9 de noviembre de 2012 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

A veces las CSS te dan alegrías como esta. Si queremos que no aparezca la barra de scroll en nuestra página es tan sencillo como crear un estilo con overflow:hidden:

.no_scroll{
    overflow:hidden;
}

y asignarselo al body con jQuery:

$("body").addClass("no_scroll");

Luego para que vuelvan a aparecer:

$("body").removeClass("no_scroll");

Esto me ha resultado muy útil en una página con un lightbox que al estar visible, no quería que el fondo reaccionase a la rueda del ratón. Cuando muestro el lightbox bloqueo el scroll y cuando se cierra lo vuelvo a activar 🙂

Hakim

Publicado por Iván Gajate el 5 de noviembre de 2012 en JavaScript, Sitios Destacados | 1 comentario »

He visto los experimentos de este tio y aún sigo flipando… fijaos bien en todo porque tiene muchos detalles.

http://hakim.se/

 

 

Singleton en JavaScript

Publicado por Iván Gajate el 4 de noviembre de 2012 en JavaScript, Patrones de diseño, Tutoriales | Los comentarios están cerrados.

Un Singleton es un tipo de objeto del que solo queremos tener una única instancia que sea accesible fácilmente desde cualquier parte.

Un ejemplo muy típico de este patrón de diseño es el modelo de datos. Todo el mundo tiene que tener acceso a él pero debemos asegurarnos de que solo existe una instancia.

var modelo = function(){
 
}();

Lo que hacemos es guardar en una variable nuestro objeto desde el principio, así nos aseguramos de tener un única instancia.
Son muy importantes los paréntesis del final de la definición de función. Lo que hacen es auto ejecutar la función (crear el objeto la primera vez que se lee este código). De esta manera nuestra variable crea y almacena el objeto.

Esto con un ejemplo real usando un namespace sería algo así:

YXQN.modelo = function(){
 
	var _api = {};
	var _contador;
 
	function init(){
		_contador = 0;
	}
 
	// Incrementa el marcador
	_api.incrementarContador = function(){
		_contador++;
	}
 
	// Devuelve el valor actual
	_api.getContador = function(){
		return _contador;
	}
 
	init();
 
	return _api;
}();

Como la instancia ya está creada, no necesitamos hacer un new, podemos acceder directamente a la variable modelo:

YXQN.modelo.getContador(); // 0
YXQN.modelo.incrementarContador();
YXQN.modelo.getContador(); // 1

Otro uso muy interesantes para el Singleton es un objeto que controle las cartelas de aviso de nuestra página, es bueno que todos los avisos estén centralizados y no se pisen entre si.

Nótese que escribo modelo en minúsculas, indicando que es una variable, porque realmente se crea desde un principio en memoria, desde que se carga el js. Es lo que se conoce como Eager initialization, o de inicialización impaciente, y aunque tiene la ventaja de estar creado desde un principio, tiene la desventaja de que si no se usa consume unos recursos que no utilizamos. Si el objeto es muy costoso de crear, puede que ralentice el inicio del programa. Veremos mas adelante como crear un Singleton Lazy Initialization, o de inicialización perezosa (siempre me ha hecho mucha gracia este nombre ;).