Archivo de la categoría ‘Tutoriales’

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 ;).

AS3 – Cambiar la Dirección de un TLFTextField Dinámicamente

Publicado por Iván Gajate el 24 de noviembre de 2011 en AS3, Flash, Tutoriales | 18 comentarios »

Los campos de texto TLF sirven entre otras cosas para poder escribir de derecha a izquierda. Esto es necesario si queremos escribir en árabe por ejemplo.

Pero si queremos cambiar la dirección de un texto que hemos creado en el escenario a mano, es necesario utilizar este truquito que he visto en http://forums.adobe.com/message/2796609#2796609

(Archivo Flash, para verlo necesitas Adobe Flash Player.)

import fl.text.TLFTextField;
import flashx.textLayout.formats.Direction;
import flash.events.Event;

var tf:TLFTextField = miCampo;

// Trucazo: con esta linea si que hace caso al Direction.RTL ¿?
tf.htmlText = tf.text;

tf.direction = Direction.RTL;
tf.text = "Hola Mundo";


Descargar Ejemplo TLFTextField


AS3 – Validar NIF, CIF y NIE

Publicado por Iván Gajate el 17 de febrero de 2011 en AS3, Tutoriales | 18 comentarios »

Hoy me ha tocado validar un DNI y un CIF (de empresa) y no ha sido tan fácil como pensaba. Tras mucho buscar he encontrado esta clase en Xavirobot que funciona a las mil maravillas, gracias Javi 😉

Tiene 4 métodos:

  • isNie
  • isCif
  • isNif
  • testAll

Se puede validar cada tipo de documento por separado, o sin especificar de qué tipo es con el método testAll. Me ha parecido muy ingenioso el devolver un número positivo o negativo si es válido o no, así basta con consultar si es mayor que 0 para saber si es un documento correcto, sea del tipo que sea 😀

Lo único que no me ha gustado es cómo hay que usar los métodos. Personalmente los validadores siempre los hago con métodos estáticos, así son muy fáciles de usar:

TestDni.isNif("12345678Z") // true
TestDni.testAll("12345678Z") // 3 (NIF)

Así que he modificado algo su clase haciendo los métodos estáticos. La dejo aquí como referencia, la original la puedes ver en Xavirobot:

Leer el resto de esta entrada

AS3 – Precargar la película principal (II)

Publicado por Iván Gajate el 10 de agosto de 2010 en AS3, Flash, Tutoriales | 10 comentarios »

Ya vimos cómo hacer un preload en AS3 de nuestra película principal. Ahora he cambiado un poco los archivos para que resulte más fácil de utilizar y me quito de encima las cosas que no me gustaban de la anterior precarga, aunque la idea sigue siendo la misma: una peli externa que carga la principal.

Ahora va por eventos, y se gestiona todo desde la peli precarga.fla. Ahí cambias la gráfica de la precarga y lo que quieras que haga durante el progreso y cuando termine.

Ya no hay que meter parámetros propios en el html (a menos que se quiera claro). También recoge los parámetros de la url directamente y se los inyecta a la peli principal como flashvars.

Hay un parámetro que si que puede recibir para evitar la caché del navegador ‘avoidCache’ (por defecto a false).

Descargar ejemplo del Precargador

Duplicar un proyecto Flex

Publicado por Iván Gajate el 5 de junio de 2010 en AS3, eclipse, Flash, Tutoriales | 13 comentarios »

Hay una forma mucho más sencilla de hacerlo que la que publiqué hace un tiempo, basta con copiar y pegar el proyecto desde dentro de Eclipse (Flex).

Tenemos que tener abierto el proyecto, si no no funciona.

copiar

Cuando le demos a pegar, nos preguntará el nombre del proyecto. Es el momento de darle un nombre diferente para que no entre en conflicto con el anterior:

cambiar-nombreY listo, ya tenemos nuestro proyecto duplicado sin perder ninguna preferencia del proyecto 😀

AS3 – Acortar frases

Publicado por Iván Gajate el 17 de mayo de 2010 en AS3, Flash, Tutoriales | 12 comentarios »

Una funcioncilla muy útil si queremos recortar la longitud de una frase a un número máximo de caracteres.

Acorta la frase sin romper las palabras, si una palabra se queda a medias, devuelve la cadena hasta el principio de esa palabra, y añade puntos suspensivos (…) al final.

El típico ejemplo es un destacado de una noticia en el que sólo queremos mostrar las primeras palabras.

public static function shortenString(string:String, maxCharacters:uint, append:String="..."):String {
	if (string.length <= maxCharacters) {
		return string;
	}
	maxCharacters -= append.length;
	// Complete word after blank space
	if (string.substr(maxCharacters, 1) == " ") {
		return string.substr(0, maxCharacters) + append;
	}
	// Incomplete word
	string = string.substr(0, maxCharacters);
	var lastCharacter:Number = string.lastIndexOf(" ");
	string = string.substr(0, lastCharacter) + append;
	return string;
}

Se usaría así:

import es.yporqueno.utils.StringUtils;
	
var miTexto:String = "Vero eros et accumsan et iusto odio dignissim qui blandit praesent";
	
trace(shortenString(miTexto, 50));
// Vero eros et accumsan et iusto odio dignissim...

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

Descargar StringUtils.as

Descargar todo el paquete es.yporqueno

AS3 – xml.getElementsByClass

Publicado por Iván Gajate el 28 de abril de 2010 en AS3, Flash, Tutoriales | 1 comentario »

Y la compañera de getElementsByName y getElementById es esta.

Supongamos que tenemos un xml con varios nodos con la misma definición de clase:

<div>
	<p class="parrafo">
		Esto es un párrafo
	</p>
	<form>
		<input type="checkbox" id="chk0">Leer</input> <br />
		<input type="checkbox" id="chk1">Montar en bici</input> <br />
		<input type="checkbox" id="chk2">Dormir</input> <br />
	</form>
	<p class="parrafo">
		Esto es otro párrafo diferente, pero con la misma clase
	</p>
</div>

Y queremos recuperarlos en forma de XMLList:

function getElementsByClass(data:XML, className:String):XMLList{
	return data.descendants().(hasOwnProperty("@class") && attribute("class")==className);
}

// Se usaria asi:
getElementsByClass(miXml, "parrafo");

Y devolvería esto:

<p class="parrafo">Esto es un párrafo</p>
<p class="parrafo">Esto es otro párrafo diferente, pero con la misma clase</p>

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

Descargar XmlUtils.as

Descargar todo el paquete es.yporqueno

AS3 – xml.getElementsByName

Publicado por Iván Gajate el 15 de abril de 2010 en AS3, Flash, Tutoriales | 15 comentarios »

La parejita de getElementById 😉

Muy útil por ejemplo para obtener todos los checkBox de un xml:

<div>
	<form id="aficiones">
		<input type="checkbox" id="chk0" name="c0">Leer</input> <br />
		<input type="checkbox" id="chk1" name="c1">Montar en bici</input> <br />
		<input type="checkbox" id="chk2" name="c2">Dormir</input> <br />
	</form>
</div>

En este caso lo que nos interesa es un listado (XMLList) con todos los nodos del mismo tipo.

function getElementsByName(data:XML, name:String):XMLList{
	return data.descendants(name);
}

// Se usaria asi:
getElementsByName(miXml, "input");

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

Descargar XmlUtils.as

Descargar todo el paquete es.yporqueno

Escribir tabulación en un campo de texto

Publicado por Iván Gajate el 18 de marzo de 2010 en AS3, Eventos, Flash, Tutoriales | 17 comentarios »

Si queremos insertar tabulaciones en un campo de texto o componente textArea de Flash, por defecto nos pasará el foco al siguiente campo de texto o botón.

Para evitar esto me ha dado la solución Ícaro Obregón en la lista de AsNativos, utilizando el método preventDefault() y luego haciendo un apaño para situar el cursor al final del texto, pues si no parecerá que no ha ocurrido nada.

miCampoTexto.addEventListener(FocusEvent.KEY_FOCUS_CHANGE, onTabPressed);

function onTabPressed(e:FocusEvent):void {
	e.preventDefault();
	var tf:TextField = e.target as TextField;
	var index:uint = tf.selectionEndIndex;
	tf.replaceText(index, index, "\t");
	tf.setSelection(index+1, index+1);
}

Skew MovieClip

Publicado por Iván Gajate el 15 de agosto de 2009 en AS2, AS3, Flash, Tutoriales | 12 comentarios »

He re-encontrado este fantástico tutorial en Senócular sobre la clase Matrix. Es de AS2 pero sigue siendo exactamente igual en AS3.

http://www.senocular.com/flash/tutorials/transformmatrix/

Yo siempre me lio cuando quiero sesgar (skew) un clip de película, así que he escrito unas funciones muy simples para hacerlo más fácil:

t_single_skew

import flash.geom.Matrix;

function setSkewX(mc:MovieClip, skewx:Number):void{
	var my_matrix = mc.transform.matrix;
	my_matrix.c = skewx;
	mc.transform.matrix = my_matrix;
}

function setSkewY(mc:MovieClip, skewy:Number):void{
	var my_matrix = mc.transform.matrix;
	my_matrix.b = skewy;
	mc.transform.matrix = my_matrix;
}

function getSkewX(mc:MovieClip):Number{
	return mc.transform.matrix.c;
}

function getSkewY(mc:MovieClip):Number{
	return mc.transform.matrix.b;
}