Editions ENI Livres | Vidéos | e-Formations
WebView
Introduction
Un contrôle d’affichage web ou WebView incorpore dans votre application une vue qui affiche du contenu web.
Le contrôle WebView
1. iOS
La vue d’affichage web d’iOS affiche un contenu à l’aide du moteur de rendu de WebKit. Il gère tout type de contenu web comme le navigateur Safari.
La vue permettant d’afficher du contenu web est la classe UIWebView provenant de UIKit.
Création d’un contrôle UIWebView dans un UIViewController
UIWebView webView = new UIWebView(View.Bounds);
// Ajout du contrôle en tant que sous-élément principal
View.AddSubview(webView);
Une application iOS fonctionnant sur iOS 10.0 ou version supérieure doit inclure dans son fichier Info.plist les clés de description d’utilisation pour les types de données dont elle a besoin sinon elle ne fonctionnera pas. Pour accéder aux données photo d’un utilisateur, le fichier doit inclure la clé NSPhotoLibrary UsageDescription et NSCameraUsageDescription.
Vous ne devez pas utiliser une vue UIWebView comme sous vue d’une vue UIScrollView. Si vous le faites, un comportement inattendu peut se produire, car les évènements tactiles pour les deux vues peuvent être mélangés et mal gérés.
2. Android
Comme pour iOS, l’affichage de page web repose sur le moteur de rendu WebKit et se fait à l’aide du contrôle WebView.
Création d’un contrôle WebView dans une Activity
<?XML version="1.0"...Navigation vers une page externe
L’utilisation la plus courante des WebView est l’affichage d’un contenu web distant, c’est-à-dire d’une page web classique.
1. iOS
a. Affichage d’une URL HTTPS
Il est très simple d’afficher une page web distante dans une application iOS, il suffit d’utiliser la méthode LoadRequest de la vue UIWebView et de lui spécifier en paramètre une NSUrlRequest avec comme URL la page ciblée.
Navigation d’une UIWebView vers une page externe utilisant une URL HTTPS
// Création de l'uri
Uri uri = new Uri("https://www.google.fr");
// Chargement de l'uri
webView.LoadRequest(new Foundation.NSUrlRequest(uri));
b. Affichage d’une URL HTTP
À partir d’iOS 9.0, si vous voulez afficher des pages web qui ne sont pas sécurisées, il faut ajouter des autorisations dans le fichier Info.plist. Si celui-ci n’est pas configuré, la UIWebView reste blanche et la sortie de l’application affiche le message d’erreur ci-dessous.
Navigation d’une UIWebView vers une page externe utilisant une URL HTTPS
// Création de l'uri
Uri uri = new Uri("http://www.google.fr");
// Chargement de l'uri
webView.LoadRequest(new Foundation.NSUrlRequest(uri));
Message d’erreur affiché dans la sortie lors de la navigation sur une URL HTTP
App Transport Security...Navigation vers une page interne
Un contrôle d’affichage web peut également servir à afficher du contenu HTML préformaté et intégré à l’application. Cela est notamment utilisé pour les conditions générales d’utilisation ou autres informations qui sont souvent déjà utilisées sur un site web. La simplicité d’édition et de réutilisation du contenu HTML prend alors tout son sens quand l’on peut intégrer des pages web dans l’application.
Imaginons une page HTML simple comprenant le code suivant :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Hello</h1>
<br/>
<span>Voici une page web interne à l'application.</span>
</body>
</html>
Voyons comment utiliser une page HTML locale selon les plateformes.
1. iOS
Charger une page web locale est très simple sur iOS.
a. Ajout du fichier HTML dans l’application
Afin que la vue UIWebView puisse accéder au fichier, il faudra l’embarquer dans l’application.
Créer un dossier...
Navigation vers du contenu HTML brut
Pour des usages spécifiques, le contenu HTML ciblé peut être manipulé sous forme de chaîne de caractères. Cela peut notamment être utile si vous récupérez ce contenu depuis un service tiers, que vous construisez ce contenu ou que vous devez le modifier.
1. iOS
a. Navigation vers une chaîne de caractères
Pour naviguer vers une page web HTML générée dynamiquement, il faut utiliser la méthode LoadHtmlString.
Navigation vers un contenu HTML généré
// Dossier ou iOS
string contentDirectory =
Path.Combine(NSBundle.MainBundle.BundlePath, "Content/");
// Flux HTML à afficher dans la UIWebView
string html = "<html><body><h1>Hello</h1><br /><span>Voici une
page web issue d'une chaîne de caractères.</span></body></html>";
// Chargement de la string de la page HTML
webView.LoadHtmlString(html, new NSUrl(contentDirectory,true));
b. Navigation vers une chaîne de caractères qui utilise un contenu embarqué dans l’application
Donner un chemin vers le répertoire de contenu permet à la vue UIWebView de résoudre les URL relatives comme les images, le css, le JavaScript…
Si vous aviez mis une image dans votre dossier Content il aurait été...
Évènements de navigation
Lorsque l’on utilise une WebView pour afficher du contenu, il peut être intéressant ou nécessaire de réagir aux évènements de navigation, tels que le lancement de la navigation, la fin de navigation ou les erreurs potentielles qui pourraient surgir.
1. iOS
La vue UIWebView a plusieurs évènements permettant de connaître les changements d’état de la UIWebView.
Les évènements principaux sont :
-
LoadStarted : évènement levé lorsque la vue charge un élément de la page.
-
LoadError : évènement levé lorsque le contrôle termine une navigation.
-
LoadFinished : évènement levé lorsqu’une erreur interrompt la navigation.
La propriété IsLoading permet de savoir si la UIWebView a fini de charger ses éléments.
Création d’une propriété WebView
public UIWebView WebView { get ;set ;}
Instanciation de la vue WebView
WebView = new UIWebView(View.Bounds);
// Ajout du contrôle en tant que sous-élément au contrôleur principal
View.AddSubview(WebView);
// Abonnement aux évènements de la UIWebView
WebView.LoadStarted += WebView_LoadStarted;
WebView.LoadError += WebView_LoadError;
WebView.LoadFinished += WebView_LoadFinished;
Code associé aux différents évènements
void WebView_LoadStarted(object sender, EventArgs e)
{
// Affiche l'indicateur d'activité réseau.
UIApplication.SharedApplication.NetworkActivityIndicatorVisible
= true;
Debug.WriteLine("Chargement d'un élément de la page");
}
void WebView_LoadError(object sender, UIWebErrorArgs e)
{
Debug.WriteLine("Erreur lors d'un élément de la page");
Debug.WriteLine(e.Error.LocalizedDescription);
Debug.WriteLine(e.Error.LocalizedFailureReason);
}
void WebView_LoadFinished(object sender, EventArgs e)
{
// Affiche l'indicateur d'activité réseau.
UIApplication.SharedApplication.NetworkActivityIndicatorVisible...Communication avec la WebView et le code-behind
Dans certains cas d’usage, il peut être intéressant de faire communiquer le code JavaScript de la WebView et le code de l’application.
1. iOS
a. Appeler du code JavaScript depuis le code C#
Il est très simple depuis le code C# d’appeler du code JavaScript.
La classe UIWebView le permet via la méthode EvaluateJavascript qui prend comme argument une chaîne de caractères.
La première étape pour pouvoir invoquer un code JavaScript est de créer un fichier HTML avec le code JavaScript à invoquer.
Pour ajouter le fichier HTML, il faut :
Faire un clic droit sur le projet.
Cliquer sur Ajouter.
Sélectionner Web, ensuite Fichier HTML vide .
Faire un clic droit sur le fichier, cliquer sur Propriété.
À la propriété Build action mettre la valeur BundleResource.
Dans notre exemple, nous allons créer une page HTML simple avec une fonction JavaScript qui affichera une pop-up avec comme contenu « Hello iOS ».
Contenu du fichier HTML csharp_call_javascript.html
<html>
<body>
<script type="text/javascript">
// Fonction JavaScript permettant d'afficher 'Hello iOS'
function myFunction ()
{
alert('Hello iOS');
}
</script>
<h1>Hello</h1>
<br />
<span>Voici une page web avec un code javascript invoqué depuis
le codebehind.</span>
</body>
</html>
Ensuite pour pouvoir invoquer un code JavaScript, il faut créer la UIWebView et la charger avec le flux HTML précédemment défini.
Création de la UIWebView et chargement de la page HTML
UIWebView webView = new UIWebView(View.Bounds);
WebView = webView;
// Recherche du chemin de la ressource
string htmlPath = NSBundle.MainBundle.PathForResource("Content/
csharp_call_javascript", "html");
// Lecture du flux HTML
string htmlContents = File.ReadAllText(htmlPath);
// Chargement de la string de la page HTML
webView.LoadHtmlString(htmlContentsnull); ...Conclusion
Dans ce chapitre, nous avons vu combien il est simple d’intégrer du contenu HTML dans nos applications.
Nous avons également vu les différences entre l’intégration de contenu local à notre application et du contenu web.
Enfin, nous avons également abordé le sujet épineux des interactions entre notre contenu HTML et notre application via les scripts JavaScript notamment.
Même si les mécanismes sont différents selon les plateformes et qu’ils demandent un temps non négligeable de montée en compétence, tous ces éléments permettront à votre application de manipuler du contenu commun et dynamique.
