Introducción a la librería Javascript Mootools 1.2
Mootools 1.2 es una librería Javascript poderosa designada para facilitar el desarrollo web interactivo de Javascript. Hay muchas cosas que Mootools puede hacer y una de ellas es la creación de extensiones CSS. Por ejemplo, CSS te deja cambiar las propiedades del estado del mouse hover, Javascript te permite reconocer muchos más eventos (click, mouseover, keystrokes, etc.) y Mootools hace de esto algo inimaginablemente fácil de crear.
Para comentarte más, Mootools posee todo tipo de extensiones, las cuales te permitirán no solo cambiar propiedades, también te permitirá “transformar” (morph) propiedades, dándote la habilidad de crear efectos animados increíbles y asombrosos.
Eso es solo un ejemplo de billones, Mootools te permite hacer mucho más. Dentro de los próximos 30 días, vamos a excavar bien profundo dentro de la librería Mootools, explorando todo, desde arrays y funciones hasta FX.Slide y los otros plugines.
Instalación de Mootools 1.2
Primero, descarga e instala la librería Mootools 1.2 Core:
- Descarga la librería Mootools 1.2 Core
- Subre la librería Mootools a tu servidor o a to espacio de trabajo
- Vincula la librería Motools 1.2 en tu etiqueta head:
Agregando la etiqueta Script dentro de tu etiqueta Head
Ahora que estás llamando a Mootools dentro de tu página, necesitas un espacio donde escribir el código. Para ello existen dos opciones:
1. Establece el código entre etiquetas script en el head de tu página:
2. Crea un archivo JavaScript externo y vinculízalo dentro de tu etiqueta head:
A partir de aquí puedes usar ambos métodos. Frecuentemente llamaré las funciones dentro del evento domready dentro de las etiquetas <script>, pero las crearé en un archivo JavaScript externo.
Ponlo en el domready
Las funciones de Mootools deben ser llamadas cuando se cumpla el evento domready.
window.addEvent(‘domready’, function() {
exampleFunction();
});
Ponlo en una función
Puedes construir tu función fuera del domready y posteriormente llamarla.
var exampleFunction = function() {
alert(‘hello’)
};
window.addEvent(‘domready’, function() {
exampleFunction();
});
Descripción de la librería
Para este tutorial, vamos a efectuar una mirada profunda a los componentes de la arquitectura de la librería e ir hacia algunas de las funcionalidades básicas.
Core
Core contiene funciones comunes dentro de la librería Mootools y se encarga de ejecutar tareas comunes así como alimentar muchas funcionalidades pre-existentes (más después). Lo siguiente se hizo como un ejemplo de algunas capacidades de Mootools y no pretende reemplazar la documentación oficial.
- Chequea por un valor (retorna un false si no encuentra un valor o si lo que encuentra es un 0) – $chk(value);
- Retorna un entero aleatorio entre dos valores – $random(min, max);
- Te deja detectar fácilmente navegadores, motores de navegación y capacidades de navegación
Native
Esta sección de la librería también contiene herramientas comunes, dejándote manipular arrays (básicamente una lista de valores u objetos), funciones, números, hashes y eventos. A continuación te muestro parte de las herramientas presnetes en Native:
- Crea un script que se aplicará a cada objeto dentro de un array – .each();
- Adquiere el útimo objeto dentro de un array – .getLast();
- Crea un evento que sucede cada x milisegundos – .periodical();
- Rodea un decimal – .round();
- Convierte los colores RGB en HEX – .rgbToHex();
Class
Una clase JavaScript (en contrastes con una clase CSS), es un objeto reusable con funcionalidad. Para saber más sobre las clases Mootools puedes chequear esta introducción rápida hecha por Valerio (Mootools Classes – How to Use Them). También recomiendo la explicación de David Walsh sobre las clases.
Element
Las clases elemento proveen algunas de las funcionalidades más usables dentro de la librería Mootools. Aquí es donde seleccionas los elementos del DOM, manipulas sus propiedades y posición, y cambias su estilo CSS. A continuación te muestro algunas de las grandes herramientas que Mootools provee para interactuar con elementos del DOM:
- Selecciona el primero de cierto tipo de elemento DOM, ID o clase – .getElement();
- Selecciona todo de un cierto tipo de elemento DOM, ID o clase – .getElements();
- Agrega una clase a un elemento – .addClass();
- Descubre el valor de la propiedad de un elemento – .getProperty();
- Cambia el valor de la propiedad de un elemento – .setProperty();
- Descubre el valor de la propiedad de estilo de un elemento – .getStyle();
- Cambia el valor dee la propiedad de estilo de un elemento – .setStyle();
- Adquiere las coordenadas de un elemento – .getCoordinates();
Utilities
Utilities provee una lógica selectiva refinada, incluye el evento domready, te brinda herramientas para administrar llamadas AJAX, te deja manipular fácilmente cookies e incluso la funcionalidad “swiff”, la cual te permite interactuar JavaScript con ActionScript.
FX
Esta es probablemente, la sección más divertida de Mootools. Con FX puedes crear efectos “tween” y “morph” que dotan efectos de animación a tus objetos DOM realmente impresionantes.
- Crea una transición animada entre dos valores de estilo (ejemplo: Hacer crecer un div con mayor fluidez) – var myFx = new Fx.Tween(element);
- Crea una transición animada entre múltiples y diferentes valores de estilo (ejemplo: Hacer crecer un div con mayor fluidez y cambiar el color de fondo mientras hace el borde más espeso) – var myFx = new Fx.Morph(element);
Request
Contiene herramientas para facilitar el manejo con la funcionalidad JavaScript XMLHttpRequest (AJAX). Además hace el proceso de solicitud/respuesta mucho menos doloroso, Request posee extensiones para trabajar con respuestas HTML o JSON (Javascript Object Notation).
Plugins
Los plugins de Mootools extienden la funcionalidad core inmensamente, dejándote agregar fácilmente avanzadas funcionalidades UI a tus proyectos web. La lista de plugins incluye:
- Fx.Slide
- Fx.Scroll
- Fx.Elements
- Drag
- Drag.Move
- Color
- Group
- Hash.Cookie
- Sortables
- Tips
- SmoothScroll
- Slider
- Scroller
- Assets
- Accordion
El gran momento
Antes de ir por el siguiente tutorial, dedica algún tiempo a mirar la documentación de Mootools. Incluso si no entiendes mucho simplemente léela y absorbe todo lo que puedas. Dentro de los próximos 29 días vamos a escarbar bien profundo dentro de áreas específicas dentro de la librería y vamos a transformar a Mootools en piezas netamente fáciles de digerir, pero primero lo primero: asegúrate y hecha una mirada profunda a todo el menú.
Para aprender más
Un ZIP con todo lo que necesitas para comenzar.
Incluye una copia de la librería core de Mootools 1.2, un archivo simple HTML, un archivo externo JavaScript para tus funciones estilos CSS. El HTML está bien comentado e incluye el evento domready.
Otros tutoriales Mootools
Solo para que los tengas a mano (uno nunca sabe), aquí tienes una lista de otros tutoriales Mootool para ayudarte a comenzar.
Mootools 1.2 Cheat Sheet (o chuleta, como algunos le llaman)
Aquí podrás ver un sumario inmenso de las capacidades de Mootools 1.2. Yo mismo lo imprimí y lo puse justamente en frente de mi PC. En fin, aquí tienes el vínculo a la Cheat Sheet de Mootools 1.2
Foro de Mootools
Si deseas interactuar con otras personas sobre Mootools, chequear códigos de ejemplo o simplemente escarbar un poco dentro de cuestiones específicas, este esel lugar pra ti. Aún es algo joven, pero igual te será de mucha ayuda el foro de Mootools 1.2
Vía | ConsiderOpen
Deja tu respuesta