Añadir elementos a la interfaz

En este caso vamos a añadir un nuevo botón a la barra de herramientas del portal, que cuando se pulse muestre una alerta. Para ello crearemos un plugin llamado boton:

mkdir -p geoladris/portal/plugins/boton/src

Y crearemos un fichero boton.js vacío.

Para poder añadir el botón necesitamos obtener el elemento HTML de la barra de herramientas. Este elemento lo podemos obtener mediante el módulo del plugin toolbar. Si nos fijamos en el módulo, podemos ver que devuelve un objeto jQuery con el elemento:

  ...
  return divToolbar;
});

Puesto que el portal funciona con RequireJS, bastará con definir nuestro módulo con toolbar como dependencia:

define([ 'toolbar' ], function(toolbar) {
  // Aquí podemos utilizar toolbar como el objeto jQuery devuelto por el módulo
});

En este punto podríamos realizar una prueba para comprobar que tenemos una referencia válida al elemento. El siguiente código hace invisible la barra de herramientas:

define([ 'toolbar' ], function(toolbar) {
  toolbar.hide();
});

Si hemos hecho todos los pasos correctamente, veremos que la barra de herramientas no aparece, ya que la hemos escondido en nuestro módulo.

Lo único que queda por hacer es reemplazar el código de prueba anterior por otro que cree un botón. Esto lo podemos hacer creando un tag <button> con jQuery:

define([ 'toolbar' ], function(toolbar) {
  let button = document.createElement('button');
  button.id = 'miboton';
  button.className = 'blue_button';
  button.innerHTML = 'Púlsame';
  button.addEventListener('click', function() {
    alert('Botón pulsado');
  });

  toolbar.get(0).appendChild(button);
});

Además, si queremos añadir multidioma a nuestro botón, existe el módulo i18n que podemos poner como dependencia y que contiene las traducciones de los ficheros messages.properties del directorio de configuración:

define([ 'toolbar', 'i18n' ], function(toolbar, i18n) {
  ...
  button.innerHTML = i18n['boton_webinar'];
  ...
});

Luego, bastará con añadir la traducción a los ficheros messages.properties en el directorio de configuración:

...
boton_webinar=Button

Por último podemos añadir un fichero botón.css para dar estilo al botón:

button.blue_button {
  border: 0;
}

#miboton {
  margin: 12px;
}