Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio

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


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


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


4/17


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


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


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

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


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


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')


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


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


13/17


14/17


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


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


17/17

E+ecutando el pro#rama

Documents

Desarrollo de Aplicaciones Mixtas Web Nativa) en Android. Guia Laboratorio