11 de octubre de 2007

Patrón Decorador - ActionScript 3.0

Supongamos que estamos diseñando un juego de rol, y nuestros personajes pueden tener espadas, estas pueden ser fusionadas con gemas de varios tipos para mejorarlas, por ejemplo para darle más fuerza de ataque o más velocidad, bueno nosotros muy contentos hacemos nuestra interfaz para nuestras espadas, quedaría codificada de la siguiente manera:


1 package {
2
3 public interface ISword {
4 function render():String;
5 }
6 }


Es una interfaz muy sencilla, el método render se encarga de construir la espada y mostrarla en la salida de pantalla. Al utilizar una interfaz en un clase se está firmando un contrato de implementación, esto quiere decir que es obligatorio implementar (valga la redundancia) los métodos que se encuentran en la firma en este caso "render".

Ahora vamos a crear nuestras espadas (implementaciones concretas), por el momento vamos a hacer 2 que puedan usar los personajes del juego de rol.

La primera la llamaremos Sword of Azure:

1 package {
2 public class SwordOfAzure implements ISword {
3
4 public function render():String {
5 return "Rendering SwordOfAzure SWORD.";
6 }
7 }
8 }


Y la segunda se llamará Sword of Kyrlin:


1 package {
2 public class SwordOfKyrlin implements ISword {
3
4 public function render():String {
5 return "Rendering SwordOfKyrlin SWORD.";
6 }
7 }
8 }


Felices y contentos ya tenemos nuestras 2 super espadotas para nuestros personajes, pero ahora se nos ha ocurrido un gran idea, porque no fusionamos las espadas con gemas para que nos den puntos de ataque, agilidad o otras cosillas interesantes, por ejemplo, fusionarla con una gema roja de ataque para que le de +4 puntos de ataque ó una gema azul para que le de +4 puntos de agilidad, o hasta se puede dar la situación que se fusionen las 2 gemas para que le de +4 de ataque y +4 de agilidad.

Nosotros pensamos, mmm... vamos a crear nuestras espadas modificadas heredando de SwordOfAzure y SwordOfKyrlin, así que nos ponemos a hacer cada una de las combinaciones posibles.


1 class SwordOfAzureRedGem extends SwordOfAzure {
2 }
3
4 class SwordOfAzureBlueGem extends SwordOfAzure {
5 }
6
7 class SwordOfAzureBlueGemAndRedGem extends SwordOfAzure {
8 }
9
10 class SwordOfKrylinRedGem extends SwordOfKrylin {
11 }
12
13 class SwordOfKrylinBlueGem extends SwordOfKrylin {
14 }
15
16 class SwordOfKrylinBlueGemAndRedGem extends SwordOfKrylin {
17 }


Dejemos los detalles de implementación a un lado.

Aquí vemos que empieza a surgir un problema, el número de clases se ira incrementando de manera excesiva cuando vayamos agregando más espadas y más estilos de gemas a nuestro juego, serían demasiadas clases !!

Aquí es donde entra el patrón decorador al rescate, este nos deja extender la funcionalidad de un objeto en tiempo de ejecución de esta manera estaríamos extendiendo la funcionalidad de nuestras espadas sin recurrir a la herencia, este patrón se basa simplemente en la composición de objetos, ahora verás el porqué.

Veamos el diagrama de cómo está estructurado el patrón decorador:



Como vemos en el diagrama, “Component” puede ser una clase abstracta o una interfaz, en este caso es nuestra interfaz ISword y los “ConcreteComponent”, son nuestras espadas que implementan las interfaz ISword.

Como dice el diagrama “Decorator” debe ser una clase abstracta que implemente la interfaz “Component” y que esta encapsule la referencia de cualquier objeto que sea un “Component”, ósea que nuestro Decorador debe implementar la interfaz ISword y esta debe de tener una propiedad que apunte a un objeto del tipo ISword.



1 package {
2 /**
3 * ABSTRACT CLASS
4 */
5 public class SwordDecorator implements ISword {
6
7
8 protected var _decorated:ISword;
9
10
11 public function SwordDecorator(decorated:ISword) {
12 _decorated = decorated;
13 }
14
15 /**
16 * Abstract Method
17 * Debe ser implementado en las subclases
18 */
19 public function render():String {
20 return "";
21 }
22 }
23 }


El método render debe ser abstracto para que sea implementato en los decoradores, como AS3.0 todavía no soporta ni las clases abstractas ni los métodos abstractos, le he puesto un comentario y una implementación por defecto, pero ese método deber ser sobreescrito en sus decoradores (subclases).

Así que vamos a crear nuestros primer decorador:



1 package {
2 /**
3 * Esta Gema nos da +4 puntos de agilidad a nuestra espada.
4 */
5 public class BlueGem extends SwordDecorator {
6
7 public function BlueGem(decorated:ISword) {
8 super(decorated);
9 }
10
11 override public function render():String {
12 calculateSomethingImportant();
13 return _decorated.render() + " , +4 puntos de agilidad";
14 }
15
16 /**
17 * Método que hace un cáculo
18 */
19 private function calculateSomethingImportant():void {
20 //...
21 }
22 }
23 }


Y este es nuestro segundo decorador:


1 package {
2 /**
3 * Esta Gema nos da +4 puntos de ataque a nuestra espada.
4 */
5 public class RedGem extends SwordDecorator {
6
7 public function RedGem(decorated:ISword) {
8 super(decorated);
9 }
10
11 override public function render():String {
12 return _decorated.render() + " , +4 puntos de ataque";
13 }
14 }
15 }


Ve como en las 2 clases he heredado de la clase Abstracta SwordDecorator, y en el constructor le paso la referencia de un objeto del tipo ISword, aquí una cosa muy importante es ver como en cada clase concreta se implementó el método render ya que es un método abstracto de la super clase y observa como llamo al método render del objeto que se paso como argumento en el constructor (_decorated) y de acuerdo a lo que me devuelva, hago una implementación nueva, en este caso le añadí una nueva cadena a la cadena que nos devuelve el objeto decorado.

El código de la parte del cliente se vería así:


1 var mySword:ISword = new SwordOfKyrlin();
2 mySword = new RedGem(mySword);
3 mySword = new BlueGem(mySword);
4 trace(mySword.render());


Como vemos a nuestra espada la hemos fusionado con 2 gemas y le hemos añadido funcionalidades diferentes, si comparamos el número de clases de la primera solución con esta última, es una GRAN diferencia, nosotros podemos agregar más decoradores y espadas sin mucho problema.

Cualquier duda, comentario o sugerencia es bienvenida.

Un Saludote !

30 de septiembre de 2007

Patrón Iterador – ActionScript 3.0

Cuando tenemos colecciones de objetos a veces es necesario iterar sobre estos pero sin exponer su implementación interna, supongamos que tenemos una colección que la queremos solamente para que almacene cadenas:

1   package {
2
3 public class StringCollection {
4
5 private var _strings:Array;
6
7 public function StringCollection() {
8 _strings = new Array();
9 }
10
11 public function addElement(value:String):void {
12 _strings.push(value);
13 }
14
15 }
16 }
17


Como vemos nuestra colección tiene un método addElement que tiene la tarea de añadir cadenas al array “_strings”. Lo interesante en este caso es como podemos accesar al array “_strings” para poder iterar sobre sus valores. Una opción sería poner un método accesor en la clase, algo como esto:

1   package {
2
3 public class StringCollection {
4
5 private var _strings:Array;
6
7 public function StringCollection() {
8 _strings = new Array();
9 }
10
11 public function addElement(value:String):void {
12 _strings.push(value);
13 }
14 //Método accesor al array
15 public function get strings():Array {
16 return _strings;
17 }
18
19 }
20 }
21
22


Y el cliente utilizaría nuestra clase así:

1   var collection:StringCollection = new StringCollection();
2 collection.addElement("cadena1");
3 collection.addElement("cadena2");
4 collection.addElement("cadena3");
5 for(var i:Number = 0; i < collection.strings.length; i++) {
6 trace(collection.strings[i]);
7 }
8
9
10


Aquí hay 2 grandes problemas, estamos exponiendo los detalles de cómo debemos iterar sobre el arreglo y estamos rompiendo con el encapsulamiento al tener acceso directo al array, esto le da la oportunidad a cualquiera de poder cambiar algún valor del arreglo sin que nuestra clase se entere, que tal si en lugar de meter un string, le añado un entero ? (Recuerda que nuestra colección solamente debe almacenar cadenas).

Bueno, entonces se nos ocurre meter la responsabilidad de iterar en la misma clase, quedaría así finálmente:

1   public class StringCollection {
2
3 private var _strings:Array;
4 private var _index:Number;
5
6 public function StringCollection() {
7 _strings = new Array();
8 _index = 0;
9 }
10
11 public function addElement(value:String):void {
12 _strings.push(value);
13 }
14
15 public function reset():void {
16 _index = 0;
17 }
18
19 public function hasNext():Boolean {
20 return _index < _strings.length;
21 }
22
23 public function next():String {
24 return _strings[_index++] as String;
25 }
26 }
27 }
28



Pero nuevamente vemos problemas a la vista, supongamos que estamos en un sistema concurrente y tenemos 2 hilos que están iterando al mismo tiempo sobre la misma instancia de la colección, debido a que _index guarda la posición actual en el array, sería imposible iterar sobre la misma instancia. Otro problema vendría al querer definir nuevos tipos de iteración, por ejemplo en lugar de que la colección empiece de inicia a final, esta empiece de final a inicio, tendríamos que definir esos métodos que cumplan con esa tarea en la clase.

Y principalmente estaríamos rompiendo con un principio de diseño, SRP o Single Responsability Principle, el cual nos dice que nuestra clase solamente debe tener UNA responsabilidad (Debe tener una sola razón de cambiar). Como vemos StringCollection tiene 2 responsabilidades, la de iterar sobre la colección y la parte de la gestión de la misma (añadir, remover, obtener, etc...).

Como bien dice el sabio principio, “Encapsula lo que varíe”, en este caso la implementación de cómo iterar podría cambiar en un futuro no muy lejano.

Así que vamos a separar eso y definamos nuestra interfaz que todos nuestros Iteradores van a implementar:

1   package {
2 public interface IIterator {
3 function next():Object;
4 function hasNext():Boolean;
5 function reset():void;
6 }
7 }
8
9



El método next se encargará de devolvernos el siguiente objeto en la colección, hasNext nos devolvera true si todavía hay elementos en la colección o false en caso contrario, reset reiniciaría la posición del cursor en la colección.

Ahora vamos a hacer 2 iteradores que la implementen, cada uno con sus implementaciones concretas del CÓMO iterar.

Este es un iterador que recorre un Array de inicio a final:

1   package {
2
3 public class ArrayIterator implements IIterator {
4
5 private var _index:Number = 0;
6 private var _collection:Array;
7
8 public function ArrayIterator(collection:Array) {
9 _collection = collection;
10 _index = 0;
11 }
12
13 public function hasNext():Boolean {
14 return _index < _collection.length;
15 }
16
17 public function next():Object {
18 return _collection[_index++];
19 }
20
21 public function reset():void {
22 _index = 0;
23 }
24
25 }
26 }
27



Este es un iterador que recorre un Array de final a inicio ósea en reversa:

1   package {
2
3 public class ArrayReverseIterator implements IIterator {
4
5 private var _index:Number = 0;
6 private var _collection:Array;
7
8 public function ArrayIterator(collection:Array) {
9 _collection = collection;
10 _index = _collection.length - 1;
11 }
12
13 public function hasNext():Boolean {
14 return _index > = 0;
15 }
16
17 public function next():Object {
18 return _collection[_index--];
19 }
20
21 public function reset():void {
22 _index = _collection.length - 1;
23 }
24
25 }
26 }
27



Por último definamos la interfaz común para nuestras colecciones, esta solo consta de un método que nos devolverá el tipo de iterador deseado.

1   package {
2 public interface ICollection {
3 function iterator(type:String = null):IIterator;
4 }
5 }
6
7



Y la implementamos a nuestra existente colección StringColleciton:

1   package {
2
3 public class StringCollection implements ICollection {
4
5 private var _strings:Array;
6
7 public function StringCollection() {
8 _strings = new Array();
9 }
10
11 public function addElement(value:String):void {
12 _strings.push(value);
13 }
14
15 public function iterator(type:String = null):IIterator {
16 if(type == "ArrayReverseIterator") {
17 return new ArrayReverseIterator(_strings);
18 }else {
19 new ArrayIterator(_strings);
20 }
21 }
22 }
23 }
24



Genial !!!, ahora nuestro cliente solo sabe que nuestra clase solamente devuelve objetos que implementan la interfaz IIterator, ya no estamos exponiendo al cliente los detalles de implementación de la clase, él ya sabe que le devuelve un IIterator no importando si es un array, dictionary, etc…, sabrá que cuenta con una interfaz común para navegar sobre la colección, y en un futuro podríamos agregar más tipos de iteradores para otro tipo de colecciones sin ningún problema.

Ejemplo de uso en la parte del cliente:

1   var collection:StringCollection = new StringCollection();
2 collection.addElement("uno");
3 collection.addElement("dos");
4 collection.addElement("tres");
5 collection.addElement("cuatro");
6 var iterator:IIterator = collection.iterator();
7 while(iterator.hasNext()) {
8 trace(iterator.next());
9 }
10 iterator = collection.iterator("ArrayReverseIterator");
11 while(iterator.hasNext()) {
12 trace(iterator.next());
13 }
14
15



A poco no está fregón ?, la colección nos puede devolver 2 tipos de iteradores dependiendo del tipo de parámetro que le pasemos al método iterator, cualquiera de las 2 implementaciones concretas implementa la misma interfaz por tanto el cliente no tendrá que cambiar su código del cómo itera sobre los elementos si más adelante decide implementar otro tipo de iterador.

Aquí les dejo el diagrama de clases del ejemplo:



Cómo mejorarías el patrón compositive ó compuesto utilizando este patrón ?, bueno eso te toca a ti, ojala les haya quedado claro todo y cualquier comentario o sugerencia es bienvenida.

Para el próximo post veremos probablemente otro patrón, es una sorpresilla.

Un saludote !

28 de septiembre de 2007

Patrón Compuesto - ActionScript 3.0

Patrón Compuesto

Después de varios meses de inactividad en el blog xD (prometo no dejarlo abandonado de nuez), vamos a ver un tema muy interesante, el patrón compuesto implementado en ActionScript 3.0.

Este patrón tiene la finalidad de resolver la complejidad que podría resultar al hacer estructuras parecidas a la de un árbol de objetos, tanto la creación de estructuras complejas como la navegación sobre ellas se podrá hacer de forma sencilla implementándolo.

Imaginémonos el árbol del tule (por si no lo saben está en Oaxaca, es el árbol más gordo del mundo hahahahaha), pues el tule está formado por ramas y hojas, por ejemplo las ramas pueden tener otras ramas y otras hojas y así sucesivamente.

Nuestra rama es una composición de uno o más objetos similares que tiene una funcionalidad similar y también tenemos a las hojas que son objetos únicos, no tienen otros objetos dentro de ellas como las ramas.

Un ejemplo:

La clave está en implementar la misma interfaz tanto para los objetos compuestos (ramas) como las hojas (objetos únicos), todo esto hace que programemos por interfaz sin importar que tipo de objetos estemos utilizando a nuestra clase gestora de ramas y hojas (Árbol del Tule) no le importa que tipo concreto le demos, a esta solo le importa que le demos instancias de clase que implementen la interfaz.

Veamos como haríamos nuestro diagrama implementando el patrón:


Como podemos ver tanto nuestras clases Hoja y Rama implementan la interfaz ITreeElement y la Rama a su vez puede contener más instancias de clase que implemente la interfaz ITreeElement. La clase Árbol es la que va a ser utilizada por el cliente para formar la estructura del Tule (si que le va a costar trabajo), agregando ramas o hojas.

Ahora si empecemos a codificar el diagrama, empecemos por la interfaz:




1 package {
2
3 public interface ITreeElement {
4 function addElement(element:ITreeElement):void;
5 function removeElement(element:ITreeElement):Boolean;
6 function getInfo():String;
7 }
8 }



Ahora las 2 clases concretas (Rama y Hoja) que implementarán la interfaz ITreeElement:



1   package {
2
3 import mx.collections.ArrayCollection;
4
5 public class Rama implements ITreeElement {
6
7
8 private var _elementos:ArrayCollection;
9
10
11 public function Rama() {
12 _elementos = new ArrayCollection();
13 }
14
15 public function addElement(element:ITreeElement):void {
16 _elementos.addItem(element);
17 }
18
19 public function removeElement(element:ITreeElement):Boolean {
20 for(var i:Number = 0; i < _elementos.length; i++) {
21 if(_elementos.getItemAt(i) == element) {
22 _elementos.removeItemAt(i);
23 return true;
24 }
25 }
26 return false;
27 }
28
29 public function getInfo():String {
30 var output:String = "\n--------------------------------------\n";
31 output += "Soy una rama y tengo "+_elementos.length+" elemento(s) : ";
32 for(var i:Number = 0; i < _elementos.length; i++) {
33 var elemento:ITreeElement = _elementos.getItemAt(i) as ITreeElement;
34 output += elemento.getInfo();
35 }
36 output += "\n--------------------------------------\n";
37 return output;
38 }
39 }
40 }



Como vemos la clase Rama tiene una propiedad que es una colección de elementos, esta es la que contendrá otras ramas ó hojas que se le vayan agregando.

Algo muy importante es que le pongas mucha atención al método getInfo, ve como iteramos sobre todos los elementos de la rama y delegamos la tarea de obtener la información de los elementos sin importarle sin son ramas o hojas.

Si nos ponemos a pensar un poquito cuando hagamos nuestra clase Hoja, esta tendrá métodos que no tienen ningún significado para esta como addElement y removeElement, ya que las hojas no pueden contener otros elementos.


¿ Qué podemos hacer para solucionar este problema ?


Una solución es poner los métodos sin ningún tipo de implementación o podemos que los métodos que no tienen ningún sentido para la hoja arrojen una excepción, optaremos por la segunda opción.



1   package {
2
3 public class Hoja implements ITreeElement {
4
5 public function Hoja() {
6 }
7
8 function addElement(element:ITreeElement):void {
9 throw new Error("Este método no es posible llamarlo desde una instancia Hoja");
10 }
11
12 function removeElement(element:ITreeElement):Boolean {
13 throw new Error("Este método no es posible llamarlo desde una instancia Hoja");
14 }
15
16 function getInfo():String {
17 return "Soy una hoja sana y fuerte.";
18 }
19 }
20 }
21



Ve como en la hoja solamente necesitamos retornar la cadena de información con getInfo, ya que es un elemento único.

Luego aquí va nuestra clase Árbol que el cliente usará para formar su arbolote:



1   package {
2
3 import mx.collections.ArrayCollection;
4
5 public class Arbol {
6
7
8 private var _nombre:String;
9 private var _peso:String;
10 private var _diametro:String;
11 private var _elementos:ArrayCollection;
12
13
14 public function Arbol(nombre:String, peso:String, diametro:String) {
15 _nombre = nombre;
16 _peso = peso;
17 _diametro = diametro;
18 _elementos = new ArrayCollection();
19 }
20
21 public function get nombre():String {
22 return _nombre;
23 }
24
25 public function get peso():String {
26 return _peso;
27 }
28
29 public function get diametro():String {
30 return _diametro;
31 }
32
33 public function agregarElemento(e:ITreeElement):void {
34 _elementos.addItem(e);
35 }
36
37 public function obtenerEstructura():void {
38 for(var i:Number = 0; i < _elementos.length; i++) {
39 var elemento:ITreeElement = _elementos.getItemAt(i) as ITreeElement;
40 trace(elemento.getInfo());
41 }
42 }
43
44 }
45 }



Por último un ejemplo de cómo podríamos formar un árbol con ramas y hojas, y al final obtener su estructura interna.



1   var rama1:Rama = new Rama();
2 rama1.addElement(new Hoja());
3 rama1.addElement(new Hoja());
4 rama1.addElement(new Hoja());
5 var rama2:Rama = new Rama();
6 rama2.addElement(new Hoja);
7 rama1.addElement(rama2);
8 var rama3:Rama = new Rama();
9 rama3.addElement(new Rama());
10 var hojaSola:Hoja = new Hoja();
11
12 var arbol:Arbol = new Arbol("Árbol del Tule", "636 toneladas", "14.05 m");
13 arbol.agregarElemento(rama1);
14 arbol.agregarElemento(rama3);
15 arbol.agregarElemento(hojaSola);
16
17 arbol.obtenerEstructura();



Es un ejemplo que lo podemos mejorar utilizando el patrón Iterator, en mi siguiente post lo veremos en detalle.

Cualquier comentario ó sugerencia es bienvenida.

Un saludote !

15 de mayo de 2007

Patrón Modelo Vista Controlador - ActionScript 3.0

Trataré de explicar con lo poco que se, este patrón de diseño utilizando actionscript 3.0 para los amantes de este lenguaje como yo, me servirá a mi para aprender este mundo maravilloso de los patrones y también a todos los lectores que les interese el tema, así que comencemos. ;-)

Las aplicaciones consisten de interfaces de usuario, lógica del negocio y modelos de datos, por ejemplo un componente “combobox” cuenta con elementos de la interfaz del usuario como áreas con scroll ó áreas clickeables, lógica que responde de acuerdo a los eventos generados por el usuario (el usuario de click en una opción del combobox) y modelos de datos (la información que reside en nuestro combobox).

Comúnmente los programadores suelen combinar los 3 elementos en un solo objeto en lugar de crear diferentes objetos para cada responsabilidad, cuando la interfaz y los datos están unidos en un objeto genera los siguientes problemas:

  • Es difícil utilizar los datos de nuestro modelo por fuera de nuestro objeto, por ejemplo si tenemos un inputText y la información escrita en el tiene que ser enviada al servidor, esa información tendría que ser guardada en el mismo objeto y tendríamos que asignarle la responsabilidad de enviar ese dato al servidor, esto viola con los principios de Alta Cohesión.
  • No puedes cambiar la interfaz de usuario fácilmente utilizando el mismo modelo de datos, esto es porque el modelo de datos y la interfaz residen en un solo objeto (están fuertemente acoplados, viola el principio de Bajo Acoplamiento), el cambio de interfaz requeriría copiar todos los datos de la interfaz anterior a la nueva.
  • Múltiples vistas simultaneas de los datos es muy difícil, por ejemplo, tu podrías querer desplegar 2 o más gráficas de los mismo datos y también actualizarlas al cambiar los datos, si tienes 2 gráficas donde los datos y la presentación están mezclados tendrías que actualizar los datos que residen en cada uno de los objetos.


Ahora pasemos a explicar cada una de las partes que conforman el patrón:

El modelo

Es el elemento que almacena los datos, el modelo puede ser tan simple que solamente guarde un solo dato primitivo como un entero así como estructuras complejas de datos por ejemplo otros objetos. Veamos al modelo como un almacén de datos y una cosa muy importante el modelo debe ser “independiente” tanto de la vista y el controlador, esto quiere decir que el modelo no debe saber de la existencia del controlador y la vista, este último punto grábatelo como si fuera algo de vida o muerte xD, esto es debido a que se genera un bajo acoplamiento y te da la posibilidad de cambiar las vistas y controladores a tu antojo sin mover nada en nuestro modelo.

La vista

Es todo lo visual, todo lo que ve el usuario, la vista utiliza los datos del modelo para dibujarse así mismo. La vista puede consistir de elementos como botones, imágenes, formularios, etc.

Como conclusión la vista solamente consiste de elementos visuales y la lógica necesaria para leer los datos del modelo para ser utilizados en la interfaz, como regla la vista no puede actualizar los datos del modelo.

El controlador

El controlador es responsable de capturar los eventos generados por el usuario, y de esa manera actualizar el modelo y la vista. Por ejemplo si el modelo necesita actualizar los datos, el controlador es responsable de esa acción.

Ahora si pasemos a codificar un ejemplo muy sencillo para que se entienda bien el concepto.

Vamos a hacer una clase que va a ser nuestro modelo llamada DataModel, solo va a contener un miembro privado entero que ira incrementándose cada segundo y este se lo notificará a sus listeners. Para que la clase pueda disparar eventos necesitamos heredar de la clase “flash.events.EventDispatcher”, y cuando cambie el estado de nuestro objeto que es cuando se cambia la propiedad number llamamos al método”dispatchEvent” y le pasamos como argumento un objeto del tipo Event, tu tienes la libertad de crear tus propios eventos heredando de la clase Event, la propiedad privada thread es como un hilo de java, al llamar al método start, se llamará al método onTimer cada segundo.

1   package com.jahepi.domain.models {
2
3 import flash.events.EventDispatcher;
4 import flash.events.Event;
5 import flash.utils.Timer;
6 import flash.events.TimerEvent;
7
8 public class DataModel extends EventDispatcher {
9
10 private var _number:Number = 0;
11 private var _thread:Timer;
12
13 public function DataModel() {
14 _thread = new Timer(1000);
15 _thread.addEventListener(TimerEvent.TIMER, onTimer);
16 _thread.start();
17 }
18
19 public function set number(number:Number):void {
20 _number = number;
21 dispatchEvent(new Event(Event.CHANGE));
22 }
23
24 public function get number():Number {
25 return _number;
26 }
27
28 private function onTimer(event:TimerEvent):void {
29 number++;
30 }
31
32 }
33 }


Ahora pasemos a hacer 2 vistas (DataView1 y DataView2) estas heredan de la clase Sprite, y a cada una se la pasa la referencia del Modelo en su constructor, si te fijas en la línea de “_model.addEventListener(Event.CHANGE, onUpdate);”, registramos el listener para que nos avise cuando cambia el estado de nuestro modelo, y este llama al método “onUpdate”, para poder así hacer los cambios pertinentes en nuestra interfaz, cada vista es muy simple pero muestra a grandes rasgos como el modelo notifica a cada una de las vistas cuando su estado cambia y se ve reflejado en cada una de ellas al cambiar la propiedad number del modelo.

DataView1


1   package com.jahepi.domain.views {
2
3
4 import flash.display.Sprite;
5 import flash.text.TextField;
6 import flash.events.Event;
7 import com.jahepi.domain.models.DataModel;
8 import flash.display.Shape;
9
10 public class DataView1 extends Sprite {
11
12 private var _model:DataModel;
13 private var _textField:TextField;
14
15 public function DataView1(model:DataModel) {
16 _model = model;
17 _model.addEventListener(Event.CHANGE, onUpdate);
18
19 var shape:Shape = new Shape();
20 shape.graphics.beginFill(0xff0000, 1);
21 shape.graphics.drawRect(0, 0, 35, 35);
22 shape.graphics.endFill();
23 var textField:TextField = new TextField();
24 textField.text = "vista 1";
25 textField.y = 16;
26
27 _textField = new TextField();
28
29 addChild(shape);
30 addChild(_textField);
31 addChild(textField);
32 }
33
34
35 private function onUpdate(event:Event):void {
36 _textField.text = String(_model.number);
37 }
38
39 }
40 }


DataView2

1   package com.jahepi.domain.views {
2
3 import flash.display.Sprite;
4 import flash.text.TextField;
5 import flash.events.Event;
6 import com.jahepi.domain.models.DataModel;
7 import flash.display.Shape;
8
9 public class DataView2 extends Sprite {
10
11 private var _model:DataModel;
12 private var _textField:TextField;
13
14 public function DataView2(model:DataModel) {
15 _model = model;
16 _model.addEventListener(Event.CHANGE, onUpdate);
17
18 var shape:Shape = new Shape();
19 shape.graphics.beginFill(0x00ff00, 1);
20 shape.graphics.drawCircle(15, 20, 25);
21 shape.graphics.endFill();
22 var textField:TextField = new TextField();
23 textField.text = "vista 2";
24 textField.y = 16;
25
26 _textField = new TextField();
27 _textField.textColor = 0x0000ff;
28
29 addChild(shape);
30 addChild(_textField);
31 addChild(textField);
32 }
33
34
35 private function onUpdate(event:Event):void {
36 _textField.text = String(_model.number);
37 }
38 }
39 }

Ahora le toca el turno de nuestro controlador, este tendrá el objetivo de cambiar las vistas cuando sea apretado un botón en la interfaz, el controlador cuenta con un array que registra todas las referencias de las vistas y también cuenta con la referencia del modelo en su propiedad model por si queremos mas adelante modificar el estado del modelo desde ahí.

1   package com.jahepi.domain.controllers {
2 import com.jahepi.domain.models.DataModel;
3 import flash.display.SimpleButton;
4 import flash.display.Shape;
5 import flash.events.MouseEvent;
6 import flash.display.Sprite;
7
8 public class DataController extends Sprite {
9
10 private var _views:Array;
11 private var _model:DataModel;
12 private var _index:Number = 0;
13
14 public function DataController(model:DataModel) {
15 _views = new Array();
16 _model = model;
17
18 var shape:Shape = new Shape();
19 shape.graphics.beginFill(0xffff00, 1);
20 shape.graphics.drawRect(0,0,30,30);
21 shape.graphics.endFill();
22 var button:SimpleButton = new SimpleButton(shape, shape, shape, shape);
23 button.addEventListener(MouseEvent.CLICK, changeView);
24 button.y = 100;
25 addChild(button);
26 }
27
28 public function addView(view:Sprite):void {
29 _views.push(view);
30 }
31
32 private function changeView(event:MouseEvent):void {
33 if((_index-1) != -1) {
34 removeChild(_views[_index-1]);
35 }
36 if(_index >= _views.length) {
37 _index = 0;
38 }
39 addChild(_views[_index++]);
40 }
41 }
42 }

Y ahora la aplicación final, el punto de entrada donde se crean las instancias:

1   package {
2
3 import flash.display.Sprite;
4 import com.jahepi.domain.views.*;
5 import com.jahepi.domain.models.DataModel;
6 import com.jahepi.domain.controllers.DataController;
7
8 public class MVC extends Sprite {
9
10 public function MVC() {
11
12 var model:DataModel = new DataModel();
13 var controller:DataController = new DataController(model);
14 var view1:DataView1 = new DataView1(model);
15 var view2:DataView2 = new DataView2(model);
16 controller.addView(view1);
17 controller.addView(view2);
18 addChild(controller);
19
20 }
21 }
22 }
23

Unan todo en un proyecto de AS3.0, y verán un pequeño cuadro que es el botón, cuando le dan click se genera la primera vista y cada vez que se cambia el estado del modelo se le notifica a la vista actual cambiado el valor numérico que despliega y si le vuelves a dar click al botón cambia a la segunda vista conservando la secuencia númerica obtenida del modelo. Eso es todo, ojalá no queden dudas ó si me equivoqué en algo no duden en comentar mis horrores.

Un saludote !