WebView

El framework Android permite, gracias a la clase WebView, incluir pginas HTML en el interior de una
aplicacin.

Esta clase utiliza el WebKit de Android para mostrar pginas HTML, el historial, tratar cdigo JavaScript,
hacer zoom, etc.

Puede mostrar una pgina web remota, una pgina almacenada de manera local en el dispositivo o,
simplemente, incluir cdigo HTML.

1. Ejemplo de una pgina 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 continuacin, 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 mtodo loadUrl, accesible desde la instancia de la clase
WebView.

Sin olvidar aadir la permission de acceso a Internet en el manifiesto de la aplicacin:

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

2. Ajustes del WebView

Para configurar un WebView, puede acceder a los ajustes mediante el mtodo getSettings.

A continuacin se muestra un ejemplo que obtiene los parmetros de un WebView para mostrar los
botones de zoom (setBuiltInZoomControls) y permitir la ejecucin de JavaScript
(setJavascriptEnabled).

WebSettings settings = webView.getSettings();

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

3. Gestin del botn retorno

Debe sobrecargar la gestin del botn retorno para simular el comportamiento del botn de retorno
de un navegador web en las pginas web en una aplicacin 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 mtodo onKeyDown. Compruebe que el clic se corresponde con el
botn de retorno y que la navegacin no se encuentra en la primera pgina (que sea posible
acceder a una pgina anterior).

4. Uso de Android nativo en JavaScript

Puede utilizar cdigo JavaScript en los WebView, e incluso combinarlo con cdigo nativo.

El objetivo del ejemplo siguiente es mostrar un toast Android mediante cdigo JavaScript.

Para comenzar, cree una clase que represente la interfaz JavaScript. Existe un mtodo 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 continuacin, active JavaScript en el WebView y asocie la interfaz JavaScript al mismo

mediante el mtodo addJavascriptInterface.

El segundo parmetro del mtodo se corresponde con el identificador que tendr esta interfaz en el
cdigo HTML. Esto le permite aadir ms 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 cdigo representa un botn que ejecuta el mtodo showAndroid presente en la
interfaz JavaScript.

Almacene este cdigo HTML en una variable de tipo String y crguela en el WebView mediante
el mtodo 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: