Penser à l’utilisateur (Les barres d’outils)

Penser à l’utilisateur

Les menus

Les menus représentent un moyen simple d’organiser l’accès à différentes ressources, mais comment les utiliser ? La barre de menus classique 1 Lancez Visual Basic Express et créez un nouveau projet. Dans la boîte à outils, cherchez le contrôle nommé MenuStrip puis ajoutez-le au formulaire (voir Figure 6.1). Notez la petite flèche blanche en haut à droite du contrôle MenuStrip : elle va permettre d’ajouter des éléments au menu. 2 Cliquez sur cette flèche : un menu s’affiche. Ignorez les options, à part celle qui propose Insérez les éléments standard (voir Figure 6.2).Penser à l’utilisateur 3 Cliquez dessus : la barre de menus contient tous les éléments courants d’une application Windows, à savoir les menus Fichier, Edition, Outils et Aide. Pour le moment, vous avez tous les menus de premier niveau. Si vous cliquez sur chacun des éléments qui viennent d’être ajoutés, vous verrez qu’un sous-menu apparaît, vous laissant le choix d’autres éléments. Ainsi, le menu Aide a pour sous-menus Index, Recherche, À propos, qui sont les éléments de base d’un menu Aide. Faites le test. Lancez une application que vous utilisez tous les jours, comme votre logiciel de messagerie ou votre traitement de texte. Regardez la barre de menus. Elle contient les même éléments que ceux que vous venez d’ajouter. Compilez l’application avec la touche [F5], puis cliquez sur l’un des boutons du menu : il ne se passe rien. C’est normal : pour l’instant, vous avez simplement ajouté un squelette de menus à l’application. Maintenant, vous allez lui ajouter des muscles pour qu’elle puisse être pleinement fonctionnelle. 4 Revenez dans l’éditeur de formulaire, puis cliquez à droite du menu Help. Vous pouvez ajouter votre propre menu. Dans la zone de saisie, entrez Texte. Vous allez ajouter un menu permettant le contrôle du texte d’une TextBox. Pour cela, vous allez avoir besoin d’une TextBox. Ajoutez au formulaire un contrôle RichTextBox en la faisant glisser depuis la boîte à outils. Figure 6.3 : Menus standard Figure 6.4 : Ajout d’un élément de menu Les menus Chapitre 6 LE GUIDE COMPLET 93 RichTextBox C’est une TextBox enrichie d’un lot de fonctionnalités utiles, par exemple la possibilité d’effectuer un traitement sur une sélection de texte. Une fois arrivé à ce résultat, cliquez sur le menu Texte que vous avez inséré, puis ajoutez-lui un sous-menu en remplissant la case située juste dessous. Appelez ce sous-menu Gras.

Les barres d’outils

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 la RichTextBox et ajoutez quelques raccourcis de fonction. Figure 6.7 : Le texte en gras Les menus Chapitre 6 LE GUIDE COMPLET 95 Partez de ceci : Vous allez ajouter un contrôle ToolStrip depuis la boîte à outils. Figure 6.8 : Ajout des outils Figure 6.9 : Ajout d’un ToolStrip 96 LE GUIDE COMPLET Chapitre 6 Penser à l’utilisateur 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 sur Insé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.  Il existe un deuxième moyen qui permet plus de contrôle sur la barre d’outils. Une fois le ToolStrip ajouté, dans la fenêtre des propriétés, une collection Items permet 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 de ToolStrip. 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 bouton Ajouter en 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 98 LE GUIDE COMPLET Chapitre 6 Penser à l’utilisateur sélectionner l’élément à ajouter à l’application. Pour le moment, ajoutez un bouton, que vous renommerez par G. 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 en Text. 2 Ensuite, cherchez la propriété Text et changez la valeur en G. Vous avez maintenant un bouton qui dispose d’un style réellement professionnel. Ajoutez deux autres boutons pour les styles italique et souligné.  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.