Aller au menu - Aller au contenu

Icône TP : Navigateur WEB

Avatar
Par Avatar Hankerspace
Mise à jour : 13/12/2010
Difficulté : Facile Facile Creative Commons BY-NC-SA
23 410 visites depuis 7 jours, dont 449 sur ce chapitre classé 14/786
Eh bien, pour moi, vous êtres prêts pour créer un vrai programme utilisable et fonctionnel, je pense aussi que ce petit exercice vous donnera envie de l'améliorer, le faire évoluer, bref le customiser à votre sauce.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Le cahier des charges

Eh bien c'est parti pour un TP, d'envergure cette fois !

Votre mission, si vous l'acceptez sera de créer un navigateur WEB en VB.net.

Wouaw ! Mais t'es pas bien, on sait à peine afficher 2-3 trucs et toi tu veux qu'on crée un navigateur WEB ?

Image utilisateur

Ah oui mince, vous ne connaissez rien pas beaucoup de choses, j'avais oublié ...

Mais c'est pas grave ! Pas besoin de s'y connaitre beaucoup pour le créer : avec ce que j'ai expliqué jusqu'à maintenant vous allez pouvoir déjà faire un joli truc, que nous améliorerons plus tard !

Un contrôle qui va nous être indispensable pendant ce TP est disponible sous VB : Le WebBrowser.

Si vous connaissez, un peu l'anglais, ça veut dire navigateur web. Ce contrôle va nous permettre de créer notre navigateur : vous lui entrez une adresse et il y va et affiche ce qu'il y a dans la page.

Il utilise le même moteur web qu'internet explorer (je sens que je vais me faire huer), bon le menu contextuel est donc déjà géré par ce contrôle, le téléchargement de fichiers aussi ...

Vous l'avez compris, nous allons créer l'interface.

Ce 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 chercher comment l'utiliser en suivant la syntaxe donnée.

Oui ce TP, vous le ferez en autonomie, je n'interviendrais qu'à la fin, pour la correction.

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

Bon, pour ce qui est de l'interface, donc : nous allons commencer doucement, je ne vais pas vous demander l'impossible : une barre d'adresses avec son bouton envoyer, précédent, suivant, arrêter, rafraichir.

Le statut de la page (terminé ...), le menu fichier : quitter (pas trop dur :p ).

Conseils : la méthode "url" du webbrowser sera sûrement utile :p .

Après, tout dépendra de vos facilités, nous allons tout faire progressivement.

Bonne chance !
Retour en haut

Les ébauches

Attention, la suite dévoile l'intrigue du film



Eh bien, j'espère que vous avez passé au moins quelques minutes a chercher (parce-que ça été mon cas :p ).

Bon, nous allons progresser ensemble, voici donc mes premières ébauches, ce que je vous ai demandé de faire :

Code : VB.NET
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'Les 2 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 BT 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
        'Si 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 a 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 a 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
        'Desactive le bt 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
        'Raffraichit 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


Ca y est, il y a plein de truc 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 ou l'on peut mettre les fonctions dont on est sûr du résultat pour plus de lisibilité.

Revenons à nos moutons ; la partie design :
Image utilisateur
(Très sobre, je sais, merci :p - Non je ne fais pas de pub pour Google)


Oui bon, vous l'avez compris, je ne me suis pas foulé côté visuel, nous rendrons tout cela plus beau plus tard :p !

Alors, quelques explications du code.

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

Je vais vous les lister avec mes noms d'objet (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 à une page suivante (si vous avez fait précédent avant)
  • 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 a l'adresse de la page passée en argument (ici le texte de TXT_ADRESSE)
  • Me.WB_NAVIGATEUR.GoBack() = le navigateur va a 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() = rafraichi 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 2 é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 ).
Retour en haut

Bien exploiter les évènements

Bon, je ne sais pas si vous avez prêtés 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, fortement, exponentiellement, 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, cet objet 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 / désactiver les boutons précédent, 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 pour seulement, la gestion des évènements du navigateur :
Code : VB.NET
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#Region "Evènements du WBroser"

    'a 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

    'a 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
        'desactive le BT 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 ais-je fais pour réaliser cette prouesse xD !
Image utilisateur

Eh bien si vous avez tapé "e." (dans l'évènement du changement de progression), notre ide nous fournit les fonctions, objets, propriétés pouvant être utilisées.

Vous voyez 2 lignes qui s'écartent du lot :
  • CurrentProgress
  • MaximumProgress


En mettant le curseur dessus votre ide nous 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 a 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 St-Cyr pour savoir ce qu'il faut faire : on attribue le nombre de bytes a 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".

Euh, quand j'ai voulu copier-coller la ligne :
Code : VB.NET
1
Sub WB_NAVIGATEUR_StatutTextChanged(ByVal sender As Object, ByVal e As EventArgs) Handles WB_NAVIGATEUR.StatusTextChanged

et remplacer StatusTextChanged par ProgressChanged une erreur inconnue au bataillon est apparue ...


Alors, c'est normal : 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 de 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 allez réagir avec des objets, c'est ce e qui gèrera les retours d'évènements.
Retour en haut

Le design

Bon, évidemment, ça ne pousse pas trop à l'utiliser s'il reste comme ça notre programme, nous allons donc l'améliorer un peu côté visuel.

J'ai donc 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 utilisateurImage utilisateurImage utilisateurImage utilisateurImage utilisateur


Voici les dits pictos. Bon, je ne suis pas très créatif donc on va dire que le premier ce sera pour le bouton d'envoi, le second, le refresh, ensuite stop, suivant puis précédent.

Si vous êtes pas d'accord avec moi voici mon adresse vous n'avez qu'a prendre ceux qui vous plairont !

Bon, nous allons donc intégrer une image à nos boutons, pour ça il faut agir sur la propriété ... Image (sisi).

Bon, lorsque vous allez vouloir choisir une image, une fenêtre vous propose 2 choix : utiliser une ressource locale ou une fichier de ressources, la différence : le fichier de ressource rassemble toutes les ressource : 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 ressource. Cliquez donc sur le petit "importer" en bas et choisissez vos images.

Attribuez les bonnes images au 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.

Bon, 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.

Avec un peu d'ennui et paint d'ouvert voilà a quoi j'arrive :

Image utilisateur


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

Image utilisateur


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-le de côté, un prochain chapitre consacré a son amélioration viendra quand j'aurais apporté de nouveaux concepts et de nouvelles connaissances.
Retour en haut
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
42 commentaires pour "TP : Navigateur WEB"
Note moyenne : 3.60 / 4 (543 votes)
Pseudo Commentaire
Hors ligne TKG # Posté le 20/05/2011 à 03:01:55

Ville : Cayenne
Pays : Guyane

 Merci à Hankerspace pour le cours.
Quelqu'un pourrait-il répondre à quelques questions.

Citation : @lex 3001
Super tuto dans son ensemble, mais je n'arrive pas a faire une navigation par onglets et j'ai eu beau poser la question personne ne savait... bref pourquoi ne pas ameliorer le TP en faisant une navigation par onglets ? (parceque le navigateur a la IE6 euh... :-° )
J'y ai aussi pensé ...
je pense que c'est possible en utilisant des tableaux d'objet (webbrowser).
Mais j'ai toujours eu des problèmes avec les tableaux objets (boutton, label ...)
Quelqu'un peut donner un méthode ?

Et une autre question d'ordre plus esthétique.
Comment on peut faire pour récupérer l’icône des pages web ?
Hors ligne coutureleclerc # Posté le 27/05/2011 à 02:14:43

Avis : Mitigé

J'ai essayé le code à la lettre et rien ne fonctionne. Je ne peux même pas aller sur l'internet avec ce navigateur, pourtant j'ai copié coller le code et créer les mêmes contrôles avec les mêmes nom. Tout ce temps perdu. Je pense que ce tutoriel devrait être révisé. Bravo quand même pour l'initiative de nous enseigner le VB. Mais je pense que vous ne devriez pas sauter trop d'étapes car on se perds, comme pour les tableaux dans l'application console. Après tout, nous sommes que des zéros!
Démocratie Propre pour découvrir, en vidéos, comment nos chers politiciens, si charismatiques soient-ils, nous ont trahis!

Et ce, au profit des banksters ou des banquiers mondiaux si vous préférez.
 
Hors ligne mlescaudron # Posté le 28/02/2012 à 14:31:33

Avis : Très bon

Xd la faute, c'est rafraîchir et non raffraichir
dans le premier navigateur
Hors ligne kony64 # Posté le 27/04/2012 à 15:05:37
Avatar

Avis : Décevant

Je suis un peu d'accord avec d'autres zéro, je pense que certaines étapes sont non pas baclées mais passées trop rapidement dessus, il faudrait un peu plus d'explication au niveau des codes et un peu plus de simplification quitte à avoir des codes plus long et ensuite avoir des codes plus cours mais plus complexe, au lieu d'avoir directement les codes complexes (notamment la partie avec "les differents controles des menus" où tout se passe très vite sans vraiment qu'on ai le temps de comprendre, même en y passant beaucoup beaucoup de temps dessus...).
Les TPs sont souvent trop "durs" avec ce que l'ont vient d'apprendre juste avant...
Sinon dans l'ensemble les tutos, sont bien écrits et bien fait...
Ne prenez pas la vie trop au sérieux : de toute façon vous n'en sortirez pas vivant. :D
 
Connecté TedjN # Posté aujourd'hui à 11:58:53

http://www.siteduzero.com/images/smilies/empty.gif
J'ai la tête qui tourne.
Remarque : Le programme se trouvant au sous-chapitre "Bien exploiter les évènements", plus précisément au niveau de la fonction Sub WB_NAVIGATEUR_ProgressChanged(ByVal sender etc...) ==> donne un message pour dire que la valeur e.CurrentProgress se trouve en dehors des limites. En mettant des MsgBox afin de suivre +/- à la trace, on remarque que cette fonction est appelée indéfiniment.
Quelle peut être la cause de cette appel "récursif"??????

Merci pour une prompte réponse.

Meilleures salutations.
TedjN

Voir tous les commentaires