Presentación expuesta en el marco del Drupal Day Barcelona 2011 e impartida por Ramon Vilar sobre las novedades en materia JavaScript que trae Drupal 7 y cómo podemos aprovecharlas.

1. El universo JavaScript
en Drupal7 7
Ramon Vilar Gavaldà

2. Quién soy
Socio fundador de Ymbra
Desarrollador Drupal
Desarrollador frontend
Miembro activo de la comunidad
drupalera:
Ramon Vilar Gavaldà • Miembro de la junta de
http://ymbra.com/blogs/ramon Drupal.cat
http://twitter.com/rvilar
• Administrador de la traducción
http://drupal.org/user/293298 catalana de Drupal
© 2011_ 2

3. Qué es Ymbra
http://ymbra.com/
© 2011_ 3

4. Índice
Drupal 7 y JavaScript
De qué nos sirve todo esto en el núcleo
El objeto JS Drupal
Cómo añadir JS a nuestro Drupal
Formularios dependientes
AJAX
Buenas prácticas en nuestros desarrollos
Conclusiones
© 2011_ 4

5. Drupal 7 y JavaScript
En Drupal 7 el número de líneas de código JS ha crecido
exponencialmente.
Gran número de funcionalidades JS añadidas: overlay,
machine-name, fields, etc.
Nuevas bibliotecas en el núcleo con extras de
funcionalidades:
• jQuery 1.4.4, jQuery UI 1.8.6, jQuery Cookie 1.0,
jQuery Once 1.2, jQuery BBQ 1.2, Farbastic
© 2011_ 5

6. De qué nos sirve todo esto en el núcleo
Sólo está para las funcionalidades implicadas o nos aporta
algo más?
drupal_add_library(‘system’,
‘farbastic’);
Library API: hook_library y hook_library_alter
function
drupalday_library()
{
$libraries
=
array();
$libraries[‘drupalday_library’]
=
array(
‘title’
=>
‘Drupal
Day’,
‘website’
=>
‘http://drupalday.es’,
‘version’
=>
‘1.0’,
‘js’
=>
...,
‘css’
=>
...,
‘dependencies’
=>
array(array(‘system’,
‘ui.dialog’)),
);
return
$libraries;
}
© 2011_ 6

7. El objeto JS Drupal
Aunque parezca mentira, hay mucho desconocimiento de
este objeto global.
No es nuevo en Drupal 7 pero sí que han cambiado
algunas cosas. Mucha documentación en misc/drupal.js
A tener en cuenta (en seguida lo explico):
• Drupal.behaviors
• Drupal.settings
• Drupal.theme
• Drupal.t
© 2011_ 7

8. El objeto JS Drupal
-­‐
Drupal.behaviors
Es la forma de añadir comportamiento a una página o a
un elemento.
(function($)
{
Drupal.behaviors.drupalDay
=
{
attach:
function(context,
settings)
{
$(‘#logo’,
context)
.append(‘<h2>El
Drupal
Day
mola
mogollón!</h2>’);
}
}
})(jQuery);
Qué nos aporta? Funciones de attach y detach:
Cuando se añade un fragmento HTML vía AJAX, se
ejecutan todos los behaviors pasando el fragmento
cómo contexto. Lo mismo pasa con los detach.
© 2011_ 8

9. El objeto JS Drupal
-­‐
Drupal.settings
Es normal querer pasar información de servidor a cliente
(de PHP a JS).
Drupal.settings nos permite hacer precisamente esto.
drupal_add_js(array(‘drupalDay’
=>
‘DrupalDay
rulez’),
‘setting’);
alert(Drupal.settings.drupalDay);
$variables
=
array(
‘drupalDay’
=>
array(
‘sponsors’
=>
‘Muchas
gracias!’,
‘liders’
=>
‘Muchas
gracias
aún
más!’,
),
);
alert(Drupal.settings.drupalDay.liders);
© 2011_ 9

10. El objeto JS Drupal
-­‐
Drupal.theme
(I)
Atención!! El theming también ha llegado al JS!
Todo HTML añadido a la página se debería hacer
mediante una función de theming.
(function($)
{
Drupal.theme.prototype.slogan
=
function(text)
{
return
‘<h2>’
+
text
+
‘</h2>’;
}
Drupal.behaviors.drupalDay
=
{
attach:
function(context,
settings)
{
$(‘#logo’,
context)
.append(Drupal.theme(‘slogan’,
‘Drupal
mola!’));
}
}
})(jQuery);
© 2011_ 10

11. El objeto JS Drupal
-­‐
Drupal.theme (i II)
Ahora en nuestro módulo/tema podemos reescribir la
salida.
(function($)
{
Drupal.theme.slogan
=
function(text)
{
return
‘<p
id=”slogan”>’
+
text
+
‘</p>’;
}
})(jQuery);
© 2011_ 11

12. El objeto JS Drupal
-­‐
Drupal.t
Drupal.t() funciona exactamente igual que la función
t() de PHP
(function($)
{
Drupal.theme.prototype.slogan
=
function(text)
{
return
‘<h2>’
+
Drupal.t(‘DrupalDay
es
@great’,
{‘@great’:
text})
+
‘</h2>’;
}
})(jQuery);
Las variables se pueden pasar con @, ! y %; con el mismo
significado que en PHP
Drupal.checkPlain
© 2011_ 12

13. Cómo añadir JS a nuestro Drupal
Sólo a modo de repaso...
Podemos añadir JS en un tema a través de los
ficheros .info:
scripts[]
=
drupalday.js
Podemos añadir JS en un módulo con drupal_add_js():
ficheros y JS inline
drupal_add_js($data
=
NULL,
$options
=
NULL);
© 2011_ 13

14. Formularios dependientes
En Drupal 7 Form API añade nuevas características cómo
#states
$form[‘registration’][‘equipment’]
=
array(
‘#type’
=>
‘checkboxes’,
‘#options’
=>
drupal_map_assoc(array(t(‘Chairs’),
t(‘’)PC))),
‘#title’
=>
t(‘What
do
you
need?’),
‘#states’
=>
array(
‘visible’
=>
array(
‘:input[name=”room”]’
=>
array(‘value’
=>
t(‘Study
Room’)),
),
),
);
Si quereis más: AJAX y Conditional Fields en D7
© 2011_ 14

15. AJAX
En las mejoras de Form API se añade #ajax
Se añade un gran conjunto de comandos para gestionar
los datos añadidos vía AJAX
ajax_command_after
ajax_command_alert
ajax_command_append
ajax_command_before
...
Si quereis más: AJAX y Conditional Fields en D7
© 2011_ 15

16. Buenas prácticas en nuestros desarrollos (I)
Sin Firebug no somos nadie!
Siempre punto y coma al final de cada línea! Si no lo
hacemos, tendremos problemas con el agregador de JS.
Cuidado con las comas colgadas al final de arrays u
objetos! IE nos dará algún que otro susto
Funciones anónimas para evitar problemas de scope en
variables.
Sobretodo, acordaos de declarar las variables! Puede ser
una buena práctica hacerlo siempre al inicio de la función.
© 2011_ 16

17. Buenas prácticas en nuestros desarrollos (i II)
Es una buena práctica intentar siempre escribir behaviors
para aprovecharnos de la gestión que hace Drupal.
Si el JS de nuestro módulo toma cierta notoriedad,
hagamos un objeto global y construyamos una biblioteca.
Parece una locura pero no es tan complejo.
Y para terminar pero no menos importante... cuidado
con los selectores jQuery! $(‘p.foo’) mejor que $
(‘.foo’) y $(‘#bar’) mejor que $(‘p#bar’). Ah!! Y
pasemos siempre el contexto! $(‘p.foo’,
context)
http://api.jquery.com es nuestra amiga
© 2011_ 17

18. Conclusiones
Normalmente tendemos a menospreciar el JS y aveces es
un cuello de botella a nivel de rendimiento en cliente.
Cuidado con el JS que añadimos en nuestros proyectos. a
veces es mejor picar algo a mano que empezar a añadir
bibliotecas extra.
Mucho nuevo JS en el núcleo. Potencia a tope!!
La Form API + AJAX nos abre un nuevo horizonte
Y aún falta ver lo que nos añadirán con módulos
contribuidos...
© 2011_ 18

19. Preguntas?
hola@ymbra.com
© 2011_ 19