El universo JavaScript     en Drupal7 7       Ramon Vilar Gavaldà
Quién soy                                Socio fundador de Ymbra                                Desarrollador Drupal      ...
Qué es Ymbra               http://ymbra.com/© 2011_                            3
Í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 nues...
Drupal 7 y JavaScript    En Drupal 7 el número de líneas de código JS ha crecido    exponencialmente.    Gran número de fu...
De qué nos sirve todo esto en el núcleo    Sólo está para las funcionalidades implicadas o nos aporta    algo más?        ...
El objeto JS Drupal    Aunque parezca mentira, hay mucho desconocimiento de    este objeto global.    No es nuevo en Drupa...
El objeto JS Drupal	  -­‐	  Drupal.behaviors    Es la forma de añadir comportamiento a una página o a    un elemento.(func...
El objeto JS Drupal	  -­‐	  Drupal.settings     Es normal querer pasar información de servidor a cliente     (de PHP a JS)...
El objeto JS Drupal	  -­‐	  Drupal.theme	  (I)    Atención!! El theming también ha llegado al JS!    Todo HTML añadido a l...
El objeto JS Drupal	  -­‐	  Drupal.theme (i II)    Ahora en nuestro módulo/tema podemos reescribir la    salida.          ...
El objeto JS Drupal	  -­‐	  Drupal.t    Drupal.t() funciona exactamente igual que la función    t() de PHP(function($)	  {...
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 .in...
Formularios dependientes    En Drupal 7 Form API añade nuevas características cómo    #states$form[‘registration’][‘equipm...
AJAX    En las mejoras de Form API se añade #ajax    Se añade un gran conjunto de comandos para gestionar    los datos aña...
Buenas prácticas en nuestros desarrollos (I)    Sin Firebug no somos nadie!    Siempre punto y coma al final de cada línea!...
Buenas prácticas en nuestros desarrollos (i II)    Es una buena práctica intentar siempre escribir behaviors    para aprov...
Conclusiones    Normalmente tendemos a menospreciar el JS y aveces es    un cuello de botella a nivel de rendimiento en cl...
Preguntas?             hola@ymbra.com© 2011_                       19
Upcoming SlideShare
Loading in …5
×

El universo JavaScript en Drupal 7

5,930 views

Published on

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.

Published in: Technology
  • Be the first to comment

El universo JavaScript en Drupal 7

  1. 1. El universo JavaScript en Drupal7 7 Ramon Vilar Gavaldà
  2. 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 dehttp://ymbra.com/blogs/ramon Drupal.cathttp://twitter.com/rvilar • Administrador de la traducciónhttp://drupal.org/user/293298 catalana de Drupal© 2011_ 2
  3. 3. Qué es Ymbra http://ymbra.com/© 2011_ 3
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. Preguntas? hola@ymbra.com© 2011_ 19

×