Es por eso que valerio anuncia que a partir de ahora Mootools será conocido como jTools. Hay que recordar que este framework esta escrito en Javascript por eso aparece una “j” al principio y se deja de banda todo el tema de las vacas (por eso desaparece Moo, de la onomatopeya en ingles).

Además, este cambio de nombre también afecta a Mootools More que pasa a ser jMore, Mootools Core a jCore y Aroon renombrara en breve su blog Clientcide a jCide. Por otra parte, en la próxima versión de jTools desaparece el soporte para IE 6.

Desde mi punto de vista, creo que el cambio es positivo y le dará un nuevo empuje al proyecto, lastima que el nuevo nombre escogido se asemeje tanto a otro framework existente. ¿Alguien podría pensar que jTools es una herramienta o plugin de jQuery? esperemos que no.

En general, la acogida por parte de la comunidad ha sido buena y sin falta de humor. A continuación os dejo algunos de los comentarios más graciosos:

• ¡Larga vida a jTools!
• ¿Esto quiere decir que dejaremos de beber leche?
• Ahora es el momento que jQuery se convierta en MooQuery…
• Podríamos crear un teléfono llamado iMoo creado por el equipo de jTools…
• Noooooo, no podéis dejar de lado a IE6, pero si es el mejor navegador jamás creado!!!!

¿y tú, crees que será positivo el cambio?

• ¡MooTools 1.2 ya ha sido publicado!
• Mootools creara un directorio de Plugins
• Moo.rd + Mootools = Amor
• Personaliza tus checkboxes y radio buttons con MooForms
• Cambios y novedades en Moo.rd
• Moo.rd 1.3.1: La primera demo oficial
• Organiza tus códigos con Snippely
• Como utilizar las clases de Mootools
• ¿Qué habrá de nuevo en Mootools 1.2 Beta?, el Elemento de almacenamiento

Aaron Newton (miembro del equipo de desarollo de Mootools), ha publicado el siguiente video (en ingles) de la charla que dio durante 1h y 20m sobre el panorama general de Mootools y lo que tiene que ofrezer. Aunque hace tiempo que se impartió esta demostración, hasta ahora solo estava disponible el archivo de la presentación (PDF).

Si estas familiarizado con Mootools es probable que no veas nada nuevo, tal  y como advierte Aaron en su blog. Sin embargo, si eres un recien iniciado y tienes un buen listening, te animo a que le eches un vistazo.

Mas informacion de todos los webcast que tuvieorn lugar en The AJAX experience (2008).

• No existen artículos relacionados.

Pues bien, el equipo de Mootools preocupado por que los usuarios puedan seguir dando a conocer su trabajo, ha decidido recopilar toda la información de plugins compatibles solo con Mootools 1.2 en un directorio que próximamente estará habilitado, por ello, si eres autor de un plugin no dudes en enviar un correo electrónico a plugins@mootools.net con la siguiente información:

• Nombre del Plugin
• URL del Plugin (recomiendo tener una demo online)
• Descripción del plugin (una sola línea)
• Autor del plugin y (opcional:) URL de su página web personal.

Esta medida es temporal hasta que vuelvan a reestablecer los foros o cualquier otro tipo interactivo de comunicación.

Leer el anuncio original

• ¡MooTools 1.2 ya ha sido publicado!
• ¿Qué habrá de nuevo en Mootools 1.2 Beta?, el Elemento de almacenamiento
• jTools, el nuevo nombre para MooTools
• Ya ha sido publicado moo.rd 1.3.1
• Moo.rd + Mootools = Amor
• Error en Element.send con Mootools 1.2 beta 2
• Personaliza tus checkboxes y radio buttons con MooForms
• Cambios y novedades en Moo.rd
• Moo.rd 1.3.1: La primera demo oficial
• Como utilizar las clases de Mootools

Algún dia tenia que llegar y (por fin) ha sido hoy. Gracias al esfuerzo de Valerio Proietti y toda la comunidad detrás de este brillante framework, ha sido publicada la nueva versión 1.2

Aunque la página web oficial de Mootools esta sufriendo reformas (supongo que por nuevo rediseño del aspecto visual). Solo podemos acceder a la portada, el centro de descargas y a la nueva documentación.

• jTools, el nuevo nombre para MooTools
• Mootools creara un directorio de Plugins
• ¿Qué habrá de nuevo en Mootools 1.2 Beta?, el Elemento de almacenamiento
• Ya ha sido publicado moo.rd 1.3.1
• Moo.rd + Mootools = Amor
• Personaliza tus checkboxes y radio buttons con MooForms
• Cambios y novedades en Moo.rd
• Moo.rd 1.3.1: La primera demo oficial
• Organiza tus códigos con Snippely
• Como utilizar las clases de Mootools

En la versión estable de Mootools (actualmente v1.1), el código Javascript para el ejemplo de Ajax.Form, seria el siguiente:

<script type="text/javascript">
window.addEvent('domready', function(){
  $('myForm').addEvent('submit', function(e) {
    /**
    * Prevent the submit event
    */
    new Event(e).stop();

    /**
    * This empties the log and shows the spinning indicator
    */
    var log = $('log_res').empty().addClass('ajax-loading');

    /**
    * send takes care of encoding and returns the Ajax instance.
    * onComplete removes the spinner from the log.
    */
    this.send({
      update: log,
      onComplete: function() {
        log.removeClass('ajax-loading');
      }
    });
  });
});
</script>

Pero si probamos el código de arriba con las librerias beta veremos que no funciona y existen errores. Buscando por los Foros de Mootools di con la solució. El usuario Cost publicó el siguiente código (que funciona):

<script type="text/javascript">
window.addEvent('domready', function(){
  $('myForm').addEvent('submit', function(e) {
    /**
    * Prevent the submit event
    */
    new Event(e).stop();

    /**
    * This empties the log and shows the spinning indicator
    */
    var log = $('log_res').empty().addClass('ajax-loading');

    var sender = new Request();
    sender.onSuccess = function(responseText, responseXML){
	  log.set('html', responseText);
	  log.removeClass('ajax-loading');
	};
    sender.send({data: this, url: this.get('action')});
  });
});
</script>

Más información (en ingles): form.send() problem in 1.2beta2

• Mootools creara un directorio de Plugins

MooForms esta inspirado en el script de Ryan Fait y ha sido provado y comprobado que funciona en:

• Internet Explorer 7, 6 & 5.5
• Firefox 2
• Opera 9
• Safari 2
• Konqueror

Demo | Descargar | Más información

Ejemplo de utilización

Cargamos las librerias en el HEAD:

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

Llamamos y creamos la clase:

<script>
window.addEvent('domready', function() {
       myFrom2 = new mooForms('myForm', {
       imageDir: './images/',
       checkboxImage: {image: 'checkbox.gif', width: 16, height: 20},
       radioImage: {image: 'radio.gif', width: 16, height: 20},
       spacer: 'spacer.gif',
       inputs: ['checkbox', 'radio'],
       labelPosition: 'left'
    });
});
</script>

El formulario XHTML:

<form id="myForm">
<div>
<input type="checkbox" name="checkbox[]" value="1" checked="checked" /><label for="#">option 1</label>
<input type="checkbox" name="checkbox[]" value="1" /><label for="#">option 2</label>
<input type="checkbox" name="checkbox[]" value="1" /><label for="#">option 3</label>
</div>
<p>some text</p>
<div>
<input type="radio" name="radio1" value="1" /><label for="#">option 1</label>
<input type="radio" name="radio1" value="1" /><label for="#">option 2</label>
<input type="radio" name="radio1" value="1" /><label for="#">option 3</label>
</div>
</form>

• jTools, el nuevo nombre para MooTools
• Mootools creara un directorio de Plugins
• ¡MooTools 1.2 ya ha sido publicado!
• Moo.rd + Mootools = Amor
• Cambios y novedades en Moo.rd
• Moo.rd 1.3.1: La primera demo oficial
• Como utilizar las clases de Mootools
• ¿Qué habrá de nuevo en Mootools 1.2 Beta?, el Elemento de almacenamiento

Articulo Original: MooTools Classes: How to use them
Autor: Valerio de http://blog.mootools.net/
TRaducido por: Xavier Gómez

Automóviles

Entonces, ¿Qué es una clase? Una clase es una fábrica de coches. Una fábrica que arroja un número infinito de automóviles.

Si tienes que hacer un viaje, y luego otro, y luego otro, probablemente utilizarás el mismo coche una y otra vez. Sólo si decides cambiar algo en tu coche, como por ejemplo el motor, o el color, o los materiales de los asientos, entonces, necesitarás un nuevo coche.

Hagamos un ejemplo fictício totalmente fuera de lugar, y imaginemos que compras un automóvil de la tienda de coches! Quiero decir que compraré un Smart:

var mySmartCar = new Car({model: 'smart'});

Ahora que tengo mi coche, aparcado en mi garaje virtual. Demos una un viaje virtual!

mySmartCar.goTo('Washington DC');

¡Ese viaje estuvo genial!, vayamos a la ciudad de Nueva York:

mySmartCar.goTo('New York');

Como puedes ver, estoy usando el mismo coche para ir a Washington DC y a la ciudad de Nueva York. Están geográficamente cerca, así que mi coche Smart será suficiente. ¿Qué sucederá si tengo que cruzar Rusia que es un país frio? Necesitaré otro coche, un coche más grande y poderoso. Eso es exactamente cuando debo utilizar “new” otra vez.

var myBigCar = new Car({model: 'Jeep'});

Una vez creado, utilizemoslo:

myBigCar.goTo('Russia').goTo('China');

No pensava que ir a China fuese tan fácil.

Clases

En MooTools tenemos clases para realizar diferentes tipos de acciones. Tenemos clases que tratan los datos (Request) o clases que muestran efectos visuales (Fx) y muchos más de los que no voy hablar hoy aquí.

Fx.Morph, por ejemplo, es tu fábrica y por lo tanto, Fx.Morph hace coches. Vamos a comprar un coche ahora: Quiero un coche que tenga una duración de 1000 ms, y quiero que quede vinculado al elemento HTML llamado “element”:

var myMorph = new Fx.Morph(element, {duration: 1000});

Ahora tengo un coche, que nosotros llamamos Instance. Vamos a utilizarlo para cambiar la altura y anchura a 200 para el elemento previamente creado:

myMorph.start({height: 200, width: 200});

Nada más fácil.
En estos días, veo el mismo error que se comete una y otra vez: La gente compra un automóvil, y hacen un solo viaje con él:

new Fx.Morph(element, {duration: 1000}).start({height: 200, width: 200});

Normalmente, esto se atribuye a un evento de click, que hace las cosas aún peor:

element.addEvent('click', function(){    new Fx.Morph(this, {duration: 1000}).start({height: 200, width: 200});

});

Bueno, esta no es la forma de vida de como MooTools funciona! Al igual que en la vida real, no hay necesidad de comprar un coche en cada viaje que realizas, a menos que desees cambiar significativamente las propiedades de este coche. Este enfoque de usar y tirar es erróneo en muchos sentidos.

En primer lugar, es ineficiente en el uso de la memoria, ya que se instancia una nueva clase cada vez que se hace click en el botón. En segundo lugar, es también ineficiente en velocidad, ya que se llama al constructor de la clase cada vez que se hace click en el botón. En tercer lugar, la utilización de este enfoque hace imposible aprovechar las ventajas de las propiedades de la Instancia.

En la Clase Fx hay una serie de propiedades y controles que existen para ver si el efecto está en ejecución, y una serie de opciones que puedes definir para determinar el comportamiento de las posteriores llamadas de arranque si anteriormente ya existía uno en ejecución.

Esta es la forma de escribir correctamente el ejemplo anterior:

var myMorph = new Fx.Morph(element, {duration: 1000});element.addEvent('click', function(){

myMorph.start({height: 200, width: 200});

});

De esta manera, creamos la Instancia una sola vez, y ¡se vuelve a reutilizar cada vez que el usuario hace click en el botón! No se estropeará el efecto por la culpa del abuso de varios clicks, y nuestro OCD tendrá un descanso.

Ocurre lo mismo con la Solicitud de clases. ¿Qué ocurre si envio la misma petición varias veces? ¿Debería cancelar la última? ¿Debería enviar ambos? ¿Debería ponerlos en cola?

Si no utilizas correctamente los instanciaciones de las clases, cada vez se hará una nueva solicitud. Lo mismo sucede con Fx: un nuevo fx en el mismo elemento se iniciará al mismo tiempo, y básicamente solo conseguirás estropear toda la animación.

MooTools no es Script.aculo.us

Este enfoque de “usar y tirar” se utilizó (y sigue siendo utilizado) en Script.aculo.us.

Como un usuario novato de scriptaculous, siempre luché con el problema de “iniciar múltiples llamadas (instanciaciones)”, y más a menudo que yo debía, tome ventaja en la opción de onComplete (afterFinish, en Script.aculo.us) para establecer flags, y verificarlas luego en mis eventos de click, a fin de evitar las ejecuciones múltiples en el mismo tiempo.

Esta es exactamente la razón por la que decidí escribir mi propia biblioteca de efectos, llamado moo.fx (que posteriormente se convertiría en MooTools), de modo que podrían utilizar las clases – y de sus istanciaciones, como objetos reutilizables.

Esto no es para criticar el enfoque de Script.aculo.us. Dado que la biblioteca está diseñada para funcionar de esa manera, que es exactamente la forma en la que debe administrarse. MooTools sin embargo, no está diseñado para trabajar de esta manera, y el uso de este con el mismo modo que Script.aculo.us es un error.

• jTools, el nuevo nombre para MooTools
• Mootools creara un directorio de Plugins
• ¡MooTools 1.2 ya ha sido publicado!
• Moo.rd + Mootools = Amor
• Personaliza tus checkboxes y radio buttons con MooForms
• Cambios y novedades en Moo.rd
• Moo.rd 1.3.1: La primera demo oficial
• ¿Qué habrá de nuevo en Mootools 1.2 Beta?, el Elemento de almacenamiento

Articulo original (en ingles): What’s New in 1.2: Element Storage
Autor: Tom de http://blog.mootools.net
Traducido por: Xavier Gómez

Otra característica nueva que se ha incorporado en la última versión de MooTools es el Element Storage (elemento de almacenamiento). Este artículo describe el uso de esta gran novedad, así como la razón por la que se desarrolló, y cómo se puede utilizar para mantener tus aplicaciones organizadas y eficientes.

¿Qué es todo esto del elemento de almacenamiento?

El desarrollo de aplicaciones avanzadas de JavaScript, es a veces beneficiosa para asociar atributos o propiedades adicionales a los elementos DOM. Los quales siempre hemos sido capaces de utilizar como contenedores para el almacenamiento de todo tipo de datos, aunque esta técnica genérica tiene algunos inconvenientes. Si bien los problemas asociados a esta técnica son casi exclusivamente los problemas causados por Internet Explorer, que sin embargo, deben ser tratados.

Observemos el siguiente ejemplo sencillo:

var element = $('myElement');
element.effectInstance = new Fx.Tween(element, 'color');
element.customProperty = 'someProperty';

element.effectInstance;
//the Fx.Tween instance
element.customProperty;
//'someProperty'

Como sabemos, a IE no le gusta cuando los objetos se almacenan como atributos de Elemento, y la propiedad effectInstance se fuga si no es administrado manualmente. Otro de los problemas que hemos visto es que cuando se accede a innerHTML de cualquier elemento padre de nuestro elemento, IE devolverá propiedades simples (como strings, números, etc) junto con las propiedades esperadas. Esto significa que customProperty sería copiado, lo que podría plantear un problema si fuese el único atributo personalizable. Es evidente que de los dos casos, la gestión de memoria es nuestro mayor problema en este punto, pero ambas son cuestiones a considerar.

¿Que es lo que va hacer Moo?

MooTools se utiliza para almacenar eventos y atributos personalizados directamente en las propiedades de los elementos llamados $events y $attributes. MooTools separa manualmente las propiedades de estos elementos de la descarga de la página.

Echemos un vistazo a nuestro ejemplo anterior, esta vez el almacenamiento de los elementos se halla en la variable $attributes

var element = $('myElement');
element.$attributes.effectInstance = new Fx.Tween(element, 'color');
element.$attributes.customProperty = 'someProperty';

element.$attributes.effectInstance;
//the Fx.Tween instance
element.$attributes.customProperty;
//'someProperty'

En este ejemplo no se producen fugas o los efectos adversos del primera ejemplo, pero ¡no es aconsejable utilizarlo! También, a veces, se cuelga el navegador alahora de descargar, tratando de borrar todas esas cosas. De todos modos este estilo de código no encaja con el resto de MooTools, por lo que hemos propuesto una solución mejor.

Cuando accedemos a un elemento, queremos ser capaces de almacenar y recuperar las propiedades de los elementos. Pero, ¿por qué atribuir estas propiedades directamente al elemento? Si se utiliza alguna forma de almacenamiento externo, no tendríamos que preocuparnos por la limpieza de los valores al descargar la página, las cosas irían más rápido, y las fugas de memoria serían una cosa del pasado.

Una solución digna de MooTools

Element.Storage es totalmente nuevo en MooTools 1.2. Es básicamente un Hash externo que almacena todas las propiedades y eventos personalizados para cada uno de los elementos con los que interactúa.
Echemos otra mirada a nuestro ejemplo anterior, esta vez utilizando el nuevo Element.Storage API:

var element = $('myElement');
element.store('effectInstance', new Fx.Tween(element, 'color'));
element.store('customProperty', 'someProperty');

element.retrieve('effectInstance');
//the Fx.Tween instance
element.retrieve('customProperty');
//'someProperty'

Tenga en cuenta que los eventos y las acciones ya no se asignan directamente a los Elementos. Todo se almacena en el Hash exterior, y administrado por MooTools, así que como desarrollador ya no tienen nada de qué preocuparse.

Cómo funciona (y para que lo estamos utilizando)

Para aquellos que estén interesados, les animo a que echen un vistazo al código fuente. En el fondo, todos los elementos que interactúan o se utilizan cuando se trabaja con MooTools reciben un número de identificación único (ID). Esta identificación que, en realidad, esta adjunta al elemento, luego sirve como clave (key) en el Element.Storage Hash.
Queremos que MooTools sea lo más rápido posible, por lo que hacemos un montón de memoization. En el fondo, la idea es no crear algo hasta la primera vez que sea necesario, pero luego cachearlo para su inmediato uso posterior. Muchos de ustedes ya han probado las versiones beta de MooTools 1.2 y se han divierto con el nuevo Elemento shortcuts. Todos estos shortcuts utilizan la nueva API de almacenamiento para hacer las cosas tan fluidas y eficientes como nos es posible.

Ejemplos avanzados

Elemento:retrieve actualmente acepta un segundo parámetro opcional que actuará como el valor por defecto para almacenar otro valor si no existe previamente. A continuación, recuperamos el valor tal y como se esperaba.

$('myElement').retrieve('defaultValue', 'Some Default Value');
//stores and returns 'Some Default Value' if the key doesn't previously exist

Además, muchos usuarios han preguntado por el namespacing del Elemento de almacenamiento. Hemos respondido diciéndoles que esto actualmente ya permite eso desde el momento en que se puede almacenar objetos y Hashes. Veámos el siguiente ejemplo.

var element = $('myElement');
var data = element.retrieve('galleryData', {});
data.id = 16;
data.source = '/images/16.jpg';
data.title = 'Some Title';
//later
$('myElement').retrieve('galleryData');
//{ id: 16, source: '/images/16.jpg', title: 'Some Title' }
$('myElement').retrieve('galleryData').id;
//16

Las posibilidades son infinitas. Nos encantaría conocer que a todo el mundo le gusta esta nueva función, así como la manera en que la usan en sus aplicaciones. ¡En mi próximo artículo hablaré un poco más sobre cómo MooTools utiliza el elemento de almacenamiento Element Storage para todos los impresionantes nuevos elementos shortcuts como por ejemplo Element:highlight!

– Ciao for now!

• Mootools creara un directorio de Plugins
• ¡MooTools 1.2 ya ha sido publicado!
• jTools, el nuevo nombre para MooTools
• Ya ha sido publicado moo.rd 1.3.1
• Moo.rd + Mootools = Amor
• Personaliza tus checkboxes y radio buttons con MooForms
• Cambios y novedades en Moo.rd
• Moo.rd 1.3.1: La primera demo oficial
• Como utilizar las clases de Mootools