logo Pierre AULAS
Visual Basic 6 - Fenêtre mouvante
 Parcours  |   Réalisations  |   Cours  |   Chroniques  |   Divers
Création de l'interface graphique
Définition des propriétés
Ecrire le code du programme

La fenêtre mouvante

Cet exercice doit vous permettre de maîtriser le contrôle bouton de commande (commandButton).
Vous pouvez voir son fonctionnement en cliquant ici.

Cette image vous montre l'aspect de votre application une fois terminée.
Quatre boutons placés dans les quatre coins du formulaire déclenchent le repositionnement du formulaire dans un des coins de l'écran de l'utilisateur (le coin indiqué respectivement par chaque fléche).
Le bouton Quitter permet de quitter l'application. L'utilisateur peut également quitter l'application en appuyant sur la touche Entrée ou sur la touche Echapp.

Les étapes de programmation

Comme indiqué dans le premier exercice, vous essaierez d'organiser votre travail en trois étapes:
  - création de l'interface utilisateur
  - définition des propriétés
  - écriture du programme
Il ne s'agit pas de vous embêter mais de vous éviter de vous mélanger les pinceaux et donc, à l'arrivée, de perdre du temps.

1. Création de l'interface graphique

Commencez par ouvrir un nouveau projet puis redimensionnez le formulaire jusqu'à ce que ses propriétés height et width aient respectivement les valeurs 5000 et 7000. Si cela vous pose des difficultés, retournez voir l'exercice 1.

Créer un modèle

Comme tous les formulaires que nous allons utiliser dans les exercices sur les contrôles vont avoir cette taille, nous allons créer un modèle.

Après avoir baptisé votre projet "Exercice00" (ainsi vous ne modifierez que légérement son nom à chaque fois que vous ferez appel à ce type de projet) et son formulaire - soigneusement redimensionné - baptisé frm01 ou frmExercice01, vous cliquez sur le menu Fichier > Enregistrez le projet sous et vous enregistrez votre projet ainsi que son formulaire dans le répertoire C:\Program Files\Microsoft Visual Studio\VB98\Template\Projects.

Vous pouvez alors fermer votre projet et séléctionner le menu Fichier > Nouveau projet. Dans la fenêtre qui s'ouvre, vous devriez voir apparaître votre modèle comme dans la fenêtre ci-dessous:

Vous venez de réaliser votre premier modèle.

Créer l'interface pour l'exercice

Cet exercice comprend 5 contrôles boutons de commande.
Plutôt que de les poser un à un, appuyez sur la touche Ctrl lors de la séléction dans la boîte à outils. Le contrôle bouton de commande reste séléctionné jusqu'à ce que vous en séléctionnez un autre dans la barre à outil.

En séléctionnant en même temps vos quatre boutons d'angle et en utilisant les options fournies par le menu Format > Uniformiser la taille ou Format > Aligner, etc., uniformisez leur taille et placez-les dans les angles, puis centrez le bouton Quitter.
A cette étape de votre projet votre formulaire doit ressembler à cela:

2. Définition des propriétés

Commencez par définir si ce n'est pas déjà fait la propriété Name de votre formulaire en frm01 (si vous avez correctement créé votre modèle cela ne devrait pas être nécessaire).

Vous devez ensuite définir les propriétés des 5 contrôles présents sur votre formulaire comme indiqué dans le tableau qui suit:

Objet  Propriété  Valeur
Form1  Name  frm01
 Caption  Exercice - Bouton de commande
Command5  Name  cmdQuitter
 Caption  &Quitter
 Cancel  True
 Default  True
Command1  Name  cmdHautGauche
 Caption  (vide)
 Style  1 - Graphical
 Picture  cou_vb6_fleHautGauche.ico
 ToolTipText En haut à gauche
Command2  Name  cmdHautDroite
 Caption  (vide)
 Style  1 - Graphical
 Picture  cou_vb6_fleHautDroite.ico
 ToolTipText En haut à droite
Command3  Name  cmdBasGauche
 Caption  (vide)
 Style  1 - Graphical
 Picture  cou_vb6_fleBasGauche.ico
 ToolTipText En bas à gauche
Command4  Name  cmdBasDroite
 Caption  (vide)
 Style  1 - Graphical
 Picture  cou_vb6_fleBasDroite.ico
 ToolTipText En bas à droite

Liste des images  :

Chaque feuille peut contenir un bouton par défaut (propriété Default) et un bouton d'annulation (propriété Cancel). Ces deux propriétés ont été définies à True pour le bouton cmdQuitter. Il réagit ainsi à la touche Entrée et à la touche Echapp. Pensez à faire le test lorsque votre application sera finie.

L'entrée (vide) pour les propriétés Caption des boutons d'angle signifie que tout texte doit être effacé des boutons.

La définition de la propriété Style des boutons à 1 - Graphicalpermet d'y insérer une image.
Le contenu de cette image est défini par la propriété Picture. Pour cet exercice j'ai pris des images disponibles par défaut dans le répertoire: Commons\Graphics\Icons\Arrows de Microsoft Visual Studio. Elles sont également fournies dans le zip de cet exercice avec le même nom qu'indiqué dans le tableau ci-dessus.

La propriété ToolTipText détermine ce qui doit s'afficher dans l'info-bulle du contrôle lors de l'exécution.
C'est recommandé dans le cas présent pour compenser l'absence de texte sur le bouton de contrôle.

Il ne vous reste plus qu'à Verrouiller les contrôles et à faire un clic-droit sur la fenêtre Présentation des feuilles (menu Affichage > Fenêtre présentation des feuilles) et choisir la commande Position de départ > Centrer dans l'écran.

Si vous lancez l'exécution de votre projet (touche F5 ou menu Exécution > Exécuter) maintenant, votre formulaire, bien centré au milieu de votre écran, devrait ressembler à cela:

Pour l'instant il ne réagit pas aux sollications de l'utilisateur. Vous allez rajouter le code qui convient.

3. Ecrire le code du programme

Pour accéder à la fenêtre de code: double-cliquez sur le bouton cmdQuitter.

Commed'habitude, VB a écrit pour vous le début et la fin de la procédure événementielle qui se déclenche lorsque l'utilisateur clique sur le bouton cmdQuitter.

Il ne vous reste plus qu'à écrire au sein de cette procédure le seul mot End qui déclenchera la fermeture de votre formulaire:

Private Sub cmdQuitter_Click()
  End
End Sub

Il faut maintenant réfléchir un peu à ce que vont faire vos boutons d'angle.

Le but est qu'en appuyant sur chacun d'eux votre formulaire soit repositionné dans chacun des angles de votre écran.
Pour l'angle en haut à gauche c'est facile: il suffit de définir les propriétés Top et Left de votre formulaire à 0.

Vous pouvez déjà écrire le code pour ce bouton:

Private Sub cmdHautGauche_Click()
  Me.Left = 0 'On peut écrire indifférement fmr01 ou Me
  Me.Top = 0  'Me désigne l'objet conteneur du contrôle, càd le formulaire
End Sub

Pour calculer la position dans les autres angles, c'est plus compliqué puisqu'il faut connaître la largeur et la hauteur de l'écran. Or celle-ci est variable selon l'écran dont dispose l'utilisateur.
Pour résoudre ce problème, VB a créé un objet appelé Screen qui contient une dizaine de propriétés et méthodes renseignant sur la taille de l'écran et sa définition. Nous utiliserons les propriétés Width (largeur) et Height (hauteur) que l'on peut obtenir avec la syntaxe suivante:

Screen.Width
Screen.Height

Pour positionner la fenêtre en haut à droite, il faut attribuer à la propriété Left du formulaire la largeur de l'écran moins la largeur du formulaire comme l'indique le croquis ci-dessous:

Le code destiné à votre bouton d'angle en haut à droite est donc le suivant:

Private Sub cmdHautDroite_Click()
  Me.Left = Screen.Width - Me.Width
  Me.Top = 0
End Sub

Si vous avez bien compris le principe, vous devriez pouvoir rédiger le reste du code sans regarder la suite.


Private Sub cmdBasGauche_Click()
  Me.Left = 0
  Me.Top = Screen.Height - Me.Height
End Sub

Private Sub cmdBasDroite_Click()
  Me.Left = Screen.Width - Me.Width
  Me.Top = Screen.Height - Me.Height
End Sub

Les sources de cet exercice sont disponibles ici en faisant un clic droit "Enregistrer la cible de ce lien".

Haut de page
Plan du site  |  Mentions légales  |  Crédits  |  Aide