I. L'environnement de développement

L'environnement de développement intégré de Visual Basic (IDE: Integred Development Environment) peut être personnalisé, pour ce qui concerne sa présentation et son mode de fonctionnement.

Il est toutefois préférable avant de commencer votre premier projet, d'effectuer quelques réglages :
1)- Dans la barre de menu, cliquez sur l'étiquette "Outils", puis sur "Options", dans l'onglet "Editions" vous cochez toutes les cases à l'exception de "Affichage du module complet" et dans la largeur de la tabulation vous saisissez la valeur "2".

Image non disponible

2)- Sélectionnez l'onglet "Général", vous modifiez les valeurs des unités de la grille à "30"
3)- Sélectionnez l'onglet "Ancrage" et désactivez toutes les coches des cases à cocher.

Lorsque vous serez plus à l'aise avec votre environnement de travail, vous pourrez ajuster les options pour les personnaliser à votre goût.
Nous verrons plus tard d'autres réglages intéressants.

II. Votre premier projet VISUAL BASIC

II.1. Création de l'interface

La plupart des applications réalisées avec Visual Basic comportent au moins une feuille.
Les feuilles (Form en Anglais) constituent les éléments de base de l'interface utilisateur.
Elles forment les conteneurs (containers) recevant des contrôles, comme des boutons, des zones de textes, des cases à cocher, etc...qui peuvent être adaptés en fonction de vos aptitudes créatrices.
Lorsque vous avez démarré Visual Basic, la fenêtre de l'éditeur de feuille présente une feuille vide nommée Form1 (Nom que vous retrouvez dans la barre de titre).

II.2. Définir la taille de la feuille

Il y a plusieurs façons de créer notre feuille, la plus facile est de réaliser une image et de l'incorporer à la feuille, l'autre façon est de composer pièce par pièce notre présentation et c'est cette option qui retiendra notre faveur. Le résultat est le même à la différence prêt que la solution avec l'image nous consommera un peu plus de mémoire.

La taille de la feuille sera fonction des éléments que nous allons y insérer et nous allons lui donner une taille approximative tout en sachant que nous pourrons éventuellement la modifier.

En regardant la feuille (Form1) vous constatez des petits carrés noirs situés au centre de chaque coté de la feuille. C'est ce que l'on appelle des poignées qui vous permettent en les étirant de modifier les dimensions respectives de chaque côté de la feuille.

Vous avez les possibilités de contrôler à tout moment les dimensions que vous accordez à votre feuille par l'intermédiaire du compteur situé dans la barre d'outils.

Nous lui donnerons comme valeur les dimensions de :6195 x 3840.
Pour modifier la taille de cette fenêtre, utilisez le pointeur de la souris.
Placez-le sur le coin inférieur droit de la fenêtre (ce qui a pour effet de le transformer en une double flèche oblique), appuyez sur le bouton gauche de la souris, déplacez le pointeur jusqu'à ce que la fenêtre atteigne les dimensions souhaitées, puis relâchez la souris et contrôlez les dimensions affichées.

Nous venons de modifier les valeurs initiales de la feuille manuellement, nous aurions pu le faire également par l'intermédiaire de la fenêtre de propriétés.

III. Les propriétés

III.1. Ca se complique, qu'est ce que les propriétés ?

Chaque objet en Visual Basic dispose d'un jeu de caractéristiques, appelées propriétés, qui lui sont associées. Ces propriétés, listées dans la fenêtre Propriétés, contrôlent l'apparence et le comportement de l'objet.

Visual Basic attribue une valeur par défaut aux propriétés de chaque objet. Ces valeurs peuvent être modifiées pendant la conception du programme ou en mode actif de l'application par programmation.

Nous ne nous intéresserons pour l'instant qu'aux propriétés que nous allons utiliser.
Je vous conseille néanmoins de faire des essais pour vous familiariser avec toutes les propriétés de chaque objet.

III.2. La feuille de propriétés

Pour afficher la fenêtre de propriétés, Image non disponible, cliquez depuis la barre d'outils sur l'icône qui représente une main qui tient un fichier (le 2ème à partir de la gauche) ou appuyez sur la touche de fonction F4 de votre clavier.

Dans le champs de saisie en haut de la feuille, vous lisez le nom de la feuille auxquelles se rapportent les propriétés. Il s'agit dans cet exemple de la feuille Form1.

Si j'insiste sur ce point c'est que tout simplement lorsque vous aurez un programme qui contiendra une dizaine de feuilles, il faudra afficher précisément la feuille dont les propriétés sont à modifier. Ne pas se tromper de feuille!

Nous garderons l'option représentée par l'onglet "Alphabétique"

propriete.png La première propriété à modifier est le nom :
Name : Form1 sera remplacée par : frmAbout(Nom de la feuille)

Puis les autres propriétés caractéristiques :
Backcolor : en cliquant sur le carré grisé nous ouvrons la palette et nous choisissons la couleur de fond souhaitée. (Noire)
BorderStyle : 2 - Sizable c'est à dire modifiable par l'utilisateur sera remplacée par : 1 - fixe l' utilisateur ne pourra pas modifier les dimensions de la feuille.
Caption : Form1 sera remplacé par : "A propos de... ". Ce champs de saisie correspond à l'écriture qui se trouve dans la barre de titre de votre feuille.
Icon : (Icon) permet d'insérer une icône, n'importe quelle icône fera l'affaire pourvu qu'elle ait une extension "*.ico"
Icône: Fichier Image qui comporte une extension ico.
Height : 3840 - Dimensions en hauteur de la feuille
Width : 6195 - Dimensions en largeur de la feuille
Une nouveauté par rapport aux premières versions de VB le champs de saisie en bas de la feuille de propriétés qui vous indique les caractéristiques de la propriété sélectionnée.

Sur cet exemple nous avons l'explication de la propriété caption
Chaque propriété à une valeur attribuée par défaut et qui est modifiable au choix du programmeur.
Cette modification peut se faire en cours de programmation comme nous le verrons plus loin.

La propriété Caption vous permet d'affecter une touche d'accès rapide à un contrôle.
Dans la légende, tapez le signe & juste avant le caractère que vous souhaitez désigner comme touche d'accès rapide. Ce caractère apparaîtra souligné. Il vous suffira d'appuyer sur la touche ALT et sur le caractère souligné pour placer le focus sur ce contrôle.
(nous reparlerons du focus en temps utile)

IV. Insertion d'objets

IV.1. La boite à outils

./images/tools.gif Pour sélectionner un objet de la boîte à outils, déplacez le curseur de la souris sur l'élément que vous voulez choisir
une info bulle apparaît et vous indique le nom de l'objet sur lequel vous pointez la souris.

Nous allons positionner sur la feuille les autres objets nécessaires à la présentation de notre feuille, à savoir :

  • Un objet Label (Label1) qui nous servira de titre
  • un objet Image (Image1) pour insérer votre logo sous forme d'icône
  • un second objet Label (Label2) qui indiquera la version du programme
  • un autre Label (Label3) qui indiquera l'usage du programme
  • une autre image (Image2) pour insérer le logo sous forme d'image de notre structure
  • un trait récupéré dans la boîte à outils
  • un Label (Label4) devant nous donner le nom du programme ainsi que son copyright
  • deux boutons(CommandButton1 et CommandButton2)
  • un autre Label (Label5) qui servira d'étiquette
  • 2 derniers Labels (Label6 et Label7) qui contiendront notre numéro de série

IV.2. Création de l'interface

Nous allons positionner sur l'interface de travail les objets nécessaires à la présentation de notre feuille, à savoir :

Label1 positionné en haut à gauche de la feuille, propriétés :
Height :390
Width : 4630
Caption : Help System Restorer ou le nom de votre choix
BackColor : Choisir la couleur Noire
ForeColor : Choisir la couleur Rouge
Ces deux dernières propriétés seront identiques à tous les objet positionnés dans cette feuille.

Label2 positionné juste en dessous de la première étiquette comprendra dans sa propriété :
Caption : Version 1.0
Je vous laisse le soin de lui donner les dimensions adéquates

Label3 sera placé en dessous de Label2 et aura comme propriété :
Caption : Description de l'application

Suivi de :
Label4 avec comme propriété :
Caption : Programme de sauvegarde de la base de registre, ou descriptif selon votre choix.

Image1 sera placé juste à coté de Label1 et dans son prolongement.
Les propriétés dimensionnelles s'ajusteront aux dimensions de l'image
Nous insérerons le fichier Image en cliquant sur la propriété Picture qui a pour effet d'ouvrir une boîte de dialogue de Windows qui vous permet de charger l'image de votre choix au format Bmp, Gif ou wmf.

Si vous n'avez pas de "Logos" sous la main téléchargez les images et l'exemple de l'application : Télécharger ici

Nous insérerons un objet Line (trait) en dessous de l'objet Image1, sans commentaires.

Label5, positionné en dessous du trait aura comme propriété :
Caption : Help System Restorer[Savereg] Copyright © 2001
Tous droits réservés Gilbert Miralles 30980 Langlade France
Ndl : Il est bien entendu que vous pouvez modifier cette saisie en la remplaçant par vos propres coordonnées.
Le sigle Copyright "©" s'obtient en appuyant sur les touches Alt du clavier alphanumérique + 0169 du clavier numérique.

Il ne nous reste plus qu'à positionner les deux derniers "Label" qui restent, à savoir :
Label6 qui est une étiquette qui aura comme propriété :
Caption :Sérial N° :
Label7qui sera juxtaposé à l'étiquette Label6 devant recevoir la valeur du numéro de série de votre réalisation.

Pour terminer, nous positionnons les deux boutons qui auront comme propriété :
CommandButton1
Caption : OK
CommandButton2
Caption : Infos Systeme...
Vous leur donnez comme dimensions des valeurs en rapport avec la présentation de votre feuille.

Vous pouvez agrémenter la présentation en modifiant la propriété "color" de certains textes.

La prochaine leçon sera réservée à l'écriture du code.

Prochain tutoriel :

L'environnement de programmation de Visual Basic