El contexto
Cuando se desarrollan aplicaciones híbridas multiplataforma, una misma acción repercute en todas las plataformas en las que se esta desarrollando. Esto significa que el resultado final puede variar dependiendo de cada plataforma.
Si en una aplicación híbrida queremos mostrar una imagen a tamaño completo y permitir la interacción con gestos, como por ejemplo hacer zoom o rotar la imagen, se debería usar un componente javascript que maneje correctamente los gestos táctiles en un entorno HTML5 y soporte múltiple motores de navegadores móviles (Webkit, gecko…). Estas consideraciones previas son críticas en el desarrollo multiplataforma, primero por el coste elevado de pruebas en todos los dispositivos de cada plataforma y segundo por el diseño “responsive” que debe tener dicha vista de la imagen.
Con todo esto sobre la mesa, la pregunta es ¿Es necesario usar javascript para abrir una imagen de los recursos de la aplicación?
La solución
Una aplicación híbrida multiplataforma, significa que mediante código HTML5 se generan binarios nativos para distintas plataformas. Es decir, podemos usar código nativo de cada plataforma en las aplicaciones y llamarlos mediante javascript. Crear un plugin cordova es una tarea sencilla, pero requiere conocimientos profundos de programación nativa de la plataforma que se va a usar. En la guía de Apache Cordova están todos los pasos para su creación.
La implementación
Teniendo localizado el problema y la solución, hemos creado un plugin que permite abrir imágenes localizadas en un ruta de la aplicación del tipo “www/pathToImage”. El plugin está desarrollado inicialmente para iOS y para Android. En el caso de iOS, el plugin utiliza el delegado UIDocumentInteractionControllerDelegate para abrir la imagen dentro de la aplicación. En el caso de Android, se muestra al usuario la actividad “intent chooser”.
Screenshots
iOS
Android
Instalación
cordova plugin add https://github.com/keensoft/FullScreenImage-Cordova-Plugin.git
Enlaces
Github: https://github.com/keensoft/FullScreenImage-Cordova-Plugin
PlugReg: http://plugreg.com/plugin/
Cordova: https://cordova.apache.org
Alberto Muñoz
My life is mobile, think in mobile, go everywhere with my mobile and most of the times call with my mobile.
