Visualizzare pagine Web: WebView

Una WebView è un tipo di View che permette di visualizzare pagine web. La sua utilità principale è quella di permettere di integrare una web application o più in generale un sito web nella propria applicazione. Il motore della WebView risiede nella libreria WebKit già inclusa all’interno di Android per questo possiamo parlare di questo componente come di un browser vero e proprio in grado di eseguire Javascript e mostrare layout nella maniera più completa possibile.

Nella figura viene mostrato un semplicissimo esempio in cui il layout dell’Activity è costituito esclusivamente dalla WebView e la si è usata per visualizzare direttamente il contenuto della pagina http://www.html.it.

Per ottenere questo risultato si sono compiute tre semplici operazioni:

1. si è creato un layout come il seguente:

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

2. si è richiesto alla WebView, già nell’onCreate dell’Activity, di caricare l’indirizzo remoto:

   @Override
   	protected void onCreate(Bundle savedInstanceState) 
   	{
   		super.onCreate(savedInstanceState);
   		setContentView(R.layout.activity_main);
   		WebView myWebView = (WebView) findViewById(R.id.webview);
   		myWebView.loadUrl("http://www.html.it");
   	}

3. si è provveduto ad impostare nell’AndroidManifest.xml, all’interno direttamente del nodo <manifest>, la permission per il collegamento ad Internet:

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   	...
   	...
   	<uses-permission android:name="android.permission.INTERNET"/>
   
   	<application
   		...
   		...

Per la prima volta in questo corso, si incontra una permission. Rappresenta un aspetto di sicurezza che deve essere garantito ogni volta che l’applicazione vuole intraprendere attività di comunicazione o di interazione particolari. Le permission devono essere accettate dall’utente al momento dell’installazione e non nell’esecuzione a runtime. In questo caso, la nostra applicazione vuole accedere ad Internet per mezzo della WebView e per questo deve dichiararlo, semplicemente inserendo l’apposita permission nel manifest.

WebView e Javascript

Non si può parlare di Web al giorno d’oggi senza considerare Javascript. Di default, il suo uso in una WebView non è attivo. Per abilitare Javascript è sufficiente inserire queste righe di codice:

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Come si vede si è fatto uso delle WebSettings di WebView. Si tratta di un insieme di configurazioni che possono essere impostate per regolare tutti i comportamenti del componente quando si trova a fronteggiare le classiche problematiche da browser:

• cache;
• font e layout;
• privacy e sicurezza.

La WebView può fare anche in modo che Javascript interagisca con il codice Java presente nell’applicazione. Per fare questo è necessario:

• creare il codice Java che vogliamo richiamare in Javascript apponendo l’annotazione @JavascriptInterface sui metodi che devono essere visibili “da Javascript”:

      public class WebAppInterface 
  {
     		...
  		...
  
      		@JavascriptInterface
      		public void executeJavaCode() 
  		{
          		/*
  				Codice da attivare DA JAVASCRIPT
  			*/
      		}
  	}

• registriamo presso la WebView il nostro oggetto Java, assegnandogli un’etichetta di nostra scelta, in questo caso AndroidObject:

  WebView myWebView = (WebView) findViewById(R.id.webview);
  myWebView.addJavascriptInterface(new WebAppInterface(), "AndroidObject");

Dopo questi passi, da Javascript potremo invocare il metodo executeJavaCode sull’oggetto Java che sarà stato registrato nella WebView con l’etichetta AndroidObject. Ad esempio, nella pagina web che richiameremo dalla WebView potremo usare il seguente snippet Javascript:

<script type="text/javascript">
    function interactWithAndroid() 	
    {
        AndroidObject.executeJavaCode();
    }
</script>