Apache Cordova: mostrar imagen en modo “Full Screen”

por / miércoles, 30 abril 2014 / Publicado enBlog
apache cordova
La participación keensoft en el Alfresco Global Virtual Hack-a-thon 2014
Previsualización de contenidos en HTML 5 con Alfresco 4.3 CE

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

Screenshot 2014.04.30 13.22.50

Android

Screenshot_2014-04-30-13-16-33Screenshot_2014-04-30-13-16-41

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/keensoft/FullScreenImage-Cordova-Plugin

Cordova: https://cordova.apache.org 

 

 

My life is mobile, think in mobile, go everywhere with my mobile and most of the times call with my mobile.

Deja un comentario

SUBIR