Mootools y otros frameworks JS

Que es JavaScript?

• JavaScript es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C.

• Al igual que Java, JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia, si bien esta se realiza siguiendo el paradigma de programación basada en prototipos, ya que las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad.

• Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM.

Que es un Framework?

• Marco de trabajo• Son diseñados con el intento de facilitar el

desarrollo de software, permitiendo a los diseñadores y programadores pasar más tiempo identificando requerimientos de software que tratando con los tediosos detalles de bajo nivel de proveer un sistema funcional.

Porque usar un Framework?

• Javascript Cross-browser: compatible con todos los navegadores

• AJAX (Asynchronous JavaScript And XML) : XMLHttpRequest (interfaz empleada para

realizar peticiones HTTP y HTTPS a servidores WEB)• Ventajas de ser un Framework

Ejemplo de XMLHttpRequest sin Framework

if (window.XMLHttpRequest) { this.xmlhttp = new XMLHttpRequest(); if (this.xmlhttp.overrideMimeType) { this.xmlhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE try { this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try { this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { this.xmlhttp = null; } } if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') { this.xmlhttp = new XMLHttpRequest(); if (!this.xmlhttp){ this.failed = true; } } }

Unos cuantos Frameworks• Mootools: "El framework javascript compacto"

http://mootools.net/ • JQuery: "Librería Javascript para escribir menos y hacer más"

http://jquery.com/ • Prototype: "El framework javascript cuyo propósito es facilitar el desarrollo de

aplicaciones dinámicas" http://www.prototypejs.org/

• YUI: "The Yahoo! User Interface Library" http://developer.yahoo.com/yui/

• Dojo: "Experiencias grandes… para cualquiera" http://www.dojotoolkit.org/

• Qooxdoo: "La nueva era del desarrollo web" http://qooxdoo.org/

• GWT Google Web Toolkit: "construye aplicaciones Ajax en lenguaje Java" http://code.google.com/webtoolkit/

• Rico: "Javascript para aplicaciones de Internet de contenido enriquecido" http://openrico.org/rico/home.page

• Ext JS: "Documentación, diseño y código limpio" http://extjs.com/

Más Frameworks

• SproutCore• Spry• JavaScriptMVC• midori• Archetype JavaScript Framework• June Framework• UIZE• SimpleJS• Fleegix.js• The Foo Framework (un framework basado en Prototype): http://foo.riiv.net/ • script.aculo.us (también basado en Prototype): http://script.aculo.us/ • AJS (Framework Javascript ultraligero): http://orangoo.com/labs/AJS/ • ZK (Ajax web framework): http://www.zkoss.org/

Puntos a tener en cuenta cuando eliges un Framework js• Rapidez: los usuarios esperan agilidad a la hora de mostrar la página, da igual

lo bien diseñada que esté o los efectos que muestren. Por ello es muy importante que el framework tenga buen rendimiento y que sea rápido.

• Tamaño del js: el tamaño es importante en dos aspectos: lo que tarda en cargarse en la página y el ancho de banda que consume. Yo añadiría que en los frameworks que te permiten seleccionar que componentes queremos añadir, solo seleccionemos los necesarios. A parte, siempre viene bien comprimir el js.

• Documentación: es como aprender un lenguaje nuevo, da igual que sepas Javascript, no se parecerá demasiado a lo que hayas usado anteriormente. Cuanto mejor esté documentado mejor.

• Comunidad: lo más importante de un proyecto open source es la comunidad que hay detrás de ella. Los miembros de la comunidad aportan ayuda, código, ejemplos y mucho más que nos facilitará el trabajo.

• Módulos: los módulos nos permiten incluir solo las funcionalidades que deseamos, ahorrando en rendimiento.

• Quién lo usa: el hecho de que sitios importantes usen un framework es un reconocimiento a su calidad.

Cual elegir?

• Funcionan diferente dependiendo del navegador y del sistema operativo (velocidad de selectores).

• Ofrecen opciones diferentes (efectos, OO, plugins o módulos, …).

• Los pesos varían dependiendo del Framework, y de los módulos que necesitemos.

• No hay ninguno que eclipse a los demás.

Por que Mootools?

• Y por que no? No hay que cerrarse en banda, sinó probarlos todos.

• No son solo efectos.• Es modular• Se lee como un libro• Va creciendo para ser relativamente joven• Facilidad de programar OO• Fácil creación de elementos (DOM)• Propio gestor de eventos (permite generar nuevos)• Tiene opciones que son muy fáciles• Y tiene plugins y extensiones para hacer lo mismo que

cualquier otro Framework

Descripción de Mootools

• Core: colección de funciones de apoyo de las que hace uso el resto de components.

• Class: es la librería base de MooTools para la instanciación de objetos

• Natives: Colección de mejoras al objeto nativo JavaScript, añadiendo funcionalidades, compatibilidad y nuevos métodos que simplifican el código.

• Element: multitud de mejoras y compatibilidades al objeto HTML• Utilities: utilidades: cookies, JSON, selectors, …• Fx: API avanzada para animar Elements• Request: proporciona una interfaz para peticiones XHR, Cookie y

herramientas para JSON• Plugins

BrowserFeatures:

• Browser.Features.xpath - (boolean) True if the browser supports DOM queries using XPath.• Browser.Features.xhr - (boolean) True if the browser supports native XMLHTTP object.

Engine:• Browser.Engine.trident - (boolean) True if the current browser uses the trident engine (e.g.

Internet Explorer).• Browser.Engine.gecko - (boolean) True if the current browser uses the gecko engine (e.g.

Firefox, or any Mozilla Browser).• Browser.Engine.webkit - (boolean) True if the current browser uses the webkit engine (e.g.

Safari, Google Chrome, Konqueror).• Browser.Engine.presto - (boolean) True if the current browser uses the presto engine (e.g.

Opera 9).• Browser.Engine.name - (string) The name of the engine.• Browser.Engine.version - (number) The version of the engine. (e.g. 950)• Browser.Plugins.Flash.version - (number) The major version of the flash plugin installed.• Browser.Plugins.Flash.build - (number) The build version of the flash plugin installed.

Platform:• Browser.Platform.mac - (boolean) True if the platform is Mac.• Browser.Platform.win - (boolean) True if the platform is Windows.• Browser.Platform.linux - (boolean) True if the platform is Linux.• Browser.Platform.ipod - (boolean) True if the platform is an iPod touch / iPhone.• Browser.Platform.other - (boolean) True if the platform is neither Mac, Windows, Linux nor iPod.• Browser.Platform.name - (string) The name of the platform.

Native y Element

• ARRAY: Each, every, filter , clean , indexOf , map , some , associate , link , contains , extend , getLast, getRandom, include , combine , erase , empty , flatten , hexToRgb , rgbToHex

• FUNCTION, NUMBER, STRING, HASH, EVENT• ELEMENT: constructor , getElement , getElements, getElementById,

Set, get , erase , match , inject , grab , adopt , wraps , appendText , dispose , clone , replaces , hasClass , addClass , removeClass , toggleClass , getPrevious , getAllPrevious , getNext , getAllNext , getFirst , getLast , getParent , getParents , getChildren , hasChild , empty , destroy , toQueryString , getSelected , getProperty , getProperties , setProperty , setProperties , removeProperty , removeProperties , store , retrieve , html, text, tag

• ELEMENT.EVENT, ELEMENT.STYLE, ELEMENT.DIMENSIONS

Eventos de windowCasi siempre vamos a necesitar un disparador:

window.addEvent('domready', function() {     // código que se ejecuta cuando el navegador tiene todo el HTML});window.addEvent('load', function() {     // código que se ejecuta cuando el navegador tiene toda la página web descargada (HTML, CSS, imágenes, JS, Flash, …)});

• $(‘nombre’) : recoge el elemento del DOM que tiene el id=“nombre”

• $$(‘#listado li’) : recoge una colección de elementos li dentro del elemento con id=“listado”

• $$(‘#listado’) : recoge una colección que contiene un elemento con id=“listado”

• $$(‘body a’) : recoge una colección con todos los links del HTML

Selectoresselectors

body div.example, div.note div[class|=dialog]

div #title div[class!=made_up]

body div h1#title div[class~=example]

div p div #title div:not(.example)

div > p ul.toc li.tocline2 p:contains(selectors)

div + p ul.toc > li.tocline2 p:nth-child(even)

div ~ p h1#title + div > p p:nth-child(2n)

div[class^=exa][class$=mple]

h1[id]:contains(Selectors) p:nth-child(odd)

div p a a[href][lang][class] p:nth-child(2n+1)

div, p, a div[class] p:nth-child(n)

.note div[class=example] p:only-child

div.example div[class^=exa] p:last-child

ul .tocline2 div[class$=mple] p:first-child

div[class*=e]

Más selectores

• .getElement();//selects the first child anchor within the element with the ID 'body_wrap' $('body_wrap').getElement('a');

• .getElements();//selects all children with the class 'special_anchor_class' within the element 'body_wrap' $('body_wrap').getElements('.special_anchor_class');

• .getParent();$('child_id').getParent();

• $$('div:even'); $$('div:odd');<div>Even</div><!-- above example would select this element --><div>Odd</div><div>Even</div><!-- above example would select this element •<div>Odd</div>

• Selectors W3C CSS3

Arrays

• .each(); $$('div').each(function() { alert('a div'); }); ['apple', 'banana', 'lemon'].each(function(item, index){ alert(index + " = " + item); });

• $A var myCopy = $A(myArray );

• .getLast();• .getRandom();

Funciones

//Define simple_function as a function var simple_function = function(param){ alert(param); } window.addEvent('domready', function() { simple_function(‘DOM cargado’); });

Eventos

$('id_name').addEvent('click', function(){alert(‘click event');});• Mouseenter, mouseleave, keydown, keypress, keyup

$('myTextarea').addEvent('keydown', function(event){ if (event.key == "k") {alert("This tutorial has been brought you by the letter k.");});});• event.shift (bool), event.control, event.alt, event.wheel, …

MooTools Docs - Plugins/Event$('id_name').removeEvent('mouseleave', mouseLeaveFunction);

Crear elementos

var newElementVar = new Element('div', {'id': 'id_name','text': 'I am a new div','styles': {'width': '200px','height': '200px','background-color': '#eee','float': 'left‘}});

Manipulando elementos

• .get(); $('id_name').get('tag'); // span Id, name, value, href, src, class, text, …

• .set(); $('id_name').set('href', 'http://www.google.com');

Mover elementos

• .inject();var myFirstElement = new Element('div', {id: 'myFirstElement'});var mySecondElement = new Element('div', {id: 'mySecondElement'});var myThirdElement = new Element('div', {id: 'myThirdElement'});

myFirstElement.inject(mySecondElement); <div id="mySecondElement"> <div id="myFirstElement"></div> </div>

myThirdElement.inject(mySecondElement, 'top'); <div id="mySecondElement“> <div id="myThirdElement"></div> <div id="myFirstElement"></div> </div>

'top', 'bottom', 'after’ o 'before'

Estilos de los elementos

• .setStyle(); $('body_wrap').setStyle('background-color', '#eeeeee'); $$('.class_name').setStyle('background-color', '#eeeeee');

• .getStyle(); var styleValue = $('body_wrap').getStyle('background-color');

• .setStyles(); $('body_wrap').setStyles({ 'width': '1000px', 'height': '1000px', 'background-color': '#eeeeee‘ });

• .getStyles();

Bibliografía

• 30 Days of Mootools 1.2• A MooTools Tutorial :: The "Mootorial“• Selectors W3C CSS3• MooTools Docs• Demos