jquery mobile android. guia laboratorio beta
TRANSCRIPT
-
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
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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/
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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.
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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.
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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/
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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.
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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/
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
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
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
16/17
Este es el c!digo que se tiene que copiar al archivo inde7.html
-
8/17/2019 JQUERY MOBILE Android. Guia Laboratorio BETA
17/17
El c!digo ha sido copiado al archivo inde7.html
#hora vamos a ejecutar la aplicaci!n web.