Download - El universo JavaScript en Drupal 7
![Page 1: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/1.jpg)
Ramon Vilar Gavaldà
El universo JavaScript en Drupal7 7
![Page 2: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/2.jpg)
© 2011_
Socio fundador de Ymbra
Desarrollador Drupal
Desarrollador frontend
Miembro activo de la comunidad drupalera:
• Miembro de la junta de Drupal.cat
• Administrador de la traducción catalana de Drupal
Quién soy
2
Ramon Vilar Gavaldà
http://ymbra.com/blogs/ramon
http://twitter.com/rvilar
http://drupal.org/user/293298
![Page 4: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/4.jpg)
© 2011_
Índice
Drupal 7 y JavaScriptDe qué nos sirve todo esto en el núcleoEl objeto JS DrupalCómo añadir JS a nuestro DrupalFormularios dependientesAJAXBuenas prácticas en nuestros desarrollosConclusiones
4
![Page 5: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/5.jpg)
© 2011_
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
Drupal 7 y JavaScript
5
![Page 6: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/6.jpg)
© 2011_
Sólo está para las funcionalidades implicadas o nos aporta algo más?
De qué nos sirve todo esto en el núcleo
6
Library API: hook_library y hook_library_alter
drupal_add_library(‘system’, ‘farbastic’);
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;
}
![Page 7: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/7.jpg)
© 2011_
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
El objeto JS Drupal
7
![Page 8: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/8.jpg)
© 2011_
Es la forma de añadir comportamiento a una página o a un elemento.
El objeto JS Drupal -‐ Drupal.behaviors
8
(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.
![Page 9: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/9.jpg)
© 2011_
Es normal querer pasar información de servidor a cliente (de PHP a JS).
Drupal.settings nos permite hacer precisamente esto.
El objeto JS Drupal -‐ Drupal.settings
9
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);
![Page 10: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/10.jpg)
© 2011_
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.
El objeto JS Drupal -‐ Drupal.theme (I)
10
(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);
![Page 11: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/11.jpg)
© 2011_
Ahora en nuestro módulo/tema podemos reescribir la salida.
El objeto JS Drupal -‐ Drupal.theme (i II)
11
(function($) {Drupal.theme.slogan = function(text) {
return ‘<p id=”slogan”>’ + text + ‘</p>’;}
})(jQuery);
![Page 12: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/12.jpg)
© 2011_
Drupal.t() funciona exactamente igual que la función t() de PHP
Las variables se pueden pasar con @, ! y %; con el mismo significado que en PHP
Drupal.checkPlain
El objeto JS Drupal -‐ Drupal.t
12
(function($) {Drupal.theme.prototype.slogan = function(text) {
return ‘<h2>’ + Drupal.t(‘DrupalDay es @great’, {‘@great’: text}) + ‘</h2>’;
}})(jQuery);
![Page 13: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/13.jpg)
© 2011_
Sólo a modo de repaso...
Podemos añadir JS en un tema a través de los ficheros .info:
Cómo añadir JS a nuestro Drupal
13
Podemos añadir JS en un módulo con drupal_add_js(): ficheros y JS inline
scripts[] = drupalday.js
drupal_add_js($data = NULL, $options = NULL);
![Page 14: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/14.jpg)
© 2011_
En Drupal 7 Form API añade nuevas características cómo #states
Formularios dependientes
14
$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
![Page 15: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/15.jpg)
© 2011_
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
15
Si quereis más: AJAX y Conditional Fields en D7
ajax_command_afterajax_command_alertajax_command_appendajax_command_before...
![Page 16: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/16.jpg)
© 2011_
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.
Buenas prácticas en nuestros desarrollos (I)
16
![Page 17: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/17.jpg)
© 2011_
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
Buenas prácticas en nuestros desarrollos (i II)
17
![Page 18: El universo JavaScript en Drupal 7](https://reader033.vdocuments.pub/reader033/viewer/2022051323/54820a89b079591a0c8b469c/html5/thumbnails/18.jpg)
© 2011_
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...
Conclusiones
18