Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Xamarin
  3. WebView
Extrait - Xamarin Développez vos applications multiplateformes pour iOS, Android et Windows
Extraits du livre
Xamarin Développez vos applications multiplateformes pour iOS, Android et Windows Revenir à la page d'achat du livre

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.