GUIA DE LABORATORIO

UTILIZANDO LOS FRAMEWORK’S PHONEGAP y JQUERY MOBILE

EN APLICACIONES MOVILES ANDROID

ING.IVAN PETRLIK AZABACHE

petrlikperu@gmail.com

PHONEGAPPhoneGap es un framework para el desarrollo de

aplicaciones móviles producido por Nitobi, y comprado

posteriormente por Adobe Systems Principalmente,

PhoneGap permite a los programadores desarrollar

aplicaciones para dispositivos móviles utilizando

herramientas genéricas tales

como JavaScript, HTML5 y CSS3. Las aplicaciones

resultantes son híbridas, es decir que no son realmente

aplicaciones nativas al dispositivo (ya que el renderizado es

realizado mediante vistas web y no con interfaces gráficas

específicas a cada sistema), pero no se tratan tampoco de

aplicaciones web (teniendo en cuenta que son aplicaciones que son empaquetadas para poder ser

desplegadas en el dispositivo incluso trabajando con el API del sistema nativo).

PhoneGap puede ser considerado como una distribución de Apache Cordova 3 . La aplicación fue

primero llamada solamente "PhoneGap", y luego "Apache Callback". Apache Cordova es un

software de código abierto.

IMPLEMENTACION DEL FRAMEWORK PHONEGAP EN UN PROYECTO EN ANDROID

Para poder implementar el Framework PhoneGAP en una aplicación en Android primero tenemos

que descargar dicho Framework a través de la siguiente página:

http://phonegap.com/download/

Digitar la siguiente dirección electrónica

Elegimos el siguiente icono para la respectiva descarga

Cuando la librería ha sido descargada entonces se tiene que descomprimir e ingresar dentro de la carpeta hasta llegar a la carpeta android y extraer una serie de archivos.

Aquí estos archivos que vamos a utilizar en nuestro proyecto en android son:

A continuación vamos a crear un proyecto en android a través del IDE Eclipse.

Proyecto creado satisfactoriamente

Ahora vamos a crear un folder para almacenar la librería: cordova-2.3.0.jar

Colocando un nombre (libs) al Folder

Colocando el nombre al Folder

Presionar el botón Finish

Aquí observamos el Folder de nombre libs que esta almacenando el archivo cordova-2.3.0.jar

Agregando al Path la librería cordova-2.3.0.jar

Folder creado satisfactoriamente

Aquí se encuentra almacenado el cordova-2-0-3.jar

Presionando la opción Build Path

Elegir la opción Add Build Path

El archivo cordova-2.3.0.jar almacenado en el Folder de nombre libs

Aquí observamos que la librería cordova-2.3.0.jar ha sido agregado al path para que sea reconocido por el proyecto.

En la carpeta Assets se tiene que crear un Folder

Archivo cordova-2.3.0.jar agregado al path para que sea reconocido por el proyecto

En el menú contextual elegir la opción New

Dar clic derecho a la carpeta assets

Seleccionar la opción Folder

Colocando el nombre www al Folder

Aquí tenemos el Folder de nombre www

Colocando el nombre www

Presionar el botón Finish

Folder de nombre www debidamente implementado

Dentro del folder www hemos copiado la librería cordova-2.3.0.jar

Copiando la carpeta xml al folder de nombre res

Librería cordova-2.3.0.jar debidamente copiado al Folder www

En el Folder de nombre res se tiene que copiar la carpeta xml que contiene un archivo xml de nombre config

Ahora en el folder assets/www se debe de colocar un archivo index.html y empezar a codificar.

Ahora en la clase MovilPhoneGap.java se tiene que editar la clase Activity y reemplazarlo con la clase DroidGap y además dentro del método onCreate se tendr aque que invocar al metodoloadUrl que cargara en el emulador la pagina index.html

Colocando el archivo index.html

Codificando la estructura básica del Html

Codificando en la clase MovilPhoneGAp.java

Aquí estamos reemplazando la clase Activity con la clase DroidGap

Invocando al método loadUrl que permite cargar la pagina index.html

Ahora en el archivo AndroidManifest.xml vamos a agregarle los siguientes permisos

A continuación vamos a ejecutar la aplicación Móvil en android

Ahora para poder implementar el html Interactivo en este proyecto en Android ,vamos a ver a continuación un Framework de nombre JQuery Mobile .

Implementar permisos en el archivo

Agregando los permisos en el archivo AndroidManifest.xml

JQUERY MOBILEEs un Framework Javascript, ampliamente usado por muchos desarrolladores de sitios webs. Este

Framework sirve para incrementar la velocidad de desarrollo con Javascript, encapsulando muchas

tareas comunes que se realizan cuando usamos el lenguaje JavaScript.

Por otro lado JQuery Mobile consiste en un framework javascript para creación de sitios webs

optimizados para los dispositivos móviles más populares. Agrega una capa más al JQuery

tradicional y busca suplir algunas necesidades que los programadores de dispositivos móviles

padecen.

Antes de que aparecieran estas herramientas, los desarrolladores tenían casi que programar para

cada dispositivo en concreto. Esto provocaba muchas horas de trabajo para la creación y

mantenimiento de estos sitios.

Con la aparición de JQuery Mobile, nos abstraernos de la lógica específica de cada dispositivo y de

este modo los programadores podemos dedicarnos a lo que realmente importa.

JQuery Mobile funciona bien. Si bien se trata de un proyecto muy nuevo, con pocos meses de vida,

ya está dando mucho que hablar, afianzándose cada día más como el framework estrella para la

creación de sitios webs para teléfonos y tablets.

Características de JQuery Mobile

- Facilidad de uso: Otorga mucha facilidad para el desarrollo de interfaces de usuario de

dispositivos móviles.

- Soporte HTML5 markup-driven: Cuando utilicemos este framework, nos olvidaremos de tipear

código JavaScript. Gracias al uso de etiquetas HTML, que luego en el momento de renderizado

serán procesadas por Jquery Mobile.

- Múltiples plataformas soportadas: JQuery soporta muchos dispositivos y tecnologías, como

ser: IOS, Android, Blackberry, Palm WebOS, Symbian, Windows Mobile, etc.

- Tamaño reducido: Toda la librería comprimida pesa menos de 12K.

- Temas personalizados: El framework expone algunas utilidades para el manejo de temas y

también es posible crear temas propios.

Comenzando a trabajar con JQuery Mobile: Inclusión de librerías

Para trabajar con este framework, necesitamos incluir 3 archivos en la sección head de nuestro

documento HTML. Los archivos son los siguientes:

- Archivo de estilos (CSS) de Jquery Mobile – jquery.mobile-1.0a3.css

- Archivo JS de JQuery (base) – jquery-1.5.1.min.js

- Archivo JS de JQuery Mobile – jquery.mobile-1.0a3.min.js

Una vez que hayamos hecho esto, podemos empezar a trabajar con el Framework.

Estructura de páginas en JQuery Mobile

Al momento de diseñar con esta herramienta, una página para dispositivos móviles, debemos

adaptarnos al nuevo concepto de estructura de páginas webs de Jquery Mobile.

A veces asociamos cada página que vemos en Internet a un archivo diferente en el servidor, pero

con Jquery Mobile esto no se cumple, porque un archivo puede contener varias páginas. Para

ayudarnos a crear páginas y secciones debemos utilizar los atributos data-*.

A continuación, te mostramos la estructura básica de una página, utilizando JQuery Mobile.

En un documento HTML, pueden existir varias páginas (data-role=”page”) y cada página tiene una

sección de encabezado (data-role=”header”), otra para el contenido (data-role=”content”) y otra para el

pie (data-role=”footer”).

Enlaces internos

Como ya mencionamos, un documento HTML puede contener varias páginas. Para realizar enlaces

internos, necesitamos nombrar cada bloque div con un identificador único, por ejemplo “principal”. Este

identificador sirve para realizar los enlaces a las diferentes páginas, por ejemplo: “…href=”#seccion2…”.

Para darnos una mejor idea: ¿qué mejor que ver algo de código? A continuación, vemos un documento

html con 3 secciones tipo “page”.

Descargar el JQUERY MOBILE

Primeramente para poder descargarnos el JQuery Mobile tenemos que visitar su sitio web de la

siguiente manera: www.jqurerymobile.com.

Digitar la siguiente dirección electrónica: www.jquerymobile.com

ww

Ir a descargas

En la siguiente página podemos descargarnos los archivos JS y CSS.

A continuación vamos a descargarnos el Jquery Tradicional a través de la siguiente página

www.jquery.com

Descargarse la hoja de estilo css

Descargarse el JQuery Mobile en archivo JS

A continuación mostramos los archivos que hemos logrados descargar:

A continuación sobre el proyecto en Android con PhoneGap que hemos implementado al

inicio de este documento, vamos a agregarle las librería del Jquery Mobile, dentro del folder

assets/www

Dar clic al siguiente enlace que me permite la descarga de la librería jquery

Hemos agregado todas las librerías del Jquery

Ahora vamos a ir a la página www.jquerymobile.com y buscamos una herramienta de

diseño en línea.

Cuando se ha logrado terminar el diseño se presiona el botón Download HTML que se

encuentra en la parte superior derecha, lo cual se descarga el diseño elaborado en línea.

Aquí se encuentra los componentes visuales que son arrastrados al escenario

Esta es el área de diseño en la cual los componentes visuales son arrastrados y soltados en este lugar

Diseño terminado

Presionar este botón para descargar el diseño

Aquí tenemos el diseño descargado desde la herramienta

Ahora vamos a ingresa a la carpeta mobile_website que es el nombre del archivo que

genero la herramienta de diseño y copiamos el código de la carpeta app

El código copiado de la página app, es un código que se ha generado en la herramienta de

diseño, se tendrá que pegar en el archivo index.html que se encuentra dentro de la carpeta

assets de nuestro proyecto.

El código ha sido copiado en el archivo index.html

Abrir el archivo y copiar el código

Este es el código que se tiene que copiar al archivo index.html

Ahora vamos a ejecutar la aplicación web.