Fichero js Control

mipluginControl.js

Al igual que hicimos con el plugin, en el fichero facade/js/mipluginControl.js definimos el módulo e importamos las clases necesarias para el control del plugin, tras lo cual se comienza con la construcción del mismo:

/**
 * @module M/control/MipluginControl
 */

import MipluginImplControl from 'impl/miplugincontrol';
import template from 'templates/miplugincontrol';

export class mipluginControl extends M.Control {
...

> Constructor
En este constructor realizaremos normalmente los siguientes pasos:

constructor() {
  /*
    Comprobamos que la implementación usada del mapa tiene disponible
    el control que estamos creando
  */
  if (M.utils.isUndefined(M.impl.control.miPluginControl)) {
    M.exception('La implementación usada no crea controles miPluginControl');
  }
  // Instanciamos la implementación del control
  let impl = new M.impl.control.miPluginControl();
  super(impl, "miplugin");

  // Declaramos cualquier atributo interno
  this.attr1 = ...
    ... 
}

> createView
Con este método generamos la vista del control, que además es parámetro de salida. Puede implementarse de dos formas:

1. La forma recomendada es haciendo uso de templates de handlebars. Creamos un template en la carpeta templates del plugin y devolvemos la compilación de dicha plantilla, la cual hemos importado al inicio del fichero. Usamos el método M.template.compileSync puesto que no tenemos que realizar una petición para obtenerla y el proceso será síncrono:

createView(map) {
  return new Promise((success, fail) => {
    const html = M.template.compileSync(template);
    // Añadir código dependiente del DOM
    success(html);
  });
}

También podría construirse directamente el HTML creándolo con javascript mediante la API DOM del navegador, por lo que no importaríamos la plantilla y devolveríamos este HTML creado. Por ejemplo:

createView(map) {
  return new Promise((success, fail) => {
    let ctrlDiv = document.createElement('div');
    ctrolDiv.className = 'mi-control-plugin';
    success(ctrlDiv);
  });    
}

2. Externalizar el template indicando una url, para que lo busque ahí. Usamos el método M.template.compile ya que tenemos que realizar una petición para obtener la plantilla y el proceso será asíncrono.

createView(map) {
  return M.template.compile('[http://url/]miplugin.html',{
    'jsonp':true
  });
}

Hay que tener en cuenta dos cosas:

• Puede que haya que pasar parámetros a la interfaz. Esto se hace tal como se explica en la sección: gestión de parámetros.
• La vista del control deba tener eventos asociados cuando se interactúa con ella. Para saber más sobre cómo gestionarlos: gestión de eventos.

Otro aspecto importante de este método es que recibe como parámetro de entrada el mapa al que pertenecerá. En caso de que nuestro control necesite acceder al mismo y sus características, podemos inicializar una variable interna para que haga referencia a dicho mapa, y así esté disponible desde cualquier punto del control en su fachada:

createView(map) {
  this.facadeMap_ = map;
  ...
}

otraFuncion(){
  let nivelZoom = this.facadeMap_.getZoom();
  ...
}

> getActivationButton
Este método devuelve el elemento HTML que representará el botón que activará y desactivará el control. Recibe el HTML generado por createView. En nuestro ejemplo, es un botón con id “m-miplugincontrol-button”:

getActivationButton(html) {
   return html.querySelector('button#m-miplugincontrol-button');
}