Android activities
1. Introduction
Cette activité est en cours de rédaction.
Le but ici est de comprendre l’utilité d’un composant puissant : WebView.
Une fois ce TP terminé, vous pourrez regarder, voire tester le résultat de
ce tutoriel (en anglais).
Les principaux avantage d’une application web sont :
- Pas d’install (sauf navigateur)
- Pas de mise à jour (sauf sur le serveur)
- Accès plus large
Les inconvénients :
- Il faut un connexion à Internet (en même temps, une application lourde sérieuse se connectera aussi à Internet
- Pas de vitrine sur les plateformes de téléchargement
Il y a au moins deux façons de se connecter à une application web :
- depuis un navigateur ;
- depuis une application qui navigue.
Le principal avantage d’une application, c’est qu’elle fait partie intégrante
du système d’exploitation. C’est la raison d’être du composant WebView,
créer des applications web.
De nos jours, on peut ne pas utiliser de webview directement, mais utiliser un cadriciel générateur d’applications ciblant plusieurs OS, comme par exemple Ionic ou Cordova.
2. Un affichage riche
Vous pouvez commencer par survoler pendant deux minutes chacune la documentation de WebView, et cette page.
Ensuite, créez une application nommée TestWebView contenant une activité
principale, elle-même contenant un seul composant : une WebView.
2.1. Premier contenu
On peut envoyer du contenu HTML à la webview avec :
String content = "<html><body>Bonjour tout le <b>monde</b> !</body></html>";
webview.loadData(content, "text/html", "utf-8");
2.2. Afficher un fichier HTML
Pour afficher un fichier stocké dans assets, utiliser :
webview.loadUrl("file:///android_asset/mon_fichier.html");
file:///android_asset/ pointe vers un répertoire sur l’appareil où les
fichiers assets ont été copiés. Il est conseillé de bien l’organiser puisque
les fichiers de assets ne seront peut-être pas tous des fichiers .html.
Ajoutez un lien depuis mon_fichier.html vers mon_autre_fichier.html.
- Que se passe-t-il quand on clique sur ce lien ?
- La webview peut-elle se comporter autrement ?
2.3. Fichiers auxiliaires
<link href="mon_fichier.css" media="all" rel="stylesheet" />
<script src="mon_fichier.js"></script>
Dans mon_fichier.js, mettez un simple document.write('Bonjour!').
Pour déboguer à distance :
- Ouvrir le navigateur Chrome (celui qui est installé sur votre ordinateur,
pas celui de votre appareil Android), et taper dans la barre d’adresse :
chrome://inspect
Une liste de webviews devrait vous être proposées. - Pour votre webview, il faudra :
- autoriser l’exécution de JS ;
- autoriser le déboguage à distance (voir ce commit).
- Et lire attentivement les instructions ici.
Serez-vous capable d’installer un des exemples de Bootstrap dans la webview de votre application ?
3. Échange de données
Ici, on cherche à faire communiquer Android en tant que système d’exploitation (communiquant par exemple avec d’autres applications ou des capteurs), avec la webview, ou plus précisément le navigateur qu’elle contient. Le navigateur, à son tour communique avec le HTML, le CSS et le JS.
3.1. Android vers WebView
3.1.1. Simple injection de HTML
Reprendre la construction du HTML en y incluant des données avant de le passer à la webview (bof) :
String nom = CAPTURE DEPUIS UN FORMULAIRE D’UNE AUTRE ACTIVITÉ
String content = "<html><body>Bonjour " + nom + " !</body></html>";
3.1.2. Passage de données à JS
Voir ce commit.
En passant des données à JS, on peut aussi passer des données à HTML et à CSS.
Saurez-vous envoyer, depuis le formulaire d’une activité, un code de couleur CSS au fond (background) de la webview contenue dans une autre activité ?
3.2. WebView vers Android
Voir ces liens :
Saurez-vous déclencher, depuis une page dans une webview, un évènement de partage ?