Características útiles del sistema de Javascript de Drupal

June 18, 2021

Tags: IT Staff ES 2024
Share

Table of contents

Quick Access

drupal

 

Drupal ofrece un sistema de JavaScript muy útil que permite a los desarrolladores de backend comunicarse de manera efectiva con el frontend. Este sistema elimina la necesidad de escribir código auxiliar para transferir datos entre ambos lados, lo cual es especialmente ventajoso cuando la aplicación hace uso extensivo de AJAX. A continuación, se detallan algunas de las características más útiles de este sistema.

 

Ajustes de JavaScript

Una de las características más valiosas del sistema de JavaScript de Drupal es su capacidad para pasar variables dinámicas desde el backend al frontend, de manera que cualquier script del frontend pueda usarlas. Con una sola línea de código, Drupal permite pasar datos sin complicaciones:

 
drupal_add_js(array('ajax_example' => array('some_setting' => 'value')), 'setting'); 

 

En este ejemplo:

  • ajax_example es el namespace donde se encapsulan las variables, evitando posibles colisiones.
  • some_setting es el nombre de la variable en el frontend.
  • El último parámetro indica que estamos agregando variables y ajustes, ya que también se pueden pasar scripts completos.

 

Caso de uso: Gráficas de uso

Imaginemos que necesitamos mostrar gráficas basadas en estadísticas de uso de una aplicación web. Podríamos usar una librería en JavaScript para generar estos gráficos, y en lugar de crear múltiples endpoints para proporcionar los datos en formato JSON o XML, podemos usar el sistema de JavaScript de Drupal. Solo sería necesario generar o leer los datos cuando se crea la página, llamar a drupal_add_js, y ¡listo! El problema está resuelto en una línea de código.

 

Comandos de AJAX

Drupal también ofrece comandos de AJAX que permiten a los desarrolladores de backend llamar a funciones en el frontend, agregar o quitar HTML, y ejecutar diversas acciones en el lado del cliente. Estos comandos son muy poderosos y utilizan jQuery para realizar el trabajo pesado, lo que ahorra tiempo de desarrollo.

 

Ejemplo de código:

 
function ajax_example_some_ajax_callback($form, &$form_state) {  // Preparar los comandos de AJAX  $commands = array();  $commands[] = ajax_command_html('.container', $some_new_html); // Insertar HTML dentro de un contenedor.  $commands[] = ajax_command_replace('.to-be-replaced', $replacement_html); // Reemplazar HTML.  $commands[] = ajax_command_remove('.elements-to-remove'); // Remover un elemento.  $commands[] = ajax_command_invoke(NULL, 'someJSFunction'); // Ejecutar una función de JavaScript.  // Devolver los comandos a ejecutar en el frontend.  return array(    '#type' => 'ajax',    '#commands' => $commands  ); } 

 

En este caso, los comandos permiten modificar el contenido dinámicamente en el frontend de manera eficiente y sin complicaciones.

 

Form API: #ajax

Drupal también facilita la integración de AJAX a través de su Form API. Usando la propiedad #ajax, podemos asignar funcionalidad AJAX a cualquier elemento de formulario, lo que hace que la interacción sea más fluida y rápida.

 

Ejemplo de código:

 
function ajax_example_graphs_form($form, &$form_state) {  // Código de formulario  // Configurar el botón para que sea manejado mediante AJAX  $form['some_button'] = array(    '#type' => 'button',  // El tipo de elemento es un botón    '#value' => t('Show Graphs'),  // El texto del botón    '#ajax' => array(      'callback' => 'ajax_example_graphs_form_show_graphs_callback', // Función llamada cuando se devuelve el resultado.      'wrapper' => 'graph-container', // Reemplazar el contenido dentro del contenedor con id 'graph-container'.    ),  ); } 

 

Este ejemplo muestra cómo, con una simple propiedad #ajax, podemos indicarle a Drupal cómo manejar el botón y qué función ejecutar al hacer clic. Esto no solo facilita la interacción del usuario, sino que también reduce la cantidad de código auxiliar necesario.

 

La Perspectiva de Negocios

El sistema de JavaScript de Drupal ofrece ventajas importantes desde una perspectiva empresarial. Al facilitar la comunicación entre el backend y el frontend, los desarrolladores pueden centrarse en resolver problemas de negocio en lugar de escribir código auxiliar innecesario. Esto se traduce en un aumento significativo de la productividad, lo que lleva a una mayor eficiencia en el desarrollo y, en última instancia, a una mejor optimización de los recursos.

 

Te recomendamos este video