Android >> Ejemplo de WebView en Android ( Parte 2 )

ejemplo-webview-parte2

En la primera parte de este tutorial vimos como crear una vista WebView donde cargar una página Web. En esta segunda parte vamos a ver como habilitar JavaScript en una vista WebView y a crear interfaces entre el código de nuestra aplicación Android y el código JavaScript.

  • Habilitando JavaScript

JavaScript-logo

Por defecto, JavaScript esta deshabilitado en un WebView. Para habilitarlo debemos de modificar el WebSettings de nuestro WebView. Para tener acceso al WebSettings debemos usar el método getSettings(), para luego habilitar JavaScript con el método setJavaScriptEnabled(boolean).

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		...

		WebView myWebView = (WebView) this.findViewById(R.id.webView);

		// Enable JavaScript
		WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);

		...
	}
}

Además de habilitar JavaScript, a través del WebSettings podemos modificar una gran variedad de opciones que nos pueden resultar útiles en nuestras aplicaciones Web.

  • Vinculando código JavaScript a código Android

Si estamos diseñando una aplicación Web que va a ejecutarse únicamente en una vista WebView de nuestra aplicación, deberíamos crear un interfaz entre el código JavaScript y el código Android de nuestra aplicación. Vamos a ver a continuación un ejemplo simple donde mostraremos un cuadro de diálogo Dialog de Android, en vez de usar la función alert() de JavaScript.

Vamos a empezar creando la clase WebAppInterface.java que define el método showDialog() que muestra un cuadro de diálogo con el mensaje que se le pase como parámetro y que será el interfaz que usaremos en este ejemplo:

WebAppInterface.java

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.webkit.JavascriptInterface;

public class WebAppInterface {

	Context context;

	/**
	 * Instantiate the interface and set the context
	 * 
	 * @param context
	 */
	public WebAppInterface(Context context) {
		this.context = context;
	}

	/**
	 * Show a dialog from the web page.
	 * 
	 * @param message
	 *            message of the dialog
	 */
	@JavascriptInterface
	public void showDialog(String message) {

		// Use the Builder class for convenient dialog construction
		AlertDialog.Builder builder = new AlertDialog.Builder(this.context);
		builder.setMessage(message).setNeutralButton("OK",
				new DialogInterface.OnClickListener() {
					public void onClick(DialogInterface dialog, int id) {
						dialog.dismiss();
					}
				});
		// Create the AlertDialog object and return it
		builder.create().show();
	}
}

¡IMPORTANTE! Si en el AndroidManifest.xml de nuestra aplicación tenemos definido en el atributo targetSdkVersion el valor 17 o superior deberemos de escribir la anotación @JavascriptInterface para que el método sea accesible por la página Web si la aplicación se esté ejecutando en un dispositivo con la versión Android 4.2 o superior.

Para vincular la interfaz que acabamos de definir al código JavaScript que se va a ejecutar en nuestro WebView debemos usar el método addJavascriptInterface() indicando la instancia del interfaz y el nombre que queremos dar a dicha instancia:

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		...

		WebView myWebView = (WebView) this.findViewById(R.id.webView);

		// Bind a new interface between your JavaScript and Android code
		myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");

		...

	}

}

Con esto definimos un interfaz llamado “Android” que podrá ser accedido por el código JavaScript que ejecutaremos en nuestro WebView. A continuación vamos a escribir una página HTML y JavaScript que mostrará el cuadro de diálogo usando el interfaz que acabamos de definir. Esta página deberemos almacenarla en el directorio assets de nuestra aplicación:

example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>EjemploWebView</title>
</head>
<body>

	<input type="button" value="Say hello!"
		onclick="showAndroidToast('Hello Android!')" />

	<script type="text/javascript">
		function showAndroidToast(message) {
			Android.showDialog(message);
		}
	</script>

</body>
</html>

El último paso será cargar en nuestra vista WebView la página HTML que acabamos de crear:

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.setContentView(R.layout.main);

		WebView myWebView = (WebView) this.findViewById(R.id.webView);

		// Bind a new interface between your JavaScript and Android code
		myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");

		// Enable JavaScript
		WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);

		// Load HTML page
		myWebView.loadUrl("file:///android_asset/example.html");

	}

}

Ahora si ejecutamos nuestra aplicación obtendremos la siguiente pantalla:

ejemplo-webview-parte2-1

Y si a continuación pinchamos el botón aparecerá el cuadro de diálogo de Android:

ejemplo-webview-parte2-2

Más información | Ejemplo de WebView en Android (Parte 1), Ejemplo de WebView en Android (Parte 3) y Android Developers

Descargar código | Github

Etiquetado , , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: