DUT Info S2 – 2013-2014 1 / 9 Stéphane Huot

IUT d’Orsay Première Année Introduction à l’Interaction Homme-Machine

Février 2014

Introduction à l’Interaction Homme-Machine Tutoriel Visual Studio / Visual Basic

Cette introduction à Visual Studio est à lire, faire et compléter au début du premier TP de Visual Basic. Vous devez compléter ce fichier et le rendre par email à votre enseignant après le TP 2. Vous aurez aussi besoin du projet créé dans ce tutoriel pour le TP 2.

Note : ce tutoriel a été écrit pour Visual Studio 2008. Les captures d'écran sont donc différentes de ce que vous pourrez voir à l'IUT ou sur vos machines personnelles avec Visual Studio 2012. Vous devriez toutefois retrouver rapidement les fonctionnalités de base utilisées et sinon, vous devriez très bien vous en sortir avec l'aide de Visual Studio...

Microsoft Visual Studio est une suite de logiciels de développement pour Windows conçu par Microsoft. La dernière version est Visual Studio 2012. Visual

Studio est un ensemble complet d'outils de développement permettant de générer des applications Web ASP.NET, des Services Web XML, des applications bureautiques et des applications mobiles. Visual Basic, Visual C++, Visual C# et Visual J# utilisent tous le même environnement de développement intégré (IDE, Integrated Development Environment), qui leur permet de partager des outils et facilite la création de solutions faisant appel à plusieurs langages. Par ailleurs, ces langages permettent de mieux tirer parti des fonctionnalités du Framework .NET, qui fournit un accès à des technologies clés simplifiant le développement d'applications Web ASP et de Services Web XML grâce à Visual Web Developer. [Wikipedia]

Dans les prochains TP d’IHM, nous utiliserons le langage Visual Basic .NET et donc Visual Studio comme environnement de développement. Cette petite introduction vous guidera dans vos premiers pas avec cet environnement en vous en présentant les outils de base.

I. Lancement Lors du premier lancement de Visual Studio, l’environnement va se configurer pour une première utilisation et vous présenter une page d'accueil (voir Figure 1).

Note : il se peut que lors du tout premier démarrage, Visual Studio effectue des opérations de configuration initiale et vous demande de sélectionner un langage préférentiel. Dans ce cas, choisissez Visual Basic et continuez.

DUT Info S2 – 2013-2014 2 / 9 Stéphane Huot

 

Figure  1  -­‐  Ouverture  de  Visual  Studio  2008.  

Rien de particulier pour cette fenêtre d'accueil, excepté que lors des prochaines ouvertures de l'environnement, elle vous proposera une liste des projets récemment ouverts.

II. Projets et Solutions Visual Studio regroupe le code en projets. Un projet peut regrouper le code d’une application, d’une librairie, d’un module d’une application, etc. Ces projets sont eux-mêmes regroupés en solutions. Les solutions permettent d'avoir plusieurs espaces de travail dédiés à des langages de programmation différents, ou à des buts différents, ou par exemple à des enseignements différents. Pour les TPs d’IHM, nous ferons dans la plupart des cas un projet par TP et nous regrouperons ces projets dans une même solution. Pour certains TP, nous vous fournirons un projet que vous devrez compléter. C’est pourquoi nous allons voir aussi (dans la partie fichiers) la création, l’importation et l’exportation de projets.

III. Création d’un projet et d'une première solution Pour accéder à l'assistant de création de projets il suffit de sélectionner « Projet... » dans le menu « Fichiers/Nouveau » ou par le bouton correspondant de la barre d'outils.

Après avoir choisi « Projet… » donc, la fenêtre de création de projet (wizard) apparait (Figure 2). Cette première étape permet de sélectionner quel type de projet l’on va créer, la solution correspondante, ainsi que l'emplacement où les fichiers seront placés.

Pour créer votre premier projet Visual Basic, choisissez : e) « Visual Basic » puis « Windows » dans la liste des types de projets (liste de

gauche). Il se peut que le langage Visual Basic ne soit pas visible, pour cela il faudra déplier la sous-liste « Autres Langages » de cette liste.

f) « Application Windows Forms » dans la liste des modèles. g) Saisissez « Tutorial VS » pour le nom du projet. h) Choisissez l'emplacement où créer le projet (de préférence sur votre espace

réseau personnel de l'IUT afin de retrouver vos projets depuis n'importe quelle machine).

DUT Info S2 – 2013-2014 3 / 9 Stéphane Huot

i) Saisissez « Programmes IHM » pour le nom de la solution et cochez la case « Créer un répertoire pour la solution ».

Figure  2  -­‐  Assistant  de  création  d'un  projet.  

Ensuite, cliquez sur « OK » pour finaliser la création du projet « Tutorial VS » et de la solution « Programmes IHM ». Visual Studio crée alors le projet et la solution que vous voyez apparaître dans « l'explorateur de solutions », sur votre espace de travail (a gauche dans la Figure 3). Si cette fenêtre n'est pas visible, vous pouvez la faire apparaître en cliquant sur le bouton correspondant de la barre d'outils ou par le menu « Affichage » (voir l'aide de VS). L'explorateur de solutions permet de visualiser sous la forme d'un arbre et d'accéder rapidement aux solutions ouvertes, à leur contenu (projets) et au contenu de ces projets (fichiers de code).

Listez et expliquer les items contenus dans l'explorateur de solutions après la création de votre premier projet.

Visual Studio a aussi créé et ouvert une première « Form » (fenêtre d'application), prête à être modifiée pour construire votre application (Figure 3). L'environnement se trouve en mode « Interface Builder » (constructeur d'interfaces), ce qui vous permet de construire interactivement l'interface graphique de votre application (nous y reviendrons plus loin).

DUT Info S2 – 2013-2014 4 / 9 Stéphane Huot

Figure  3  -­‐  Visual  Studio  après  la  création  d'un  projet.  

IV. Configurer Vous pouvez accéder aux options de configuration de votre projet par un clic droit sur le nom de votre projet dans l'explorateur de solutions et en choisissant l'item « Propriétés » du menu contextuel (vous pouvez aussi double-cliquer sur le fichier « MyProject » associé à votre projet dans l'explorateur de solutions). Cette fenêtre de configuration vous permet de paramétrer de nombreuses options (comme les options de compilation/exécution, les librairies à inclure, etc.) que nous ne détaillerons pas ici. A vous de les découvrir, si besoin, au fur et à mesure des TPs d’IHM et de votre utilisation de Visual Studio. Toutefois, dans ces propriétés de configuration dans l'onglet « Compiler », vous veillerez à ce que Option Explicit soit à On pour tous les nouveaux projets que vous créerez.

Vérifiez que « Option Explicit » est bien à « On » dans les propriétés du projet que vous venez de créer.

V. Compilation et exécution Un des avantages de Visual Studio et de fournir un environnement intégré qui facilite la création, la compilation, l’exécution et le déboguage de projets pouvant contenir de nombreux fichiers de code, repartis dans différents projets et référençant de nombreuses librairies.

VI. Compilation Dans Visual Studio, le projet est compilé en temps réel, dès que vous tapez du code et sauvegardez un fichier ou que vous en lancez l’exécution. Visual Studio fournit en plus de nombreux mécanismes pour présenter les erreurs de compilation ou d'exécution que nous verrons plus tard au cours de TPs spécifiques. Comme vous le découvrirez par vous même, ces erreurs sont mises en valeur et même expliquées dans l’éditeur de code.

DUT Info S2 – 2013-2014 5 / 9 Stéphane Huot

VII. Exécution Pour lancer l’exécution d’un programme, il suffit de faire un clic droit sur le nom du projet que vous voulez lancer dans l'explorateur de solutions et choisir l'entrée « Déboguer/Démarrer une nouvelle instance » du menu contextuel. Vous pouvez aussi cliquer

sur le bouton dans la barre d’outils ou presser la touche F5, auquel cas le projet par défaut de la solution sera lancé.

Lancez l’exécution du programme «Tutorial VS» que vous avez créé précédemment et quittez l'application en fermant sa fenêtre.

VIII. Création de l'interface et programmation de l'application

Ajout  de  composants  Pour cela vous disposez d'une « Boîte à outils » (Toolbox dans la Figure 3) à partir de laquelle vous pouvez sélectionner des composants d'interface (widgets) afin de les disposer dans la fenêtre de votre application par glisser-déposer. Si la boîte à outils n'est pas visible, vous pouvez la faire apparaître en cliquant sur le bouton correspondant de la barre d'outils ou par le menu « Affichage » (voir l'aide de VS). Une fois la boite a outils affichée, vous pouvez « l’ancrer » afin qu’elle reste toujours visible en utilisant le bouton en forme de punaise dans sa barre de fenêtre.

En utilisant la boîte à outils, ajoutez un bouton (Button) sur la fenêtre de l'application et relancez son exécution. Que constatez-vous ? Que se passe-t-il lorsque vous appuyez sur ce bouton ?

Quittez l'application en fermant sa fenêtre.

Propriétés  des  composants  De la même manière, une fenêtre « Propriétés » (Properties dans la Figure 3) permet de visualiser et changer les propriétés du composant sélectionné dans l'interface de l'application. Si cette fenêtre n'est pas visible, vous pouvez la faire apparaître en cliquant sur le bouton correspondant de la barre d'outils ou par le menu « Affichage » (voir l'aide de VS).

Dans la fenêtre des propriétés du bouton créé précédemment : a. changez son nom (propriété name) en btnQuitter.

b. changez son étiquette (propriété text) en Quitter.

DUT Info S2 – 2013-2014 6 / 9 Stéphane Huot

c. répertorier quelques-unes des autres propriétés liées à ce bouton de commandes et préciser leur rôle/signification.

Programmation  Le constructeur d'interface de Visual Studio permet de concevoir l'interface et de régler une grande partie de ses propriétés de manière visuelle et interactive. Mais bien entendu, il va être aussi nécessaire d'écrire du code pour programmer la partie fonctionnelle de l'application et ses réactions aux entrées de l'utilisateur (événements ou réflexes). Pour cela, Visual Studio comporte aussi des fenêtres d'édition de code (Figure 4).

 

Figure  4  -­‐  Fenêtre  d'édition  du  code.  

Ces fenêtres de code peuvent être ouvertes de plusieurs manières : à l'aide du menu contextuel de l'explorateur de solutions (clic droit sur un élément comme « Form1.vb » par exemple) ou directement depuis le constructeur d'interface.

Dans le constructeur d'interface, double-cliquez sur le bouton précédemment créé. Que se passe-t-il ?

DUT Info S2 – 2013-2014 7 / 9 Stéphane Huot

Ajoutez le code : Me.Dispose() et exécutez le projet. Que se passe-t-il lorsque vous appuyez maintenant sur le bouton « Quitter » ? Pourquoi ?

Maintenant, retournez au mode « constructeur d'interface » (onglet Form1.vb [Design]) et changez la propriété « Name » du bouton et exécutez le projet. Que se passe-t-il ? Pourquoi ? (Quel mécanisme permet d'obtenir ce résultat ?)

Enfin, rétablissez le nom original du bouton et sauvegardez le projet.

Fichiers  

Fichier  de  solution  et  de  projets  La création de ce premier projet et de cette solution par Visual Studio s'accompagne aussi de la création de répertoires et de fichiers à l'emplacement que vous avez spécifié dans l'assistant.

Décrire l'arborescence des répertoires générés lors de la sauvegarde du projet (en expliquant le rôle de ces répertoires). Dans quel fichier sont conservés les paramètres de la solution ? Et du projet ? Trouver dans quel fichier est sauvegardé le code écrit précédemment.

DUT Info S2 – 2013-2014 8 / 9 Stéphane Huot

Dans quel fichier trouve-t-on les informations concernant la disposition des éléments graphiques ? Recopiez et expliquez ici quelques-unes de ces lignes de code (retrouver les éléments graphiques, …).

Ajouter  des  fichiers  au  projet  Pour certains projets, vous aurez besoin de composants ou ressources supplémentaires, en plus que ceux qui ont été créés par défaut : une autre fenêtre pour l'application, un fichier de code contenant des fonctions ou variables utiles, des fichiers de ressources (images, texte, ...). Pour cela, il suffit de faire un clic droit sur le projet dans l'explorateur de solutions, de choisir le menu « Ajouter » et de vous laisser guider par l'assistant.

Créer  un  nouveau  projet  dans  une  solution  Pour créer un nouveau projet dans une solution existante, il suffit :

- de choisir la solution souhaitée dans la liste proposée par l'assistant de création de projet lorsque vous créez un nouveau projet (Figure 5 - gauche). Cette liste n'existait pas lors de la création de votre premier projet car il n'y avait pas encore de solution crée. Cette liste permet aussi de créer une nouvelle solution pour ce nouveau projet (option par défaut).

ou

DUT Info S2 – 2013-2014 9 / 9 Stéphane Huot

- de sélectionner « Ajouter/Nouveau Projet... » dans le menu qui apparaît lors d'un clic droit sur une solution dans l'explorateur de solutions (Figure 5 - droite). Avec cette méthode, l'assistant de création de projet ne propose pas de créer une nouvelle solution ou de l'attacher à une solution autre que celle sélectionnée au préalable.\

Figure  5  -­‐  Ajout  d'un  nouveau  projet  à  une  solution.  

Exporter/Importer  un  projet  ou  une  solution  Pour exporter une solution (sur votre ordinateur personnel ou sur le compte de votre binôme), il suffit simplement de copier le répertoire contenant la solution vers l'emplacement ou vous souhaitez en avoir une copie. Ensuite, dans le nouvel emplacement, en ouvrant le fichier de solution tout devrait bien se passer si les projets que contenait cette solution étaient tous dans le même répertoire que la solution et si vous les avez copiés avec. Sinon, il faudra spécifier manuellement où se trouvent les projets manquant de la solution.

De la même manière, pour exporter un projet, il suffit de le copier vers un autre emplacement. Si vous ne souhaitez pas l'inclure à une solution, il suffit d'ouvrir le fichier de projet avec Visual Studio. Sinon, vous pouvez insérer le projet dans une solution existante en utilisant le menu « Ajouter/Projet existant... » de l'explorateur de solutions.

IX. Suite… Il ne vous a été présenté ici qu’une petite partie des possibilités et fonctionnalités de Visual Studio, constituant la base dont vous aurez besoin pour démarrer sereinement les TP d’IHM. Nous vous encourageons bien évidemment à aller plus loin et explorer par vous-même les nombreuses possibilités que vous offre cet environnement de développement.