Mootools: introducción

21/ene/2008 18

A pedido popular, comenzaré a iniciar a quienes visitan este sitio en algunos de los frameworks Javascript más populares, o por lo menos, que utilizo con más frecuencia. El primero de ellos sería Mootools, con el que más he estado jugando últimamente (y prometo mostrar resultados).

Pero antes, me interesa comenzar con definir framework. Según mi instinto (y ayuda de Wikipedia), los frameworks Javascript (pueden ser de otros tipos) son una arquitectura que modela las relaciones del lenguaje Javascript. Provee una estructura y principalmente una metodología de trabajo que ayuda a ordenar una sintaxis de trabajo. Son diseñados principalmente para facilitar el desarrollo de sitios y aplicaciones web. Cada framework tiene su orden y estructuras definidos, y no pueden ser mezclados, ya que las reglas son diferentes entre ellos (imagínense sino jugar rugby con reglas de básquetbol… ¡un lío!).

En este artículo, crearemos unos simples Eventos donde manipularemos Elementos vía Javascript.

Cargando

Para comenzar a trabajar con Mootools debemos primero llamar la librería, la que puede ser descargada desde su sitio web ofreciéndonos mucha flexibilidad para bajar una versión optimizada a nuestros requerimientos. Por este detalle, Mootools puede intimidar, ya que quizás algunos Eventos o Efectos no funcionen a la primera (y frustren a quienes esperan prontos resultados), debido a que no han bajado el material necesario para ello. Así, Mootools puede ser considerado como un framework avanzado, pero prefiero verlo como versátil y liviano. Basta algo de estudio para entender bien y utilizar lo justo y necesario para nuestras necesidades. Resumiendo, para cagarlo se utiliza:

<script type="text/javascript" src="ruta_a/mootools.js"></script>

Luego, comenzaremos a escribir lo que queremos realizar vía Javascript. Para comenzar, debemos crear un Evento que nos diga cuando comenzar a realizar lo que queremos.

window.addEvent('domready', function() {
     // nuestro código
});

Mootools nos ofrece más de una opción para comenzar a escribir código:

  • domready: se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes. Gran aporte de Mootools.
  • load: se ejecuta cuando toda la página (inclusive imágenes) se carga, lo que se hacía usualmente con Javascript puro. En algunos casos se demora bastante más.

Escribiendo

Bien, estamos listos para programar algo con ayuda de Mootools. Como mencioné, crearemos un Evento donde manipularemos aspectos de alguna etiqueta (Elemento). Primero, lo que queremos realizar:

$('enlace').addClass('grandote');

Ahora diseccionaremos esto: al elemento que tenga un id="enlace", agrega una class que se llame .grandote (que aumentará el tamaño de la tipografía del enlace).

$ todos los elementos
(‘enlace’) que tengan el id="enlace"
.addClass agrega la class
(‘grandote’) .grandote

Así de simple. Claro que tienen que tener definida la class .grandote en su hoja de estilos para que vean el resultado.

Ver ejemplo 1

Ojalá puedan ver el source desde Firefox con el plugin Web Developer o Firebug, y podrán apreciar la diferencia entre el código fuente y el código generado.

Ahora, si queremos alcanzar más de un id:

$$(['nombre:id', 'otro_id']).addClass('grandote');

Ver ejemplo 2

Notaron como cambió la invocación al Elemento? Cuando es más de uno, se usa $$ y se agrupan entre corchetes []. Pequeños detalles que diferencian los Frameworks.

Se pueden hacer muchas cosas más manipulando Elementos o Selectores con Mootools, como por ejemplo:

  • $(‘elemento’).remove(); remueve el elemento, literalmente.
  • $(‘elemento’).removeClass(); remieve la class que tenga ese elemento.
  • $(‘elemento’).setStyle(); agrega estilos CSS que definamos.
  • $(‘elemento’).setOpacity(0.4); le da opacidad de 40%;
  • $(‘elemento’).setText(‘Lorem Ipsum’); le inyecta Lorem Ipsum dentro de un elemento, por ejemplo <p></p>
  • $(‘elemento’).empty(); vacía un elemento.

Siendo fiel con el título de este artículo, esta fue una introducción. La documentación de Mootools es completa pero lamentablemente pobre de aplicaciones reales. En el foro pueden encontrar más variedad, pero aún no es bastante satisfactorio.

Próximamente, artículo dedicado a JQuery.

Comentarios

  1. Evelio [#]

    Saludos, buena intro espero seguir viendo más de mootools por estos lares 😉 Buena vida y felicitaciones por tan buen blog.

  2. Rolando Murillo [#]

    A quien se le ocurrió la gran idea de sustituir .getElementsByID por $ primero. A prototype o mootools?

  3. Sebastian [#]

    Excelente!!!!! estaba esperando por esto. Estuve metido en Mootools el finde y no pasaba nada. No me salio absolutamente nada. Debe ser por la manera en que hay que bajarlo. Lamentablemente en el sitio oficial no existe un Download mas simple para que al instalar la librería salga todo.

    Felicito la iniciativa ya que ahora me estan quedando las cosas mas claras. Espero que tengamos mas de Mootools ya que se pueden hacer cosas incríbles y de pasada aprendo a escribir Javascript.

    Opinión. No he encontrado ningún sitio donde se explique paso a paso como utilizar un framework. En ese sentido los que logren explicar la utilización de un framework se merece todos mis respetos!!! Y este sitio va bien. Saludos!!!

  4. fearlex [#]

    Buenisssiiiimoooo, me ha encantado esta introduccion, no sabes, que bien se siente entender tan facil la forma en que explicas. Al menos para mi que solo tengo nociones bascias, de Javascript. Gracias y en espera del artículo dedicado a JQuery. 😀

  5. IsaacDM [#]

    me parece que en el ejemplo 2, le falta el corchete que cierra ( ] ) al ejemplo que muestras.

    Muchas gracias Juan, va excelente, genial que compartas inicios para Mootools

    queEstesBien

  6. _HiDAl [#]

    mira, yo uso harto Mootools… lo encuentro bastante mejor que los otros y la documentacion no es TAN pobre, aunque si faltan cosas… buscando sobre el framework, encontre esto:
    http://icebeat.bitacoras.com/mootools/packito/

    sirve para saber las clases justas que debes descargar desde mootools y asi optimizar tu libreria principal… eso seria

    PD; sorry, te estoy debiendo el scrollbar que te prometi hace un tiempo… lo habia olvidado :P… lo meto en clase y te lo envio!

    saludos!

  7. jose roberto (vevni) [#]

    fijate que mootools lo conoci pork en tu blog hacias mencion de el, jquery ya lo conocia, tambien conoci prototype y el que tiene un nombre raro, el que tiene nombre como del.icio.us, jejej, y yui de yahoo = pero se me hacen como que muchas llamadas para las librerias y nombres muy largos, aunk puedes crear alias, aun asi. -.- y el q’ implementa a todas el extjs, ese es muy bueno =.
    saludos, que bien que te tomas el tiempo en dar estos temas, muy buenos y solicitados, saludos

  8. CSSLab Admin [#]

    Profundizare con Mootools un poco mas antes de confundirlos con otros frameworks, hay cosas bastante interesantes por ver aun. gracias por los buenos comentarios, @IsaacDM, ya corregi el corchete, gracias.

  9. Introducción a Mootools » unijimpe [#]

    […] Mootools: introducción – CSSLab […]

  10. owen [#]

    alguien sabe como incluir solo las partes necesarias de mootools a nuestro archivo (html)????
    escuché que solo permite incluir solo, osea solo las partes que se usará en la aplicacion!!!!!
    si esto funciona!!!!, se imaginan??????? woooowwww

  11. Jorge Epuñan [#]

    Owen, eso es una de las potencias que ofrece Mootools, desde su sitio cuando lo bajas, te entrega la posibilidad de seleccionar solo los elementos que necesites utilizar para tu aplicacion web, y ademas comprimirlo. Asi, puedes desde tener una version de solo 13kb, a la entera que no pesa mas de 60kb… Genial. Salu2.

  12. Ricardo [#]

    al copiar y pegar el ejemplo 2, con la última versión de mootools.js bajada ayer 17, simplemente no funciona. Sólo cambié el nombre de la librería motools al nombre con que yo la renombré (MooTools.js) y en la ruta en que yo la tengo…sin embargo ….nada….¿Qué puede estar pasando podrías darme una ayudita?

  13. Jorge Epuñan [#]

    Ricardo: Mootools hace unos meses actualizo a 1.2 su framework y cambiaron varios aspectos de la sintaxis; te recomiendo leer la documentacion q ellos ofrecen.

    salu2.

  14. Introducción a Mootools » El rincon secreto [#]

    […] Mas Información Obviamente este es una pequeña introducción con los conceptos más básicos, mas adelante iremos desarrollando mas temas que nos ayudarán a comprender mas las capacidades de Mootools. Para mas información pueden les dejo una pequeña lista con recursos: * Mootools Docs * Mootools Demos * Understanding Mootools Selectors $, $$, $E and $ES * Selectors on fire: a tale of pseudoselectors * Mootools: introducción – CSSLab […]

  15. http://crispunkblog.blogspot.com/ [#]

    muy buena info, no se si ya estas pensando en actualizar el post por el nuevo framework de mootools, seria genial leerlo.

    saludos

  16. Introducción a Mootools « IPLEXUS [#]

    […] Mas Información Obviamente este es una pequeña introducción con los conceptos más básicos, mas adelante iremos desarrollando mas temas que nos ayudarán a comprender mas las capacidades de Mootools. Para mas información pueden les dejo una pequeña lista con recursos: * Mootools Docs * Mootools Demos * Understanding Mootools Selectors $, $$, $E and $ES * Selectors on fire: a tale of pseudoselectors * Mootools: introducción – CSSLab […]

  17. uberVU - social comments [#]

    Social comments and analytics for this post…

    This post was mentioned on Twitter by Reckless_CL: interesante http://digg.com/u17h0g

  18. Sebass [#]

    Gracias a buscar información de MooTools llegue al sitio csslab.cl, gran aporte este sitio se fueron a favoritos de una y espero estar leyendo continuamente. Quizás con el tiempo les hecho una mano.

Deja tu Comentario

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

CSSLab