Drupal y jQuery: principios básicos

Qué es jQuery

jQuery es una librería Javascript de código abierto que ayuda a desarrollar funcionalidades complejas tanto en Javascript como en Ajax (Asynchronous JavaScript + XML). Facilita la interacción de los diferentes códigos cliente y proporciona un desarrollo basado en objetos y modular para realizar aplicaciones más interactivas y con comportamientos más aparentes. Así que es una librería a utilizar tanto por aquellos que empiezan con javascript, ya que es más sencillo de utilizar para desarrollar Ajax, como por aquellos que tengan experiencia utilizando lenguajes de cliente, en este caso facilitará el desarrollo y acelerará los tiempos de implementación. A través de jQuery se puede acceder al código DOM (Document Object Model) de las páginas HTML o xHTML y manipular sus elementos, así como cambiar propiedades de las CSS, reaccionar ante eventos o facilitar el uso de efectos y transiciones, entre otras cosas. Además, es modular y se puede extender mediante la gran cantidad de plugins existentes que complementan y habilitan funcionalidades extra que van desde efectos drag and drop a multitud de presentaciones de datos en forma de carrusel, de acordeon, etc.

Conceptos básicos de jQuery

No es el objetivo de esta entrada ser una guía de jQuery, para esto hay recursos magníficos como la propia documentación de jQuery o visual jQuery que proporciona una visión gráfica e interactiva de todas las funciones y eventos que podemos utilizar, aún así creo que es bueno que hable de un par de conceptos básicos para que, si alguien que no ha visto el uso de jQuery lee este artículo, al menos pueda entender los ejemplos. La parte más básica de la librería es la "función" $, que representa el contexto de jQuery, por ejemplo, para añadir una propiedad css a un elemento de una página HTML, bastaría con esta sentencia:

$('p.clase_elemento').css('color', 'blue');

Con este código, el elemento o elementos de tipo p (párrafo) que tengan la clase (clase_elemento) cambiarán su color de texto a azul. También es posible encadenar sentencias, por ejemplo para cambiar el texto de un título y además cambiar alguna propiedad de css:

$('div.contenido h2').html('texto cambiado).css('font-size', 20);

Este código reemplazará el texto del elemento o elementos de tipo h2 que estén dentro de alguna capa (div) con clase 'contenido', el nuevo texto será 'texto cambiado' y además cambiará el tamaño del mismo a 20. Utilizando jQuery también podemos disparar acciones ante determinados eventos, por ejemplo, en el click a un link.

$('#ocultate a').click(function() { $(div.timido).hide(); });

Con el código de aquí arriba, cuando pulsemos (evento click) en los enlaces (anchors) que estén contenidos dentro del elemento con el id 'ocultate', los divs con la clase 'timido' se ocultarán al haberles invocado la función hide(). Además de toda la nueva funcionalidad de jQuery, se puede utilizar el código javascript como en cualquier fichero normal de tipo .js. Podéis encontrar un listado de eventos, efectos, acciones y todo lo que se puede hacer con jQuery en la documentación que he mencionado más arriba.

Drupal 6 y jQuery

Desde la versión 5, allá por 2006, se ha incluido jQuery en el core de Drupal, convirtiéndose así en la librería "oficial" de desarrollo en javascript y Ajax para módulos y plugins en aplicaciones de Drupal. Antes de incluir jQuery, otras librerías como Dojo o Prototype fueron consideradas, pero jQuery fue elegido gracias a su estabilidad, a su tamaño ligero, y sobre todo a la colaboración de su creador, John Resig, facilitando que la licencia de la librería permitiese integrarla en Drupal. Más sobre la historia de jQuery y Drupal. La versión de jQuery agregada en el core de Drupal varía según si es Drupal 5, que incluye jQuery 1.0, 1.1 o 1.2 o Drupal 6, que incluye jQuery 1.2 o 1.3 en sus últimas subversiones. De todas formas, el módulo jquery update permite actualizar la versión de jQuery de las diferentes versiones de Drupal.

Añadiendo ficheros jQuery

La función central para añadir ficheros con código jQuery (.js) dentro de Drupal es drupal_add_js() (referencia). Con esta función podemos añadir ficheros para un módulo, un theme o incluso pasar variables desde el código PHP a jQuery. Por ejemplo, para añadir un fichero en un theme, podemos utlizar esta función dentro de la plantilla:

drupal_add_js('path/fichero.js', 'theme');

También se puede añadir un fichero javascript a un módulo con una llamada parecida:

drupal_add_js('path/fichero.js', 'module');

Una función muy útil para añadir ficheros javascript es drupal_get_path, que sirve para recuperar la ruta de un theme o de un módulo para poder añadir el fichero js.

Drupal Settings

También es posible añadir variables al javascript desde el código php de Drupal, esto se hace también con drupal_add_js, pero esta vez con la opción settings, por ejemplo: 10, ); drupal_add_js(array('mi_modulo' => $mivariable), 'setting'); ?> Y será accesible en el código jQuery en el objeto Drupal.settings.mi_modulo.valor_variable.

Drupal Behaviors

Normalmente los ficheros de javascript jQuery se inician con estas sentencias, para que el código que se carga y ejecuta siempre se haga cuando el documento DOM haya sido cargado.

$(document).ready(function(){ //codigo javascript });

En Drupal 5 se hace una llamada al objeto javascript Drupal para saber si el javascript propio de Drupal ha sido cargado:

if (Drupal.jsEnabled) { $(document).ready(function () { //código javascript }); }

Pero en Drupal 6 aparecen los behaviors, cuya función es readjuntar el código para facilitar el desarrollo de Ajax. Al utlizar behaviors, permitimos que nuestro código se vuelva a incluir después de llamadas asíncronas y nos ahorra el trabajo y los problemas de incluirlo de nuevo.

Drupal.behaviors.nombreUnicoBehavior = function (context) { //código javascript };

El nombre de nuestro behavior debe ser único, de lo contrario, se solaparán los behaviors al recargarse. Es posible forzar la recarga de todos los behaviors definidos de nuestra aplicación de Drupal utilizando Drupal.AttachBehaviors(); pero también podemos forzar que se readjunte solamente alguno en particular: Drupal.AttachBehaviors(nombreUnicoBehavior);. Más información sobre behaviors.

Traducciones usando t en jQuery

Una de las grandes ventajas de la integración de jQuery dentro de Drupal es la facilidad que tenemos para incluir cadenas traducidas en nuestros códigos javascript. El problema de usar javascript y que se pierda la traducción se ha terminado con Drupal.t(). Tan fácil como eso. Esto mostrará un mensaje de alerta traducido según el idioma definido por el usuario:

alert(Drupal.t('My translated string'));

E incluso se pueden incluir parámetros para la traducción:

var parametros = { "@cursiva": "usando @ sale en cursiva", "!filtrado": "usando ! se muestra todo el código HTML tal cual", "%safe": "se elimina el código HTML" }; 
alert(Drupal.t("Se muestra el texto @cursiva, !filtrado y %safe", parametros));

Links usando l en jQuery

De un modo similar, se muestran los links utilizando Drupal.l() en los ficheros de jQuery para Drupal.

Drupal.l(texto, url);

Así, para mostrar un link interno:

Drupal.l('Contacto', 'contact');

O para mostrar un link externo, se puede usar un tercer parámetro opcional:

Drupal.l('Cambrico.net', 'http://cambrico.net', {'absolute' : true});

Módulos complementarios

  • jQuery Update - Para incorporar la última versión de jquery en nuestra instalación de Drupal. Es recomendable mirar la cola de issues para comprobar si hay incompatibilidades antes de instalar el módulo.
  • jQuery UI - Añade el UI (User interface) de jQuery para poder utilizar efectos y animaciones proporcionadas por jQuery UI.
  • jQuery plugins - Permite cargar multitud de plugins que luego podemos utilizar para el desarrollo.
  • jQuery menu - Dinamiza los menus jerárquicos.
  • jQuery lightbox - un módulo con funcionalidad simple de lightbox basado en jquery en lugar de prototype.
  • jQuery Dag Drop Blocks - Habilita la posibilidad de arrastrar y soltar bloques en otras regiones de la página.
  • jQuery Impromptu - Incorpora funcionalidades para mejorar el desarrollo de usabilidad de un sitio incluyendo el plugin jquery impromptu.

Información adicional

categorías: 

Comentarios

Ahora me explico las ojeras que hacías esta mañana en la DRUPALCON Apría 2009 ...

Saludos
Isaac E. Cec

PD: me apunto el artículo para leerlo mañana entre sesión y sesión...

Narices... las prisas.
En el comentario anterior me ha quedado el nick a medias.

;-)

gracias amigo. Esta página me sirvió como base para mis consultas de javascript con Drupal. Muy útil el contenido y los links.

Jaume, espero que te haya gustado el artículo

@gustavo me alegro que te haya parecido útil

[...] Introducción a jquery para Drupal [...]

Gracias por la explicación de como se debe utilizar jquery con Drupal estaba buscando un post en referencia a tema, me sacado de mis dudas lo bueno de compartir en la red es que ganas en conocimientos.

Hola, si necesitás jQuery 1.4/1.5 para vuestro web os recomiendo este patch
http://drupal.org/node/775924#comment-3010750

Hola,

estoy añadiendo un fichero js a mi portal en Drupal 7, haciendo un drupal_add_js('nombremodulo.js") en mi fichero nombremodulo.module, y cuando se recarga la pagina en el navegador parece que se carga, pero el js no hace nada. A qué puede deberse? Se puede carbar desde le fichero .module el js? hay algún problema al respecto?

gracias!

Añadir nuevo comentario

 
 
 

Creative Commons License
Excepto donde se indique lo contrario, el contenido de este sitio está sujeto a una licencia de Creative Commons.