Communication avec l'utilisateur de votre programme : interface utilisateur

Article
08/21/2008

Mise à jour : novembre 2007

Dans cette leçon, vous apprendrez ce qu'est une interface utilisateur, ce que sont des contrôles, et comment les ajouter à une interface utilisateur.

Aux débuts de l'informatique personnelle, les utilisateurs interagissaient avec les programmes essentiellement par le biais d'une ligne de commande. L'exécution d'un programme démarrait, s'interrompait pour recevoir l'entrée d'un utilisateur, puis reprenait. La plupart des programmes que vous utilisez aujourd'hui s'exécutent désormais dans une ou plusieurs fenêtres. Ces fenêtres permettent à l'utilisateur de communiquer ou d'interagir avec le programme en tapant, en cliquant sur des boutons ou en sélectionnant des éléments dans des menus prédéfinis, etc. Dans cette leçon ainsi que les suivantes, vous apprendrez à générer vos propres interfaces utilisateur à l'aide de fenêtres.

Utilisation de formulaires

Les formulaires sont les blocs de construction de base de votre interface utilisateur. Chaque formulaire de votre programme représente une fenêtre se présente aux utilisateurs. Lorsque vous travaillez dans l'environnement de développement intégré (IDE, integrated development environment) de Visual Basic, un formulaire constitue le concepteur qui vous permet de concevoir l'interface utilisateur de votre application, de même que Windows Paint vous permet de dessiner une image.

Les contrôles sont utilisés dans le concepteur pour créer l'aspect de votre interface utilisateur. Un contrôle est un objet dont le comportement et l'aspect sont préalablement définis. Par exemple, un contrôle Button a le même aspect qu'un bouton de commande et se comporte de la même manière : lorsqu'un utilisateur clique dessus, son apparence change pour montrer qu'il a été activé.

En Visual Basic, chaque contrôle a sa propre fonction. Par exemple, un contrôle TextBox permet d'entrer du texte, alors qu'un contrôle PictureBox permet d'afficher des images. Il y a plus de cinquante contrôles différents dans Visual Basic ; vous pouvez également créer vos propres contrôles, connus sous le nom de contrôles utilisateur. Vous en saurez plus sur les différents types de contrôle dans les leçons ultérieures.

Lorsque vous concevez votre interface utilisateur, vous faites glisser des contrôles depuis la Boîte à outils jusqu'à un formulaire, puis vous les positionnez et les redimensionnez pour obtenir l'aspect souhaité. Vous pouvez modifier plus avant leur aspect en définissant les propriétés des formulaires et des contrôles dans la fenêtre Propriétés. Par exemple, les formulaires et la plupart des contrôles disposent d'une propriété BackColor. Celle-ci est utilisée pour définir leur couleur d'arrière-plan.

Les propriétés sont également utilisées pour définir le comportement d'un formulaire ou d'un contrôle. Par exemple, la propriété ShowInTaskbar d'un formulaire permet de déterminer si le formulaire s'affiche dans la barre des tâches Windowslors de l'exécution du programme. Les propriétés vous permettent de personnaliser l'apparence et le comportement de votre interface utilisateur.

Essayez !

Pour modifier les propriétés d'un formulaire

Dans le menu Fichier, cliquez sur Nouveau projet.
Dans la boîte de dialogue Nouveau projet, dans le volet Modèles, cliquez sur Application Windows.
Dans la zone Nom, tapez FirstForm, puis cliquez sur OK.

Un nouveau projet Windows Forms est créé. Un nouveau formulaire s'affiche dans la fenêtre principale, et ses propriétés sont visibles dans la fenêtre Propriétés, dans le coin inférieur droit de l'IDE de Visual Basic.
Cliquez sur le formulaire pour le sélectionner.
Dans la fenêtre Propriétés, modifiez la propriété Text pour lui affecter la valeur "My First Form", puis appuyez sur ENTRÉE.

Le texte du haut du formulaire change après la saisie de la nouvelle valeur.
Dans la fenêtre Propriétés, modifiez la propriété BackColor pour lui affecter une couleur différente en la sélectionnant dans la liste déroulante.

Remarquez que vous pouvez modifier la propriété BackColor à l'aide d'une interface spéciale. Cette interface vous permet de visualiser la couleur avant de la sélectionner et de choisir parmi les différentes couleurs actuellement utilisées par votre système, les couleurs Web standard ou une sélection de couleurs plus personnalisées. Vous pouvez aussi simplement taper le nom de la couleur (par exemple, Red) dans la zone dans la fenêtre Propriétés.

Mettez cette procédure en pratique en modifiant d'autres propriétés du formulaire. Lorsque vous êtes prêt, passez à la procédure suivante.

Ajout de contrôles au formulaire

Dans cette procédure, pour ajouter des contrôles au formulaire, sélectionnez-les dans la fenêtre Boîte à outils, habituellement placée sur le côté gauche de l'IDE de Visual Basic, puis faites-les glisser jusqu'au formulaire. Réglez ensuite les propriétés des contrôles.

Pour ajouter des contrôles au formulaire

À partir de la Boîte à outils, faites glisser dans le formulaire des contrôles Button, TextBox, Label, puis CheckBox.
Sélectionnez le contrôle Button et déplacez le dans le formulaire pour modifier son emplacement.

Remarquez les indications qui s'affichent lorsque vous le faites glisser près des autres contrôles. Ces instructions peuvent vous aider à positionner les contrôles avec précision.
Répétez le processus avec les autres contrôles jusqu'à ce que l'interface utilisateur ait l'aspect désiré.
Sélectionnez le contrôle Button, puis faites glisser la poignée de redimensionnement dans son coin inférieur droit pour en modifier la taille.
Prenez le temps de manipuler les propriétés des contrôles. Cliquez sur chaque contrôle du formulaire pour le sélectionner, puis modifiez certaines de ses propriétés dans la fenêtre Propriétés. Les propriétés que vous pouvez essayer de modifier comptent Font, BackColor, ForeColor et Text. Pour plus d'informations, consultez Présentation détaillée : fonctionnement de la disposition des contrôles.
Appuyez sur F5 pour exécuter le programme. Une fenêtre s'affiche avec les contrôles que vous venez d'ajouter. Vous pouvez cliquer sur le bouton, activer et désactiver la case à cocher, et entrer des informations dans la zone de texte.

Étapes suivantes

Dans cette leçon, vous avez appris comment créer un formulaire et comment lui ajouter des contrôles. Vous avez également appris comment modifier les propriétés de formulaires et de contrôles dans la fenêtre Propriétés. Dans les leçons suivantes, nous examinerons plus en détail certains contrôles.

Leçon suivante : Interaction avec l'utilisateur : utilisation des boutons