Partager via

Comment : implémenter la communication bidirectionnelle entre le code DHTML et le code d'application cliente

  • Article

Vous pouvez utiliser le contrôle WebBrowser pour ajouter du code d'application web dynamique HTML (DHTML) existant à vos applications clientes Windows Forms. Cela est utile quand vous avez consacré beaucoup de temps de développement à la création de contrôles DHTML et que vous souhaitez tirer parti des fonctionnalités d'interface utilisateur enrichies des Windows Forms sans avoir à réécrire le code existant.

Le contrôle WebBrowser vous permet d'implémenter la communication bidirectionnelle entre votre code d'application cliente et votre code de script de page web par le biais des propriétés ObjectForScripting et Document. Vous pouvez aussi configurer le contrôle WebBrowser pour que vos contrôles web fusionnent de façon homogène avec d'autres contrôles sur votre formulaire d'application, en masquant leur implémentation DHTML. Pour fusionner les contrôles de façon homogène, mettez en forme la page affichée pour que sa couleur d'arrière-plan et le style visuel correspondent au reste du formulaire et utilisez les propriétés AllowWebBrowserDrop, IsWebBrowserContextMenuEnabled et WebBrowserShortcutsEnabled pour désactiver les fonctionnalités standard du navigateur.

Pour incorporer du code DHTML dans votre application Windows Forms

  1. Affectez la valeur false à la propriété AllowWebBrowserDrop du contrôle WebBrowser pour empêcher le contrôle WebBrowser d'ouvrir les fichiers qui sont déposés dessus.

    webBrowser1.AllowWebBrowserDrop = false;

    webBrowser1.AllowWebBrowserDrop = False

  2. Affectez la valeur false à la propriété IsWebBrowserContextMenuEnabled du contrôle pour empêcher le contrôle WebBrowser d'afficher son menu contextuel quand l'utilisateur clique dessus avec le bouton droit de la souris.

    webBrowser1.IsWebBrowserContextMenuEnabled = false;

    webBrowser1.IsWebBrowserContextMenuEnabled = False

  3. Affectez la valeur false à la propriété WebBrowserShortcutsEnabled du contrôle pour empêcher le contrôle WebBrowser de répondre aux touches de raccourci.

    webBrowser1.WebBrowserShortcutsEnabled = false;

    webBrowser1.WebBrowserShortcutsEnabled = False

  4. Définissez la propriété dans le ObjectForScripting constructeur du formulaire ou remplacez la OnLoad méthode.

    Le code suivant utilise la classe de formulaire proprement dite pour l'objet de script.

    webBrowser1.ObjectForScripting = new MyScriptObject(this);

    webBrowser1.ObjectForScripting = New MyScriptObject(Me)

  5. Implémentez votre objet de script.

    public class MyScriptObject
{
    private Form1 _form;

    public MyScriptObject(Form1 form)
    {
        _form = form;
    }

    public void Test(string message)
    {
        MessageBox.Show(message, "client code");
    }
}

    Public Class MyScriptObject
    Private _form As Form1

    Public Sub New(ByVal form As Form1)
        _form = form
    End Sub

    Public Sub Test(ByVal message As String)
        MessageBox.Show(message, "client code")
    End Sub

End Class

  6. Utilisez l'objet window.external dans votre code de script pour accéder aux propriétés et aux méthodes publiques de l'objet spécifié.

    Le code HTML suivant montre comment appeler une méthode sur l'objet de script à partir d'un clic de bouton. Copiez ce code dans l'élément BODY d'un document HTML que vous chargez à l'aide de la méthode Navigate du contrôle ou que vous affectez à la propriété DocumentText du contrôle.

    <button onclick="window.external.Test('called from script code')">
    call client code from script code
</button>

  7. Implémentez dans votre code de script des fonctions que votre code d'application utilisera.

    L'élément HTML SCRIPT suivant fournit un exemple de fonction. Copiez ce code dans l'élément HEAD d'un document HTML que vous chargez à l'aide de la méthode Navigate du contrôle ou que vous affectez à la propriété DocumentText du contrôle.

    <script>
function test(message) {
    alert(message);
}
</script>

  8. Utilisez la propriété Document pour accéder au code de script à partir de votre code d'application cliente.

    Par exemple, ajoutez le code suivant à un gestionnaire d'événements de bouton Click.

    webBrowser1.Document.InvokeScript("test",
    new String[] { "called from client code" });

    webBrowser1.Document.InvokeScript("test", _
    New String() {"called from client code"})

  9. Quand vous avez terminé de déboguer votre code DHTML, affectez la valeur true à la propriété ScriptErrorsSuppressed du contrôle pour empêcher le contrôle WebBrowser d'afficher des messages d'erreur pour les problèmes de code de script.

    // Uncomment the following line when you are finished debugging.
//webBrowser1.ScriptErrorsSuppressed = true;

    ' Uncomment the following line when you are finished debugging.
'webBrowser1.ScriptErrorsSuppressed = True

Exemple

L’exemple de code complet suivant fournit une application de démonstration que vous pouvez utiliser pour comprendre cette fonctionnalité. Le code HTML est chargé dans le contrôle WebBrowser via la propriété DocumentText au lieu d'être chargé à partir d'un fichier HTML distinct.

using System;
using System.Windows.Forms;

public class Form1 : Form
{
    private WebBrowser webBrowser1 = new WebBrowser();
    private Button button1 = new Button();

    [STAThread]
    public static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new Form1());
    }

    public Form1()
    {
        button1.Text = "call script code from client code";
        button1.Dock = DockStyle.Top;
        button1.Click += new EventHandler(button1_Click);
        webBrowser1.Dock = DockStyle.Fill;
        Controls.Add(webBrowser1);
        Controls.Add(button1);
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        webBrowser1.AllowWebBrowserDrop = false;
        webBrowser1.IsWebBrowserContextMenuEnabled = false;
        webBrowser1.WebBrowserShortcutsEnabled = false;
        webBrowser1.ObjectForScripting = new MyScriptObject(this);
        // Uncomment the following line when you are finished debugging.
        //webBrowser1.ScriptErrorsSuppressed = true;

        webBrowser1.DocumentText =
            "<html><head><script>" +
            "function test(message) { alert(message); }" +
            "</script></head><body><button " +
            "onclick=\"window.external.Test('called from script code')\">" +
            "call client code from script code</button>" +
            "</body></html>";
    }

    private void button1_Click(object sender, EventArgs e)
    {
        webBrowser1.Document.InvokeScript("test",
            new String[] { "called from client code" });
    }
}

public class MyScriptObject
{
    private Form1 _form;

    public MyScriptObject(Form1 form)
    {
        _form = form;
    }

    public void Test(string message)
    {
        MessageBox.Show(message, "client code");
    }
}

Imports System.Windows.Forms

Public Class Form1
    Inherits Form

    Private webBrowser1 As New WebBrowser()
    Private WithEvents button1 As New Button()

    <STAThread()> _
    Public Shared Sub Main()
        Application.EnableVisualStyles()
        Application.Run(New Form1())
    End Sub

    Public Sub New()
        button1.Text = "call script code from client code"
        button1.Dock = DockStyle.Top
        webBrowser1.Dock = DockStyle.Fill
        Controls.Add(webBrowser1)
        Controls.Add(button1)
    End Sub

    Protected Overrides Sub OnLoad(e As EventArgs)
        MyBase.OnLoad(e)

        webBrowser1.AllowWebBrowserDrop = False
        webBrowser1.IsWebBrowserContextMenuEnabled = False
        webBrowser1.WebBrowserShortcutsEnabled = False
        webBrowser1.ObjectForScripting = New MyScriptObject(Me)
        ' Uncomment the following line when you are finished debugging.
        'webBrowser1.ScriptErrorsSuppressed = True

        webBrowser1.DocumentText = _
            "<html><head><script>" & _
            "function test(message) { alert(message); }" & _
            "</script></head><body><button " & _
            "onclick=""window.external.Test('called from script code')"" > " & _
            "call client code from script code</button>" & _
            "</body></html>"
    End Sub

    Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs) _
        Handles button1.Click

        webBrowser1.Document.InvokeScript("test", _
            New String() {"called from client code"})

    End Sub

End Class

Public Class MyScriptObject
    Private _form As Form1

    Public Sub New(ByVal form As Form1)
        _form = form
    End Sub

    Public Sub Test(ByVal message As String)
        MessageBox.Show(message, "client code")
    End Sub

End Class

Compilation du code

Ce code nécessite :

  • des références aux assemblys System et System.Windows.Forms ;

Voir aussi