JS++ | Controladores de eventos

Hemos hecho que nuestra clase ‘Animal’ sea abstracta. Hemos declarado un método abstracto de ‘hablar’ e implementado este método en todas las subclases de ‘Animal’. Sin embargo, nuestros animales aún no hablan. Necesitamos una manera de hacer que los animales hagan algo cuando ocurre un evento. En este caso, el «hacer algo» que queremos es que el animal hable y el «evento» que debe ocurrir será un clic del mouse del usuario. Podemos hacer esto con controladores de eventos.

jQuery proporciona manejo de eventos, pero vamos a definir los manejadores de eventos de manera orientada a objetos. Con las clases abstractas, no es necesario vincular eventos a cada clase individual. En su lugar, puede adjuntar un evento a la clase abstracta y aplicarlo a todas las subclases.

Modifique Animal.jspp de la siguiente manera:

external $;

module Animals
{
    abstract class Animal
    {
        protected var $element;
        private static unsigned int count = 0;

        protected Animal(string iconClassName) {
            string elementHTML = makeElementHTML(iconClassName);
            $element = $(elementHTML);

            attachEvents();

            Animal.count++;
        }

        public static unsigned int getCount() {
            return Animal.count;
        }

        public virtual void render() {
            $("#content").append($element);
        }

        public abstract void talk();
        private void attachEvents() {
            $element.click(talk);
        }

        private string makeElementHTML(string iconClassName) {
            string result = '<div class="animal">';
            result += '<i class="icofont ' + iconClassName + '"></i>';
            result += "</div>";
            return result;
        }
    }
}

Eso es todo lo que tienes que agregar. Compile el proyecto e intente hacer clic en los animales. Deberías ver cuadros de mensajes que aparecen cuando haces clic en un animal (además del rinoceronte) y ves el ruido que hace:

Desglosemos el código. Declaramos un método privado ‘attachEvents’. Lo hicimos ‘privado’ porque solo la clase ‘Animal’ lo necesita. En el constructor ‘Animal’, llamamos al método ‘attachEvents’. Esto debería ser sencillo en este punto. Aquí está el código con material nuevo; dentro del método ‘attachEvents’, tenemos esta declaración:

$element.click(talk);

Como recordará, a través de la herencia, cada subclase de ‘Animal’ también tendrá ‘$elemento’ como datos. Este elemento es único para cada instancia de una clase. El campo ‘$elemento’ representa un objeto jQuery, como lo indica su prefijo $. Luego usamos jQuery para adjuntar un «detector de eventos» a este ‘$elemento’ que es único para cada instancia.

Por lo tanto, cuando instanciamos ‘Gato’, ‘Perro’, ‘Panda’ y ‘Rinoceronte’, ejecutaremos los constructores respectivos para cada uno, que comienzan ejecutando una llamada super() para heredar de la clase ‘Animal’. A su vez, ‘Animal’ crea un ‘$elemento’ único para la instancia de clase y adjunta el detector de eventos ‘clic’ al elemento. Por lo tanto, cada una de nuestras instancias tenía un evento adjunto, aunque solo se modificó la clase base abstracta (‘Animal’).

Además, pasamos el método ‘hablar’ como referencia a ‘hacer clic’. Tanto ‘clic’ como ‘hablar’ son funciones. Sin embargo, solo ‘clic’ usa la sintaxis de llamada de función (entre paréntesis). No añadimos paréntesis después de ‘hablar’. La razón es porque no queremos que ‘hablar’ se ejecute inmediatamente. Solo queremos que ‘hablar’ se ejecute cuando ocurra un evento de ‘clic’.

Un detector de eventos esperará hasta que ocurra un evento. En este caso, adjuntamos un evento de ‘clic’ para que el evento se active cuando el usuario haga clic en el elemento con el mouse. Finalmente, tenemos que especificar qué método se ejecuta cuando se hace clic en el elemento:

$element.click(talk);

Como puede ver, pasamos el método ‘hablar’ como el «controlador de eventos». El controlador de eventos es el método que se ejecuta cuando se activa el evento. En otras palabras, queremos que el método ‘hablar’ se ejecute cuando se haga clic en el elemento.

Sin embargo, ‘hablar’ es abstracto. JS++ reconoce que tenemos una clase abstracta y estamos pasando un método abstracto. Dado que los métodos abstractos no se pueden ejecutar, JS ++ resolverá el método correcto para ejecutar. En este caso, se resolverá en las respectivas implementaciones de subclase de ‘hablar’.