Introduction à l`Interaction Homme-Machine Tutoriel Visual

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
1/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
2/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
3/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
4/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'application
l'interface
et
programmation
de
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
5/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
6/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
7/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
8/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.
DUT Info S2 – 2013-2014
9/9
Stéphane Huot