Alert de Javascript en un WebView (Vista Web) de Android

Para crear un contendor web en Android para una aplicación que hemos creado debemos usar la clase WebView y crearnos una vista en un fichero de configuración xml de Android. Sobre esto se puede encontrar mucha información en la web. Sin embargo, en este ejemplo, veremos como mostrar un "alert" que se realice mediante Javascript en las páginas que visitemos en el navegador que vamos a crear. También veremos como configurar algunas opciones del navegador como el zoom y cómo se habilita o deshabilita el código Javascript de las páginas visitadas. Al lío.

 Lo primero es crearnos la vista web y meterla en la carpeta /res/layout. Creamos un nuevo xml y le ponemos un nombre, en nuestro ejemplo: "web.xml". El contenido debe ser algo como esto:

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

Hasta aquí todo bien ¿no?. Queremos que ocupe toda la pantalla (los dos fill_parent). Vamos a ver la clase que extiende de Activity:

package com.prueba;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class VistaWeb extends Activity
{
    WebView mWebView;
        
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.web);
        

        
        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(true);
        
        //Esta es la url que vamos a cargar en este caso un html en local:
        mWebView.loadUrl("file:///android_asset/prueba.html");   

        //Asignamos a la vista web el cliente (navegador)
        //que hemos creado como clase privada (ver más abajo
        //y que extiende del que trae Android por defecto. 
        //Esta clase maneja el navegador: 
        mWebView.setWebViewClient(new MiWebViewClient());

        //Asignamos a la vista web la clase MiWebViewClient 
        //que hemos creado como clase privada (ver más abajo)
        //y que extiende del que trae Android por defecto.
        //Esta clase permite controlar los eventos que se producen
        //en el navegador:
        mWebView.setWebChromeClient(new MiWebCromeClient());
    }
   
    //Extendemos el navegador por defecto
    private class MiWebViewClient extends WebViewClient 
    {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) 
        {
            view.loadUrl(url);
            return true;
        }
    }
    
    //Con esta clase controlamos algunos eventos javascript del navegador
    final class MiWebCromeClient extends WebChromeClient 
    {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) 
        {
            new AlertDialog.Builder(view.getContext()).setMessage(message).setCancelable(true).show();
            result.confirm();
            return true;
        }       
     }
}

Con esto ya podemos usar un alert de Javascript en la página web que mostramos en la vista web del navegador de nuestro Android. En el ejemplo propuesto, dentro del código de "prueba.html" podemos incluir alertas Javascript.

Eso es todo de momento.

Un saludo!

Continuar Leyendo...