Mapea4-dev

Utilidad para el desarrollo de plugins en Mapea4

Requisitos e instalación de dependencias

• Paquete de desarrollo Mapea4-dev.
• Gestor de paquetes npm (incluido en Nodejs)
• Grunt

Descomprimimos el paquete de desarrollo, e instalamos dependencias

$ npm install

1.- Create plugin
Tarea que crea la estructura para un nuevo plugin. Solicita nombre del plugin:

$ grunt create-plugin

👉 Para la guía de desarrollo, supondremos que hemos proporcionado el nombre de 'miPlugin'

Creará la estructura de directorios y los ficheros necesarios para la construcción de un plugin dentro de la carpeta 'src/miplugin'. Este plugin recién creado recibe el nombre de arquetipo, e incluye una funcionalidad básica de ejemplo 'Hola mundo'.

En este punto, deberemos desarrollar la funcionalidad específica de nuestro plugin. Para ello, la guía de desarrollo entra en detalle acerca de los métodos que lo forman y qué debe incluir cada uno.

Pruebas

Aunque en su fase final un plugin se compilará y generará un único fichero js, durante la fase de desarrollo el código fuente del mismo se organiza en varios ficheros. Para poder testear el plugin, se proporciona la página 'test/index.html'. Ubicando la carperta Mapea4-dev como una webapp dentro de un servidor de aplicaciones (por ejemplo Tomcat), puede accederse desde el navegador:

http://localhost:8080/Mapea4-dev/test/index.html

Según si nos encontramos en la fase de testeo del src, o de pruebas de la versión ya compilada, añadiendo unas instrucciones u otras de importación y de creación del plugin, podemos verlo en funcionamiento:

 <!-- CSS plugin here -->
 <link href="../src/miplugin/facade/assets/css/miplugin.css" rel="stylesheet" />

 <!-- Para testeo de src, comentar siguiente linea en caso contrario -->
 <script type="text/javascript" src="../libraries/closure/closure/goog/base.js"></script>

 <!-- ficheros src del plugin, reemplazar por el js compilado si ya se dispone -->
 <script type="text/javascript" src="../src/miplugin/facade/js/mipluginControl.js"></script>
 <script type="text/javascript" src="../src/miplugin/facade/js/miplugin.js"></script>
 <script type="text/javascript" src="../src/miplugin/impl/ol/js/mipluginControl.js"></script>

 <!-- instrucciones de creacion del mapa -->
 <script type="application/javascript">
    var myMap = M.map({
       container: 'mapjs'
    });

    // create here the plugin
    var mp = new M.plugin.miPlugin();

    // add here the plugin into the map
    myMap.addPlugin(mp);
 </script>

2.- Check plugin
Tarea para validar código con JSHint:

$ grunt check-plugins

3.- Build plugin
Compila y minimiza los plugins creados. Aunque el plugin está compuesto por varios ficheros javascript y de estilo, para mejorar la eficiencia en su uso, la versión final de los plugins se compila y comprime, generando un único fichero css y un único fichero js (*):

$ grunt build-plugins

Generará en la carpeta 'build/miplugin' los ficheros css y js comprimidos finales.
(*) Importante: Antes de compilar, en el fichero facade/js/mipluginControl.js, método 'createView', eliminar la ruta hacia el template, y dejar únicamente el nombre de la plantilla html (por ejemplo, 'miplugin.html').