Estos últimos días he tomado la decisión de publicar el código no sin antes terminar al menos algunas puntos primordiales como documentación

Publicar en primera instancia me ayudará a ponerme metas y responsabilidades, y también aclarar mis ideas. Cuando uno escribe con la convicción de que hay personas que lo leen reafirma conceptos para poder transmitir de la mejor manera posible el mensaje al lector. Por lo menos, así lo veo yo.
Y en segunda instancia, algo no seguro, poder recibir críticas, correcciones y porque no participación de otras personas.

Esta publicación estará, sin lugar a dudas, llena de correcciones que inevitablemente surgirán.

Objetivos

Implementar un plugin para symfony que nos permita incorporar a nuestros proyectos un generador similar al generator de propel pero con algunas mejoras sustanciales:

• Widgets de Formularios adaptados a las tecnologías usadas.
• Uso de AJAX.
• Implementación de una UI (Interface de Usuario).
• JavaScript no intrusivo.

Tecnologías

Inevitablemente el plugin deberá tener un buen soporte del lado cliente. En este caso utilizaremos mooTools.

Metodología de funcionamiento

La idea global de la metodología de funcionamiento es implementar un pequeño motor en el cliente (JS) con la capacidad suficiente de ‘entendimiento’  con las convenciones de funcionamiento de los scripts generador por Propel en el servidor.

Esta historia recién empieza …

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.

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 …

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.

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.

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.

No van a dejar títere con Cabeza …

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

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 |