Post on 15-Nov-2014
description
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.