Felipe,
Necesitas urgentemente aplicar OOP. Visto tu codigo ,la programacion
procedural se te esta comenzando a quedar peque�a...
Primero, planteamiento.
Tu quieres poder generar botones dinamicamente, necesitas una clase. Luego
necesitas que esos botones tengan una serie de caracteristicas (seran las
propiedades) y que hagan una serie de acciones (metodos). A parte necesitas
saber cuando ha ocurrido una determinada accion para poder reaccionar a ella
(eventos).
Una de las normas mas b�sicas del OOP es intentar no meter "hardcoded
values". Esto es, ningun literal en tu codigo. Por ejemplo:
var colorBorder = "0x990000";
Esto te obliga a modificar el codigo cada vez que quieras hacerlo de otro
color. Y te pone en un aprieto muy grave si necesitas bordes de colores
diferentes. A esto se le llama codigo portable. Tu ya has hecho una
aproximacion a este concepto, no es algo te tengan que decir, viene de la
experiencia y tu sabes que poniendo los valores de la variables del codigo
al principio de la funcion luego te resultar� mas comodo cambiarlas. Pero
con OOP se va mas all�.
Otra cosa es tener bien claro como quieres que sea esa clase. O sea que
funcionalidad le quieres dar. Las enumero segun tu codigo:
-- Propiedades (caracteristicas):
Width
Height
colorBorder
colorBorderOver
colorBackground
colorBackgroundOver
fontSize
fontType
fontColor
fontColorOver
fieldAlign
x
y
texto
-- Metodos (funciones)
Dibujar()
Este metodo existe para antes de que se dibuje puedas modificar sus
caracteristicas.
Eliminar()
-- Eventos
onClick
Ok, con todo esto en un papel vamos a definir la clase segun las
caracteristicas que tu has marcado:
Primero vamos con el contructor de la clase, en el contructor hay que
inicializar el objeto, por tanto se deberian de declarar todas las
propiedades y, si quieres, asignarles un valor por defecto, pero con la
posibilidad de que luego se pueda modificar. Tambien hay que tener en cuenta
que los parametros que deberia de recoger un constructor son los minimos
para que tu clase funcione. En este caso voy a tomar algunos de los de tu
funcion original:
<code>
// Contructor de clase
_global.Boton = function(texto,x,y){
// Declaracion de propiedades, valores por defecto
this.width = 150;
this.height = 18;
this.colorBorder = "0x990000";
this.colorBorderOver = "0x990000";
this.colorBackground = "0xCCCCCC";
this.colorBackgroundOver = "0xFFFFFF";
this.fontSize = 10;
this.fontType = "Verdana";
this.fontColor= "0x000000";
this.fontColorOver= "0xFFFFFF";
this.fieldAlign = "center"
// Guardar los parametros del contructor
this.x = x;
this.y = y;
this.texto = texto;
// Esta propiedad la he a�adido para guardar una referencia al movieclip
del boton
this.clip = null;
}
</code>
Bueno, ya tenemos el constructor. Ahora vamos a por el metodo de dibujar.
Este deberia de dibujar el boton en la pantalla y asignar los eventos.
Tambi�n lo he escrito segun tu codigo:
<code>
// Para dibujarlo me parece lo mas logico que
// necesite saber 2 cosas: Sobre que clip se va a dibujar
// y en que profundidad dentro de ese movieclip
Boton.prototype.dibujar = function(mc,prof){
//---crear el clip contenedor
// Aqui se usan los 2 parametros para generar un nombre
// fijate como se guarda tambien la referencia al clip
// recien creado
this.clip = mc.createEmptyMovieClip("tHolder"+prof, prof);
this.clip._x = this.x;
this.clip._y = this.y;
//---mostrar el cursor "mano"
this.clip.useHandCursor = true;
//---creacion de campo de texto
this.clip.createTextField("myField", 1, 0, 0, this.width,
this.height);
//---el texto para el campo
this.clip.myField.text = this.texto;
//---crear los estilos para campos
this.tFieldStyle = new TextFormat();
this.tFieldStyle.size = this.fontSize;
this.tFieldStyle.font = this.fontType;
this.tFieldStyle.color= this.fontColor;
this.tFieldStyle.align= this.fieldAlign;
//---si hemos definido el fondo de la caja
if (this.colorBackground != undefined){
trace(this.colorBackground)
this.clip.myField.background = true;
this.clip.myField.backgroundColor = this.colorBackground;
}
//---si hemos definido el borde de la caja
if (this.colorBorder != undefined){
this.clip.myField.border = true;
this.clip.myField.borderColor = this.colorBorder;
}
//---aplicamos el formato
this.clip.myField.setTextFormat(this.tFieldStyle);
// Esto es lo mas lioso. El clip necesita una refencia a la instancia
// para poder leer las propiedades. Fijate como se usa en todos los
// eventos
this.clip.instancia = this;
//---manejadores de eventos
this.clip.onRollOver = function(){
this.myField.backgroundColor =
this.instancia.colorBackgroundOver;
this.myField.borderColor = this.instancia.colorBorderOver;
}
this.clip.onPress = function(){
this.myField.backgroundColor =
this.instancia.colorBackgroundOver;
this.myField.borderColor = this.instancia.colorBorderOver;
}
this.clip.onRelease = function(){
// Aqui se usa la refencia para poder llamar al evento
// un evento no es mas que una llamada a un metodo que
// se debe de definir en la instancia, no en la clase.
// Porque cada instancia es logico que necesite hacer
// algo diferente
this.instancia.onClick();
}
this.clip.onRollOut = function(){
this.myField.backgroundColor =
this.instancia.colorBackground;
this.myField.borderColor = this.instancia.colorBorder;
this.myField.setTextFormat(this.instancia.tFieldStyle);
}
}
</code>
Por ultimo un ejemplo de su uso:
<code>
// un uso muy basico
var b = new Boton("Hola",100,200);
b.dibujar(_root,1);
// Modificando propiedades
var b2 = new Boton("Soy un boton freaky",100,250);
b2.colorBorder = "0xAABBCC"
b2.width = 400;
b2.dibujar(_root,2);
// Utilizando el onClick
b.onClick = function(){
// Como imaginas aqui puedes meter todo el AS que quieras
trace("Soy el boton 1, donde esta el 5?");
}
b2.onClick = function(){
trace("Soy el boton 2, donde esta el 5?");
}
</code>
Bueno y por ahi van los tiros. Luego siempre se puede ampliar, pero el
minitutorial de herencia lo dejamos para otro dia ;)
Aqui tienes para asimilar, te saldran dudas, seguro, ya sabes tu pregunto
que luego me lo cobrare en ca�as un dia 5 de estos. jeejeje
un saludo
Joseba Alonso
www.sidedev.net
<!-------------------------------
Lista ASNativos:
subscripciones/desubscripciones
http://www.sidedev.net/asnativos
-------------------------------->
