La programmation visuelle

Précédent Suivant

Dans Visual Basic, il y a ... Visual mais aussi Basic. Visual car on construit les interfaces utilisateur de façon visuelle et Basic parce que c'est assez simple.

Qu'est ce qu'une interface utilisateur ? Eh bien c'est ce que vous êtes en train de regarder. C'est un système qui vous permet de communiquer avec l'ordinateur, et inversement, qui permet à l'ordinateur de communiquer avec vous.

Par exemple, lorsque vous cliquez sur un lien hypertexte, vous demandez à l'ordinateur d'afficher un autre document. En affichant ce nouveau document, l'ordinateur (ou plutôt le programme en cours d'exécution) répond à votre requête.

C'est le principe de la programmation événementielle. Le programme réagit aux événements provoqués par l'utilisateur (appui sur une touche, mouvement de souris) ou aux événements provoqués par un autre programme ou par le matériel (pas de disquette dans le lecteur provoque un affichage de boite d'alerte)

Un petit exemple vaut mieux qu'un long discours, nous allons créer une interface utilisateur rudimentaire. En fait nous allons concevoir une boite de dialogue genre A propos...

Ce type de boite de dialogue se retrouve dans presque toutes les applications. Généralement on y trouve le logo du programme ou de la société qui l'a développé, ainsi que d'autres informations (nom de l'auteur, version...)

Il nous faut tout d'abord créer une boite de dialogue (Traduisez UserForm dans Visual Basic). Pour cela déroulez le menu Insertion, puis choisissez UserForm

Vous devriez voir apparaitre une fiche vide comme celle ci:

Une fiche vide
Figure 1 - Une fiche vide.

 ainsi qu'une palette flottante intitulée Boîte à outils:

La boite à outils
Figure 2 - La boite à outils.

Sur cette palette vous trouvez ce qu'on appelle des contrôles. Vous avez par exemple des boutons (icône Bouton ) ou des images (icône Une image ). En glissant ces différents contrôles vers la fiche, vous pouvez créer une boite de dialogue.

Glissez par exemple un bouton Bouton vers votre fiche. Vous obtenez l'affichage suivant:


Figure 3 - Un bouton de commande.

Vous venez de créer un bouton. Nous allons maintenant changer son intitulé. Pour cela, nous allons nous servir de la fenêtre propriétés. Nous allons en fait modifier une des propriétés du bouton. En fait chaque contrôle a un certain nombre de propriétés. Certaines d'entres elles affectent son apparence (couleur, intitulé) ou son comportement.

La propriété qui nous intéresse (l'intitulé) se nomme Caption (les propriétés sont dans la langue de Shakespeare, bien que l'E.D.I. soit en français). Actuellement la valeur de celle ci est CommandButton1. C'est la valeur par défaut. Modifiez celle ci en OK.


Figure 4 - On modifie la propriété Caption du bouton dans la fenêtre Propriétés.

Vous pouvez changer la propriété Caption d'un contrôle d'une autre façon: Cliquez une première fois sur le bouton OK pour le sélectionner, puis cliquez une deuxième fois (pas trop vite, sinon ce sera un double clic et l'éditeur de code apparaitra). Le curseur de texte s'affiche et vous pourrez modifier "in situ" l'intitulé du bouton.

Votre bouton réagit à cette modification et apparait maintenant comme ceci:


Figure 5 - L'intitulé du bouton a changé.

Maintenant de la même façon, nous allons ajouter un contrôle image Une image à notre fiche.

Pour y afficher une image, modifiez la propriété Picture. Un petit bouton avec 3 petits points vous permet de parcourir votre disque dur pour y sélectionner une image (prenez une image de petite taille).

Mettez la propriété AutoSize à true (Vrai) pour que le contrôle Image s'adapte à la taille de votre image.

Cliquez sur la fiche pour la sélectionner et modifiez sa propriété Caption en A propos...

A l'aide des poignées, redimensionnez votre fiche et disposez ses contrôles de manière correcte de façon à obtenir quelque chose qui ressemble à ça:


Figure 6- Notre boite de dialogue terminée.

A présent lancez l'exécution en appuyant sur F5.

Voilà vous avez construit votre première boite de dialogue de manière visuelle.

Seul problème, la boite ne se ferme pas lorsqu'on clique sur OK. Il faut la fermer avec la croix en haut à droite.

Pour remédier à ce problème, il nous faut ajouter un peu de code. Double cliquez sur le bouton OK. L'éditeur de code s'affiche avec le squelette de procédure suivant :

Private Sub CommandButton1_Click()

    End Sub

Ajoutez y la méthode Hide (cacher).

Private Sub CommandButton1_Click()
      Hide
    End Sub

A présent tout fonctionne. Lorsqu'on appuie sur OK, la boite de dialogue disparait...

Précédent Sommaire Suivant