Embed Size (px)
DESCRIPTION
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.
Citation preview
Ramon Vilar Gavaldà
El universo JavaScript en Drupal7 7
© 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
© 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
© 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
© 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;
}
© 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
© 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.
© 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);
© 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);
© 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);
© 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);
© 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);
© 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
© 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...
© 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
© 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
© 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
![SRIJANold.nasscom.in/sites/default/files/[SRIJAN] - Your Drupal Partner.pdf · Optimizations Identify pages for image and Javascript optimizations Performance Measures - Views caching](https://img.dokumen.tips/doc/110x75/5ec916a3233920076327a27b/srijan-your-drupal-partnerpdf-optimizations-identify-pages-for-image-and-javascript.jpg)
