Elementos y Configuraciones Básicas de Phonegap

METODOLOGIA DE SISTEMAS

PHONEGAP:

DESCRIPCION GENERAL Y ELEMENTOS:

ALUMNOS:

ROJAS Carla

ABATE Federico Abate

BECERRA Tomas

ASENSIO Matías

PHONEGAP

Descripción:

PhoneGap es un framework para el desarrollo de aplicaciones nativas de sistemas operativos móviles, haciendo uso de tecnologías web como HTML5, CSS3 y JavaScript. con PhoneGap es posible desarrollar aplicaciones para los siguientes sistemas operativos:

  • Android.
  • iOS.
  • Windows Phone.
  • BlackBerry OS.
  • Web OS.
  • Symbiam.
  • Bada.

PhoneGap también es compatible con frameworks de desarrollo web móvil como jQuery Mobile, Sencha Touch, Dojo, jQTouch, SprountCore, GloveBox, XUI, iScroll, entre otros.

 

 

 

Cómo trabaja PhoneGap?

Al descargar PhoneGap de su sitio web, obtenemos un archivo .zip, que al descomprimirlo revela una carpeta para cada sistema operativo, donde hay una librería JavaScript y otra en el lenguaje nativo que usa la plataforma para desarrollar aplicaciones, es decir, para Android tendremos una librería escrita en JavaScript, usada para el desarrollo de las aplicaciones web, dando acceso al hardware del dispositivo a través de APIS que están sustentadas bajo los estándares de HTML5 de la W3C. La librería escrita en JAVA garantiza que algunas de las nuevas APIS que nos estén soportadas por el dispositivo sean usados gracias a ésta, además de garantizar el proceso de compilación, convirtiendo a PhoneGap en puente de acceso de JavaScript a herramientas nativas del sistema operativo y hardware del celular como: Acelerómetro, cámara, contactos, eventos, geo localización, redes o almacenamiento, entre otras APIS de gran utilidad.

De acuerdo al sistema operativo del PC son las posibilidades de reproducir en diferentes sistemas operativos de móviles:

ARCHIVOS DE CONFIGURACION

Los archivos de configuración de Android y IOS son muy distintos en su forma y sintaxis, sin embargo, cumplen la misma función: configuran la forma en que será ejecutada la aplicación  dentro del dispositivo.

Dentro de estos archivos de configuración se esconde información crucial de toda App aquí se definen los iconos que identificaran la aplicación, las pantallas de carga, la orientación y hasta la capacidad de mostrarse a pantalla completa.

CONFIGURACION EN IOS:

El archivo de configuración de las aplicaciones IOS se encuentra en la carpeta “Suporting Files” del proyecto.

En los proyectos de IOS generalmente hay dos archivos con la extensión .plist , el que nos interesa es el que tenga el nombre del proyecto con el sufijo”-Info”(Ejemplo: Si mi proyecto se llama prueba, el archivo se llamara prueba-Info.plist).

Al abrir este archivo encontramos una lista de propiedades de la aplicación:

Este archivo de configuración permite modificar varias propiedades, algunas irrelevantes otras que tienen un gran impacto en el comportamiento de la aplicación.

MOSTRAR EN PANTALLA COMPLETA:

        Si al archivo de configuración le agregamos una línea extra con el parámetro ”Status bar is initially hidden” definido en  “YES” de esta forma

La barra de status se ocultara cada vez que se ejecute esta aplicación y se mostrara a pantalla completa.

PERMITIR ACCESO A DOCUMENTOS EXTERNOS:

 

        Por cuestiones de seguridad la configuración por defecto de las aplicaciones Phonegap restringen el acceso a cualquier documento externo.

Si una aplicación intenta conectarse a un documento online, sencillamente se le bloquea el acceso y aparecerá un error en la consola de depuración reportando que no se tiene acceso al archivo solicitado.

Si tu aplicación necesita acceso a archivos externos , es necesario configurarlo en el archivo:”Cordova.plist” que se encuentra en la misma carpeta que los demás archivos de configuración .

Abre el archivo, busca el valor “External Hosts” y presiona el signo “+” que esta junto a el. Esto agregara una línea por cada dominio que necesites autorizar , por ejemplo dar el permiso a una imagen que se encuentra en el dominio “manualdelguerreromovil.com” agragandolo tal como se ve en la ilustración:

Al agregarle el asterisco y un punto , se autoriza acceso a todos los subdominios del sitio seleccionado.

 

CONTROL DE ORIENTACION:

        En IOS es posible bloquear la orientación de la aplicación en posición horizontal o vertical evitando la conducta por defecto de rotar la pantalla automáticamente.

Es posible editar esta conducta desde el archivo de configuración buscando el valor “Supported Interface orientations”. En IOS hay cuatro posibles orientaciones (horizontal a la derecha y a la izquierda, vertical a la derecha e izquierda) por lo que este valor permite incluir de una a cuatro posibles posiciones soportadas.

La orientación de la aplicación se puede editar también en el sumario de la aplicación de XCODE.

De este sumario, también se pueden editar con mucha facilidad y de forma grafica, otras opciones del archivo de configuración como los iconos y pantallas de carga de la aplicación.

CONFIGURACION EN ANDROID:

La configuración de las aplicaciones android se realiza en el archivo llamado AndroidManisfest.xml que se encuentra en la raíz del proyecto Android.

En el AndroidManifest encontramos todo tipo de detalles sobre la aplicación, como las resoluciones soportadas o los permisos de acceso al dispositivo.

Este archivo nos permite configurar aspectos importantes de nuestra aplicación.

CONTROL DE ORIENTACION:

 

Para evitar que la aplicación se ajuste a la orientación del aparato es posible bloquear la apariencia de la aplicación para que solo funcione en modo horizontal o vertical.

Necesitas buscar en el archivo de configuración el nodo<activity y le agregas el código:

Tal  y como se ilustra a continuación:

Este comando bloqueara la palicacionen posición vertical, para que el bloqueo se haga en la posición horizontal, se debe utilizar este código:

En el caso que necesites probar esta característica en el emulador de Android, debes habilitar el soporte para esta característica en la configuración del AVD.

Presionas la teclas CTRL+F12 para rotar el emulador.

MOSTRAR A PANTALLA COMPLETA:

 

Mostrar las aplicaciones Phonegap a pantalla completa en android necesita una configuración especial.

El primer paso para habilitar esta función es buscar el archivo de actividad de la aplicación. Usando el Project explorer de Eclipse localiza la carpeta “src” de tu proyecto, dentro de esta carpeta encontraras un paquete con el namespace que usaste para tu app, allí encontraras un archivo de extensión ”.java” que tiene el nombre de tu app con el sufijo “Activity”.

Por ejemplo , suponiendo que tenemos una aplicación llamada “test” con un namespace “mobi.revolucion.test”. Según la nomenclatura mencionada previamente, el archivo de actividad se llama TestActivity.Java

Dentro del archivo de actividad , hay que modificar algunas líneas , primero es necesario importar la siguiente clase:

El siguiente paso es localizar la funcion onCreate() y luego de la línea

super.loadUrl(file:///android_asset/www/index.html); incluir el siguiente código:

Por ejemplo en la aplicación de demostración, el archivo TestActivity.Java quedaría con el siguiente código:

IMAGEN DE INICIO:

 

        La imagen de inicio o splash es el grafico que aparece mientras el dispositivo móvil carga tu aplicación.

Prácticamente todas las aplicaciones usan un splash screen porque los dispositivos generalmente tardan un tiempo en inicializar una aplicación , también esta imagen sirve para introducir al usuario a lo que será la aplicación.

Antes de comenzar a configurar, crea una imagen en formato PNG de 320px de ancho y 480px de alto. Busca en tu proyecto la carpeta “res”, allí encontraras varias carpetas, cada una de ellas almacena archivos gráficos correspondientes a las resoluciones soportadas por tu proyecto android, la nomenclatura de estas carpetas es:

  • drawable-hdpi: archivos gráficos de alta resolución (high density per Inch).
  • Drawable-ldpi: archivos gráficos de baja resolución(low density per Inch).

Por ahora, solo guarda el mismo grafico en formato PNG que acabas de crear en cada una de estas carpetas , asegúrate que en todas tengan el mismo nombre: ”splash.png”.

Para incluir esta imagen dentro de la aplicación también es necesario modificar el archivo de actividad como se detallo en el apartado anterior. En este caso se necesita localizar esta línea en el archivo de actividad:

Y reemplazarla con el siguiente código:

Edita los archivos de configuración de tu aplicación y pruébala en el emulador , notaras que ahora muestra una imagen al inicializarse.

 

 

 

Tagged with:
Publicado en PhoneGap, Tutoriales Basicos

Deja un comentario... o reprobas!

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: