WebView

El framework Android permite, gracias a la clase WebView, incluir páginas HTML en el interior de una
aplicación.

Esta clase utiliza el WebKit de Android para mostrar páginas HTML, el historial, tratar código JavaScript,
hacer zoom, etc.

Puede mostrar una página web remota, una página almacenada de manera local en el dispositivo o,
simplemente, incluir código HTML.

1. Ejemplo de una página web remota

El primer paso consiste en crear un archivo XML que represente la vista e incluir el
componenteWebView.

<?xml version="1.0" encoding="utf-8"?>

<WebView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />

A continuación, hay que crear una actividad que permita asociar la vista declarada anteriormente con
la actividad y especificar la URL que el WebView debe cargar.

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

WebView webView = (WebView) findViewById(R.id.webview);

webView.loadUrl("http://www.tutos-android.com");
}

Puede especificar la URL mediante el método loadUrl, accesible desde la instancia de la clase
WebView.

Sin olvidar añadir la permission de acceso a Internet en el manifiesto de la aplicación:

<uses-permission android:name="android.permission.INTERNET" />

2. Ajustes del WebView

Para configurar un WebView, puede acceder a los ajustes mediante el método getSettings.

A continuación se muestra un ejemplo que obtiene los parámetros de un WebView para mostrar los
botones de zoom (setBuiltInZoomControls) y permitir la ejecución de JavaScript
(setJavascriptEnabled).

WebSettings settings = webView.getSettings();

settings.setBuiltInZoomControls(true);
settings.setJavaScriptEnabled(true);

3. Gestión del botón retorno

Debe sobrecargar la gestión del botón retorno para simular el comportamiento del botón de retorno
de un navegador web en las páginas web en una aplicación Android.
 @Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) &&
mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}

Para ello, sobrecargue el método onKeyDown. Compruebe que el clic se corresponde con el
botón de retorno y que la navegación no se encuentra en la primera página (que sea posible
acceder a una página anterior).

4. Uso de Android nativo en JavaScript

Puede utilizar código JavaScript en los WebView, e incluso combinarlo con código nativo.

El objetivo del ejemplo siguiente es mostrar un toast Android mediante código JavaScript.

Para comenzar, cree una clase que represente la interfaz JavaScript. Existe un método que
permite mostrar un Toast.

public class JavaScriptToastInterface {

Context context;

JavaScriptToastInterface(Context c) {
context = c;
}

public void showToast(String toastMsg) {

Toast.makeText(context, toastMsg,
Toast.LENGTH_SHORT).show();
}
}

A continuación, active JavaScript en el WebView y asocie la interfaz JavaScript al mismo

mediante el método addJavascriptInterface.

El segundo parámetro del método se corresponde con el identificador que tendrá esta interfaz en el
código HTML. Esto le permite añadir más interfaces JavaScript que tengan identificadores distintos.

WebView webView = (WebView) findViewById(R.id.webview);

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new
JavaScriptToastInterface(this), "Android");
webView.loadData(WEB_CONTENT, "text/html", "UTF-8");

Se va a necesitar un contenido web para mostrar:

<input type="button" value="Test Javascript"

onClick="showAndroidToast(’¡Un Toast creado en JavaScript!’)" />

<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
Este fragmento de código representa un botón que ejecuta el método showAndroid presente en la
interfaz JavaScript.

Almacene este código HTML en una variable de tipo String y cárguela en el WebView mediante
el método loadData.

String WEB_CONTENT = "<input type=\"button\" value=\"Test

Javascript\" onClick=\"showAndroidToast(\’¡Un toast creado
en JavaScript!\’)\" /><script type=\"text/javascript\">function
showAndroidToast(toast) {Android.showToast(toast);}</script>";

Obtendrá: