Microsoft Silverlight 4 - Tutoriel 12 : Navigateur Web

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 :

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 :

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

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 :

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 :

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 :

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

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

Voir ci-dessous :

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

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 :

<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 :

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

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 :

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

Voir ci-dessous :

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

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

Voir ci-dessous :

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 :

Imports System.Text.RegularExpressions

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 :

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

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 :

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

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 :

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))

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 :

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

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 :

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 :

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 :

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