Introducción a MooTools con Programación Orientada a Objetos y HTML5

Recientemente estuve trabajando en un ejemplo en HTML5 para la web CSS3 & HTML5 donde colaboro. En esta ocasión, mi aporte vuelve a ser un código básico para un videojuego aprovechando las ventajas del elemento canvas de esta nueva tecnología.

Lamentablemente, Javascript es un lenguaje bastante complejo y limitado por no decir molesto a la hora de trabajar. Al estar orientado a prototipos y tener que simular la orientación a objetos, todo se vuelve más difícil de llevar adelante. Esto provoca que en cualquier circunstancia de un proyecto me trabe y tenga que empezar a utilizar parches y soluciones muy poco elegantes para salvar problemas que deberían ser triviales. Conocido es el problema de Javascript al perder referencias a objetos.

Eso es lo malo. Lo bueno, es que se inventaron los frameworks que conforman una eficiente capa de abstracción que nos permite  a los programadores ocuparnos de lo que realmente queremos. Hay varios frameworks de Javascript para programar utilizando POO, yo opté por MooTools, pero bien podría haberlo hecho por JQuery, Prototype o algún otro.

Como seguramente haremos todos los desarrolladores, cuando empezamos con algo nuevo, le damos una hojeada a la documentación e intentamos hacer lo que ya sabemos, cuando vemos que algo no funciona, volvemos a la documentación. En mi caso, luego de ir y volver un par de veces, suelo estudiar un poco más a fondo los manuales. Sí, resulta aburrido porque es todo teoría y mientras uno lee le agarran ganas de empezar a usar ya mismo eso que acaba de aprender, pero bueno, mejor terminar de leer todo (aunque sea un capítulo) para luego tener un manejo más ágil de la tecnología que se aprende.

Primer ejemplo práctico de MooTools y POO

Ahora pasaré a una introducción rápida de MooTools donde pondré a prueba la sintaxis y algo de herencia. Y para hacerlo más divertido, incluiré un canvas de HTML5. Este objeto no es más que un recuadro en el cual se puede hacer dibujos o insertar imágenes. El presente ejemplo se probó únicamente con Mozilla Firefox así que les recomiendo que usen ese navegador para probarlo. El ejemplo funcionando lo encuentran aquí.

Vamos a empezar con un documento HTMl5 básico

Si no vieron nada de HTMl5, les cuento que el doctype es tan fácil ahora que hasta se puede recordar. En este caso, solo incluí un elemento Canvas en el <body> del documento. En el <head> cargué, primero la librería de MooTools. Usé la versión comprimida. Y luego, un archivo scripts.js que es donde volcaré el código Javascript que voy a usar en el ejemplo.

No hay mucho más para agregar al HTML.

Sigamos con el archivo Javascript:

De entrada nos topamos con window.addEvent(‘domready’,function(). Aquí lo que se hace es asignar una función anónima al evento domready para cuando este ocurra. ¿Y cuándo ocurre? Cuando el documento se cargó por completo. O sea que lo que hace esa línea es ejecutar la función anónima que está a continuación una vez que la página termine de cargar. No es más que una función de arranque. Para los que vienen de Java, es el equivalente a la función main().

La primer línea dentro de la función anónima trae un contexto del objeto canvas. No se dibuja directamente sobre el elemento canvas, sino sobre la instancia de su contexto que puede ser en 2d o 3d. En este caso, será 2d porque dibujaremos en dos dimensiones.

Antes de seguir linealmente el código, saltemos a las clases que están definidas abajo. La sintaxis requiere poner un var antes del nombre de la clase, luego un = new Class ({. Si vamos utilizar herencia, debemos agregar la palabra clave Extends: nombre_de_clase.

Los atributos van debajo de la definición del nombre de la clase. Se pone el nombre del atributo y el valor, separado de dos puntos. Si no se quiere asignar un valor, se le puede poner null. Se utiliza la coma para separar los atributos y no punto y coma.

Los métodos van debajo con la sintaxis nombre_del_metodo: function() { … } y se separan entre sí por una coma al igual que los atributos.

El constructor aquí se llama initialize y la sintaxis es equivalente a la de los métodos, pero como en otros lenguajes, se ejecuta al instanciar el objeto.

En este código en particular tenemos una clase madre Animal y clases hijas Cebra, Jirafa, Leon y Elefante. Cada hija hace uso del método constructor de la clase madre (this.parent()) y todas redefinen el método dibujar(), que es abstraco en Animal. Si lo están pensando, no, no hay polimorfismo en este ejemplo. Eso lo quiero tratar en un artículo siguiente. Cada método dibujar() no hace más que poner una imagen que representa al animal en el canvas, indicando las coordenadas en x y en y.

Volviendo a la función inicial, se crea una instancia de cada animal y un array de animales. Luego se introducen todos en él. Se usa la función getRandom de MooTools para obtener uno al azar y luego dibujarlo. Si presionamos F5 y recargamos la página de forma repetida, podremos comprobar que se irá dibujando al azar uno de los animales por vez.

No hay poliformismo, porque en realidad en todo momento se sabe qué objeto se tiene y por lo tanto qué método dibujar() se va a ejecutar.

En un artículo siguiente voy a utilizar un patrón de diseño muy conocido llamado Factory Method y aprovechar para explicar el concepto de polimorfismo.

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*