Desarrollo DE Aplicaciones Mixtas EN Android PDF

Preview

Summary

EL USO DEL WEBVIEW EN ANDROID DE FORMA NATIVA PARA EL ENTORNO WEB, USANDO HTML, PROGRAMACIÓN EN CAPAS, USO DEL JAVA SCRIPT EN ENTORNO HTML, ETC....

Description

2016

DESARROLLO DE APLICACIONES MOVILES EN ANDROID ANDROID WEB GUIA EDUCATIVA DEL USO DE ANDROID ECLIPSE, EN ENTORNO WEB

GONZALES WILFREDO UNIVERSIDAD NACIONAL DEL CALLAO 15/06/2016

DESARROLLO DE APLICACIONES MOVILES EN ANDROID

Desarrollo de aplicaciones mixtas (web/nativa) en Android.

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

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 IDE(Eclipse) soporta código Java y la parte web representado por paginas HTML y JavaScript para lograr una comunicación en base a nuestras necesidades, puede ser muy adecuado y ahorrarnos mucho tiempo de desarrollo. Ahora la ventaja de combinar la parte nativa y web es que podemos acceder directamente a todos los recursos del sistema operativo cuando estemos levantando una página web dentro de nuestra aplicación mixta. A continuación vamos a desarrollar una aplicación Mixta en Android : Crear un proyecto en Android .

Proyecto creado satisfactoriamente

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

UNIVERSIDAD NACIONAL DEL CALLA

INGENERIA DE SISTEMAS

Ahora que se hemos insertado el componente WebView al main.xml, tenemos la alternativa de poder ingresar a la parte web en nuestra aplicación en Android. A continuación vamos a implementar una página index.html de la siguiente manera. Abrir un bloc de notas y digitar una estructura básica en HTML.

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

Elegir Escritorio

Ir a Archivo

Ir a Guardar Como Colocar el nombre

UNIVERSIDAD NACIONAL DEL CALLAO

Presionar el botón Guardar

INGENERIA DE SISTEMAS

Aquí tenemos la página 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 página index.html, copiado del escritorio y además se debe de dar doble clic a dicha página

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

Cuando la página index.html ya ha sido copiado en la carpeta assets, entonces podemos llamarlo en el Activity ( MovilMixta ) a través del componente WebView .

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Ahora vamos acceder a la clase Activity (MovilMixta)

En esta clase vamos a mapear el WebView y poder llamar a la pagina index.html

Mapeando el componente WebView en el Activity ( MovilMixta ).

Declarar una referencia de la clase WebView

Maquear el componente WebView

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Activando el Javascript e Insertando la página index.html en la vista de la aplicación

Habilitar el JavaScript

El método loadUrl me permite Insertar la página web en la aplicación

Ejecutando la aplicación móvil en Android Clic derecho en el encabezado del proyecto, aparece un menú contextual

Elegir la opción Run AS Elegir la opción Android Application

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Aplicación Ejecutada

Observando la aplicación ejecutada, nosotros hemos logrado dentro de nuestra aplicación nativa en Android.

insertar una página web

Ahora nosotros podemos utilizar el javascript para darle interactividad a la página, para eso vamos a implementar un botón 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 opción Open With Seleccionar la opción Text Editor

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

En el Text Editor sobre la estructura del Html ya existente formulario y una etiqueta que me permite el centrado.

le hemos agregado un

Se está añadiendo un formulario y además una etiqueta que me permite el centrado

A continuación hemos agregado una tabla de 2 x 2 con sus respectivos campos de texto y otra tabla que contiene un botón para el cálculo respectivo. Agregando una tabla de 2 x2 con los respectivos campos de texto

Agregando otra tabla de 1x1 que contiene un botón con su evento correspondiente

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Ahora se tiene que agregar la sección de JavaScript , implementando un método para que sea invocado por el evento del botón y así poder calcular el producto de los 2 números ingresados por teclado.

Implementando la sección de JavaScript para adicionar el método de nombre calcular() que me permite capturar los valores de dos campos de texto y ser convertido a valores enteros ,calculando el producto y la respectiva visualización por pantalla.

Ahora agregamos la siguiente etiqueta para la respectiva visualización del resultado final.

La siguiente etiqueta me permita la visualización del resultado final del cálculo del producto de 2 números enteros

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Ahora vamos a ejecutar el programa.

La aplicación hasta el momento calcula el producto a través de la web, pero a continuación vamos a implementar otro botón que me permita capturar los datos ingresados por el teclado e invocar a un método en javascript que se comunique con otro método en java Nativo , donde calcule el producto y mostrarlo por pantalla.

Implementando el método calcularNativo() Implementando el botón con el evento para invocar a calcularNativo()

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Ahora en el proyecto se tiene que crear una interfaz de nombre Publicacion que contenga un método de nombre InvocarCodigoNativo(String n1,String n2)

Se crea una Interfaz de nombre Publicacion que contenga el método InvocarCodigoNativo.

Aquí observamos la interfaz que contiene el método InvocarCodigoNativo()

Ahora tenemos que ir a la clase Activity (MovilMixta) e implementar la interfaz Publicacion en la cual nos obliga a añadir el método que se encuentra dentro de las políticas de dicha interfaz. Implementando la interfaz Publicacion Método nos ayuda a pasar valores de una

a código nativo java página web

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Ahora vamos a ejecutar la aplicación.

Presionando el botón

Mostrándose el resultado por pantalla

A continuación vamos a desarrollar otro ejercicios en android que el ingreso de los datos por teclado es a través de código de XML con código Nativo en Java y el Resultado se Imprima en una página web embebido en un componente WebView. Aquí estamos combinando los componentes en XML que son mapeados en Java, luego Arrastramos un componente WebView para embeber la parte web

Dar doble clic a main.xml y aparece el entorno de diseño

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Ahora vam

Arrastrar el componente WebView

r en la clase Activity (MovilMixta)

En la siguiente clase Activity vamos a empezar a programar

Aquí en esta clase vamos a implementar el siguiente código

Mapeamos los controles implementados en el archivo web.xml y lo llevamos a código Java:

Declaramos una referencia de la clase WebView Añadimos y guardamos en la carpeta assets el archivo index.html

Mapeando componente WebView a java

el

Activando javaScript Insertando la página web a través del método loadUrl

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Declaramos dos referencias de la clase EditText y lo mapeamos, además Implementamos un método de nombre calcular que me permita invocar al método definido en javaScritpt para que así se pueda enviar los parámetros para su respectivo calculo.

Para dar el evento al botón se tiene que hacer lo siguiente

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Colocar el nombre del método para dar el respectivo evento del botón

En la página index.html se tiene que diseñar lo siguiente:

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS

Ejecutando el programa:

UNIVERSIDAD NACIONAL DEL CALLAO

INGENERIA DE SISTEMAS...