Module de Programmation Android (LP PRISM AirFrance)

TD5 - Applications web

• le chargement de pages web au sein d'applications Android ;
• l'interaction entre les deux.

Mise en place

Utilisation d'un proxy

• Si le système est en anglais : Wireless & networks/Mobile networks/Access Point Names/TelKila
• Si le système est en français : Sans fil et réseaux/Réseaux mobiles/Noms des points d'accès/TelKila

Plusieurs façons d'afficher des pages web

Activités web

• Surcharger la méthode onStart de la classe TD5Activity, de manière à lancer une activité web affichant cette page:
    // Interprétation de l'url
  Uri uri = Uri.parse("https://www.lri.fr/~keller/Enseignement/Orsay/LP-PRISM-AF/TD5.html");
  // Création de l'intention dédiée aux activités web
  Intent intent = new Intent(Intent.ACTION_VIEW, uri);
  // Lancement de l'activité web
  startActivity(intent);
Ne pas oublier d'appeler également la méthode onStart de la super-classe.
• Tester.

Vues web

• Supprimer (ou commenter) de la méthode onStart le lancement de l'activité web décrit ci-dessus.
• Créer une interface pour l'activité TD5Activity, de manière à afficher une zone de texte contenant la chaîne "Vue web", et en dessous, une vue web, en adaptant le code suivant :
    <WebView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:id="@+id/webview"/>
• Récupérer la vue web dans la méthode onCreate, par exemple dans une variable nommée webview. Charger la page web du TD dans cette vue lors de la méthode onStart : webview.loadUrl("https://www.lri.fr/~keller/Enseignement/Orsay/LP-PRISM-AF/TD5.html");
• Tester.

Interaction avec JavaScript

Activation de JavaScript

zone de test de javascript

• Effectuer ce test.
• Activer JavaScript. Pour cela, ajouter à la méthode onStart :
    // Récupération des paramètres associés à la vue web
  WebSettings webSettings = webview.getSettings();
  // Activation de JavaScript dans ces paramètres
  webSettings.setJavaScriptEnabled(true);

• Re-tester.

Utilisation de code Android en JavaScript

• Tester ces deux boutons dans votre application Android, ainsi que dans un navigateur sur un ordinateur. Que se passe-t-il ?

• Créer une classe implantant cette méthode :   // Cette classe doit obligatoirement être publique
  public class WebAppInterface {
    Context mContext;

    // On définit un constructeur qui récupère le contexte de l'activité
    WebAppInterface(Context c) {
      mContext = c;
    }

    // Ce mot-clé est obligatoire pour pouvoir appeler la méthode en JavaScript
    @JavascriptInterface
    // On définit la méthode appelée en JavaScript
    public void alert(String toast) {
    // On affiche une alerte Android, implantée par la classe Toast
      Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
  }
La classe Toast permet, en Android, d'afficher de petites alertes.
• Lier cette classe à la vue web, en ajoutant dans la méthode onStart :
    webview.addJavascriptInterface(new WebAppInterface(this), "Android");
• Tester.

Navigation

• Dans l'application Android, cliquer sur un des liens du TD. Que se passe-t-il ?
• Pour pouvoir suivre des liens sans quitter l'application, il faut utiliser un client web plus complet dans la vue web. Pour cela, ajouter à la méthode onStart :
    webview.setWebViewClient(new WebViewClient());

• Modifier l'interface de TD5Activity afin d'ajouter deux boutons, un pour revenir à la page précédente, et un pour ensuite retourner à la page suivante.
• Attacher une méthode à ces boutons réalisant l'action voulue, en utilisant les méthodes goBack et goForward de la classe WebView.
• Tester.

À vous de jouer

1. Ajouter à l'interface un bouton permettant de rafraîchir la page web. On pourra utiliser la méthode reload de la classe WebView.
2. Ajouter à l'interface une zone de texte éditable, dans le but que l'utilisateur entre une url, et un bouton, de manière à ce que l'url entrée par l'utilisateur se charge dans le vue web lorsqu'on clique dessus.
3. Faire en sorte que l'url se charge lorsqu'on clique également sur le bouton suivant :
   Le code HTML de ce bouton est :
    <input type="button" value="Charger l'url se trouvant dans la zone de texte Android" onClick="loadUserUrl()" />
 <script type="text/javascript">
  function loadUserUrl() {
  Android.loadUserUrl();
  }
 </script>


Pour aller plus loin