De nombreuses applications proposent une barre d’outils généralement située sous la barre de menus. Une barre d’outils propose un raccourci vers une fonction souvent utilisée, ce qui évite à l’utilisateur de chercher dans l’architecture des menus.
Vous allez reprendre l’exemple précédent avec laRichTextBoxet ajoutez quelques raccourcis de fonction.
Figure 6.7: Le texte en gras
Les menus Chapitre 6
95 LE GUIDE COMPLET
Partez de ceci :
Vous allez ajouter un contrôleToolStripdepuis la boîte à outils.
Figure 6.8: Ajout des outils
Figure 6.9: Ajout d’un ToolStrip
Penser à l’utilisateur Chapitre 6
ToolStrip
C’est une boîte à outils qui propose plusieurs options permettant de gérer les icônes de la barre d’outils ainsi que sa position.
1 Cliquez sur la petite flèche blanche en haut à droite du ToolStrip puis surInsérer les éléments standard.
Comme précédemment, cette action insère les éléments les plus couramment utilisés :Ouvrir un fichier,Sauvegarder un fichier, etc.
Figure 6.10: Insertion des outils standard
Figure 6.11: ToolStrip standard
Les menus Chapitre 6
97 LE GUIDE COMPLET
Il existe un deuxième moyen qui permet plus de contrôle sur la barre d’outils. Une fois leToolStrip ajouté, dans la fenêtre des propriétés, une collectionItemspermet d’éditer les boutons de la barre.
2 Cliquez sur Collection puis sur l’icône décorée de trois points de suspension juste à côté.
Cela a pour effet de lancer l’éditeur deToolStrip.
Dans cet éditeur figurent à droite les boutons déjà ajoutés par Visual Basic après le clic sur Insérer les éléments standard. Pour ajouter un élément, il faut utiliser le boutonAjouteren haut à gauche de l’éditeur.
À gauche de ce bouton se trouve une liste de choix permettant de
Figure 6.12:
Lancer l’éditeur de ToolStrip
Figure 6.13: Éditeur de ToolStrip Penser à l’utilisateur Chapitre 6
sélectionner l’élément à ajouter à l’application. Pour le moment, ajoutez un bouton, que vous renommerez parG.
1 Dans l’éditeur, sélectionnez le bouton que vous venez d’ajouter, puis cherchez dans la liste des propriétés à droite, la propriété appelée DisplayStyle et changez sa valeur enText.
2 Ensuite, cherchez la propriétéTextet changez la valeur enG. Vous avez maintenant un bouton qui dispose d’un style réellement professionnel.
Ajoutez deux autres boutons pour les styles italique et souligné.
Figure 6.14:
Changez le DisplayStyle
Figure 6.15:
Ajout d’un élément de ToolStrip Les menus Chapitre 6
99 LE GUIDE COMPLET
3 Revenez maintenant dans le designer, puis double-cliquez sur les boutons pour ajouter du code au niveau de leur événement "clic".
Pour le bouton "gras", ajoutez la ligne suivante :
RichTextBox1.SelectionFont = New Font(RichTextBox1
✂ .SelectionFont, FontStyle.Bold)
Pour le bouton "italique", ajoutez la ligne suivante :
RichTextBox1.SelectionFont = New Font(RichTextBox1
✂ .SelectionFont, FontStyle.Italic)
Pour le bouton "souligné", ajoutez la ligne suivante :
RichTextBox1.SelectionFont = New Font(RichTextBox1
✂ .SelectionFont, FontStyle.Underline)
4 Lancez le programme en appuyant sur la touche [F5], saisissez du texte dans la RichTextBox, puis sélectionnez une partie du texte.
Utilisez l’un des boutons et admirez le résultat.
Figure 6.16:
Outils de mise en forme
Figure 6.17: Mini-éditeur de texte Penser à l’utilisateur
Chapitre 6
Vous avez maintenant une petite application de traitement de texte qui permet de modifier le style du texte saisi.
Vous allez modifier les boutons standard pour qu’ils ouvrent un document.
1 Double-cliquez sur l’icône de l’ouverture de fichier dans le ToolStrip après avoir ajouté des éléments standard. Vous devriez être dans la partie d’édition du code. Ajoutez les lignes suivantes :
If (OpenFileDialog1.ShowDialog() = Windows.Forms
✂ .DialogResult.OK) Then RichTextBox1.Text = _
System.IO.File.ReadAllText(OpenFileDialog1.FileName) End If
Les sauts de ligne
Dans Visual Basic Express, vous ne pouvez pas entrer d’instructions sur plusieurs lignes à moins de terminer la ligne à prolonger par un caractère de soulignement. Ainsi vous pouvez manipuler plus facilement de longues instructions.
La première ligne permet de tester si l’utilisateur a bien validé avec le bouton OK dans la boîte de dialogue de sélection de fichier. La deuxième ligne permet de récupérer le contenu textuel du fichier choisi dans la boîte de dialogue (OpenFileDialiog1.Filename).
Petit problème : cette méthode ne permet de lire qu’un document de texte, enregistré avec le Bloc-notes de Windows. Pour charger un document de type Richt Text Format, qui est un format beaucoup plus standard, vous pouvez utiliser la méthodeLoadFilede laRichTextBox.
2 Remplacez la deuxième ligne par :
RichTextBox1.LoadFile(OpenFileDialog1.FileName)
Cela chargera directement un fichier dans la zone d’édition de texte de la RichTextBox. Autre avantage de cette méthode : elle permet de garder le formatage du texte. Par exemple, si dans un éditeur de type Wordpad ou Microsoft Word, vous avez du texte en gras, le texte en gras sera chargé par la RichTextBox.
Les menus Chapitre 6
101 LE GUIDE COMPLET
Maintenant que vous avez un moyen d’ouvrir les documents au format RTF, vous allez implémenter une fonction de sauvegarde de ces documents. Ajoutez au formulaire un contrôle de typeSaveFileDialog.
3 Double-cliquez sur l’icône en forme de disquette duToolStrip de manière à vous placer dans l’édition de code de l’événement
"clic" du bouton et copiez les lignes suivantes :
SaveFileDialog1.Filter = "Fichiers RTF(*.rtf)|.rtf"
If (SaveFileDialog1.ShowDialog() = Windows.Forms
✂ .DialogResult.OK)_
Then
RichTextBox1.SaveFile(SaveFileDialog1.FileName) End If
La première ligne permet de spécifier le filtre à appliquer pour trouver les fichiers à sauvegarder. Dans ce cas, il s’agit des fichiers RTF. Vous appliquez donc un filtre de type*.rtf. Sur la deuxième ligne, vous vérifiez que l’utilisateur a bien cliqué sur le bouton OK de la boîte de dialogue.
S’il choisit le boutonAnnuler, vous n’effectuez pas la sauvegarde. Via la troisième ligne, vous allez effectuer la sauvegarde. Pour cela, vous utilisez la méthodeSaveFilede laRichTextBox, qui prend en paramètre un chemin vers un fichier, qui est ici donné par le résultat de la boîte de dialogueSaveFileDialogajoutée précédemment.
Vous avez maintenant un petit éditeur de texte, qui permet l’édition, l’ouverture et la sauvegarde de fichiers. Vous allez ajouter un système de copier/coller. Parmi les boutons standard du ToolStrip se trouvent les trois boutons classiques de couper, copier et coller.
4 Placez-vous dans l’éditeur de code du boutonCopieret insérez le code suivant :
RichTextBox1.Copy()
Cela aura pour effet de copier le texte sélectionné dans le Presse-papiers Windows.
5 Placez-vous maintenant dans le code de l’événement "clic" du boutonColler pour ajouter la ligne suivante :
RichTextBox1.Paste()
Cela aura pour effet de copier le contenu du Presse-papiers là où se trouve le curseur dans la RichTextBox. Attention toutefois, si vous
Penser à l’utilisateur Chapitre 6
cliquez sur Coller alors que du texte est sélectionné, seul le texte sélectionné sera remplacé.
Pour terminer la petite application, ajoutez une fonction Couper pour copier un texte sélectionné et le supprimer de laRichTextBox.
6 Double-cliquez sur le bouton Couper du ToolStrip dans le designer, puis une fois dans le code, ajoutez la ligne suivante :
RichTextBox1.Cut()
Cette instruction va couper le texte, c’est-à-dire le supprimer de la RichTextBoxet placer le contenu de la sélection dans le Presse-papiers en vue d’une réutilisation ultérieure.
Lancez maintenant le programme en appuyant sur la touche[F5]et testez les nouvelles fonctionnalités.
Il reste maintenant trois boutons auxquels vous n’avez pas ajouté de fonctionnalités. Nouveau est le premier des boutons standard du ToolStrip. Il permet normalement d’ouvrir un nouveau document du type par défaut de l’application. Dans cet exemple, vous allez vous contenter de vider le contenu de la RichTextBox pour repartir sur un document
"frais".
7 Double-cliquez sur le bouton Nouveau dans le designer de formulaire puis ajoutez le code suivant une fois dans l’éditeur.
RichTextBox1.Clear()
Maintenant, lorsque vous cliquez sur l’icône Nouveau, vous videz la RichTextBox. Il reste les boutonsImprimeretAide. L’impression n’étant pas possible directement à partir de laRichTextBox, vous allez supprimer le bouton. Pour supprimer un bouton d’un ToolStrip, vous avez deux solutions. La première consiste à sélectionner le bouton en cliquant dessus dans le designer puis à appuyer sur la touche [Suppr]. La deuxième consiste à lancer l’éditeur de collection de l’objetToolStrip, à chercher le bouton qui correspond au boutonImprimerdans la liste des éléments du ToolStrip et à cliquer sur l’icône représentant une croix à droite de la liste des éléments.
Il reste le bouton d’aide. Pour sa gestion, vous allez charger une aide au format HTML (le format classique des aides Windows et des sites Internet). Vous pourrez au choix charger un fichier local ou une adresse Les menus Chapitre 6
103 LE GUIDE COMPLET
Internet. Double-cliquez sur le boutonAideajouté auToolStripet ajoutez la ligne suivante dans l’éditeur :
Help.ShowHelp(ToolStrip1, "c:\help.htm")
Cette instruction va charger un fichier HTML qui se situe à la racine du disque dur principal et ouvrir un navigateur qui pointera directement sur cette page.
Si vous ne maîtrisez pas HTML, voici un exemple que vous pouvez recopier dans un document texte :
<HTML>
<HEAD>
<TITLE>Page d’aide de MonApplication<TITLE>
</HEAD>
<BODY>
Pour le moment, aucune aide n’est disponible.
</BODY>
</HTML>
Enregistrez ensuite le document à la racine du disque dur principal et nommez-lehelp.htm.
Maintenant l’application d’édition de texte est complète. Il ne reste plus qu’à éditer les différents menus pour reprendre les fonctionnalités qui y sont décrites et supprimer celles qui ne sont pas implémentées.
À présent, les menus n’ont plus de secret pour vous. Voyons maintenant les éléments qui donnent aux applications un look professionnel et les
Figure 6.18: Aide de l’application Penser à l’utilisateur
Chapitre 6
erreurs à ne pas commettre pour ne pas noyer l’utilisateur dans une interface inutilisable au quotidien.
6.2. Créer un lien homme-machine
Dans le domaine de la programmation, il est courant de parler d’interface homme-machine, ou IHM. Ce terme est une sorte de fourre-tout dont on se sert pour évoquer ce qui assure une interactivité avec l’utilisateur. Malheureusement, il n’existe pas de règle stricte permettant d’arriver à une interface universellement parfaite. Qu’est-ce qui fait une bonne IHM ? C’est une question à laquelle il convient de répondre en trois points.