aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

¿Para que quieres un iPhone si puedes tener un movil gusano de Siemens?

¿O uno que parezca una granada?

¿O una golosina? ¿¿o bolsa de gelatina?? 

La diferencia entre todos estos y el iphone es que este ultimo es una realidad y los demás son prototipos que probablemente nunca verán la luz. Aunque algunos tienen que ser una pasada.

Una maravilla de la que Prototype disponía era event::Selectors, una librería que te permite añadir eventos a nuestros nodos mediante el uso de selectores CSS, una forma muy interesante de acceder a estos nodos y cargar el evento que deseamos con nuestra propia funcionalidad.

Prototype:
var Rules = {
   '#icons a:mouseover': function(element) {
     var app = element.id;
     new Effect.BlindDown(app + '-content', {queue: 'end', duration: 0.2});
   }
 }

Ahora Ross de AgileWeb ha migrado esta maravilla para que los usuarios de MooTools podamos acceder a nuestros nodos de una forma mucho más cómoda.

MooTools:
var Rules = {
	'.tabnav a::click': function(element, event) {
		new Ajax('/loadtab', {postBody:'tab='+element.id, onFailure: showFailure}).request();
		event.stop();
	},
	'.tabnav a::mouseover': function(element, event) {
		// Do something
		var myEffect = element.effect('height', {duration: 100, transition: Fx.Transitions.linear});
		myEffect.start(10, 100);
	}
}

[Descargar]

[Demo][Descargar]

Se trata de una simple imagen, no hay enlace de donde descargar.

Actualización:
Pese a que no estába disponible para descargar, accediendo al directorio wp-content/plugins/ del sitio del autor descubrimos que se trata de una modificación del plugins SpotMilk.
[Descargar versión incompleta via CalinSoft]
Actualización 2: El autor me ha pedido que no distribuya el theme ya que aun no está completo. Así que quito el enlace.

A pesar de un nombre algo,… ¿cachondo? El concepto que Pajax nos quiere transmitir es realmente interesante. A primera vista vemos una librería javascript que nos permite realizar llamadas Ajax en las que podemos enviar un objeto JSON. De esta forma estamos definiendo los valores necesarios para que un fichero .php almacenado en el servidor accione una clase y un método que ejecutará una cierta funcionalidad.

Pongamos un ejemplo

 En el ejemplo que nos ponen en la página, vemos una calculadora, a la que le introducimos unos valores y al pulsar sobre la operación que queremos efectuarles esta nos devuelve el valor resultante de dicha operación. En este ejemplo voy a multiplicar 4 x 5.

Al accionar el botón de multiplicación (*) enviamos al servidor el siguiente objeto JSON.

{"id": "56654cd49aefb1514151365f05535f781", "className": "Calculator", "method": "multiply", "params": ["4", "5"]}

En el que podemos ver, los siguientes parámetros.

id: se trata de un id interno para reconocer el objeto.
className: La clase PHP que queremos invocar.
method: Metodo de dicha clase que queremos invocar
params: Parametros que necesita dicha clase para funcionar.

En el fichero .php de destino tendremos el siguiente código que corresponde con el ya solicitado.

<?
class Calculator extends PajaxRemote {
   function add($x, $y) {
      return $x + $y;
   }

   function multiply($x, $y) {
     return $ * $y;
   }

    ...
}
?>

Podemos ver que estamos almacenando la funcionalida de esta multiplicación en el servidor dejándo el cliente lo más pelado posible.

Facilitando las cosas

Además podemos importar las clases PHP con todas sus funcionalidades que serán cargadas de la forma anterior.

Cargamos la clase Calculator

<script type="text/javascript" 
   src="pajax_import.php?Calculator">
</script>

Y en nuestro Javascript disponemos de los métodos de dicha clase que harán una petición en Ajax a la clase anterior y nos retornará el resultado.

<script type="text/javascript">
     var calculator = new Calculator();

     result = calculator.add(2, 3);
</script>

Documentación

Dispone de una documentación bastante pobre, pero queda bastante claro el concepto y la forma de funcionar.

Conclusión

Realmente es una idea muy interesante que nos puede ahorrar muchas líneas de código en nuestro Javascript, y podemos contar con la seguridad extra que nos dá el delegar el trabajo duro al servidor. Para mi es algo en lo que voy a perder unas horas de pruebas 😀

[Demo][Descargar]