DESARROLLO DE

APLICACIONES MOVILES
EN ANDROID

Desarrollo de aplicaciones Android Web utilizando el Framework

JQUERY MOBILE

ING.IVAN PETRLIK
AZABACHE

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 creacin de sitios webs
optimizados para los dispositivos mviles ms populares. Agrega una capa ms al JQuery
tradicional y busca suplir algunas necesidades que los programadores de dispositivos mviles
padecen.
Antes de que aparecieran estas herramientas, los desarrolladores tenan casi que programar para
cada dispositivo en concreto. Esto provocaba muchas horas de trabajo para la creacin y
mantenimiento de estos sitios.
Con la aparicin de JQuery Mobile, nos abstraernos de la lgica especfica 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, afianzndose cada da ms como el framework estrella para la
creacin de sitios webs para telfonos y tablets.

Caractersticas de JQuery Mobile

- Facilidad de uso: Otorga mucha facilidad para el desarrollo de interfaces de usuario de
dispositivos mviles.
- Soporte HTML5 markup-driven: Cuando utilicemos este framework, nos olvidaremos de tipear
cdigo JavaScript. Gracias al uso de etiquetas HTML, que luego en el momento de renderizado
sern procesadas por Jquery Mobile.
- Mltiples plataformas soportadas: JQuery soporta muchos dispositivos y tecnologas, como
ser: IOS, Android, Blackberry, Palm WebOS, Symbian, Windows Mobile, etc.
- Tamao reducido: Toda la librera comprimida pesa menos de 12K.
- Temas personalizados: El framework expone algunas utilidades para el manejo de temas y
tambin es posible crear temas propios.

Comenzando a trabajar con JQuery Mobile: Inclusin de libreras

Para trabajar con este framework, necesitamos incluir 3 archivos en la seccin 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 pginas en JQuery Mobile

Al momento de disear con esta herramienta, una pgina para dispositivos mviles, debemos
adaptarnos al nuevo concepto de estructura de pginas webs de Jquery Mobile.
A veces asociamos cada pgina 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 pginas. Para
ayudarnos a crear pginas y secciones debemos utilizar los atributos data-*.
A continuacin, te mostramos la estructura bsica de una pgina, utilizando JQuery Mobile.

En un documento HTML, pueden existir varias pginas (data-role=page) y cada pgina tiene una
seccin 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 pginas. 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 pginas, por ejemplo: href=#seccion2.
Para darnos una mejor idea: qu mejor que ver algo de cdigo? A continuacin, 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 direccin

electrnica:
www.jquerymobile.com
ww

Ir a descargas

En la siguiente pgina podemos descargarnos los archivos JS y CSS.

Descargarse el
JQuery Mobile en
archivo JS

Descargarse la hoja de
estilo css

A continuacin vamos a descargarnos el Jquery Tradicional a travs de la siguiente pgina

www.jquery.com

Dar clic al siguiente

enlace que me
permite la descarga
de la librera jquery

A continuacin mostramos los archivos que hemos logrados descargar:

A continuacin vamos a crear un proyecto en android a travs del ID Eclipse

Proyecto creado
satisfactoriamen
te

Realizando la interfaz grafica

Arrastrar y soltar
al escenario el
componente
WebView

Dar doble
clic a
main.xml

Seleccionar y arrastrar
sobre el escenario el
componente WebView

Ahora que se hemos insertado el componente WebView al main.xml, tenemos la alternativa de

poder ingresar a la parte web en nuestra aplicacin en Android.
A continuacin vamos a implementar una pgina index.html de la siguiente manera.
Abrir un bloc de notas y digitar una estructura bsica en HTML .

Tenemos que guardarlo en el escritorio y colocarle el siguiente nombre index.html

Ir a
Archivo
Elegir
Escritorio

Ir a
Guardar
Como

Colocar
el
nombre

Presionar el
botn
Guardar

Aqu tenemos la pgina Html de nombre Index en el escritorio

Aqu se
encuentra el
archivo
index.html

Lo que tenemos que hacer es copiar el archivo index.html y copiarlo en la carpeta assets de
nuestro proyecto en Android.

En la carpeta assets se debe

de
almacenar la pgina
index.html,
copiado
del
escritorio y adems se debe
de dar doble clic a dicha
pgina

Al dar doble
clic a la
pgina index.html, aparece
un visor que te muestra el
contenido de dicha pgina.

Cuando la pgina index.html ya ha sido copiado en la carpeta assets, entonces podemos llamarlo
en el Activity ( MovilMixta ) a travs del componente WebView .

Ahora vamos
acceder a la
clase Activity
(MovilMixta)

En esta clase vamos

a mapear el WebView
y poder llamar a la
pgina index.html

Mapeando el componente WebView en el Activity ( MovilMixta ).

Declarar una
referencia de la
clase WebView

Maquear el componente
WebView

Activando el Javascript e Insertando la pgina index.html en la vista de la aplicacin

Habilitar el
JavaScript

El mtodo loadUrl me
permite Insertar la
pgina web en la
aplicacin
Ejecutando la aplicacin mvil en Android
Clic derecho en el
encabezado del
proyecto, aparece un
men contextual

Elegir la opcin Run

AS

Elegir la opcin
Android
Application

Aplicacin Ejecutada

Observando la aplicacin ejecutada, nosotros hemos logrado

de nuestra aplicacin nativa en Android.

insertar una pgina web dentro

Ahora nosotros podemos utilizar el javascript para darle interactividad a la pgina, para eso
vamos a implementar un botn que me permita mostrar un mensaje.
Para modificar el html que se encuentra dentro de la carpeta assets vamos hacer lo siguiente.

Dar doble clic

derecho y
aparece un
men
contextul

Seleccionar la
opcin Open
With
Seleccionar la
opcin Text
Editor

Ahora nosotros podemos editar el html desde el mismo IDE Eclipse

Esta es la
pgina donde
vamos a editar

Este es el editor de
texto donde vamos a
implementar ms
cdigo

Ahora hay algo muy importante que se tiene que realizar en el archivo AndroidManifest.xml

Ir al archivo
AndroidManifest.xml

Agregarle el siguiente
permiso a Internet

Ahora vamos a ir a la pgina www.jquerymobile.com y buscamos una herramienta de

diseo en lnea.
Aqu se encuentra los componentes
visuales que son arrastrados al
escenario

Esta es el rea de
diseo en la cual los
componentes visuales
son arrastrados y
soltados en este lugar

Cuando se ha logrado terminar el diseo se presiona el botn Download HTML que se

encuentra en la parte superior derecha, lo cual se descarga el diseo elaborado en lnea.

Presionar este
boto
para
descargar el
diseo

Diseo
terminado

Aqu tenemos el diseo descargado

Ahora vamos a ingresa a la carpeta mobile_website y copiamos el cdigo de la carpeta app

Abrir el archivo y copiar el

codigo

El cdigo copiado se tendr que pegar en el archivo index.html que se encuentra dentro de la
carpeta assets de nuestro proyecto

Este es el cdigo que se tiene que copiar al archivo index.html

El cdigo ha sido copiado al archivo index.html

Ahora vamos a ejecutar la aplicacin web.