El universo JavaScript en Drupal 7

El universo JavaScript en Drupal7 7 Ramon Vilar Gavaldà

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

Í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

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, ﬁelds, 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

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

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

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

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

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

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

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 signiﬁcado que en PHP Drupal.checkPlain© 2011_ 12

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 ﬁcheros .info: scripts[] = drupalday.js Podemos añadir JS en un módulo con drupal_add_js(): ﬁcheros y JS inline drupal_add_js($data = NULL, $options = NULL);© 2011_ 13

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

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

Buenas prácticas en nuestros desarrollos (I) Sin Firebug no somos nadie! Siempre punto y coma al ﬁnal de cada línea! Si no lo hacemos, tendremos problemas con el agregador de JS. Cuidado con las comas colgadas al ﬁnal 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

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

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

http://ymbra.com	395
http://drupalday.es	82
http://www.aldibier.com	32
http://www.seavtec.com	16
http://2011.drupalday.es	13
http://aldibier.com	8
http://www.drupalday.es	7
url_unknown	4
http://www.ymbra.com	3
http://ymbra.cat	2
http://paper.li	1
http://translate.googleusercontent.com	1

El universo JavaScript en Drupal 7

by Ymbra

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 564

Statistics

El universo JavaScript en Drupal 7 Presentation Transcript