Post on 06-Jul-2018
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
1/17
DESARROLLO DE
APLICACIONES MOVILES
EN ANDROID
Desarrollo de aplicaciones mixtas
(web/nativa) en Android.
ING.WRGCH
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
2/17
Aplicaciones mixtas (web/nativa) en Android.
Cuando hablamos de desarrollo de Aplicaciones Mixtas a través de la plataforma
android , quiere decir que nuestro que proyecto que se está desarrollando a través del
IDEEclipse! soporta c"di#o $ava y la parte %eb representado por pa#inas &'M( y$ava)cript para lo#rar una comunicaci"n en base a nuestras necesidades, puede ser muy
adecuado y ahorrarnos mucho tiempo de desarrollo*
Ahora la venta+a de combinar la parte nativa y %eb es que podemos acceder directamente atodos los recursos del sistema operativo cuando estemos levantando una pá#ina %eb dentro
de nuestra aplicaci"n mixta*
A continuaci"n vamos a desarrollar una aplicaci"n Mixta en Android
Crear un proyecto en Android *
-eali.ando la interfa. #rafica
Proyecto creado
satisfactoriamen
te
Dar doble
clic a
main.xml Seleccionar y arrastrar
sobre el escenario el
componente WebView
Arrastrar y soltar
al escenario el
componente
WebView
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
3/17
Ahora que se hemos insertado el componente /eb0ie% al main*xml, tenemos la
alternativa de poder in#resar a la parte %eb en nuestra aplicaci"n en Android*
A continuaci"n vamos a implementar una pá#ina index*html de la si#uiente manera*
Abrir un bloc de notas y di#itar una estructura básica en &'M(*
'enemos que #uardarlo en el escritorio y colocarle el si#uiente nombre index*html
Ir a
Archivo
Ir aGuardar
Como
Elegir
Escritorio
Colocar
el
nombre
Presionar el
botn
Guardar
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
4/17
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
5/17
Mapeando el componente /eb0ie% en el Activity MovilMixta !*
Ahora vamos
acceder a la
clase Activity
'(ovil(i#ta)
En esta clase vamos
a mapear el WebView
y poder llamar a la
pagina inde#$html
*eclarar una
referencia de la
clase WebView
(a!uear el componente
WebView
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
6/17
Activando el $avascript e Insertando la pá#ina index*html en la vista de la aplicaci"n
E+ecutando la aplicaci"n m"vil en Android
+abilitar el
,avaScript
El m-todo load.rl me
permite Insertar la
p%gina web en la
aplicacin
Clic derecho en el
encabe/ado del
proyecto& aparece un
men0 conte#tual
Elegir la opcin 1un
AS Elegir la opcin
Android
Application
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
7/17
Aplicaci"n E+ecutada
2bservando la aplicaci"n e+ecutada, nosotros hemos lo#rado insertar una pá#ina %ebdentro de nuestra aplicaci"n nativa en Android*
Ahora nosotros podemos utili.ar el +avascript para darle interactividad a la pá#ina, para
eso vamos a implementar un bot"n que me permita mostrar un mensa+e*
3ara modificar el html que se encuentra dentro de la carpeta assets vamos hacer losi#uiente*
*ar doble clic
derecho y
aparece un
men0
conte#tul
Seleccionar la
opcin 2pen
With
Seleccionar la
opcin 3e#t
Editor
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
8/17
En el 'ext Editor sobre la estructura del &tml ya existente le hemos a#re#ado un
formulario y una etiqueta que me permite el centrado*
A continuaci"n hemos a#re#ado una tabla de 4 x 4 con sus respectivos campos de texto yotra tabla que contiene un bot"n para el cálculo respectivo*
Se est% a4adiendo un
formulario y adem%s una
eti!ueta !ue me permite el
centrado
Agregando una
tabla de 5 #5 con
los respectivos
campos de te#to
Agregando otra
tabla de 6#6 !uecontiene un botn
con su evento
correspondiente
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
9/17
Ahora se tiene que a#re#ar la secci"n de $ava)cript , implementando un método para que
sea invocado por el evento del bot"n y as1 poder calcular el producto de los 4 n5merosin#resados por teclado*
Ahora a#re#amos la si#uiente etiqueta para la respectiva visuali.aci"n del resultado final*
Implementando la seccin de
,avaScript para adicionar el m-todo
de nombre calcular') !ue me permite
capturar los valores de dos campos
de te#to y ser convertido a valores
enteros &calculando el producto y la
respectiva visuali/acin por pantalla$
7a siguiente eti!ueta
me permita la
visuali/acin del
resultado 8nal delc%lculo del producto de
5 n0meros enteros
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
10/17
Ahora vamos a e+ecutar el pro#rama*
(a aplicaci"n hasta el momento calcula el producto a través de la %eb, pero acontinuaci"n vamos a implementar otro bot"n que me permita capturar los datos
in#resados por el teclado e invocar a un método en +avascript que se comunique con otro
método en +ava 6ativo , donde calcule el producto y mostrarlo por pantalla*
Implementando el
m-todocalcular9ativo')
Implementando el
botn con el evento
para invocar a
calcular9ativo')
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
11/17
Ahora en el proyecto se tiene que crear una interfa. de nombre 3ublicacion que
conten#a un método de nombre InvocarCodi#o6ativo)trin# n7,)trin# n4!
Ahora tenemos que ir a la clase Activity MovilMixta! e implementar la interfa.
3ublicacion en la cual nos obli#a a a8adir el método que se encuentra dentro de las
pol1ticas de dicha interfa.*
Se crea una Interfa/
de nombrePublicacion !ue
contenga el m-todo
InvocarCodigo9ativ
o$
A!u" observamos la
interfa/ !ue contiene
el m-todo
InvocarCodigo9ativo'
)
Implementand
o la interfa/
Publicacion
(-todo nos ayuda a
pasar valores de una
p%gina web a cdigo
nativo :ava
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
12/17
Ahora vamos a e+ecutar la aplicaci"n*
A continuaci"n vamos a desarrollar otro e+ercicios en android que el in#reso de los
datos por teclado es a través de c"di#o de 9M( con c"di#o 6ativo en $ava y el-esultado se Imprima en una pá#ina %eb embebido en un componente /eb0ie%*
(ostr%ndose el
resultado por
pantalla
Presionando el
botn
*ar doble clic a
main$#ml y
aparece elentorno de dise4o
A!u" estamos combinando los
componentes en
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
13/17
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
14/17
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
15/17
Declaramos dos referencias de la clase Edit'ext y lo mapeamos, además Implementamos
un método de nombre calcular que me permita invocar al método definido en +ava)critpt
para que as1 se pueda enviar los parámetros para su respectivo calculo*
3ara dar el evento al bot"n se tiene que hacer lo si#uiente
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
16/17
Colocar el nombre del método para dar el respectivo evento del bot"n
En la pá#ina index*html se tiene que dise8ar lo si#uiente
8/17/2019 Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio
17/17
E+ecutando el pro#rama