• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 20/12/2017

TP : navigateur web

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous êtes prêts pour créer un vrai programme, utilisable et fonctionnel. Je vous propose donc de réaliser votre propre navigateur web ! Je pense aussi que ce petit exercice vous donnera envie de l'améliorer, le faire évoluer, bref, le personnaliser à votre guise.

Le cahier des charges

Vous allez voir, avec ce que j'ai expliqué jusqu'à maintenant, vous allez pouvoir faire quelque chose de sympa, que nous améliorerons plus tard !

Mais avant toute chose, voici un contrôle qui va nous être indispensable pendant ce TP : WebBrowser. Pour ceux qui sont nuls en anglais, ça veut dire « navigateur web ». Ce contrôle va nous permettre de créer notre navigateur : vous lui entrez une adresse et il affiche ce qu'il y a dans la page. Il utilise le même moteur web qu'Internet Explorer. Le menu contextuel est déjà géré par ce contrôle ainsi que le téléchargement de fichiers. Vous l'avez compris, nous allons créer l'interface.

WebBrowser est disponible dans les « contrôles communs ». Pour ce qui est des propriétés à utiliser pour naviguer, etc., eh bien à vous de trouver !

Ce ne sera pas sorcier, vous avez l'IDE qui vous affiche la liste des fonctions et propriétés disponibles sur le contrôle, après à vous de trouver celle qui sera à utiliser et de chercher comment l'utiliser en suivant la syntaxe donnée.

Il va falloir chercher un peu, c'est sûr, mais vous devrez le faire pour vos propres programmes, alors autant commencer tout de suite.

Pour ce qui est de l'interface, nous allons commencer doucement, je ne vais pas vous demander l'impossible : une barre d'adresse avec son bouton « Envoyer », « Précédent », « Suivant » , « Arrêter », « Rafraîchir », le statut de la page (terminé, en chargement, etc.), le menu « Fichier », et « Quitter ».

Un dernier conseil : la méthode URL du WebBrowser sera sûrement utile. :p Bonne chance !

Les ébauches

J'espère que vous avez passé au moins quelques minutes à chercher. Nous allons progresser ensemble, voici donc mes premières ébauches, ce que je vous ai demandé de faire :

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'Les deux lignes suivantes peuvent être remplacées par Me.WB_NAVIGATEUR.Navigate("http://www.google.fr")
        Me.TXT_ADRESSE.Text = "http://www.google.fr"
        'Simule un clic en passant comme argument nothing (null)
        Me.BT_ADRESSE_Click(Nothing, Nothing)

        'Au démarrage, pas de possibilité de « Précédent »,  « Suivant », « Stop »
        Me.BT_SUIVANT.Enabled = False
        Me.BT_PRECEDENT.Enabled = False
        Me.BT_STOP.Enabled = False
    End Sub

    'Lorsque le chargement est fini
    Private Sub WB_NAVIGATEUR_DocumentCompleted(ByVal sender As System.Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs) Handles WB_NAVIGATEUR.DocumentCompleted
        'Affiche le nouveau statut, désactive le bouton « Stop »
        Me.LBL_STATUT.Text = WB_NAVIGATEUR.StatusText
        Me.BT_STOP.Enabled = False
        'On récupère l'adresse de la page et on l'affiche
        Me.TXT_ADRESSE.Text = Me.WB_NAVIGATEUR.Url.ToString
    End Sub

    'Lorsque le chargement commence
    Private Sub WB_NAVIGATEUR_Navigating(ByVal sender As System.Object, ByVal e As System.Windows.Forms.WebBrowserNavigatingEventArgs) Handles WB_NAVIGATEUR.Navigating
        'On active le bouton « Stop »
        Me.BT_STOP.Enabled = True
        'On met le statut à jour
        Me.LBL_STATUT.Text = WB_NAVIGATEUR.StatusText

        If Me.WB_NAVIGATEUR.CanGoForward Then
            Me.BT_SUIVANT.Enabled = True
        Else
            Me.BT_SUIVANT.Enabled = False
        End If
        If Me.WB_NAVIGATEUR.CanGoBack Then
            Me.BT_PRECEDENT.Enabled = True
        Else
            Me.BT_PRECEDENT.Enabled = False
        End If
    End Sub

#Region "Boutons de navigation"

    Private Sub BT_ADRESSE_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_ADRESSE.Click
        'S'il existe une adresse, on y va
        If Not Me.TXT_ADRESSE Is Nothing Then
            Me.WB_NAVIGATEUR.Navigate(TXT_ADRESSE.Text)
        End If
    End Sub

    Private Sub BT_PRECEDENT_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_PRECEDENT.Click
        'Va à la page précédente
        Me.WB_NAVIGATEUR.GoBack()
    End Sub

    Private Sub BT_SUIVANT_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_SUIVANT.Click
        'Va à la page suivante
        Me.WB_NAVIGATEUR.GoForward()
    End Sub

    Private Sub BT_STOP_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_STOP.Click
        'Désactive le bouton « Stop » et arrête le chargement du navigateur
        Me.BT_STOP.Enabled = False
        Me.WB_NAVIGATEUR.Stop()
    End Sub

    Private Sub BT_REFRESH_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_REFRESH.Click
        'Rafraîchit le navigateur
        Me.WB_NAVIGATEUR.Refresh()
    End Sub

#End Region

    Private Sub QuitterToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles QuitterToolStripMenuItem.Click
        If MsgBox("Souhaitez-vous vraiment quitter ce magnifique programme ?", 36, "Quitter") = MsgBoxResult.Yes Then
            End
        End If
    End Sub
End Class

Ça y est, il y a plein de trucs que je ne comprends pas, c'est quoi tes #region par exemple !?!

Pas de panique, votre code marche parfaitement sans, ça sert seulement à créer une zone rétractable où l'on peut mettre les fonctions dont on est sûr du résultat pour plus de lisibilité.

Revenons à nos moutons, la partie design. La figure suivante représente ce que j'ai obtenu.

Mon navigateur web
Mon navigateur web

Vous l'avez compris, je ne me suis pas foulé côté visuel ; nous rendrons tout cela plus beau plus tard. Alors, quelques explications du code.

Les instructions directement liées au WebBrowser sont nombreuses, vous auriez dû les trouver avec un peu de patience, les plus pressés d'entre vous auront craqué et seront passés directement à cette partie je pense. :p

Je vais vous les lister avec mes noms d'objets (donc WB_NAVIGATEUR pour le WebBrowser) :

  • WB_NAVIGATEUR.StatusText : récupère le statut du navigateur ;

  • Me.WB_NAVIGATEUR.Url.ToString : récupère l'adresse actuellement parcourue par le navigateur ;

  • Me.WB_NAVIGATEUR.CanGoForward : renvoie un booléen pour dire si le navigateur a une page suivante (si vous avez fait précédent auparavant) ;

  • Me.WB_NAVIGATEUR.CanGoBack : pareil qu'au-dessus, mais pour dire si le navigateur peut faire précédent ;

  • Me.WB_NAVIGATEUR.Navigate(TXT_ADRESSE.Text) : le navigateur va à l'adresse de la page passée en argument (ici le texte de TXT_ADRESSE) ;

  • Me.WB_NAVIGATEUR.GoBack() : le navigateur va à la page précédente ;

  • Me.WB_NAVIGATEUR.GoForward() : navigue vers la page suivante ;

  • Me.WB_NAVIGATEUR.Stop() : arrête le chargement d'une page ;

  • Me.WB_NAVIGATEUR.Refresh() : rafraîchit la page.

Comme vous l'avez remarqué dans le code, j'ai deux événements concernant le navigateur : un qui se déclenche quand la page commence à se charger (Handles WB_NAVIGATEUR.Navigating), et le second, celui d'origine du WebBrowser : quand la page s'est totalement chargée (Handles WB_NAVIGATEUR.DocumentCompleted).

J'utilise ces deux événements pour activer ou non le bouton « Stop », changer le statut de la page, mettre à jour la nouvelle adresse, activer ou non les boutons « Précédent », « Suivant ».

J'ai utilisé cette forme pour vous montrer comment nous allons améliorer ce programme en exploitant au mieux les événements de notre contrôle (eh oui, les fonctions c'est bien beau, mais les événements, c'est magnifique :p ).

Bien exploiter les événements

Bon, je ne sais pas si vous avez prêté attention à tous les événements que nous offre ce petit WebBrowser… En voici quelques-uns qui vont nous être fort utiles :

  • Handles WB_NAVIGATEUR.StatusTextChanged ;

  • Handles WB_NAVIGATEUR.CanGoBackChanged ;

  • Handles WB_NAVIGATEUR.CanGoForwardChanged ;

  • Handles WB_NAVIGATEUR.ProgressChanged.

Nous allons donc abondamment utiliser le petit « e ». Vous vous souvenez, ce petit argument dont j'ai parlé il y a quelques chapitres. Eh bien, on va désormais l'utiliser. Il correspond à un objet qui va nous être utile, qui correspondra à différentes choses suivant le Handles : par exemple pour le Handles ProgressChanged il pourra nous fournir l'état d'avancement de la page, pour le cas du StatusTextChanged, le texte de statut, ainsi de suite…

Améliorons notre navigateur en nous servant de ces événements pour activer ou désactiver les boutons « Précédent » et « Suivant » en fonction de la possibilité ou non d'avancer ou reculer dans l'historique, de mettre une barre de progression, un texte de progression, etc.

Ce qui nous donne, seulement pour la gestion des événements du navigateur :

#Region "Evènements du WBroser"

    'À chaque changement d'état, on met à jour les boutons
    Sub WB_NAVIGATEUR_CanGoForwardChanged(ByVal sender As Object, ByVal e As EventArgs) Handles WB_NAVIGATEUR.CanGoForwardChanged
        If Me.WB_NAVIGATEUR.CanGoForward Then
            Me.BT_SUIVANT.Enabled = True
        Else
            Me.BT_SUIVANT.Enabled = False
        End If
    End Sub

    'À chaque changement d'état, on met à jour les boutons
    Sub WB_NAVIGATEUR_CanGoBackChanged(ByVal sender As Object, ByVal e As EventArgs) Handles WB_NAVIGATEUR.CanGoBackChanged
        If Me.WB_NAVIGATEUR.CanGoBack Then
            Me.BT_PRECEDENT.Enabled = True
        Else
            Me.BT_PRECEDENT.Enabled = False
        End If
    End Sub

    'Au changement de statut de la page
    Sub WB_NAVIGATEUR_StatutTextChanged(ByVal sender As Object, ByVal e As EventArgs) Handles WB_NAVIGATEUR.StatusTextChanged
        'On met le statut à jour
        Me.LBL_STATUT.Text = WB_NAVIGATEUR.StatusText
    End Sub

    'Au changement de progression de la page
    Sub WB_NAVIGATEUR_ProgressChanged(ByVal sender As Object, ByVal e As WebBrowserProgressChangedEventArgs) Handles WB_NAVIGATEUR.ProgressChanged
        Me.PGB_STATUT.Maximum = e.MaximumProgress
        Me.PGB_STATUT.Value = e.CurrentProgress
    End Sub

    'Lorsque le chargement est fini
    Private Sub WB_NAVIGATEUR_DocumentCompleted(ByVal sender As System.Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs) Handles WB_NAVIGATEUR.DocumentCompleted
        'on désactive le bouton « Stop »
        Me.BT_STOP.Enabled = False
        'on cache la barre de progression
        Me.PGB_STATUT.Visible = False
        'on récupère l'adresse de la page et on l'affiche
        Me.TXT_ADRESSE.Text = Me.WB_NAVIGATEUR.Url.ToString
    End Sub

    'Lorsque le chargement commence
    Private Sub WB_NAVIGATEUR_Navigating(ByVal sender As System.Object, ByVal e As System.Windows.Forms.WebBrowserNavigatingEventArgs) Handles WB_NAVIGATEUR.Navigating
        'On active le bouton « Stop »
        Me.BT_STOP.Enabled = True
        'Au début du chargement, on affiche la barre de progression
        Me.PGB_STATUT.Visible = True
    End Sub
#End Region

Bon, ce code, si vous avez pris la peine d'essayer de le comprendre, fait ce que j'ai dit plus haut en s'aidant du e dans un cas pour l'instant : faire avancer la progressbar. Alors comment ai-je fait pour réaliser cette prouesse ?

Eh bien si vous avez tapé « e. » dans l'événement du changement de progression, votre IDE vous fournit les fonctions, objets et propriétés pouvant être utilisés. Vous voyez deux lignes qui s'écartent du lot :

  • CurrentProgress ;

  • MaximumProgress.

En mettant le curseur dessus, votre IDE vous explique que ces valeurs renvoient chacune un Long (donc un nombre que nous allons pouvoir exploiter), mais à quoi correspond-il ? Eh bien la réponse est déjà grandement fournie dans le nom :p , mais bon, en dessous c'est marqué : le MaximumProgress nous renvoie le nombre de bytes à télécharger pour avoir la page et le CurrentProgress, le nombre de bytes actuellement téléchargés.

Ensuite, il ne faut pas sortir de Saint-Cyr pour savoir ce qu'il faut faire : on attribue le nombre de bytes à télécharger en tant que maximum pour la progressbar, et on met comme valeur le nombre de bytes actuellement téléchargés.

Et on obtient notre premier événement dans lequel on exploite les arguments transmis par e.

Si, en remplaçant StatusTextChanged par ProgressChanged dans ce code :

Sub WB_NAVIGATEUR_StatutTextChanged(ByVal sender As Object, ByVal e As EventArgs) Handles WB_NAVIGATEUR.StatusTextChanged

… une erreur inconnue au bataillon est apparue, pas de panique ! Certains événements utiliseront, comme ici, e as EventArgs (ou system.EventArgs), alors que d'autres utiliseront des e de type spécifique : WebBrowserProgressChangedEventArgs (dans le cas du Handles ProgressChanged). Et c'est également pour cette raison que dans certains événements des propriétés supplémentaires s'offriront à notre e, simplement car celui-ci n'est pas du même type…

Bon, cette partie est très importante car ce petit e sera utilisé très souvent dans vos programmes, lorsque vous réagirez avec des objets, c'est ce e qui gèrera les retours d'événements.

Le design

Je vous l'accorde, tel quel, notre programme ne donne pas vraiment envie. Nous allons donc l'améliorer un peu visuellement. J'ai décidé d'utiliser des icônes et pictogrammes sous licence creative commons for non commercial use. Je vais vous les montrer ici, mais le pack complet (plus de 1000 pictos ) est disponible ici.

Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur

Le premier sera pour le bouton d'envoi, le second pour le rafraîchissement de page, ensuite le « Stop », « Suivant », puis « Précédent ». Vous êtes bien évidemment libres d'en choisir d'autres.

Nous allons donc intégrer une image à nos boutons, pour ça il faut agir sur la propriété… Image ! Lorsque vous allez vouloir choisir une image, une fenêtre vous propose deux choix : utiliser une ressource locale ou un fichier de ressources, la différence : le fichier de ressources rassemble toutes les ressources : images, sons, etc., alors que les ressources externes ne seront pas intégrées à la compilation du projet. Les ressources externes sont donc bonnes pour les tests.

Nous allons tout de suite utiliser le fichier de ressources. Cliquez donc sur le petit Importer en bas et choisissez vos images. Attribuez les bonnes images aux bons boutons (ce serait bête d'avoir un précédent avec une icône de suivant). Pour un plus beau rendu, mettez la propriété FlatStyle à Flat, et dans FlatAppearance, bordersize à 0.

Après, à vous de toucher un peu les propriétés de la page, des éléments comme vous le sentez pour les adapter à vos goûts. La figure suivante vous présente mon résultat final.

Mon navigateur web
Mon navigateur web

Pas de moqueries, je ne suis pas graphiste. Je vais quand même vous donner mon image d'arrière-plan (si certains osent la prendre ^^ ).

Mon image d'arrière-plan
Mon image d'arrière-plan

Comme vous le voyez, j'ai changé la couleur de certains contrôles, modifié les styles, etc.

Cette partie sur le design n'avait pas la prétention de faire de vous des pros du design, mais juste de vous faire découvrir une autre facette du développement d'un programme.

Bon, nous voilà avec une base de navigateur, gardez-la de côté, un prochain chapitre consacré à son amélioration viendra quand j'aurai apporté de nouveaux concepts et de nouvelles connaissances.

  • On utilise la navigation web avec le composant WebBrowser.

  • Ce composant peut vous permettre de télécharger le texte ou le code source d'une page.

  • Pour gérer le WebBrowser, il faut utiliser ses événements.

Exemple de certificat de réussite
Exemple de certificat de réussite