Magazine Internet

[Windows8] Matez le WebView

Publié le 29 août 2012 par Jeremy.jeanson

Si vous vous êtes intéressé au développement pour le Windows Store et que vous envisagiez d’utiliser le WebView (control XAML) vous n’avez pas pu passer à côté des préconisations suivantes :

· N’utilisez pas le WebView.

· Le contenu affiché dans le WebView ne doit pas rompre avec le design de votre application.

· Le comportement par défaut du WebView doit être inhibé (aucune navigation ne doit être possible).

· … etc …

Malheureusement, la documentation ne dit pas comment se passer du WebView et endors moins comment respecter ces règles L

Pire, le control ne dispose pas de propriétés en rapport avec ces préconisations.

Ayant moi-même eu besoin d’utiliser ce control pour l’une de mes applications, j’ai trouvé le moyen de respecter ces règles en codant une attached property (MVVM oblige). Ma logique pour réaliser celle-ci a été simple : vu que le control ne peut pas être maitrisé finement, je vais maitriser le contenu que je lui donne à afficher.

Mes objectifs ont donc été simples :

· Fournir à mon contenu un style HTML en rapport avec mon application (fond clair avec texte foncé écrit en Segoe)

· Inhiber les liens HTML (je remplace les références aux url par une chaine vide)

Afin d’obtenir ce résultat, j’ai réalisé le code suivant :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace MyLib.Common
{
    public sealed class WebViewUtility
    {
        #region Déclarations

        // Pattern utilisé pour trouver les url à subsituer
        private const String _pattern = @"(href=""[^""]+"")|(href='[^']+')|(href=[^ >]+)";
        private const String BindableSourcePropertyName = "BindableSource";
        
        // code HTML pour respecter le style de mon applcication
        private const String HtmlBeforeContent = @"<html><body style='background-color:#FFFFFF;color:#1D1D1D;height:100%;font-family:Segoe UI Symbol;margin:0;padding:0;'>";
        private const String HtmlAfterContent = @"</body></html>";

        private static readonly Regex _regex;
        public static readonly DependencyProperty BindableSourceProperty;

        #endregion

        #region Constructeur

        static WebViewUtility()
        {
            // DependencyProperty
            BindableSourceProperty = DependencyProperty.RegisterAttached(
                BindableSourcePropertyName, 
                typeof(String), 
                typeof(WebViewUtility),
                new PropertyMetadata(null, BindableSourcePropertyChanged));

            // Regex pour le replamcement des liens
            _regex = new Regex(_pattern,RegexOptions.CultureInvariant | RegexOptions.IgnoreCase);
        }

        #endregion

        #region DependencyProperty

        public static string GetBindableSource(DependencyObject obj)
        {
            return (string)obj.GetValue(BindableSourceProperty);
        }

        public static void SetBindableSource(DependencyObject obj, string value)
        {
            obj.SetValue(BindableSourceProperty, value);
        }

        public static void BindableSourcePropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            WebView browser = o as WebView;
            if (browser != null)
            {
                // Remplacer les liens
                String content = e.NewValue as string;
                if (content == null) return;
                content = _regex.Replace(content, String.Empty);

                // Construction de code à afficher
                StringBuilder sb = new StringBuilder();
                sb.Append(HtmlBeforeContent);
                sb.Append(content);
                sb.Append(HtmlAfterContent);

                browser.NavigateToString(sb.ToString());
            }
        }
        #endregion
    }
}

Côté XAML, pour utiliser ce code, j’ai simplement

<Page
    x:Class="MyReader.WinRt.Common.CustomWebView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyReader.WinRt.Common"
    xmlns:mylib="using:MyLib.Common">    
    <Grid>
        <WebView
            x:Name="WebView"
            mylib:WebViewUtility.BindableSource="{Binding}"/>
        <Rectangle x:Name="Rect" Fill="Transparent"/>
    </Grid>
</Page>

Voilà, il ne vous reste plus qu’à modifier le Binding ne fonction de vos besoins ;)

Je confirme que ce code permet la validation de vos applications pour le Store, l’une de mes applications utile ce code et est aujourd’hui certifiée et publiée sur le Store

- MyReader ( http://apps.microsoft.com/webpdp/app/myreader/2b93204a-f8c6-4211-9f3b-664456c34656 )


Retour à La Une de Logo Paperblog

A propos de l’auteur


Jeremy.jeanson 1573 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte