23.Apr.2008

Variable de Variable en JavaScript.

Posteado en MooTools, JavaScript a las 13:56 por RetroFOX

Programando en javascript, lenguaje que nunca terminaré de entender a pleno, me vi con la necesidad de generar una variable con el valor de otra variable, similar a la asignación de PHP $$.

Investigué buscando una función o método que nos permita realizar la misma acción para JS y no tuve suerte; por lo que me propuse implementar un pequeño script que haga dicha tarea. Se me ocurrió algo como ...

String.prototype.toVar = function () {
  if (arguments.length) eval(this + ' = \'' + arguments[0] + '\'')
  else eval (this + '= \'\'');
}

Lo que hacemos es agregar un método nuevo al objeto nativo String denominado toVar. Como se utiliza ?. Sencillo:

// Tenemos una variable 'miVar' con el valor 'Nombre'
var miVar = 'Nombre';

// Ahora .. una nueva variable 'Nombre = Damian'
miVar.toVar ('Damian');

La idea es crear una variable donde el nombre de la misma está almacenado en otra variable. Discutiendo dicho método en Foros del WEB. MaBoRaK ha realizado una definición más elegante:

String.prototype.toVar = function (value) {
    window[this]=value || null;
    return null;
    }

Básicamente agrega al objeto window una nueva propiedad con el nombre que nos devuelve la palabra reservada this de valor pasado como parámetro del método. Si no se ha pasado un valor ... value será undefined y la propiedad asignará null (value || null).

Aportamos también el código para MooTools:

String.extend ({
    toVar: function (value) {
        window[this]=value || null;
        return null;
    }
})

Una última aclaración, ambos métodos definen variables globales; es complicado (yo aún no se si se puede) un método que genere una variable local.
Interesante. Gracias Foros del Web y en particular a MaBoRaK.

19.Nov.2007

Clases con JavaScript && MooTools

Posteado en MooTools a las 11:31 por RetroFOX

Vamos a estudiar como implementar clases con javascript y MooTools. Esta será una labor trabada, lenta y engañosa; sobre todo para aquellos (como yo) que no dominamos este lenguaje y estamos acostumbrados a otra sintaxis, por ejemplo PHP.

JavaScript en general es un lenguaje rarito, y en particular a la forma de implementar objetos. Digamos que es el nene mañoso mal aprendido de la familia, y que parece que no va a cambiar.

Técnicamente, un objeto de JavaScript es un array asociativo formado por las propiedades y los métodos del objeto. (Introducción a AJAX).

Tenemos que tener claro el modo de declaración de JS, tanto para variables, arrays, funciones, etc. Este es el punto crucial para no marearnos entre paréntesis, llaves y corchetes. Vamos a empezar de atrás para adelante. Partimos de una definición de clase con MooTools e iremos desmenuzando su complejidad; sería algo así como ingeniería inversa.

Entonces empecemos ...

01.Jul.2007

Como escribir una clase en MooTools

Posteado en MooTools a las 10:26 por RetroFOX


Aaron Newton

How to write a Mootools Class es el título original de un reciente post en ClientSide. Su autor, Aaron Newton nos enseña en 10 sencillos pasos de puro código como crear nuestra propia clase en MooTools.
Realmente útil como enfrentar sin miedos a uno de los cuquitos. La implementación del tutorial en AJAX está muy bien lograda.

Este joven es uno de los desarrollos principales de MooTools, y es impresionante los agregados personales que ha realizado; casi se podría decir que tiene una versión FULL de MooTools en su site.

Así que ... no hay excusas para que empieces a desarrollar tu Moo-Clase.

20.Jun.2007

Sitio MooTools en Castellano

Posteado en MooTools a las 9:13 por RetroFOX


MooTools en Castellano.

Hace un tiempo tuve la iniciativa junto con un amigo en confeccionar un sitio web que sirva de contención para todos los que de a poco nos vemos maravillados por este sencillo y prometedor frameWork.

Esta en funcionamiento un Blog, un Foro y un DOCs. De a poco trataremos de ir mejorando el contenido de los sitios. Se hace muy difícil para nosotros impulsar este proyecto (como todos ...) y remar contra las dificultades diarias pueden a veces hacernos dudar y preguntarnos ... el producto final vale la pena ?.

En fin, toda persona que quiera aportar hasta el más mínimo granito de arena es motivo de satisfacción. Recién estamos en el inicio de esta pendiente ascendente; preguntas, respuestas, consejos, experiencias, ayuda, etc. son acciones que pueden emprender aquellos que les interese este rincón.

Esperemos ... estamos todos invitados.

12.Jun.2007

toggleClass()

Posteado en MooTools, CSS, JavaScript a las 15:55 por RetroFOX

Hasta que aceitemos el sitio dedicado a MooTools iremos publicando paralelamente los artículos que allí se presentan. Esperemos pronto mejorar el servicio.

Inauguramos esta sección de Estudiando MOO. Simplemente daremos ejemplos de uso de las herramientas de MooTools. Vamos a arrancar con toggleClass(); método de Element..

Simple Definición
Agrega o quita el nombre de clase pasado por parámetro al elemento, dependiendo si esta presente o no.

Lo que logramos con esto es jugar con las clases CSS de nuestro elemento nodo dependiendo del estado anterior de las mismas. O sea ... si la clase CSS no está presente en la definición class="miClase1 miClase2 ..." la agrega al listado, y si se encuentra la elimina.
Tengamos en cuenta que es totalmente válido agregar más de una clase CSS a un elemento nodo HTML. la definición class="miClase01 fndOscuro" es correcta.
Entonces ... en este ejemplo asignamos un evento (click) al elemento en cuestión agregando una clase CSS previamente definida.

.clase01, .clase02 {
    background: #DDD;
    border: 1px solid #AAA;
    color: #400;
    padding: 10px;
    width: 150px;
    height: 150px;
    cursor: pointer;
}

.clase02 {
    background: #040;
    color: #AFA;
}

Código CSS

Window.onDomReady(function() {
       
    $('miElemento').addEvent ('click', function () {
        //  toggleamos la clase 'class02'
        $('miElemento').toggleClass('clase02');
        });
        });
});

Código JavaScript/MooTools

El ejemplo final se puede ver en toggleClass.html.
Hasta la próxima.

05.Jun.2007

MooTools y Flash

Posteado en MooTools, JavaScript a las 23:07 por RetroFOX

Contento por la nueva versión 1.11 que han sacado al ciberAire los muchachos de MooTools me entero pispeando los objetivos que tienen planeados para la versión 1.2 (54% en este momento); y me alegro aún más que entre los mismos planean Integración Flash, plugIn Swiff para interactuar con películas flash.

  • Even more optimizations/speed improvements.
  • Flash Integration, Swiff plugin to interact with flash movies
  • Better Safari 3 integration (Leopard Safari).
  • plugins moved to the forge

No van a dejar títere con Cabeza ...

26.May.2007

fValidator

Posteado en MooTools a las 13:37 por RetroFOX

Este interesante PlugIn para nuestro MOO puede ahorrarnos tiempo de programación, código y dolores de cabeza a la hora de validar datos de nuestros formularios.
Personalmente no me simpatiza tener que hacer los filtros para ciertos campos, que si es tipo fecha DD-MM-YYYY o si es edad que no permite números negativos, o si ... haaa ya me cansé de solo pensarlo.
Este demo administra los filtros de los campos que hemos definido dentro del mismo html. Eficiente e interactivo.
La página principal nos explica como implementar esta herramienta a nuestros formularios.
El archivo comprimido pesa 3.77KB, y la versión normal pesa 7.20KB que podemos utilizar para adaptar a nuestros desarrollos.
Al igual que MooTools está desarrollado bajo licencia open source MIT.

Home Page | Demo | Descargar

25.May.2007

Agregar Efecto en SideBar con MooTools

Posteado en MooTools, WordPress a las 20:34 por RetroFOX

Tutorial que nos explica como combinar MooTools con WordPress donde agregar efectos visuales a la barra lateral o sidebar. Hice una captura de video y la subí a YouTube en la cual se puede apreciar el resultado. Un video sencillito ...

21.May.2007

Galería de Imagenes SmoothGallery

Posteado en MooTools a las 11:46 por RetroFOX


SmoothGallery

Vía SentidoWeb encuentro dentro de un compendio de galerías de imágenes este script desarrollado con MooTools. Me gustó mucho la animación fluida al explorar las imágenes; punto crítico en este tipo de aplicaciones. Esta galería da fe de lo que digo. El código está disponible en el site en forma gratuita, el cual cuenta con una guía de instalación, varios ejemplos aplicativos, foro, FAQs, etc ...

Yo lo bajé y probé sin problemas. Un buen script que nos puede ayudar de manera sencilla a dar un acabado profesional a nuestros proyectos.

| Descargar 1.0 tar/gz | Demo | Foro | FAQs | HomePage |

10.May.2007

Ventanas Desplazables con MooTools

Posteado en MooTools, AJAX a las 20:51 por RetroFOX


Ventanas con MooTools.

Estuve trabajando en otro ejemplo de ventanas con MooTools. El artículo final resulta ser interesante. Lo bueno de todo esto es que voy aprendiendo cada día un poco más. Esa transición es algo muy reconfortable para mi.

En fin ... es todo nuestro.

Página Posterior