Dans cet exercice, vous allez commencer à élaborer Bandit Manchot en créant tout d’abord un nouveau projet, puis en utilisant les contrôles de la Boîte à outils pour cons-truire l’interface utilisateur.
Créer un nouveau projet 1. Démarrez Visual Studio 2008.
2. Dans le menu Fichier, cliquez sur Nouveau Projet.
La boîte de dialogue Nouveau projet s’affiche.
Étape de programmation Nombre d’éléments 1. Créer l’interface utilisateur. 7 objets
2. Définir les propriétés. 13 propriétés
3. Écrire le code. 2 objets
Astuce Vous pouvez aussi créer un nouveau projet de programmation à partir de la page de démarrage, en cliquant sur le lien bleu Projet situé à droite de Créer, en bas du volet Projets récents.
La boîte de dialogue Nouveau projet permet d’accéder aux principaux types de projet permettant d’écrire des applications Windows. Si pendant l’installation, vous avez indiqué que vous étiez un programmeur Visual Basic, Visual Basic est votre principale option de développement (c’est le cas ici), mais les autres langages de Visual Studio (Visual C# et C++) sont toujours disponibles dans cette boîte de dia-logue. Bien que, dans cet exercice, vous sélectionniez un projet d’application Win-dows de base, la boîte de dialogue constitue également une passerelle vers d’autres types de projets de développement, comme les applications web, les applications de console, les applications Smart Device (Framework compact .NET) ou les projets de déploiement de Visual Studio.
Dans le coin supérieur droit de la boîte de dialogue Nouveau projet, remarquez la zone de liste déroulante. C’est un nouveau dispositif de Visual Studio 2008 qui porte le nom de « ciblage multiple ». Cette zone de liste déroulante permet de spé-cifier la version de .NET Framework ciblée par votre application. Par exemple, en sélectionnant .NET Framework 3.5, les ordinateurs sur lesquels s’exécutera l’applica-tion devront posséder le .NET Framework 3.5 installé. Visual Studio n’affiche que les options compatibles avec la version de .NET Framework sélectionnée. Les applica-tions créées avec Visual Basic 2005 ciblaient toutes le .NET Framework 2.0. Des pro-grammes créés avec Visual Basic 2005 mis à niveau vers Visual Basic 2008 cibleront toujours le .NET Framework 2.0. Sauf en cas de nécessité précise, laissez dans cette zone de liste la valeur par défaut de .NET Framework 3.5. Vous en apprendrez plus sur le .NET Framework au Chapitre 5, « Variables et formules Visual Basic et l'envi-ronnement .NET Framework ».
3. Dans la zone Modèles de la boîte de dialogue, cliquez sur l’icône Application Win-dows Forms, si elle n’est pas déjà sélectionnée.
Visual Studio prépare l’environnement de développement pour la programmation d’une application Windows en Visual Basic.
4. Dans la zone de texte Nom, tapez Mon Bandit Manchot.
Visual Studio intitule votre projet Mon Bandit Manchot. Vous spécifierez ultérieure-ment un emplaceultérieure-ment de dossier. Le préfixe « Mon » permet d’éviter toute confu-sion entre cette nouvelle application et le projet Bandit Manchot que j’ai créé pour vous.
5. Cliquez sur OK pour créer le nouveau projet Visual Studio.
Visual Studio nettoie l’espace de travail du nouveau projet de programmation et affiche le formulaire Windows vierge que vous allez utiliser pour créer votre inter-face utilisateur.
Vous allez maintenant agrandir le formulaire et créer les deux boutons de l’interface.
Créer l’interface utilisateur
1. Placez le pointeur de la souris au-dessus de l’angle inférieur droit du formulaire jusqu’à ce qu’il prenne la forme d’une poignée de dimensionnement, puis faites glisser pour agrandir le formulaire et libérer de l’espace pour les objets de votre programme.
Quand vous agrandissez le formulaire, des barres de défilement peuvent apparaître dans le Concepteur pour vous permettre d’accéder à l’ensemble du formulaire que vous créez. Selon votre résolution d’écran et les outils de Visual Studio que vous avez ouverts, il se peut que vous ne puissiez pas voir l’ensemble du formulaire à l’écran. Ne vous en faites pas, que votre formulaire soit petit ou qu’il remplisse tout l’écran, les barres de défilement vous permettent d’accéder à l’intégralité du formu-laire.
Astuce Si votre boîte de dialogue Nouveau projet comporte les zones de texte Emplacement et Solution, vous devez spécifier dès maintenant un emplacement de dossier et un nom de solution pour votre nouveau projet de programmation. La pré-sence de ces zones de texte est contrôlée par une case à cocher située dans la boîte de dialogue Options du menu Outils, mais ce n’est pas le paramètre par défaut de Visual Basic 2008. Tout au long de cet ouvrage, vous apprendrez à enregistrer vos projets (ou à les supprimer) après avoir terminé l’exercice de programmation. Pour davantage de renseignements à propos de cette fonction d’« enregistrement retardé » et de la restauration des paramètres par défaut de Visual Studio, voir la sec-tion « Personnaliser les réglages de l’environnement de développement intégré pour réaliser les exercices pas à pas » dans le chapitre 1.
Dimensionnez votre formulaire comme sur l’illustration. Si vous souhaitez repro-duire l’exemple à l’identique, utilisez les dimensions qui apparaissent dans l’angle inférieur droit de l’écran (485 pixels x 278 pixels).
Pour voir l’intégralité du formulaire, vous pouvez redimensionner ou fermer les autres outils de programmation, comme vous l’avez appris au chapitre 1. Reprenez-le si vous avez encore des questions sur Reprenez-le redimensionnement des fenêtres ou des outils.
Vous allez maintenant ajouter un objet bouton au formulaire.
2. Cliquez sur l’onglet Boîte à outils pour faire apparaître la fenêtre Boîte à outils dans l’EDI.
Celle-ci contient tous les contrôles nécessaires à l’élaboration des programmes Visual Basic de cet ouvrage. Vous avez sélectionné le type de projet Application Windows Forms : les contrôles nécessaires pour créer une application Windows apparaissent. Ils sont classés par type, et la catégorie Contrôles communs est affichée par défaut. Si la Boîte à outils n’apparaît pas, cliquez sur Boîte à outils dans le menu Affichage.
3. Dans la Boîte à outils, double-cliquez sur le contrôle Button, puis déplacez le poin-teur de la souris à l’extérieur de la Boîte à outils.
Visual Studio crée un objet bouton de taille standard sur le formulaire et masque la Boîte à outils, comme suit :
Le bouton est intitulé Button1 car c’est le premier bouton du programme. Souve-nez-vous de ce nom, il réapparaîtra lorsque vous écrirez le code. Le nouvel objet bouton est sélectionné et entouré de poignées de redimensionnement. Lorsque Visual Basic est en mode conception (c’est-à-dire lorsque l’EDI est actif), vous pouvez déplacer des objets sur le formulaire en les faisant glisser à l’aide de la souris, et les redimensionner à l’aide des poignées de redimensionnement. En revanche, il est impossible de déplacer des éléments de l’interface pendant l’exécution d’un pro-gramme, à moins que vous n’ayez modifié une propriété dans le programme pour permettre cette opération. Vous allez maintenant déplacer et redimensionner le bouton.
Déplacer et redimensionner un bouton
1. Placez le pointeur de la souris au-dessus du bouton pour qu’il se transforme en flè-che à quatre pointes, puis faites glisser le bouton vers le bas et vers la droite.
Le bouton se déplace au-dessus du formulaire. Si vous déplacez l’objet près du bord du formulaire ou près d’un autre objet (si d’autres objets sont affichés), il s’aligne automatiquement sur une grille masquée. Une petite « marque » bleue apparaît également pour vous aider à évaluer la distance entre cet objet et le bord du for-mulaire ou l’autre objet. Contrairement aux versions antérieures de Visual Studio, la grille n’est pas affichée par défaut sur le formulaire, mais vous pouvez utiliser la marque pour évaluer les distances.
Astuce Si vous souhaitez afficher la grille du mode conception comme dans Micro-soft Visual Studio .NET 2003 et Visual Basic 6, dans le menu Outils, cliquez sur la commande Options, puis sur Concepteur Windows Form et Général. Réglez Show-Grid sur SnapToShow-Grid. Pour que les modifications prennent effet, vous devrez fermer le projet et le réouvrir.
2. Placez le pointeur de la souris dans l’angle inférieur droit du bouton.
Lorsque le pointeur de la souris s’attarde sur l’une des poignées de redimensionne-ment d’un objet sélectionné, il se transforme en pointeur de redimensionneredimensionne-ment.
Vous pouvez l’utiliser pour modifier la taille d’un objet.
3. Agrandissez le bouton en faisant glisser le pointeur vers le bas et vers la droite.
Lorsque vous relâchez le bouton de la souris, le bouton change de taille et s’ajuste à la grille.
4. Utilisez la poignée de redimensionnement pour redonner au bouton sa taille d’ori-gine.
Vous allez maintenant ajouter un second bouton au formulaire, en dessous du premier.
Ajouter un deuxième bouton
1. Cliquez sur l’onglet Boîte à outils pour afficher celle-ci.
2. Cliquez (une seule fois) sur le contrôle Button dans la Boîte à outils, puis déplacez le pointeur de la souris au-dessus du formulaire.
Il se change en pointeur en croix et en icône bouton. Le pointeur en croix est conçu pour vous permettre de dessiner la forme rectangulaire du bouton, et vous pouvez utiliser cette méthode au lieu de double-cliquer pour créer un contrôle de taille standard.
3. Faites glisser le pointeur vers le bas et vers la droite. Relâchez le bouton de la souris pour terminer le bouton : vous le voyez s’ajuster sur le formulaire.
4. Redimensionnez l’objet bouton pour que sa taille soit la même que celle du premier bouton, puis placez-le en dessous du premier bouton. Utilisez la marque pour vous aider.
Vous allez maintenant ajouter les étiquettes de numéros du programme. Une étiquette (label) est un élément particulier de l’interface utilisateur, conçu pour afficher du texte, des nombres ou des symboles lors de l’exécution d’un programme. Lorsque l’utilisateur clique sur le bouton Lancer du programme Bandit Manchot, trois numéros aléatoires apparaissent dans les cases étiquette. Si l’un des trois numéros est un 7, l’utilisateur gagne.
Ajouter les étiquettes de numéro
1. Double-cliquez sur le contrôle Label dans la Boîte à outils.
Visual Studio crée un objet étiquette sur le formulaire. Si vous êtes habitué aux anciennes versions de Visual Studio ou Visual Basic, vous remarquerez que l’objet
Astuce Vous pouvez à tout moment supprimer un objet et recommencer, en sélec-tionnant l’objet sur le formulaire puis en appuyant sur SUPPR. N’hésitez pas à créer et à supprimer des objets pour vous entraîner à créer votre interface utilisateur.
étiquette par défaut est plus petit. Il est juste assez large pour contenir le texte de l’objet, mais il peut être redimensionné.
2. Faites glisser l’objet Label1 à droite des deux objets bouton.
Votre formulaire présente un résultat similaire à
3. Dans la Boîte à outils, double-cliquez sur le contrôle Label pour créer un deuxième objet étiquette. Cet objet sera intitulé Label2 dans le programme.
4. Double-cliquez une nouvelle fois sur le contrôle Label pour créer un troisième objet étiquette.
5. Sur le formulaire, placez les deuxième et troisième objets étiquette à droite du pre-mier.
Laissez beaucoup d’espace entre les trois étiquettes, car vous allez les utiliser pour afficher de grands numéros lors de l’exécution du programme.
Vous allez maintenant utiliser le contrôle Label pour ajouter une étiquette descrip-tive à votre formulaire. Ce sera la quatrième et dernière étiquette de votre formu-laire.
6. Dans la Boîte à outils, double-cliquez sur le contrôle Label.
7. Faites glisser l’objet Label4 sous les deux boutons de commande.
Lorsque vous avez terminé, vos quatre étiquettes doivent ressembler à celles de l’illustration suivante. Vous pouvez déplacer vos objets étiquette s’ils ne sont pas au bon endroit.
Vous allez maintenant ajouter une zone d’image au formulaire, pour afficher le résultat obtenu lorsque vous tirez un 7 et touchez le jackpot. Une zone d’image est conçue pour afficher dans un programme des images en mode point, des icônes, des photos numéri-ques et d’autres illustrations. L’une des meilleures utilisations d’une zone d’image consiste à afficher un fichier image JPEG.
Ajouter une image
1. Dans la Boîte à outils, cliquez sur le contrôle PictureBox.
2. À l’aide du pointeur de dessin, créez une grande zone rectangulaire sous les deuxième et troisième étiquettes.
Laissez un peu d’espace sous les étiquettes, dont la taille va augmenter comme je l’ai mentionné précédemment. Lorsque vous avez terminé, votre objet zone d’image ressemble à :
Cet objet sera intitulé PictureBox1 dans votre programme. Vous utiliserez ce nom plus tard dans le code.
Vous êtes maintenant prêt à personnaliser votre interface en définissant quelques pro-priétés.