WebView

Présentation d'une page web sous Android

Ce site ne sera plus alimenté de contenu après août 2014. Tous les nouveaux articles seront redigés pour www.waitingforcode.com

Android n'est pas conçu dans un seul but précis. Il permet aussi bien d'envoyer les SMS, de consulter sa boîte e-mail que de naviguer sur l'internet. C'est d'ailleurs la raison pour laquelle notre exemple d'application Android contiendra une partie consacrée à l'affichage d'une page web.

Afficher une page web sous Android

L'affichage d'une page web sous Android s'effectue dans la vue qu'on appelle WebView. Dans le rendu des pages web est utilisé le moteur WebKit. Certaines méthodes issues d'une navigation classique sur l'ordinateur, notamment : l'utilisation de l'historique, des boutons précédent et suivant, la recherche textuelle, le zoomage de la page.

Le chargement d'une page web sera présenté dans l'activité DisplayWebsiteActivity, basée sur le layout display_website.xml. L'implémentation du WebView sera enrichie par des fonctionnalités supplémentaires, comme le cache ou le blockage explicit du JavaScript. Regardons cela sur les fichiers d'exemple. Le premier représente le layout, l'autre l'activité :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" xmlns:tools="http://schemas.android.com/tools">
    <WebView  
        android:id="@+id/displayWebsite"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />

</LinearLayout>

Un seul élément est présent dans le layout. Il (WebView) contiendra la représentation visuelle de la page web chargée. Le chargement de la page se fera dans ce fichier d'activité :

afficher le code

Regardons d'abord la méthode surchargée, onKeyDown(). En fait elle fait en sorte que l'appui sur la touche de retour de l'appareil se comporte comme le bouton "précédent" dans un navigateur web. Supposons donc que l'on a ouvert une page index.html et qu'on s'est déplacée vers index2.html. Désormais, en appuyant sur la touche de retour, on reviendra à la page index.html de notre WebView.

En ce qui concerne la fonction onCreate(), elle est plus complexe :
- tout d'abord on indique explicitement que le JavaScript ne doit pas être géré (setJavaScriptEnabled()). Il est désactivé par défaut, mais pour une meilleure clarté, on le désactive explicitement.
- la méthode setWebViewClient() permet de spécifier le client qui sera chargé d'afficher de gérer les requêtes et notifications. On lui implémente également une méthode qui sera invoquée à chaque fois où le chargement d'une page échoue. C'est là où l'on affichera le bouton de retour au premier écran ainsi que le message d'erreur. On autorise aussi l'accès aux fichiers (setAllowFileAccess()).
- grâce à setDomStorageEnabled paramétré en vrai, on active le Web Storage.
- prochaines lignes concernent le cache. setCacheMode() indique le mode cache qu'on utilisera. Celui par défaut est spécifié. Il précise que si aucun comportement spécifique n'est implementé, le cache est utilisé s'il n'est pas expiré et s'il est disponible. Dans le cas contraire, la page est chargée depuis l'internet. Plus loin on détermine aussi la taille maximale du cache (setAppCacheMaxSize()) et le répertoire du cache (setAppCachePath()). Finalement on active le cache pour la page chargée (setAppCacheEnabled()).
- après toute cette configuration on peut finalement charger la page en question. L'adresse sera suffixée par le paramètre "?source=androidApp" qui indique l'origine de la visite.

Il est aussi important de noter que pour activer l'affichage des pages web, il faut autoriser notre application à le faire, en placant le code suivant dans AndroidManifest.xml :

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

Cette permission autorise l'application à se connecter à l'internet.

Comment tester le cache du WebView sous Android ?

L'un des moyens qui permet de tester si la sauvegarde de la page dans le cache fonctionne est le suivant :

  1. On charge la page avec la configuration
    webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
  2. On rajoute un écouteur dans le cas d'une réponse négative :
    webView.setWebViewClient(new WebViewClient() {
    	   public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
    		   String messageTemplate = resources.getString(R.string.error_loading_webiste);
    		   Log.d(LOG_TAG, String.format(messageTemplate, description));
    		   buttonMain.setVisibility(View.VISIBLE);
    		   view.setVisibility(View.INVISIBLE);
    		   Toast.makeText(activity, String.format(messageTemplate, description), Toast.LENGTH_LONG).show();
    	   }
    });
    
  3. On retente le chargement de la page avec la configuraiton qui force l'application à lire la page depuis le cache:
    webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ONLY);
    On lance le chargement. On devrait voir la page apparaître.
  4. A la dernière étape on change l'URL à charger et on relance l'activité. Normalement on devrait voir la popup Toast qui affiche le message d'erreur sur le chargement de la page. C'est parce que la page n'a pas été mise dans le cache et qu'on accepte uniquement le chargement depuis le cache (mode LOAD_CACHE_ONLY).

Un des 5 modes de cache peut être utilisé :

  • LOAD_CACHE_ELSE_NETWORK : utilise le cache quand il est disponible (même quand le cache est périmé). Sinon, il charge les ressources.
  • LOAD_CACHE_ONLY : utilise uniquement le cache.
  • LOAD_DEFAULT : utilise le cache quand il est disponible et n'est pas périmé. Sinon, il charge les ressources directement.
  • LOAD_NORMAL : ce mode a été considéré comme obsolète à partir de la version 17 de l'API. Il a le même effet que LOAD_DEFAULT.
  • LOAD_NO_CACHE : le cache n'est jamais utilisé.
Bartosz KONIECZNY Vues et layouts

Une question ? Une remarque ?

*

*

Un conseil PHP

Utiliser XPath pour calculer le nombre d'apparitions d'un élément.

XPath est un langage qui sert à se déplacer au sein d'un document XML. Il contient beaucoup de fonctionnaltiés utilies lors de l'analyse de ces documents. Par exemple, pour voir le nombre d'apparition d'un tag, il suffit d'utiliser la méthode count et placer comme son paramètre le chemin vers les éléments à calculer. Imaginons qu'on veut calculer le nombre de noeds d'erreur. En PHP cela va se présenter ainsi :

// $this->xpath is the instance of DOMXPath
echo (int)$this->xpath->evaluate("count(/error)");