Ejemplo práctico de uso de Mootools. ¡Descubre cómo!

Un ejemplo de uso de Mootools para recopilar. Crear un textarea que cuenta los caracteres que se han escrito por el usuario.

Ha llegado el momento de revisar todos los conocimientos adquiridos hasta el momento en el manual de Mootools. Hemos visto bastantes cosas ya sobre el manejo de este framework Javascript, así que estamos en disposición de crear un primer ejemplo que explota muchas de las funcionalidades que estamos aprendiendo. Este ejemplo nos dará una visión más global sobre el buen uso de Mootools y su potencia, a la vez que nos ayudará a afianzar los distintos conocimientos que hemos aprendido por separado.

Nuestro ejemplo será la construcción de un campo textarea que tenga al lado un texto donde se muestra el número de caracteres que tiene. Lo vamos a construir por medio de programación orientada a objetos, tal como se debe hacer en Mootools, con lo que podremos reutilizar el código fácilmente para otros proyectos donde queramos utilizar este "textarea inteligente". Otra de las ventajas será que podremos tener conviviendo varios campos textarea que cuenten sus caracteres en la misma página, cuya implementación no requiera duplicar código Javascript, y sin que interfieran entre si las cuentas de caracteres de los distintos textarea del documento.

Podemos ver una página con el funcionamiento de este ejemplo en marcha.

Insisto, la idea de este primer ejemplo global de Mootools no es estudiar o depurar la funcionalidad de este "textarea contador de caracteres", sino mostrar a los lectores de este manual un uso adecuado del framework, de modo que el lector pueda crear sus propias clases para implementar funcionalidades en el cliente para sus propias páginas.

Crear una clase con Mootools para implementar una funcionalidad

La manera correcta de proceder para hacer un script con Mootools es crear una clase, de programación orientada a objetos, que implemente las funcionalidades con las que queremos dotar a nuestra página. Esa clase podremos instanciarla para crear objetos Mootools que se encarguen de automatizar los procesos dinámicos. Así podremos instanciar cualquier número de objetos para que realicen estas funcionalidades por si solos y podremos desentendernos de su complejidad y reutilizar el código donde lo deseemos.

Las bases para hacer todo esto las hemos aprendido ya en este manual, así que no debería dar mucho problema entender el código y si no es así, simplemente sería releer los artículos en los que se habla de las clases de Mootools .

La clase tiene un constructor, a la que tendremos que pasar los parámetros para personalizar el comportamiento de ese objeto y asociarlo con los elementos de la página con los que queramos que trabaje. A estas alturas deberíamos conocer también cómo crear un constructor de la clase.

En el constructor inicializaremos todos los componentes de los objetos una vez sean creados. En este caso tendremos que recibir el identificador (id) del textarea a contar caracteres y entonces crearemos toda la estructura para mostrar caracteres y crear los eventos para contarlos cuando el usuario los escriba.

En el resto de la clase tendremos que crear los métodos que estimemos necesarios para implementar las funcionalidades de cuenta de caracteres.

Así pues, vamos a mostrar ya el código de la clase y luego iremos comentando las diferentes partes.

//creo una clase para conseguir que un textarea tenga un contador de caracteres
var TextareaContador = new Class({
   //defino un constructor, que recibe el id del textarea
   initialize: function(idTextarea){
      //recupero el elemento textarea con la función dolar
      this.textarea = $(idTextarea);
      //creo un elemento SPAN para mostrar el contador
      this.campoContador = new Element ("span", {"class": "estilocontador"});
      //inyecto el contador después del textarea
      this.campoContador.inject(this.textarea, "after");
   
      //creo un evento para el textarea, keyup, para cuando el usuario suelta la tecla
      this.textarea.addEvent("keyup", function(){
         //simplemente llamo a un método de esta clase que cuenta caracteres
         this.cuentaCaracteres();
      }.bind(this)
      );
   
      //llamo al método que cuenta caracteres, para inicializar el contador
      this.cuentaCaracteres();
   },

   //creo un método para contar los caracteres
   cuentaCaracteres: function(){
      //simplemente escribo en el campo contador el número de caracteres actual del textarea
      this.campoContador.set("html", "Número caracteres: " + this.textarea.value.length);
   }
});   

El código de la clase está comentado para que se pueda saber qué se hace en cada paso. Pero voy a dar una serie de referencias donde podemos entender y aprender todo lo que hemos hecho en el script.

//creo una clase para conseguir que un textarea tenga un contador de caracteres
var TextareaContador = new Class({

Ver el artículo que habla sobre las clases.

//defino un constructor, que recibe el id del textarea
initialize: function(idTextarea){

Ver el artículo que habla sobre constructores.

//recupero el elemento textarea con la función dolar
this.textarea = $(idTextarea);

Ver el artículo sobre la función dólar.

//creo un elemento SPAN para mostrar el contador
this.campoContador = new Element ("span", {"class": "estilocontador"});
//inyecto el contador después del textarea
this.campoContador.inject(this.textarea, "after");

En estas líneas hemos creado un elemento de texto donde mostraremos la cuenta de caracteres. Luego lo hemos colocado en el código de la página después del textarea, con lo que aparecerá cerca, posicionado tal como lo indiquemos en el estilo CSS de la clase "estilocontador". Ver el artículo de construcción de elementos en la página. Ver el artículo de inyección de elementos en la página.

//creo un evento para el textarea, keyup, para cuando el usuario suelta la tecla
this.textarea.addEvent("keyup", function(){
   //simplemente llamo a un método de esta clase que cuenta caracteres
   this.cuentaCaracteres();
}.bind(this)

Aquí se está definiendo un evento, que asociamos con el objeto textarea del objeto, para que cuando se escriba algo en el campo se actualice la cuenta de caracteres mostrada al lado del textarea. (El evento "keyup" se activa cuando el usuario pulsa una tecla y luego la suelta, pero sólo en el momento de soltar la tecla). Para procesar el evento se crea una función que simplemente llama a otro método de la clase donde se realiza la cuenta de caracteres. Ver el artículo donde se habla de eventos. Ver el artículo donde se habla de la función bind()

//llamo al método que cuenta caracteres, para inicializar el contador
this.cuentaCaracteres();

El constructor termina llamando al método cuentaCaracteres(), con lo que se inicializará el contador de caracteres, por si en el textarea ya hubiera algún texto escrito previamente.

//creo un método para contar los caracteres
cuentaCaracteres: function(){
   //simplemente escribo en el campo contador el número de caracteres actual del textarea
   this.campoContador.set("html", "Número caracteres: " + this.textarea.value.length);
}

En este método se actualiza el campo de conteo, cambiando su propiedad HTML para mostrar la cuenta actual de caracteres. Ver artículo donde se explica el método set de un elemento de la página.

Eso ha sido todo el código de la clase TextareaContador.

Ahora sería bueno ver el código HTML que tendremos en la página para crear dos "textareas inteligentes":

<textarea id="textocontador"></textarea>
<br>
<br>
<textarea id="otro" cols=50 rows=8>Este textarea tiene texto escrito...</textarea>

Sólo necesitamos fijarnos en los Ids de los textarea, que utilizaremos para referirnos a ellos a la hora de crear los objetos para que funcione la cuenta de caracteres.

Por último veamos el código para instanciar los objetos TextareaContador, una vez que el DOM de la página está listo para recibir modificaciones dinámicas por Javascript.

//creo un evento para cuando está listo el DOM de la página
window.addEvent("domready", function(){
   //creo el objeto TextareaContador, pasando el identificador del textarea que se pretende contar caracteres.
   texto = new TextareaContador("textocontador");
   otro = new TextareaContador("otro");
});

Ver el artículo sobre el evento "domready" del objeto window que utilizamos para hacer cosas cuando el DOM está listo. Ver también el artículo que habla sobre la instaciación y trabajo con objetos en Mootools

El código completo de este ejercicio

<html>
<head>
   <title>Textarea que cuenta caracteres escritos</title>
   <script src="mootools-1.2.1-core-yc.js" type="text/javascript"></script>
   <style type="text/css">
   span.estilocontador{
      display: block;
      margin-top: 3px;
      width: 120px;
      font-size:8pt;
   }
   </style>
<script>
//creo una clase para conseguir que un textarea tenga un contador de caracteres
var TextareaContador = new Class({
   //defino un constructor, que recibe el id del textarea
   initialize: function(idTextarea){
      //recupero el elemento textarea con la función dolar
      this.textarea = $(idTextarea);
      //creo un elemento SPAN para mostrar el contador
      this.campoContador = new Element ("span", {"class": "estilocontador"});
      //inyecto el contador después del textarea
      this.campoContador.inject(this.textarea, "after");
   
      //creo un evento para el textarea, keyup, para cuando el usuario suelta la tecla
      this.textarea.addEvent("keyup", function(){
         //simplemente llamo a un método de esta clase que cuenta caracteres
         this.cuentaCaracteres();
      }.bind(this)
      );
   
      //llamo al método que cuenta caracteres, para inicializar el contador
      this.cuentaCaracteres();
   },

   //creo un método para contar los caracteres
   cuentaCaracteres: function(){
      //simplemente escribo en el campo contador el número de caracteres actual del textarea
      this.campoContador.set("html", "Número caracteres: " + this.textarea.value.length);
   }
});

//creo un evento para cuando está listo el DOM de la página
window.addEvent("domready", function(){
   //creo el objeto TextareaContador, pasando el identificador del textarea que se pretende contar caracteres.
   texto = new TextareaContador("textocontador");
   otro = new TextareaContador("otro");
});
</script>
</head>

<body>
<form>
<textarea id="textocontador"></textarea>

<br>
<br>
<br>
<textarea id="otro" cols=50 rows=8>Este textarea tiene texto escrito...</textarea>
</form>
<br>
<br>
<a href="http://www.desarrolloweb.com">http://www.desarrolloweb.com</a>
</body>
</html>

Podemos ver el ejemplo en una página aparte.

Espero que con este ejercicio, asimilando los conocimientos que ya habíamos adquirido en el manual de Mootools, podamos entender el proceso completo de implementación y puesta en marcha de clases útiles para hacer efectos en la página.

Hemos publicado otro ejemplo práctico que servirá para practicar con todos los conocimientos adquiridos hasta este momento en el Manual de Mootools, se trata de otro ejemplo contado paso a paso y con referencias para hacer una utilidad de Tips simplificada. También puedes ver numerosos ejemplos prácticos en el Taller de Mootools.

Fuente:enlace