Question 177

Comment afficher du texte formaté en HTML dans un contrôle webbrowser ?

L'HTML et le XHTML sont deux formats extrêmement puissants pour afficher du texte formaté. Le DOM (modèle objet associé à l'HTML) présente de plus une interface de programmation agréable une façon agréable de construire dynamiquement un document à présenter à l'utilisateur. Nous verrons dans ce document comment présenter de manière simple un document dans un objet webbrowser (du composant Microsoft Internet Controls) et ensuite comment manipuler un tel document de manière dynamique.

Le phénomène de la page blanche

L'une des méthodes les plus simples pour afficher des données HTML est de charger une page blanche, pour ensuite écrire entièrement l'HTML brut correspondant aux données à afficher. Afin de réaliser cette écriture, nous pourrons profiter de la méthode write offerte par le DOM, dès que la page blanche sera chargée.

L'exemple suivant implémente cette méthode. L'HTML est ici prédéfini dans le code, mais dans un cas réel il sera, normalement, lu dans un fichier externe servant de modèle ou dans les ressources de l'application.

Option Explicit

Private Sub Form_Load()
    'Déclenche l'affichage des données
    WebBrowser1.Navigate2 "about:blank"
End Sub

Private Sub WebBrowser1_NavigateComplete2(ByVal pDisp As Object, URL As Variant)
    'Réalise l'écriture effective de l'html
    WebBrowser1.Document.write "<html><body>" & _
       "<h1 id=""title"">Hello World</h1>" & _
       "<div id=""content"">Du véritable <strong>html</strong></div>" & _
       "</body></html>"
End Sub

Lorsque l'ensemble du code est généré dynamiquement, il est souvent utile d'utiliser une méthode de concaténation rapide.

Remplir les blancs

Comme indiqué en introduction, le DOM est un moyen particulièrement pratique pour modifier le document à la volée. Ajouter des lignes à un tableau et changer un titre et sa couleur sont des exemples d'opérations qui peuvent être décrites très simplement. De plus, même si ce sujet dépasse de cadre de cet article, c'est uniquement par le DOM qu'il est possible d'intercepter des événements se produisant dans la page HTML.

Reprenons l'exemple précédent et apportons dynamiquement quelques modifications aux données présentes dans la page. Il est à remarquer que nous pourrions modifier la ligne Navigate2 pour charger directement le modèle via le protocole file:// et supprimer l'html dans le code, afin de charger un fichier html statique, servant de modèle.

Private Sub Form_Load()
    'Déclenche l'affichage des données
    WebBrowser1.Navigate2 "about:blank"
End Sub

Private Sub WebBrowser1_NavigateComplete2(ByVal pDisp As Object, URL As Variant)
    Dim Title As Object
    Dim Content As Object
    Dim Table As Object
    Dim TR As Object
    Dim TD As Object
    Dim i As Long

    'Réalise l'écriture de notre modèle HTML
    WebBrowser1.Document.write "<html><body>" & _
      "<h1 id=""title"">Hello World</h1>" & _
      "<div id=""content""></div>" & _
      "</body></html>"

    Set Title = WebBrowser1.Document.GetElementById("title")
    Set Content = WebBrowser1.Document.GetElementById("content")

    'Change le titre
    Title.innerText = "Tirage aléatoire"

    'Crée un tableau
    Set Table = WebBrowser1.Document.CreateElement("table")

    'Génère les lignes de la table
    For i = 1 To 50
        Set TR = Table.InsertRow
        Set TD = TR.insertCell
        TD.innerText = CStr(i)

        'Sélectionne aléatoirement des éléments
        If (Rnd < 0.2) Then
            TR.Style.backgroundColor = "PaleGreen"
        End If
    Next i

    'Ajoute la table dans notre document
    Content.appendChild Table
End Sub

Pour aller plus loin

Voir aussi :

Comment créer un lien hypertexte sur mon form ?

Date de publication : 06 mars 2008
Dernière modification : 06 mars 2008
Rubriques : Affichage & graphismes, Contrôles
Mots-clés : HTML, DOM, style, css, webbrower, texte, formattage, mise en forme, couleur, gras, italique