Empezar con mootools

[Andrés Gattinoni]

Che, tengo ganas de empezar a ver algunas cositas de Mootools. Alguien tiene alguna guía interesante para empezar? La doc parece bastante completa pero es documentación de las clases, yo quiero una guía que me dé una idea de la forma apropiada de trabajar con el fw (un "get started guide").

Particularmente quería hacer una sencillo div con drag & drop (bueno, en realidad solo drag), y por ahí usar algún efecto para abrirlo y cerrarlo.

Gracias!

Salu2

A

[Cesar Casas]

Hola andy, antes que nada, felicitaciones por meterte en el mundo, que segun mi experiencia, es la mejor de todas en JS.


Antes que nada, te explico algunos puntos importantes.


La version actual de mootools es la 1.2, peeeero, es como nuevita, y muy diferente a la mootools 1.1. El problema es serio, ya que son tan diferentes, que casi nada de la 1.1 funciona en la 1.2 (a mi entender, debieron haberla sacado como 2.0, y no como 1.2).

Bien, aclarado eso, sigamos.


En el site de mootools, tendras la doc de la 1.1 en docs111.mootools.net.

Si, explica cada clase en si, pero en la seccion "demos" tenes ejemplo, incluso uno shipping card con drag and drop.


Rapidito:

Cualquier objeto puede ser "draggable" haciendo $('idObjeto').makeDraggable();

La clase Drag esta muy buena, y tiene una serie de propiedad y eventos re grosos.


Vision rapida de Mootools (JS en general).

Todas las clases tiene propiedades y eventos (ademas de metodos claro), pero lo maravilloso de JS es que una propiedad puede ser una funcion (callback), y los eventos son callbacks... basicamente, todo es una puta funcion.


Ejemplo :


new ClaseLoca({
    'onStart': function(){}
   ,'propiedad': function(){}
}).Meotod1().Metodo2();



Creando elemtos con mootools:

new Element('div', {'class':'pepe', styles:{'width: 100}}).addEvent('mouseover', function(e){ e.setStyle('height', 44}).makeDraggable();


La escribi en el aire, no se si anda, pero esa es la idea.


Cualquier cosa pregunta pa.

De paso, te paso mi clase SuperAjax (no quiero criticas al nombre), que te permite usar WOE :D...

--
Cesar Casas
Tec. Telecomunicaciones
WebMaster / DBA
Tel: +5411-4765-1938

[Demián Andrés Rodriguez]

jaja SuperAjax que nombre choto!!! jaja!!

2008/10/26 Cesar Casas <lort...@gmail.com>

--
Demián Andrés Rodriguez

[Demián Andrés Rodriguez]

La mia se llama SuperCocot y es mejor!!

2008/10/27 Demián Andrés Rodriguez <demi...@gmail.com>

--
Demián Andrés Rodriguez

[acido || cuatroxl.com]

Donde está la clase SuperAjax ????


--
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::: J i m m y  C o l l a z o s :::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
desarrollado web; estándar, accesible, escalable
----------------------------------------------------------------------------
                                                               acido69

[Cesar Casas]

aca va

[Pablo Morales]

Aca va la mia :)

Recibe una url, y lo que devuelve lo guarda en el id response :D



function getContentsForAjax( url, response )
{
    new Ajax( url, {
        method: 'get',
        update: $( response )
    }).request();   

--
Pablo Morales
celular: +54 11 15 3658 0390
blog: http://blog.pablo-morales.com
linkedln: http://www.linkedin.com/pub/9/528/21
skype: moralespablof
gtalk: pablof...@gmail.com

[Pablo Morales]

Me gusta la abstraccion al pedo

2008/10/27 Pablo Morales <pablof...@gmail.com>

[Cesar Casas]

La la clase Events.js es para mootools 1.1, la Events2.js es para mootools 1.2, pero necesita de compatibleLib.js



ejemplo de implementacion:

var Categories={};

Categories.getAll=function(callback){
    var sa=new SuperAjax();
    sa.setCmd('getAllCategories');
   
    var call={
            'func':function(response, params){
               
                params.call = params.call || function(){};
                params.call(response.params);
            }
            ,'params':{'_this':this, 'call': callback}
        };
       
    sa.args={};
    sa.callBack(call);
    sa.send();
}


    Categories.getAll(function(params){
           
                var categories=params.categories;
               
                $('category_id').innerHTML="";
               
               
                var option=new Element('option', {
                        value:0
                        }).setText("Seleccione una categoria");
                       
                    $('category_id').adopt(option);   
                    option.defaultSelected =true;
                   
                   
                for(var i=0; i<categories.length; i++){
                    var option=new Element('option', {
                        value:categories[i].id
                        }).setText(categories[i].name);
                       
                    $('category_id').adopt(option);   
                       
                }
        });





Saludos.

El 27 de octubre de 2008 11:12, acido || cuatroxl.com <aci...@gmail.com> escribió:

[Tio Oscar]

Un rar tiras careta!!!!

Como se nota que no solo usas windows XP, sino que te gusta que los que usemos SO's descentes tengamos que usar software privativo para abrir un fucking file comprimido.... aguante el gzip, bz2, 7z....

2008/10/27 Cesar Casas <lort...@gmail.com>

--
El Tio ~ http://blog.exodica.com.ar

[Pablo Morales]

jajjajajajaa. Maldito extremista

yum install rar
aptitude install rar

[Tio Oscar]

Corrijo: unrar... pero es freeware, no es open source

[Hugo Arregui]

es mas limitado, pero tb existe:

apt-get install unrar-free

2008/10/27 Tio Oscar <tio...@gmail.com>:

[Pablo Morales]

con rar funca tambien

Por lo menos para yum no me acuerdo con aptitude puede ser

2008/10/27 Hugo Arregui <hugo.a...@gmail.com>

[Gorosito Gonzalo]

apt-get install rar unrar zip unzip bzip2

listo ! :)

2008/10/27 Pablo Morales <pablof...@gmail.com>:

--
#######################################
# Gonzalo Gorosito
# Web Programmer / Sys Admin
# http://www.ggorosito.com.ar
#######################################

[Pablo Morales]

Igual si empezas con ese criterio, me parece que lo que corriste en el ultimo web and beer eran MP3!!!!

[Tio Oscar]

apt-get install p7zip

o

apt-get install u7zip

no me acuerdo como era el paquete... es el mejor sistema de compreción el 7zip, es libre y mucho mejor que bz2 y rar

2008/10/27 Gorosito Gonzalo <xgon...@gmail.com>

[Tio Oscar]

Si, emepeze a pasar mi coleccion de mp3 a ogg, pero se me hacia dificil para pasarlo al reproductor, asi que me hice un script, pero es un garron xD

2008/10/27 Tio Oscar <tio...@gmail.com>

[Cesar Casas]

Como se van al carajo las conversaciones!!!!!

2008/10/27 Tio Oscar <tio...@gmail.com>

[Tio Oscar]

Si posta.. hasta ahora lo que vengo viendo de mootools, la verdad que esta muuy bueno

2008/10/27 Cesar Casas <lort...@gmail.com>

[Demián Andrés Rodriguez]

Los de mootools son todo' puto' loko, banco Prototype & Scriptaculous a muerte.
Si necesito un efecto loco que no lo tengo me lo invento y listo, nada de tener todo servidito... eso es para los programadores vagos que no quieren programar.

uy q lindos los smilies!!!

--
Demián Andrés Rodriguez

[Cesar Casas]

1) los efectitos locos para vagos estan en jquery, no en mootools
2) prototype es un dinosaurio hermano, actualizate de una vez.

[Andrés Gattinoni]

A ver...

La idea sería empezar con Mootools 1.2 así no tengo que aprender todo de nuevo otra vez jaja. Además no encuentro dónde bajar la versión anterior.

Lo que quiero hacer es un pequeño popup o ventanita draggable con un formulario de contacto.

Me bajé el core de mootools y los extras para Slide y Drag. E hice una pequeña clase como para probar.

El div con el formulario se crea, pero el drag no lo logro hacer andar. Aparentemente en la versión 1.2 no existe más el makeDraggable. Existe makeResizable, pero no es draggable.

Esto es lo que tengo:

var ContactForm = new Class({
            'form': null,
            'initialize': function () {
                this.form = document.createElement('div');
                this.form.style.border = "1px solid #000000";
                this.form.innerHTML = "<form action='' method='POST'>";
                this.form.innerHTML += "<p>Nombre <input type='text' name='name' /></p>";
                this.form.innerHTML += "<p>E-Mail <input type='text' name='mail' /></p>";
                this.form.innerHTML += "<p>Mensaje:</p>";
                this.form.innerHTML += "<p><textarea name='message'></textarea></p>";
                this.form.innerHTML += "<p><input type='button' value='Enviar' /></p>";
                this.form.innerHTML += "</form>";
                var s = new Drag($(this.form));
                document.body.appendChild(this.form);
            }, 
            'show': function () {
                this.form.style.display = 'block';
            }, 
            'hide': function () {
                this.form.style.display = 'none';
            }  
        });


function showContactForm ()
{
    var form = new ContactForm();
    form.show();
}

Algunos comentarios:

1 - Hay alguna clase/metodo específico de mootools para crear elementos en el DOM? No lo encontré así que lo hice a mano.
2 - Cuál sería la forma más mootoolica de ubicar el div en una parte en particular de la pantalla?
3 - Critiquen todo lo que quieran sobre la clase que no tengo idea de si está bien o como el orto jajajaja.


Para colmo no sé por qué garcha no me está andando el Firebug. Esto es la muerte!

Saludos,

A

2008/10/27 Cesar Casas <lort...@gmail.com>

[Demián Andrés Rodriguez]

jaja que villada esos concats en masa.
yo con el dinosaurio prototype hago document.body.insert("cacho de html") y listo se resume en una linea todo ese choclo.

2008/10/27 Andrés Gattinoni <andresg...@gmail.com>

--
Demián Andrés Rodriguez

[Andrés Gattinoni]

Jajajaja bueno, convengamos que document.body.insert("20 líneasde html") no es sinónimo de prolijidad.
Yo lo hice así porque me daba mucha paja crear cada elemento, pero no me gusta mucho que digamos.
Podría cambiar tanto concat por un gran string correctamente segmentado/indentado de todas formas...

2008/10/27 Demián Andrés Rodriguez <demi...@gmail.com>

jaja que villada esos concats en masa.

[Andrés Gattinoni]

Ah soy un boludo, ahí me di cuenta de un par de cosas.

1 - Tenía que bajar Drag.Move para que funcione makeDraggable.
2 - Me dí cuenta de como usar Element para crear un elemento del DOM.

Ahora así funciona (me falta darle estilo y definir la posición inicial).

var ContactForm = new Class({
            'form': null,
            'initialize': function () {

                this.form = new Element('div', {
                        'id': 'contactForm',
                        'class': 'contactForm',
                        'styles': {
                            'border': '1px solid black',
                            'cursor': 'pointer'
                        },
                        'html': "<form action='' method='POST'>" +
                                "<p>Nombre <input type='text' name='name' /></p>" +
                                "<p>E-Mail <input type='text' name='mail' /></p>" +
                                "<p>Mensaje:</p>" +
                                "<p><textarea name='message'></textarea></p>" +
                                "<p><input type='button' value='Enviar' /></p>" +
                                "</form>"
                    });
                this.form.makeDraggable();

                document.body.appendChild(this.form);
            },
            'show': function () {
                this.form.style.display = 'block';
            },
            'hide': function () {
                this.form.style.display = 'none';
            }
        });


function showContactForm ()
{
    var form = new ContactForm();
    form.show();
}

Lo que me faltaría son dos cosas (principalmente):

1 - Ver si hay alguna forma más mootoolica de hacer el document.body.appendChild();
2 - Que me digan qué cosas se pueden mejorar del código.

Gracias.

Saludos!

A

2008/10/27 Andrés Gattinoni <andresg...@gmail.com>

[Cesar Casas]

Justo me ahorraste mandarte el codigo, me sente en la pc unicamente para mandartelo, ya que vi tu mail anterior antes de cenar.


Sobre tus preguntas

1) document.body.adopt(elemento)
2)

aver...

algunos tips


$('element').setStyle('width',100);
$('element').setStyle('position','absolute');

$('elementi').setStyles({
'width':100
,'position':absolute
});


$('element').addClass('className');
$('element').removeClass('className');
$('element').hasClass('className');



Ahora bien, esta piola que crees el DOM por JS; pero esto es casi un 500% mas lento segun los estudios que hicimos en wixi.


Te recomiendo crear todo en html, dentro de un div (mas que nada por lo draggable) y mostrarlo cuando te hace falta.


Algunos tips

$$('#objecto .class').each(function (e){
   e.setStyle('border','1px solid #CC0000');
});


$$('#objecto .class').each(function (e){
   e.addEvent('focus', function(f){
   f.setStyle('border', '1px solid #FF0000);
});
});



En tu caso, no se si se justifica usar una "clase" como tal, proba con esto:


var myForm={};

var myForm.html={ $('formOculto'); };
myForm.show=function(){ ... }

myForm.submit=function(){ ... }



Otra cosa, en un mail anterior, te mande ejemplos de woe y hasta como crear elementos con mootools... LEEME!!!!

[Andrés Gattinoni]

Mmm ok, gracias por los tips. Ya cambié lo del adopt.
Lo de la clase y todo eso, en realidad más bien la idea es aprender a usar un poco el mootools. No es para nada crítico, así que no hace falta que sea óptimo.

2008/10/27 Cesar Casas <lort...@gmail.com>

[Demián Andrés Rodriguez]

Che sorry pero pesimo tip este..

$$('#objecto .class').each(function (e){
   e.setStyle('border','1px solid #CC0000');
});

es lo mas prolijo pero menos optimo q hay porq creas una funcion anonima por cada iteracion...

lo de crear nodos por metodos del DOM si es mas lento por eso conviene un innerHTML o un metodo que inserte un nodo a partir de un fragmento de html.

2008/10/27 Andrés Gattinoni <andresg...@gmail.com>

--
Demián Andrés Rodriguez

[Andrés Gattinoni]

Ahora lo hice un poco más estático (asi de paso controlo que no se creen muchos forms jeje).
El tema es que cuando el div es draggable no puedo completar el formulario de adentro ni presionar los botones jajaja
Una maravilla.

Hay algún método tipo $(element).makeInnerContentWork();?
jeje

var ContactForm = {};
ContactForm.form = null;
ContactForm.init = function () {

    this.form = new Element('div', {
            'id': 'contactForm',
            'class': 'contactForm',
            'styles': {
                'border': '1px solid black',
                'cursor': 'pointer'
            },
            'html': "<form action='' method='POST'>" +
                    "<p>Nombre <input type='text' name='name' /></p>" +
                    "<p>E-Mail <input type='text' name='mail' /></p>" +
                    "<p>Mensaje:</p>" +
                    "<p><textarea name='message'></textarea></p>" +
                    "<p><input type='button' value='Enviar' /></p>" +

                    "<p><input type='button' value='Cerrar' onclick='ContactForm.hide()' /></p>" +
                    "</form>"
        });
    this.form.makeDraggable();
    document.body.adopt(this.form);
};
ContactForm.show = function () {
    if (ContactForm.form == null) {
        ContactForm.init();
    }
    ContactForm.form.style.display = 'block';
}

ContactForm.hide = function () {
    if (ContactForm.form != null) {
        ContactForm.form.style.display = 'block';
    }
}

2008/10/28 Demián Andrés Rodriguez <demi...@gmail.com>

[Cesar Casas]

Eso por que sos un villa que hace al form draggable... tenes que usar la logica, en una ventana, lo draggable es el title, en este caso tenes que aplicar el mismo concepto.

Creas un div como "title", otro con el form dentro, y el div de title es el draggable.

Esto de debe a que el evento mousedown es el evento padre, y pues todo te garcha.

Sino la otra ya es usar eventos combinados, donde seria un mousedown, mas un mousemove, parando el evento anterior, creando un semaforo de control, y ahi lanzar el drag.move a mano (como lo hace casi todos que necesitan mas de 1 evento sobre el objeto draggable).

[Demián Andrés Rodriguez]

Es un draggable boludo!!!!!! no tenes que programarte un sistema operativo en js!!!!!! no podes decirle esas pavadas!!!!! semaforo de control???? WHAT THE FUCK?????? chabon por favor no me hagas irte a cagar a trompadas

2008/10/28 Cesar Casas <lort...@gmail.com>

--
Demián Andrés Rodriguez

[Andrés Gattinoni]

Mmm en realidad si te fijas el código lo draggable no es el form sino el div que tiene el form, porque yo quiero que puedas agarrar de cualquier lado para poder arrastrarlo. Pero uno pensaría que como el form aparece sobre el div, no tendría por qué interpretar que cuando hago click sobre el botón estoy intentando hacer click sobre el div...

[Demián Andrés Rodriguez]

Eso de no poder hacer click en los botones es un bug del firefox. Si mootools fuera lo suficientemente inteligente deberia cancelar el drag si se inicia en un control de formulario.... aunque no tiene mucho sentido dragear desde un boton...

2008/10/28 Andrés Gattinoni <andresg...@gmail.com>

--
Demián Andrés Rodriguez

[Cesar Casas]

Aver...


1) esta bien que todo sea Draggable, por que es la herencia del evento
2) Si queres hacer un drag and drop como la gente (con varios evento sobre el mismo elemento) si o si te hace falta un semaforo, ya que tenes que manejar los eventos en forma independiente, y lanzar el drag a mano, no cancelarlo, eso lo sabe cualquiera que haya programado Desktop's Web.

3) Mootools resuelve varios "bug" de la forma de manejar eventos de IE y FF, incluso la pelotudes de la forma de contabilizar que boton fue "izquierdo, derecho, medio, etc".

[Andrés Gattinoni]

anyways, volví a darle unos segundos de mi vida a esto y me pregunto... suponiendo que hago un title y que sea ese el que tenga el drag... cómo hago para que arrastre todo el div?

O sea, yo tengo algo así:

<div id="contactForm">
    <p id="contactLabel">Contacto</p>
    <form>
    </form>
</div>

Cómo hago (mootoolianamente) para que cuando draggeo el contactLabel me mueva todo el contactForm?

A

2008/10/28 Cesar Casas <lort...@gmail.com>

[Jonathan Muszkat]

Draggea el .parentNode

Saludos.-

2008/11/5 Andrés Gattinoni <andresg...@gmail.com>

--
Jonathan Ariel Muszkat
Mail: mus...@gmail.com
Msn: jony...@hotmail.com
Móvil: (011)15-4-399-6363
Skype: jony.musky
Linkedin: http://www.linkedin.com/in/musky

[Cesar Casas]

Ni da escribirte el code, pero aca te paso algo:

http://demos111.mootools.net/Drag.Cart



Basicamente vos lo que tendrias que hacer, es el title draggable, despues al iniciar el drag, lo detenes (event.stop()) y forzas el star de un nuevo drag de todo el contenedor principal.



En este ejemplo que te pase, basicamente hace eso.


Saludos.

[Andrés Gattinoni]

Ya estoy más cerca:

ContactForm.init = function () {
    this.form = new Element('div', {
            'id': 'contactForm',
            'class': 'contactForm',
            'styles': {
                'border': '1px solid black',
                'cursor': 'pointer'
            },

            'html': "<p id='contact_label'><strong>Contacto</strong></p>" +

                    "<form action='' method='POST'>" +
                    "<p>Nombre <input type='text' name='name' /></p>" +
                    "<p>E-Mail <input type='text' name='mail' /></p>" +
                    "<p>Mensaje:</p>" +
                    "<p><textarea name='message'></textarea></p>" +

                    "<p><input type='submit' value='Enviar' /> " +

                    "<input type='button' value='Cerrar' onclick='ContactForm.hide()' /></p>" +
                    "</form>"
        });

    document.body.adopt(this.form);
    $('contact_label').addEvent('mousedown', function (e) {
            e = new Event(e).stop();
            var drag = this.parentNode.makeDraggable();
            drag.start(e);

    });
};

Me faltaría poder activar el draggeo del parentNode pero sin que me cague los inputs del formulario.
Una vez que lo muevo ya no me permite hacer nada.

2008/11/5 Cesar Casas <lort...@gmail.com>

[Demián Andrés Rodriguez]

Proba en IE, deberia andar aunque parezca mentira.

2008/11/5 Andrés Gattinoni <andresg...@gmail.com>

--
Demián Andrés Rodriguez

[Cesar Casas]

usa el evento beforeStart  , simplemente hacele un removeEvents y listo, no mas problemas ;)

Tambien es bueno ponerle un evento mousedown a los campos, y eliminar los eventos drag de todos lados (del container).

Es el bello mundo de los eventos :D

[Andrés Gattinoni]

Cómo sería eso? A qué elemento tendría que aplicar el beforeStart?

2008/11/5 Cesar Casas <lort...@gmail.com>

[Cesar Casas]

el evento beforeStart es implementado en la clase Drag, la cual es la que genera el makedraggable. Por lo que solo es "valido" para los objetos draggables.


$('objetoDraggable').addEvent('beforeStart', function(el){

});

[Pablo Morales]

Encontre esta doc, que esta buena explica un poco los $, $$ y algunas cosas mas

http://cssgallery.info/a-beginners-mootools-select-and-create-elements/

2008/11/5 Cesar Casas <lort...@gmail.com>

skype: pablofmorales
gtalk: pablof...@gmail.com