Trabajar con Ajax usando Mootools y el Framework de Joomla

El mundo del desarrollo web ha evolucionado mucho. Lo que empezó siendo una tecnología sencilla pensada para compartir textos vía internet usando el protocolo HTTP ha desenbocado en una compleja maraña de tecnologías que cada una por su parte ha ido desarrollándose para acabar juntándose en lo que hoy conocemos como la World Wide Web, o mejor dicho, hoy en día, la web 2.0.

La tecnología AJAX es uno de los pilares fundamentales de la Web 2.0, hoy en día casi todas las aplicaciones de internet hacen uso de AJAX y podríamos considerarlo como esencial.
Joomla, no se queda atrás, e incorpora en su framework tecnologías AJAX, más concretamente, hace uso de la librería javascript Mootools, que muchos ya conoceréis, y que pretende hacer la vida más fácil a los desarrolladores. Usar un framework javascript es esencial si no quieres lidiar con problemas como la compatibilidad crossbrowser, que, te lo aseguro, te puede provocar más de un dolor de cabeza.

Vamos a crear un pequeño ejemplo, mostraremos un botón que al pulsarlo, y mediante AJAX, hará una consulta a la base de datos, obtendrá los usuarios registrados en Joomla, y los mostrará por pantalla, todo esto sin recargar la página.

Joomla 1.5 incluye Mootools 1.11 como parte del core, para incluirlo en el head de nuestra página simplemente tendremos que hacer una llamada a la función JHTML::_(‘beaviour.mootools’). No intentes incluir Mootools de manera independiente, y posiblemente acabarás cargando el framework por duplicado, usando esta función nos aseguramos de que solo se cargue una vez.

Una vez incluido el Mootools, creamos una vista en nuestro componente donde mostraremos el botón. A continuación puedes ver el código:

  <?php   defined( '_JEXEC') or die( 'Restricted access'); jimport( 'joomla.application.component.view');  class ajaxViewobtenDatos extends JView { 	function display($tpl = null){ 	 	 	JHTML::_( 'behavior.mootools' ); 	 	$script = <<<EOD 	 	window.addEvent('domready', function() { 		$('mi_boton').addEvent('click', function () { 			new Ajax('index.php?option=com_ajax&task=devuelveAjax&format=ajax', 			{ 				method: 'get', 				onComplete: function(response){ 				var resp = Json.evaluate( response ); 				for(i=0;i> resp.length;i++){ 					document.getElementById('container').innerHTML += resp[i].username + " -> " + resp[i].email + ">br />"; 			        } 				 			} 			}).request(); 		}); 	}); 	 	EOD; 	 	$document =& JFactory::getDocument(); 	$document->addScriptDeclaration($script); 	 	parent::display($tpl); 	} }?>   

En la variable string almacenamos el script javascript, se podría incluir perfectamente en un fichero js externo. Como en este caso hemos creado un script bastante largo, hemos usado una construcción heredoc que nos evita tener que estar escapando los caracteres especiales, como las comillas en el interior del string.

Con el método addEvent creamos manejadores de evento. En este caso creamos una función para que maneje el evento domready, que se dispara una vez el navegador ha creado los objetos DOM y ya puede trabajr con ellos en memoria. Acto seguido, una vez se dispare el evento domready, creamos un manejador para el evento click sobre el botón. El botón tiene que tener el id “mi_boton” para que Mootools pueda encontrarlo mediante el selector. Y ahora viene la madre del cordero, cuando hacemos click sobre el botón, creamos un nuevo objeto de tipo Ajax, que admite 2 parámetros en el constructor.

 

1. Un string con la URL donde se realizará la petición XHTMLHTTPREQUEST
2. Un objeto, en sintaxis JSON con las propiedades necesarias para configurar el objeto.

 

En este caso, solo le estamos indicando que utilice el método GET para realizar la petición y definimos la función que manejara el evento onComplete, que disparará Mootools cuando realiza la petición correctamente. Este manejador tiene un parámetro de entrada, que es un string con el valor devuelto por el servidor, este string es parseado y convertido a JSON mediante el método Json.evaluate, que convierte un string puro y duro a objetos Javascript. En este caso estamos devolviendo un JSON con los resultados de una consulta realizada a la BBDD que obtiene los usuarios registrados en el sistema. Luego con un simple bucle vamos introduciendo los usuarios en un div que tiene que haber creado con el identificador ‘container’. Fijaros que en la misma línea se crea el objeto y se llama al método request, esto no tiene por que ser así, lo mejor es que experimentéis yq eu leyais sobre Mootools para aprender más sobre esta fantástica herramienta.

Finalmente añadimos este script al head de la página usando el método addScriptDeclaration de Joomla.
Si os fijais, se está efectuando una petición al componente ‘ajax’ y al task ‘devuelveAjax’. El parámetro ‘format=ajax’ asegura que el contenido de la consulta sea devuelto en bruto y no con todo el código de la plantilla rodeando nuestro JSON. Vamos a ver como implementar este task en el controlador, y con ello ya tendremos nuestra mini-aplicación lista.

  defined( '_JEXEC' ) or die( 'Restricted access' ); jimport('joomla.application.component.controller');  class ajaxController extends JController {       function display()    {          parent::display();    }     function devuelveAjax(){       $db  = JFactory::getDBO();       $document = JFactory::getDocument();       $sql = "SELECT * FROM " . $db->nameQuote("#__users");       $db->setQuery($sql);       $usuarios = $db->loadObjectList();        $document->setMimeEncoding( 'application/json' );        echo json_encode($usuarios);     } }   

Aquí hay 3 puntos clave a tener en cuenta:

 

1. Obtenemos los datos de los usuarios mediante el objeto JDatabase y el método loadObjetcList
2. Incrustamos la codificación Mime en la cabecera mediante el método setMimeEncoding, esto es importante, si no se hace algunos navegadores puede que no sepan interpretar el código.
3. Usamos la función built-in de PHP json_encode que convierte un objeto PHP en objeto JSON, que Mootools mediante el parser que lleva incorporado podrá leer.

 

Con esto ya hemos realizado los pasos necesarios para crear AJAX con Joomla usando los estándares de programación en Joomla.

Esperemos que os haya servido, os esperamos en próximas entregas en el blog de WebEmpresa.