[c�digo en http://www.code4net.com/downloads/POO-xml.rar]
Bueno... He sacado un poco de tiempo para plantear este mail y m�s que
un mail lo planteo como el primer post en 5dms ;-) (as� vamos haciendo
bolsa para cuando sea el momento...)
Tal y como era el proposito voy a entrar m�s en la parte del an�lisis
que en el de la implementaci�n y voy a intentar explicar el razonamiento
que ha seguido mi neurona. Despu�s me gustar�a que lo coment�ramos entre
todos...
Lo primero que tenemos que hacer siempre antes de ponernos a teclear
como locos es entender lo que tenemos que hacer, y en la medida de lo
posible intentar hacer clases que podamos reutilizar (tanto en el mismo
proyecto como otro totalmente distinto). Para entender lo que tenemos
que hacer, lo mejor es hacerse una definici�n propia del problema,
teniendo en mente ya que somos desarrolladores.
<DEFINICION type='problema'>
Queremos una aplicaci�n, modular y rehutilizable, que cargue una serie
de im�genes a partir de un archivo xml y las posicione en pantalla
(siguiendo un determinado orden). Al clickar sobre estas im�genes, la
aplicaci�n reaccionar� de alguna manera. En mi caso, y para no
extenderme con el c�digo, he decidido sacar un trace por pantalla con el
nombre de la imagen.
</DEFINICI�N>
Ahora que ya sabemos lo que vamos a hacer, y en teor�a lo tenemos claro,
pasamos a pensar en objetos e intentamos discriminar las clases y
objetos que habr� as� como sus responsabilidades.
1.- Vemos claramente que tiene que haber una clase encargada de cargar
un archivo xml, parsearlo y hacer que sus datos est�n disponibles desde
AS. Lo primero que definimos es el formato del xml. Como el ejemplo es
sencillo, lo �nico que defino en el xml son las rutas de las im�genes
(en este caso .swf's) a cargar.
<Imagenes>
<Imagen src="a.swf"/>
<Imagen src="b.swf"/>
<Imagen src="c.swf"/>
<Imagen src="d.swf"/>
<Imagen src="e.swf"/>
<Imagen src="f.swf"/>
<Imagen src="g.swf"/>
<Imagen src="h.swf"/>
<Imagen src="i.swf"/>
</Imagenes>
Entonces, la clase xml se encargar� de cargar este xml y almacenar el
atributo 'src' de los distintos nodos. Estos datos los almacenar� en un
array perteneciente a la clase, que he llamado ParserXML.
2.- Me doy cuenta que todas las im�genes, conceptualmente, se
comportar�n igual. Abstracci�n: al hacer click reaccionan de una
determinada forma. Pero todas igual. Por ello creo una clase que se
llama ImagenMC. Esta clase se encargar� de mostrar las distintas
im�genes por pantalla y dar� la interactividad al hacer click.
4.- Por �ltimo y para posicionar los distintos elementos en pantalla
necesito una especie de control que me diga en qu� posiciones _x, _y y
depht tengo que colocar las im�genes que vaya cargando. Para solventar
esto creo la clase PositionController.
Una vez hecha la abstracci�n tengo que definir el m�todo de comunicaci�n
entre las distintas clases. En el ejemplo la secuencia es la siguiente.
1.- Cargo el xml
2.- Una vez cargado lanzo un evento que me indica que la carga
se ha completado.
[Mientras queden im�genes por mostrar]
3.- Escojo la imagen que voy a cargar. Se la pido al objeto
ParserXML
4.- Pido al positionController que me asigne las coordenadas
para la nueva imagen
5.- Cargo la imagen que me ha dado (3) y la cargo en las
posiciones (4).
[volver a 3]
Ahora s� que nos ponemos como locos con la programaci�n, ya no tenemos
excusas ;-)
Empezamos con la clase ParserXML:
/* ParserXML class
[ DESCRIPTION ]
Convierte un xml en un array.
[ EVENTS ]
onLoadComplete:
Evento que se dispara cuando se ha terminado de
parsear
el xml a array
[ PUBLIC METHODS ]
load(archiveToLoad:String,onLoadComplete:Function);
Carga el archivo xml definido por archiveToLoad,
cuando termina de cargarlo
y parsearlo llama a la funci�n onLoadComplete.
getElement(i:Number);
Devuelve el elemento i-�simo del array.
getTotalElements():Number
Devuelve el n�mero total de elementos que
conten�a el xml.
[ USAGE ]
<code>
myParser = new ParserXML();
myParser.load("galeria.xml",onLoadComplete);
function onLoadComplete() {
showImages();
}
</code>
*/
/* PositionController
[ DESCRIPTION ]
Nos permite posicionar elementos en filas y columnas de
forma ordenada.
Controla las posiciones de los nuevos elementos.
[ PUBLIC METHODS ]
getCoordinates():Object;
Nos devuelve las coordenadas para el nuevo
elemento y acondiciona los datos internos
para la siguiente llamada
[ USAGE ]
Este c�digo inicializa el objeto cfgObject para que el
primer elemento se encuentre
en _x=_y=xOffSet=yOffSet=50. Cada vez que a�adamos un
nuevo elemento se sumar� a la posici�n
_x el valor de dx (con dy es lo mismo). En este caso el
n�mero de columnas est� limitado a 3.
<code>
cfgObject = new Object();
cfg = {
xOffSet: 50,
yOffSet: 50,
dx: 50,
dy: 50,
numCols: 3
}
MyPosition = new PositionController(cfg);
</code>
*/
/* ImageMC
[ DESCRIPTION ]
Nos permite cargar im�genes y asignarles eventos de
rat�n.
[ NOTES ]
Debido al bug de flash que cuando cargas algo en un mc
con loadmovie se elimina su programaci�n,
utilizamos el workarround de crear un MC vac�o en el
cual haremos la carga real con loadMovie.
Esta clase hereda de MovieClip y la asignamos al MC
vac�o que tenemos en la biblioteca. De esta forma
cada vez que hagamos un attachMovie de este MC se
comportar� seg�n lo definido en la clase.
[ PUBLIC METHODS ]
loadContent(contentTMP:String)
Nos carga el contenido del archivo definido por
contentTMP
*/
En fin, os dejo los archivos con el c�digo en
http://www.code4net.com/downloads/POO-xml.rar
Supongo que hay aspectos que se me han pasado por alto... A ver si entre
todos lo terminamos de pulir...
Saludos
Xavi Beumala
http://www.5dms.com
http://www.code4net.com
> -----Mensaje original-----
> De: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] En nombre de David Serrano
> Enviado el: mi�rcoles, 21 de enero de 2004 15:37
> Para: [EMAIL PROTECTED]
> Asunto: [ASNativos] POO en ejemplos
>
>
> Bien chicos, lo de la OOP me interesa. Yo que vengo de la
> programaci�n en Java, muchas veces he pensado en utilizar la
> OOP en Flash, pero no s� c�mo aplicarla. Supongamos pues que
> tengo una aplicaci�n donde carga mediante xml una serie de
> fotos en miniatura(thumbnails) y que luego realizo la
> acciones que deseo con ellas. A nivel de programaci�n
> funcional, las funciones se podrian resumir de esta forma:
>
> funtion cargarXML() {
> catalogoXML = new XML();
> catalogoXML.ignoreWhite = true;
>
> catalogoXML.onLoad = function(ok) {
> if (!ok) {
> return false;
> }
> //no ha cargado correctamente, salir de la funci�n.
> var nodo = this.firstChild;
> var hijo = nodo.childNodes;
> for (var i = 0; i<hijo.length; i++) {
> comedor = hijo[i].firstChild;
> cargarImagen(comedor.attributes.url);
> }
> };
> catalogoXML.load("dormitorios/dormitorios.xml");
> limpiaXML();
> }
>
> var nimagen = 0;
> var distancia = 0;
> var destino = imagenes._y;
> //Variables para las flechas de movimiento
> var minimo = imagenes._y;
> var maximo = mascara._height+mascara._y-1;
> //------------------------------------------
> //Funciones
> //------------------------------------------
> function limpiaXML() {
> delete nodo;
> delete hijo;
> delete comedor;
> delete catalogoXML;
> }
> function cargarImagen(imagen) {
> clipN = imagenes.createEmptyMovieClip("img_"+nimagen,
> nimagen++); contenedor =
> clipN.createEmptyMovieClip("contenedor", 1);
> contenedor.loadMovie(imagen);
> clipN._y = distancia;
> distancia += 40;
>
> clipN.onPress = function() {
> this._alpha = 70;
> };
>
> if (imagenes._y>=minimo) {
> subir._alpha = 10;
> subir.enabled = false;
> }
> if (imagenes._y>=maximo) {
> bajar._alpha = 10;
> bajar.enabled = false;
> }
> }
> bajar.onPress = function() {
> imagenes.bajar();
> bajar.enabled = false;
> //desactivo el bot�n moment�neamente
> };
> subir.onPress = function() {
> imagenes.subir();
> subir.enabled = false;
> };
> MovieClip.prototype.bajar = function() {
> destino = imagenes._y-40;
> //posicion destino
> this.onEnterFrame = function() {
> imagenes._y += Math.floor((destino-imagenes._y)/3);
> //funci�n de easing
> if (imagenes._y == destino) {
> delete this.onEnterFrame;
> bajar.enabled = true;
> //Controlo si deben aparecer las flechas de desplazamiento
> if (imagenes._y<=minimo) {
> subir._alpha = 100;
> subir.enabled = true;
> }
> if ((imagenes._y+imagenes._height)<=maximo) {
> bajar._alpha = 10;
> bajar.enabled = false;
> }
> }
> };
> };
> MovieClip.prototype.subir = function() {
> destino = imagenes._y+40;
> this.onEnterFrame = function() {
> imagenes._y += Math.ceil((destino-imagenes._y)*1/3);
> if (imagenes._y == destino) {
> delete this.onEnterFrame;
> subir.enabled = true;
> if (imagenes._y>=minimo) {
> subir._alpha = 10;
> subir.enabled = false;
> }
> if ((imagenes._y+imagenes._height)>=maximo) {
> bajar._alpha = 100;
> bajar.enabled = true;
> }
> }
> };
> };
>
> Bien, esto pasado a POO, se podria realizar haciendo una
> clase Imagen, donde tuviera como m�todos, cargarXML, cargarImagen,..
>
> Alguien puede ponernos un ejemplo de c�mo seria �sto a nivel de POO?
>
> <!-------------------------------
> Lista ASNativos:
> subscripciones/desubscripciones http://www.sidedev.net/asnativos
> -------------------------------->
>
<!-------------------------------
Lista ASNativos:
subscripciones/desubscripciones
http://www.sidedev.net/asnativos
-------------------------------->
