Microsoft Silverlight 4 - Tutoriel 12 : Navigateur Web

Navigateur Web simple avec le mode hors navigateur (Out-of-Browser) et les privilèges élevés

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Silverlight 4 par le biais d'exemples pas à pas.

Langage : VB.NET

Public visé : niveau Débutant

Commentez ce tutoriel : Commentez Donner une note à l'article (5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Microsoft Silverlight 4 - Simple Web Browser with Out-of-Browser Mode and Elevated Trust.

Introduction

La navigation sur le Web est une autre tâche commune. Créez un navigateur Web simple qui peut ouvrir et enregistrer les adresses de sites web favoris.

Navigateur Web simple avec le mode hors navigateur (Out-of-Browser) et les privilèges élevés

Étape 1

Démarrez Microsoft Visual Web Developer 2010 Express, puis sélectionnez Fichier puis Nouveau Projet... Sélectionnez Visual Basic puis Application Silverlight dans les modèles installés, sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :

Image non disponible

Étape 2

Une nouvelle fenêtre Nouvelle application Silverlight devrait apparaître, décochez la case Héberger l'application Silverlight sur un nouveau site Web, puis sélectionnez la Version de Silverlight ciblée :

Image non disponible

Étape 3

Une page vierge nommée MainPage.xaml devrait alors apparaître :

Image non disponible

Étape 4

Sélectionnez Projet ensuite Propriétés... La fenêtre Propriétés devrait apparaître, cochez la case Permettre l'exécution de l'application hors navigateur :

Image non disponible

Étape 5

Toujours dans la fenêtre Propriétés, cliquez sur le bouton Paramètres hors navigateur..., définissez la Largeur à 400 et la Hauteur à 300, ensuite cochez la case Privilèges élevés requis lors d'une exécution hors du navigateur :

Image non disponible

Étape 6

Confirmez les Paramètres en cliquant sur OK, et retournez au concepteur de vues pour MainPage en sélectionnant l'onglet MainPage.xaml.

Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle Canvas :

Image non disponible

Étape 7

Dessinez un Canvas sur la page, puis dans le volet XAML au-dessus du </Grid> modifiez la ligne Canvas1 comme ceci :

 
Sélectionnez
<Canvas Height="65" Width="400" VerticalAlignment="Top" HorizontalAlignment="Left" Name="Toolbar"></Canvas>

Voir ci-dessous :

Image non disponible

Étape 8

Puis dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle Button :

Image non disponible

Étape 9

Dessinez trois boutons sur le Canvas en les glissant de la Boîte à outils sur le Canvas, et ensuite dans le volet XAML entre les balises <Canvas> et </Canvas> modifiez les lignes <Button> comme ceci :

 
Sélectionnez
<Button Canvas.Left="6" Canvas.Top="6" Height="23" Width="75" Name="Open" Content="Open..."/>
<Button Canvas.Left="87" Canvas.Top="6" Height="23" Width="75" Name="Save" Content="Save..."/>
<Button Canvas.Left="168" Canvas.Top="6" Height="23" Width="75" Name="Go" Content="Go"/> 

Voir ci-dessous :

Image non disponible

Étape 10

Puis dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle TextBox :

Image non disponible

Étape 11

Dessinez une TextBox sur la barre d'outils du Canvas avec les boutons, et dans le volet XAML en dessous de la balise <Button> et au-dessus de </Canvas > modifiez TextBox1 comme ceci :

 
Sélectionnez
<WebBrowser Height="235" Width="400" Margin="0,65,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Browser"/>

Voir ci-dessous :

Image non disponible

Étape 12

Puisque nous en sommes au volet XAML, en dessous de la balise </Canvas> et au-dessus de la balise </Grid> tapez le code suivant :

 
Sélectionnez
<WebBrowser Height="235" Width="400" Margin="0,65,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Browser"/>s

Voir ci-dessous :

Image non disponible

Étape 13

Faites un clic droit sur la page ou sur l'entrée de MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, au-dessus de la ligne Partial Public Class MainPage tapez le code suivant :

 
Sélectionnez
Imports System.Text.RegularExpressions
Image non disponible

Étape 14

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Concepteur de vues.

Double-cliquez sur le bouton « Open... » et tapez ceci dans le Sub Open_Click :

 
Sélectionnez
Dim OpenDialog As New OpenFileDialog
OpenDialog.Filter = "Internet Favourite (*.url)|*.url"
If OpenDialog.ShowDialog Then
  Try
    If OpenDialog.File.Exists Then
      Dim _url As New Regex("^URL=(?<URL>.*)$", RegexOptions.Multiline)
      Address.Text = _url.Match(OpenDialog.File.OpenText.ReadToEnd).Groups("URL").Value
    End If
  Catch ex As Exception
    ' Ignore Errors
  End Try
End If
Image non disponible

Étape 15

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Concepteur de vues.

Double-cliquez sur le bouton « Save... » et tapez ceci dans le Sub Save_Click :

 
Sélectionnez
Dim SaveDialog As New SaveFileDialog
SaveDialog.Filter = "Internet Favourite (*.url)|*.url"
If SaveDialog.ShowDialog Then
  Try
    Using FileStream As IO.StreamWriter = _
      New IO.StreamWriter(SaveDialog.OpenFile)
      FileStream.Write("[DEFAULT]" & vbCrLf & _
      "BASEURL=" & Browser.Source.AbsoluteUri & vbCrLf & _
      "[InternetShortcut]" & vbCrLf & _
      "URL=" & Browser.Source.AbsoluteUri)
    End Using
  Catch ex As Exception
    ' Ignore Errors
  End Try
End If
Image non disponible

Étape 16

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Concepteur de vues.

Double-cliquez sur le bouton « Go » et tapez ceci dans le Sub Go_Click :

 
Sélectionnez
If Not Address.Text.StartsWith("http://") _
  And Not Address.Text.StartsWith("https://") Then
    Address.Text = "http://" & Address.Text
End If
Browser.Navigate(New Uri(Address.Text))
Image non disponible

Étape 17

Enregistrez le projet maintenant que vous avez terminé l'application Silverlight. Sélectionnez Debug ensuite Démarrer le débogage ou cliquez sur Démarrer le débogage :

Image non disponible

Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :

Image non disponible

Étape 18

Notez que le volet du navigateur Web contient l'élément suivant : « HTML is disabled ». C'est parce qu'il ne fonctionne que hors navigateur (Out-of-Browser). Faites un clic droit sur l'application dans le navigateur et choisissez l'option Installer l'application WebBrowser sur cet ordinateur... pour afficher l'écran d'installation :

Image non disponible

Étape 19

Cochez les cases Start Menu et/ou Desktop pour ajouter un raccourci vers l'application dans les deux/l'un des deux emplacements, puis cliquez sur le bouton Installer. Ce qui suit apparaîtra alors dans une nouvelle fenêtre :

Image non disponible

Étape 20

Maintenant, saisissez l'adresse d'un site Web dans la TextBox, puis cliquez sur le bouton Go pour visiter ce site. Vous pouvez enregistrer le site en tant que favori pour l'ouvrir plus tard :

Image non disponible

Étape 21

Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer Image non disponible en haut à droite de la fenêtre de l'application et du navigateur Web pour Arrêter l'application.

Conclusion

Ceci est un navigateur Web très simple utilisant la nouvelle fonctionnalité WebBrowser de Silverlight 4. Cet exemple peut aussi ouvrir et enregistrer les favoris au format .url standard. Vous pouvez l'utiliser pour afficher le contenu HTML que vous souhaitez, y compris d'autres applications Silverlight. Il fonctionne uniquement en mode hors navigateur (Out-of-Browser), mais vous pouvez l'utiliser pour n'importe quel contenu web !

Liens

Remerciements

Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également FirePrawn pour sa relecture orthographique et ses propositions.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.