Cours VB.NET pour Application


Télécharger Cours VB.NET pour Application

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


 

 

Table des matières

 

10Conclusion                                                                                                                            25


 

Vousavezdéjàessayédecré,maisvousvousêtesrapidement rendu compte que le rendu de la plupart des sites web n’était pas correct! Avec Awesomium tout cela va changer …

[[attention]] | Dans ce tutoriel, j’estime que vous connaissez les bases d’un des langages du .NET (C#, VB ou C++) et que vous avez un niveau correct en JavaScript car il sera utilisé. J’estime aussi quevousavezunminimumdeconnaissanceseninformatique(installationsdeprogrammes,etc.) etquevousdisposezdeVisualStudiopourDesktopoudeVisualStudioCommunity.Ilfaudraenfin que vous maîtrisiez le concepteur WindowsForm (ne vous inquiétez pas, il est assez intuitif) ou le langage XAML.


 

Awesomium est une bibliothèque .NET open source. Ses sources sont distribuées sur GitHub

Dans ce tutoriel, j’utiliserai le C# mais vous pouvez utiliser le VB ou tout autre langage associé au .NET.

J’aientenducertainespersonnesdirequelestutorielsactuelsn’étaientpasassezaxéssurlapartie

TP. J’ai donc décidé qu’à chaque fois que je le pouvais je vous laisserai d’abord coder vous-même avant de vous donner la solution.

Maintenant, passons aux choses sérieuses :pirate :!

Awesomium est une bibliothèque pour le .NET qui fournit tous les éléments nécessaires à la réalisation d’un navigateur web. Il dispose en effet d’un contrôle pour afficher des pages web sans aucunbugcommeavecle WebBrowser fournipardéfaut.Ildisposeégalementdenombreusesfonctions supplémentaires comme par exemple pouvoir exécuter du JavaScript.

Le WebControl n’est pas le seul contrôle qui y est fourni mais c’est le principal. Pour découvrir les autres, lisez la suite de ce tutoriel!

[[information]] | Si vous êtes sous Linux, vous serez heureux d’apprendre qu’Awesomium est compatible avec Mono!

Pour télécharger Awesomium, allez sur le et cliquez sur “Get Awesomium”. Installezle. Une fois que c’est terminé, si vous lancez Visual Studio et que vous créez un nouveau projet Windows Form ou WPF vous découvrirez … de nouveaux contrôles dans votre boîte à outils! Génial!


 

Le WebBrowser est un contrôle fourni avec le framework .NET. Il va permettre d’afficher des sites internetetdecréerunnavigateurweb.Malheureusement,ildisposedumoteurderendud’IE7et laplupartdessitesmodernesprovoquentdoncdeserreurs.Impossibledefaireunvrainavigateur ainsi.

Heureusement, des développeurs ont eu l’idée de créer Awesomium! Il fournit un nouveau WebBrowser qui respecte (presque) tous les standards du web. Ainsi, nous pouvons créer des navigateurs avec des fonctionnalités étendues. Fonctionnalités que nous découvrirons au fil de ce tutoriel.

 

Figure 3.1 – À gauche Awesomium, à droite le WebBrowser du .NET avec l’erreur de script!


 

Pour utiliser Awesomium, notre projet devra être une application Windows Forms ou WPF. La console ou les applications ModernUI ne sont pas supportées par Awesomium. Dans ce tutoriel, je créerai un projet Windows Form, mais vous pouvez utiliser WPF car Awesomium ne diffère pas de l’un à l’autre (et puis je vous fournirai le XAML si vous n’avez pas trop le cœur à designer…).

Créez donc votre projet selon vos préférences et vos compétences!

Utiliser Awesomium est extrêmement simple. Une fois que vous aurez créé votre projet, ajoutez le contrôle appelé WebControl dans votre fenêtre. Changer sa propriété Source par l’adresse d’un site quelconque, compilez! Et ça marche!

Vous êtes sur votre Form par défaut dans le designer de VS. Ajoutez-y :

— Un WebControl d’Awesomium, nommé Navigateur ;

— Une TextBox, nommée AdressBox ;

— Un bouton, nommé Back ;

— Un autre bouton, nommé Forward ; — Un 3ème bouton, nommé Home ;

— Si on veut autre chose, on verra après.

Faites en sorte que tout cela soit un minimum esthétique. Chez moi, ça donne quelque chose comme ça :

Via le designer, pensez aussi à définir une page d’accueil sur votre WebControl avec la propriété Source. N’oubliez pas le http :// ou le https :// .

Et pour ceux qui préfèrent le WPF, voici le XAML :

<Window xmlns="; xmlns:x=";

xmlns:awe="; x:Class="

Title="Mon premier navigateur avec Awesomium" Height="455.4" Width="659.8"> <Grid>

4 Un premier projet

 

Figure 4.1 – Il faut aimer les couleurs flashs, mais bon…

<Grid x:Name="Header" Height="81" VerticalAlignment="Top" Margin="0,0,-0.4,0"> <Grid.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFEEEEEE" Offset="1"/>

<GradientStop Color="White"/>

<GradientStop Color="White" Offset="0.519"/>

</LinearGradientBrush>

</Grid.Background>

<TextBox x:Name="AdressBox" Height="23" Margin="10,46,10,0" TextWrapping="W <Button x:Name="Back" Content="Précédent" HorizontalAlignment="Left" Margin <Button x:Name="Forward" Content="Suivant" HorizontalAlignment="Left" Margi

<Button x:Name="Home" Content="Accueil" HorizontalAlignment="Right" Margin= </Grid>

<awe:WebControl x:Name="Navigateur" Margin="0,81,-0.4,-0.4" Source="https://www

</Grid>

</Window>

*[VS] : Visual Studio

Maintenant, passons au code! Prenons celui de notre Form principale. Il n’y a rien d’autre que le constructeur. On va ajouter un évènement Back.Click via le concepteur et dans notre méthode Back_Click() nous allons tester si l’on peut revenir en arrière et si oui, on le fait. Sinon on affiche un message comme “Impossible de revenir en arrière!”. Je vous laisse faire!

[[information]] | Utilisez Navigateur.CanGoBack() et Navigateur.GoBack()!

Mon code :

using System; using System.ComponentModel; using System.Drawing; using ; using System.Windows.Forms;

namespace Tuto_ZdS___Awesomium

{ public partial class Form1 : Form

{ public Form1()

{

InitializeComponent(); }

private void Back_Click(object sender, EventArgs e) // Événement déclenché au c

{ if (Navigateur.CanGoBack() == true) // Si l'on peut revenir en arrière

{

Navigateur.GoBack(); // on revient en arrière.

} else {

("Impossible de revenir en arrière"); // Sinon on affich

}

}

// La même chose avec GoForward().

private void Precedent_Click(object sender, EventArgs e) // Événement déclenché

{ if (Navigateur.CanGoForward() == true) // Si on peut revenir en avant

5 Et un peu de code!

{

Navigateur.GoForward(); // on revient en avant.

} else {

("Impossible de revenir en avant"); // Sinon on affiche

}

}

}

}

[[question]] | J’aimerais bien que…., ben qu’il y ait une adresse…

Vous vous souvenez de la propriété Source de votre WebControl ? Elle indique l’URL actuelle. Il suffirait de l’assigner à chaque fois que la page est prête autrement dit, avec l’événement DocumentReady ! Codez-la!

private void Awesomium_Windows_Forms_WebControl_DocumentReady(object sender, Awesomium.

{ = Navigateur.Source.ToString(); //On assigne l'adresse de notre Web

}

Maintenant on va faire une fonction pour retourner à la page d’accueil. Vous avez tout ce qu’il vous faut pour la faire vous-même!

private void Home_Click(object sender, EventArgs e)

{

Navigateur.Source = new Uri (";); //On assigne l'adresse }

Facile, non?

[[information]] | Je vous ai montré quelques exemples rapides. Je vous invite fortement à tester d’autres propriétés, les méthodes du WebControl de même que les autres éléments Awesomium.

Nous avons vu les fonctions de base d’Awesomium. Maintenant, passons à une partie plus amusante.

[[information]] | Cette partie n’est pas essentielle, mais elle reste cependant intéressante.

Un des atouts d’Awesomium est qu’il permet d’exécuter du JavaScript. Ainsi nous pouvons manipuler nos pages web facilement. Je m’explique : j’aimerais bien avoir un bouton qui permet de traduire ma page rapidement : je peux le faire!



[[attention]] | Avant d’attaquer cette partie, il faut absolument avoir de bonnes bases en JavaScript. Si vous n’avez jamais créé un script vous-même, apprenez le JavaScript.

Le WebControl a deux méthodes pour utiliser le JavaScript :

— ExecuteJavascript();

— ExecuteJavascriptWithResult();

La première permet d’exécuter du JavaScript, tandis que la seconde l’exécute et nous renvoie le résultat.

J’ai trouvé un qui permet de traduire une page avec Bing Translator.

[[secret]] | (function(){var s = document.createElement(‘script’); s.type = ‘text/javascript’;

s.src        =              ‘http       ?f=js&to=fr’;        .insertBefore(s, .firstChild);})().

Ajoutons un bouton Traduire dans notre Form. Quand on clique (avec l’évènement Button.Click) dessus on lance le script. Allez-y!

Correction :

private void Traduction_Click(object sender, EventArgs e)

{

Navigateur.ExecuteJavascript("(function(){var s = document.createElement('script');

//On exécute du JavaScript contenant notre script. Pas besoin de récupérer le résul }

6.1.0.0.1 Qu’est-ce qu’on fait? Nous allons bidouiller YouTube (juste pour les gens qui utilisent votre navigateur, pas d’inquiétude … :D ).

6 Du JavaScript!

Voici ce que nous allons faire : quand on arrive sur YouTube, je souhaite que la barre supérieure et le menu soient jaunes et qu’un pop-up disant : “Pour savoir ce qu’il se passe allez ici :

” apparaisse.

[[information]] | Pour obtenir les id, utilisez les outils de développement de votre navigateur.

Il se peut que le chargement soit long et que le JavaScript ne s’exécute pas tout de suite, car Awesomium est un peu lent pour ça … On code!

6.1.0.0.2 Correction! [[secret]] | csharp | | private void Page_Chargee(object sender, .UrlEventArgs e)// Méthode déclenchée lorsque la page est entièrement chargée (impossible d'exécuter du JS avant). | { | if (Navigateur.Source.ToString().StartsWith("") == true) //Si l'adresse commence par "" | {

|                   |         //Pour des raisons de lisibilité j'ai fait

mon script en 3 parties différentes : |          string script1 = "var barreSup

= document.getElementById('yt-masthead-container'); barreSup.style.backgroundColor

= 'yellow';"; |   // Cette partie définit le jaune comme couleur de fond de la barre supérieure. |     string script2 = "var menu = document.getElementById('guide-container'); menu.style.backgroundColor

= 'yellow';"; |          // Celui-ci fait la même chose avec le menu. |

string script3 = "alert(\"Pour savoir ce qu'il se passe allez ici : http://zestedesavoi

\");"; |          // Et enfin cette partie affiche un popup avec marqué

"Pour savoir ce qu'il se passe " | |             Navigateur.ExecuteJavascript(script1

+ script2 + script3);// On exécute nos 3 scripts. |      } | } |

Et le résultat en image :

 

Figure 6.1 – On a tout cassé!

Çamarche:D!Vouspouvezvousamuseraveccesméthodesautantquevousvoulez,caravecelles les possibilités sont infinies.

7.0.0.0.1 On fait quoi? Vous l’avez vu dans le titre, vous allez créer un navigateur.

Un navigateur, oui. Mais avec quoi dedans? Il nous faudra :

— Les boutons de base : Précédent, suivant, accueil;

— Une barre d’adresse;

— Une barre de recherche que vous pouvez fusionner avec la barre d’adresse; — Des outils de développement permettant de voir le HTML, et une console JavaScript; — Et un historique.

 

Figure 7.1 – Voici mon super navigateur!

Voici mon XAML :

<Window xmlns="; xmlns:x=";

xmlns:awe="; x:Class=" Title="MainWindow" Height="505.8" Width="799"> <Grid>

<Grid.RowDefinitions>

<RowDefinition/>

</Grid.RowDefinitions>

<Grid x:Name="Header" Height="81" VerticalAlignment="Top" Margin="0,0,-0.2,0"> <Grid.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFEEEEEE" Offset="1"/>

<GradientStop Color="White"/>

<GradientStop Color="White" Offset="0.519"/>

</LinearGradientBrush>

</Grid.Background>

7 TP Final : votre navigateur!

<TextBox x:Name="AdressBox" Height="23" Margin="10,46,10,0" TextWrapping="W <Button x:Name="Back" Content="Précédent" HorizontalAlignment="Left" Margin <Button x:Name="Forward" Content="Suivant" HorizontalAlignment="Left" Margi <Button x:Name="Home" Content="Accueil" HorizontalAlignment="Right" Margin=

<Button x:Name="Translate" Content="Traduire" HorizontalAlignment="Right"

<Button x:Name="Go" Content="Go!" HorizontalAlignment="Right" Margin="0,46

<Button x:Name="Historique" Content="Historique" HorizontalAlignment="Right

<Button x:Name="Devs" Content="Outils de dévellopement" HorizontalAlignment </Grid>

<awe:WebControl x:Name="Navigateur" Margin="0,81,-0.2,0" Source=" <ListBox x:Name="HystoryList" HorizontalAlignment="Right" Height="193" Margin=

<Grid x:Name="DevTools" Height="175" Margin="0,0,-0.2,0" VerticalAlignment="Bot

<awe:WebControl x:Name="HTML" Margin="10,10,10,27" IsSourceView="True"/>

<TextBox x:Name="JSCommand" HorizontalAlignment="Left" Height="23" Margin=

<Button x:Name="ExecuteJS" Content="Executer" HorizontalAlignment="Left" Ma

</Grid>

</Grid>

</Window>

À vos claviers … Prêts … Codez!

7.0.0.0.2 Corrigeons : [[secret]]|csharp | using System; | using System.ComponentModel;

| using System.Drawing; | using ; | using System.Windows.Forms;

| | //Les using peuvent changer selon si vous faites du WindowsForm ou du WPF. | | | namespace Tuto_ZdS___Awesomium | { |      public partial class

Form1 : Form |      { |         public Form1() |         { |             InitializeCompo

|          } | |          private void Back_Click(object sender, EventArgs

e) |          { |             // même code qu'au début |              |

if (Navigateur.CanGoBack() == true) |              { |                 Navigateur.GoBack

|              } |             else |             { |                 ("I

de revenir en arrière"); |              } |          } | |          private

void Forward_Click(object sender, EventArgs e) |      { |   //même code qu'au début |      |     if (Navigateur.CanGoForward()

== true) |  { |   Navigateur.GoForward(); |     } |   else |      { |      ("Impossible de revenir en avant"); | |      } |   } | |      private

void Awesomium_Windows_Forms_WebControl_TargetURLChanged(object sender,

.UrlEventArgs e) |    { |   // même code qu'au début |    |      = Navigateur.Source.ToString();

| |           } | |          private void Home_Click(object sender, EventArgs

e) |          { |             // même code qu'au début |               Navigateur.Source

= new Uri(""); |           } | |          private

void Page_Chargee(object sender, .UrlEventArgs e) |          {

|     // On crée et ajoute nos éléments à l'historique |    ListViewIt adresseActuelle = new ListViewItem(); |

|

} | |

private void Go_Click(object sender, EventArgs

e) |

{ |

if (.StartsWith("http://") ||

|              { |                 Navigateur.Source = new Uri("https://www.duckduckgo.c

+ ); | |                   //Sinon on le recherche |             }

|          } | |          private void Dev_Click(object sender, EventArgs



e) |  { |   HTML.Source = Navigateur.Source; |  = true; |   //on obtient la source et on affiche les outils de développement |    } | | private void OkJs_Click(object sender,

EventArgs e) |          { |             try |             { |                 //

.StartsWith("https://") == true) |      { | = new Uri(); |  // si le texte tapé comence

Navig

par http:// ou https:// on va a l'adresse tapée | |               } |

else

On tente d’exécuter le JavaScript entré par l'utilisateur |                   Navigateur

|     } |   catch (Exception ex) |  { |   // gère les exceptions (notamment s'il tape n'importe quoi) | MessageBox.S d’exécuter le JavaScript : \n \n " + ex.Message); |  } |      }

|     } | } | |

Remarque :

Oui, avec ce code notre historique est un peu bizarre, mais on pourrait facilement l’arranger, soit en utilisant un string[] et un foreach, soit en coupant le texte du ListViewItem.


 

Jusqu’ici nous n’avions vu que le WebControl, mais si vous êtes observateurs vous avez déjà dû remarquer la présence d’autres contrôles, comme l’AdressBox. À la fin cette partie, vous ne vous demanderez plus jamais à quoi ils servent.

Ce contrôle va surtout nous permettre de configurer plus en détail notre navigateur. Ajoutez un

WebSessionProvider etdéployezsapropriété Preferences.Vousavezicitoutessortesdepropriétéspour modifier les paramètres de votre navigateur. Par exemple, avec WebGL, vous autorisez ou non l’affichagedeWebGLdansvotrenavigateur.Vouspouvezfaireunepersonnalisationavancéedevotre navigateur ainsi, mais si vous lancez, vous verrez que rien n’a changé. Il faut en fait une autre étape, indispensable : associer votre WebControl avec votre WebSessionProvider. Pour cela, modifiez simplement la propriété WebSessionProvider de votre WebControl.

Ce contrôle va nous faire gagner du temps : il fait apparaître automatiquement l’adresse de la page qui lui est associée. Plus besoin de changer l’adresse manuellement à chaque nouvelle page. Il n’est pas très esthétique mais on peut facilement changer cela. De toute façon l’esthétique ne nous intéresse pas vraiment. :p

Derrière ce nom à rallonge se cache un contrôle qui ne fonctionne pas. Du moins pas avec moi. Il devrait normalement afficher un menu contextuel au clic droit, mais on a beau appuyer, il ne se passe rien. Je ne détaillerai pas ses fonctionnalités ici (en plus ça ressemble à un ContextMenu normal).

Il sert à afficher les popups. Ainsi on peut les positionner là où on veut ou choisir leur style.


 

Fonctions :

Fonction

 

CanGoBack()

Retourne un bool indiquant si l’on peut revenir en arrière

GoBack()

Renvoie à la page précédente

CanGoBack()

Retourne un bool indiquant si l’on peut revenir en avant

GoForward()

Renvoie à la

page suivante

ExecuteJavascript()Exécute du JavaScript dans la page en cours (attention : attendre

l’évènement DocumentReady pour

utiliser cette méthode)

9 Annexes

 

                                                                       Fonction                 Description

ExecuteJavascriptWithResult()

Exécute du JavaScript dans la page en cours et renvoie le résultat sous la

forme d’un

JSValue (attention : attendre l’évènement DocumentReady pour

utiliser cette méthode)

Refresh()

Actualise la page

Stop()

Arrête le chargement de la page

Propriétés :

Propriété

Description

Type

Source

Définit ou obtient l’adresse de la page

HTML

Obtient le code HTML de la page

string

Selection

Obtient la sélection actuelle

.Selection

TargetURL

Obtient l’adresse du lien survolé par l’utilisateur

Title

Obtient le titre de la page

string

Zoom

Obtient ou définit le niveau de zoom de la page

int

— Certains sites (comme SoundCloud) se servent du UserAgent pour détecter si votre navigateurestrécent.Seulement,AwesomiumapourUserAgentceluideChromium18,cequifait que ces sites nous détectent comme trop ancien et nous empêchent parfois même l’accès!

— CertainespropriétésCSSnesontpasencoregérées(jen’enconnaispaslalisteexacte),par exemple, sur Zeste de Savoir, le menu latéral est affiché en bas de la page!

— Le WebGL n’est pas encore supporté pour Windows 8.

— Certainestouchesde clavierfont perdrele focusau WebControl,ilest doncimpossible deles écrire.

24

10 Conclusion

C’estdéjàlafindecetutoriel.J’espèrequ’ilvousauraplu,etquevousarriverezàdétrônerGoogle Chrome :D! N’hésitez pas à aller voir la doc sur le site d’Awesomium (vous avez aussi un wiki local dans les documents publics de votre PC). Si vous avez un problème vous pouvez poster un commentaire (ou envoyer un MP si je ne réponds pas), aller sur le site Question/Réponse officiel (anglais uniquement) ou poster une description de votre problème sur le forum de programmation de ZdS.

Vous savez maintenant créer de superbes navigateurs web! Amusez-vous bien!



543