GUIA DE LABORATORIO QUE ME PERMITE EL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APLICACIONES MOVILES ANDROID ELABORACION : ING.IVAN PETRLIK AZABACHE

1. GUIA DE LABORATORIO
UTILIZANDO LOS FRAMEWORK’S
PHONEGAP y JQUERY MOBILE
EN APLICACIONES MOVILES
ANDROID
ING.IVAN PETRLIK AZABACHE
petrlikperu@gmail.com

2. PHONEGAP
PhoneGap 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

3. 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

4. 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

5. Aquí observamos el Folder de nombre libs que esta almacenando el archivo cordova-2.3.0.jar
Folder creado satisfactoriamente
El archivo cordova-2.3.0.jar
almacenado en el Folder de
nombre libs
Agregando al Path la librería cordova-2.3.0.jar
Aquí se encuentra almacenado
el cordova-2-0-3.jar
Presionando la
opción Build Path
Elegir la opción Add Build Path

6. Aquí observamos que la librería cordova-2.3.0.jar ha sido agregado al path para que sea
reconocido por el proyecto.
Archivo cordova-2.3.0.jar
agregado al path para que sea
reconocido por el proyecto
En la carpeta Assets se tiene que crear un Folder
En el menú contextual
elegir la opción New
Seleccionar la opción
Folder
Dar clic derecho a la
carpeta assets

7. Colocando el nombre www al Folder
Colocando el nombre
www
Presionar el botón
Finish
Aquí tenemos el Folder de nombre www
Folder de nombre www
debidamente implementado

8. Dentro del folder www hemos copiado la librería cordova-2.3.0.jar
Librería cordova-2.3.0.jar
debidamente copiado al Folder
www
Copiando la carpeta xml al folder de nombre res
En el Folder de nombre res se tiene
que copiar la carpeta xml que contiene
un archivo xml de nombre config

9. Ahora en el folder assets/www se debe de colocar un archivo index.html y empezar a codificar.
Colocando el archivo
index.html
Codificando la estructura básica
del Html
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
Aquí estamos reemplazando
la clase Activity con la clase
DroidGap
Codificando en la
clase
MovilPhoneGAp.java
Invocando al método loadUrl
que permite cargar la pagina
index.html

10. Ahora en el archivo AndroidManifest.xml vamos a agregarle los siguientes permisos
Agregando los permisos en el archivo
AndroidManifest.xml
Implementar
permisos en el
archivo
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 .

11. JQUERY MOBILE
Es 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,
- Tamaño
Android,
reducido:
Blackberry,
Toda
la
Palm
WebOS,
librería
Symbian,
comprimida
Windows
pesa
menos
Mobile,
etc.
de
12K.
- Temas personalizados: El framework expone algunas utilidades para el manejo de temas y
también es posible crear temas propios.

12. 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
Archivo
estilos
(CSS)
JS
de
de
Jquery
JQuery
Mobile
(base)
–
jquery.mobile-1.0a3.css
–
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.

13. 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”.

14. 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

15. En la siguiente página podemos descargarnos los archivos JS y CSS.
Descargarse el JQuery
Mobile en archivo JS
Descargarse la hoja de estilo css
A continuación vamos a descargarnos el Jquery Tradicional a través de la siguiente página
www.jquery.com

16. Dar clic al siguiente
enlace que me permite la
descarga de la librería
jquery
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
Hemos agregado
todas las librerías del
Jquery

17. Ahora vamos a ir a la página www.jquerymobile.com y buscamos una herramienta de
diseño 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
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.
Diseño
terminado
Presionar
botón
descargar
diseño
este
para
el

18. 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
Abrir el archivo y copiar el código
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

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

20. Ahora vamos a ejecutar la aplicación web.