JQUERY MOBILE Android. Guia Laboratorio BETA

8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA

1/17

DESARROLLO DE

APLICACIONES MOVILES

EN ANDROID

Desarrollo de aplicaciones Android -

Web utilizando el Framework

JQUERY M!"#E

ING.IVAN PETRLIK

AZABACHE


2/17

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 ramework javascript para creaci!n de sitios webs

optimizados para los dispositivos m!viles m"s populares. #grega una capa m"s al J$uer%

tradicional % busca suplir algunas necesidades que los programadores de dispositivos m!viles

padecen.

#ntes 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 %

mantenimiento de estos sitios.

'on la aparici!n de J$uer% (obile, nos abstraernos de la l!gica espec&ica de cada dispositivo % de

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

J$uer% (obile unciona bien. Si bien se trata de un pro%ecto mu% nuevo, con pocos meses de vida,

%a est" dando mucho que hablar, aianz"ndose cada d&a m"s como el ramework estrella para la

creaci!n de sitios webs para tel)onos % tablets.

Características de JQuery Mobile

* Facilidad de uso+ torga mucha acilidad para el desarrollo de interaces de usuario de

dispositivos m!viles.

* Soporte HML! "ar#up$dri%e&+ 'uando utilicemos este ramework, nos olvidaremos de tipear

c!digo JavaScript. -racias al uso de etiquetas /(0, que luego en el momento de renderizado

ser"n procesadas por Jquer% (obile.

* M'ltiples plata(or"as soportadas+ J$uer% soporta muchos dispositivos % tecnolog&as, como

ser+ 1S, #ndroid, 2lackberr%, Palm 3ebS, S%mbian, 3indows (obile, etc.

* a"a)o reducido+ /oda la librer&a comprimida pesa menos de 456.

* e"as perso&ali*ados+ El ramework e7pone algunas utilidades para el manejo de temas %

tambi)n es posible crear temas propios.

http://wwwhatsnew.com/2011/03/31/introduccion-a-jquery-mobile/http://jquerymobile.com/http://wwwhatsnew.com/2011/03/31/introduccion-a-jquery-mobile/http://wwwhatsnew.com/2011/03/31/introduccion-a-jquery-mobile/http://wwwhatsnew.com/2011/03/31/introduccion-a-jquery-mobile/http://wwwhatsnew.com/2011/03/31/introduccion-a-jquery-mobile/http://jquerymobile.com/http://wwwhatsnew.com/2011/03/31/introduccion-a-jquery-mobile/


3/17

Co"e&*a&do a traba+ar co& JQuery Mobile, I&clusi-& de librerías

Para trabajar con este ramework, necesitamos incluir 8 archivos en la secci!n head de nuestro

documento /(0. 0os archivos son los siguientes+

* #rchivo de estilos 9'SS: de Jquer% (obile ; jquer%.mobile*4.


4/17

En un documento /(0, pueden e7istir varias p"ginas 9data*roleABpageB: % cada p"gina tiene una

secci!n de encabezado 9data*roleABheaderB:, otra para el contenido 9data*roleABcontentB: % otra para el

pie 9data*roleABooterB:.

E&laces i&ter&os

'omo %a mencionamos, un documento /(0 puede contener varias p"ginas. Para realizar enlaces

internos, necesitamos nombrar cada bloque div con un identiicador Cnico, por ejemplo DprincipalB. Este

identiicador sirve para realizar los enlaces a las dierentes p"ginas, por ejemplo+ DhreABseccion5B.

Para darnos una mejor idea+ Gqu) mejor que ver algo de c!digoH # continuaci!n, vemos un documento

html con 8 secciones tipo DpageB.


5/17

0escar/ar el JQUERY MOBILE

Primeramente para poder descargarnos el J$uer% (obile tenemos que visitar su sitio web de la

siguiente manera+ www.jqurer%mobile.com.

Digitar la siguiente dirección

electrónica:

www.jquerymobile.com

ww

Ir a descargas


6/17

En la siguiente p"gina podemos descargarnos los archivos JS % 'SS.

# continuaci!n vamos a descargarnos el Jquer% /radicional a trav)s de la siguiente p"gina

1112+3uery2co"

Descargarse la hoja de

estilo css

Descargarse el

JQuery Mobile en

archivo JS

http://www.jquery.com/http://www.jquery.com/


7/17

# continuaci!n mostramos los archivos que hemos logrados descargar+

# continuaci!n vamos a crear un pro%ecto en android a trav)s del 1I Eclipse

royecto creadosatis!actoriamen

te

Dar clic al siguiente

enlace que me

"ermite la descarga

de la librer#a jquery


8/17

ealizando la interaz graica

#hora que se hemos insertado el componente 3ebKiew al main.7ml, tenemos la alternativa depoder ingresar a la parte web en nuestra aplicaci!n en #ndroid.

# continuaci!n vamos a implementar una p"gina inde7.html de la siguiente manera.

#brir un bloc de notas % digitar una estructura b"sica en /(0.

Dar doble

clic a

mai.!ml Seleccionar y arrastrar

sobre el escenario el

com"onente $eb%iew

&rrastrar y soltar

al escenario el

com"onente

$eb%iew


9/17

/enemos que guardarlo en el escritorio % colocarle el siguiente nombre inde7.html

Aquí tenemos la página Html de nombre Index en el escritorio

0o que tenemos que hacer es copiar el archivo inde7.html % copiarlo en la carpeta assets denuestro pro%ecto en #ndroid.

Ir a

&rchivo

Ir a

'uardar

(omo

)legir

)scritorio

(olocar

el

nombre

resionar el

botón

'uardar

&qu# se

encuentra el

archivo

inde*.html

)n la car"eta assets se debe

de almacenar la "+gina

inde*.html, co"iado del

escritorio y adem+s se debe

de dar doble clic a dicha

"+gina

&l dar doble clic a la

"+gina inde*.html, a"arece

un visor que te muestra el

contenido de dicha "+gina.


10/17

'uando la p"gina inde7.html %a ha sido copiado en la carpeta assets, entonces podemos llamarloen el #ctivit% 9 (ovil(i7ta : a trav)s del componente 3ebKiew .

(apeando el componente 3ebKiew en el #ctivit% 9 (ovil(i7ta :.

&hora vamos

acceder a laclase &ctivity

-MovilMi*ta

)n esta clase vamos

a ma"ear el $eb%iew

y "oder llamar a la

"+gina inde*.html

Declarar una

re!erencia de la

clase $eb%iew

Maquear el com"onente

$eb%iew


11/17

#ctivando el Javascript e 1nsertando la p"gina inde7.html en la vista de la aplicaci!n

Ejecutando la aplicaci!n m!vil en #ndroid

/abilitar el

JavaScri"t

)l m0todo load1rl me

"ermite Insertar la

"+gina web en la

a"licación

(lic derecho en el

encabe2ado del

"royecto, a"arece un

men3 conte*tual

)legir la o"ción 4un

&S)legir la o"ción

&ndroid

&""lication


12/17

#plicaci!n Ejecutada

bservando la aplicaci!n ejecutada, nosotros hemos logrado insertar una p"gina web dentrode nuestra aplicaci!n nativa en #ndroid.

#hora nosotros podemos utilizar el javascript para darle interactividad a la p"gina, para esovamos a implementar un bot!n que me permita mostrar un mensaje.

Para modiicar el html que se encuentra dentro de la carpeta assets vamos hacer lo siguiente.

Dar doble clic

derecho y

a"arece un

men3

conte*tul

Seleccionar la

o"ción 5"en

$ith

Seleccionar la

o"ción 6e*t

)ditor


13/17

#hora nosotros podemos editar el html desde el mismo 1IE Eclipse

#hora ha% algo mu% importante que se tiene que realizar en el archivo #ndroid(aniest.7ml

)sta es la

"+gina donde

vamos a editar

)ste es el editor de

te*to donde vamos a

im"lementar m+scódigo

Ir al archivo

&ndroidMani!est.*ml &gregarle el siguiente

"ermiso a Internet


14/17

#hora vamos a ir a la p"gina www.jquer%mobile.com % buscamos una herramienta de

dise?o en l&nea.

&qu# se encuentra los com"onentes

visuales que son arrastrados al

escenario

)sta es el +rea dedise7o en la cual los

com"onentes visuales

son arrastrados y

soltados en este lugar

http://www.jquerymobile.com/http://www.jquerymobile.com/


15/17

'uando se ha logrado terminar el dise?o se presiona el bot!n Iownload /(0 que se

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

#qu& tenemos el dise?o descargado

#hora vamos a ingresa a la carpeta mobileLwebsite % copiamos el c!digo de la carpeta app

El c!digo copiado se tendr" que pegar en el archivo inde7.html que se encuentra dentro de la

carpeta assets de nuestro pro%ecto

Dise7o

terminado

resionar este

boto "ara

descargar el

dise7o

&brir el archivo y co"iar el

codigo


16/17

Este es el c!digo que se tiene que copiar al archivo inde7.html


17/17

El c!digo ha sido copiado al archivo inde7.html

#hora vamos a ejecutar la aplicaci!n web.

JQUERY MOBILE Android. Guia Laboratorio BETA

Documents

Transcript of JQUERY MOBILE Android. Guia Laboratorio BETA