Exercice 5 : FENÊTRES

BUT : Cet exercice va vous permettre de peaufiner vos connaissances et d’apprendre à gérer plusieurs fenêtres ainsi que l’utilisation des listes déroulantes et des images.

Dans cet exercice vous allez donc créer 3 fenêtres. Toutefois rappelez-vous que tout projet du GUI Builder doit avoir une fenêtre principale nommée Main Window. Les autres fenêtres seront donc ici des fenêtres de dialogue (Dialog). La fenêtre principale peut aussi être une MDI Main Window qui fera l’objet d’un autre exercice.

Pour cet exercice, vous allez créer un nouveau projet. Créez donc :

- un répertoire Exercice_5

- un projet GUI Builder – nommez-le Fenetre.gbp (Save Project As…)

- un projet Object Ada contenant le fichier Exercice_5.prj et les librairies comme expliqué dans l’exercice 1 (n’oubliez pas de changer sous l’onglet Link, Console en Window).

- une fenêtre principale sous GUI Builder, nommez-la Saisie_Choix

Pour l’entête de la fenêtre, écrivez : Choix de la fenêtre désirée (propriété Caption)

La fenêtre principale est maintenant créée et nommée, vous allez donc pouvoir y insérer des objets.

1/ Bouton Quitter

Commencez par l’éternel bouton Quitter qui n’a plus de secret pour vous. Placez-le en bas à droite de la fenêtre.

Ajoutez un bouton : Icône Bouton Control.

Tracez un rectangle de grandeur raisonnable avec la souris.

L’objet Bouton1 a été ajouté dans l’arbre Project Manager onglet Window.

Changez le nom de cet objet dans les propriétés de ce nouvel objet.

Sous Name écrivez Bouton_Quitter puis appuyez sur return ou cliquez sur l’objet.

Notez le texte inscrit sur le bouton.

Sous Caption écrivez Quitter puis appuyez sur return ou cliquez sur l’objet

Sous Fontname choisissez Times New Roman (par exemple)

Sous Fontsize choisissez 12.

Créez une méthode pour un événement de l’objet Bouton_Quitter : View => Code Editor ou icône Code Editor ou F5 ou Project Manager onglet Window bouton Code (l’objet Bouton_Quitter doit être sélectionné sur la fenêtre ou sur l’arbre du Project Manager).

Vous voyez sous Object que c’est bien votre bouton Saisie_Choix.Bouton_Quitter sur lequel vous allez travailler. Vous pourrez travailler sur les autres grâce à ce menu déroulant.

Dans le menu déroulant Code, choisissez l’événement Click.

Ajoutez la commande "Gb.endapplication" pour quitter l’application (sans oublier les commentaires).

Ce qui vous donne :

 

procedure Bouton_Quitter_Click is

begin

-- Fin de l'application

Gb.endapplication;

end Bouton_Quitter_Click;

2/ Bouton Validation

Vous aurez aussi besoin d’un bouton de validation. Placez-le en dessus du bouton Quitter.

Nommez-le Bouton_Validation (Name) et écrivez sous Caption : OK.

 

Choisissez une fond bleu pour votre fenêtre principale et placez un titre : " Parfois un choix s’impose ".

Fig. 5.1 – Utilisation de la grille pour un alignement correct des objets

3/ Insertion d’une liste déroulante

Afin de proposer à l’utilisateur un choix parmi plusieurs options, GUI Builder met à disposition des listes déroulantes. Pour se familiariser avec cette dernière , insérez-en une à l’aide du bouton correspondant dans la barre d’outil. Placez-la au centre de la fenêtre et nommez-la Liste_Choix.

Les valeurs d’une liste déroulante sont des chaînes de caractères (String).

Afin d’avoir une valeur par défaut au démarrage dans la liste inscrivez votre première valeur sous Text dans les propriétés de la liste. Inscrivez les autres valeurs sous Items dans les propriétés, séparées par une virgule.

Donc sous Text inscrivez : Choix numéro 1

Sous Item inscrivez : Choix numéro 2,Choix numéro 3,Choix numéro 4

N’oubliez pas que ce sont des chaînes de caractères et qu’un espace est un caractère.

4/ Insertion des nouvelles fenêtres

La fenêtre principale contient ses éléments de base. Insérez maintenant deux nouvelles fenêtres de dialogues (Menu Insert puis Dialog).

Enregistrez la première sous le nom : Choix1 (Caption) et nommez-la du même nom dans les propriétés sous Name.

Enregistrez la première sous le nom : Choix4 (Caption) et nommez-la du même nom dans les propriétés sous Name.

Dans la fenêtre Choix1 insérez une image de fond grâce à la propriété Picture. Sélectionnez une image de votre choix ou celle qui se trouve ici . Ne choisissez pas une image trop grande et notez que les seuls formats possibles sont .bmp, .dib, et .ico. Afin de pouvoir retourner à la fenêtre principale, créez un bouton Retour portant le texte Retour (propriétés Name et Caption).

Dans la fenêtre Choix1 vous allez également insérer une image, mais cette fois-ci dans une boîte d’image (Image Control). Sous Picture sélectionnez une image de votre choix ou celle qui se trouve ici. Comme nous voulons profiter de l’image dans son intégralité choisissez sous Autosize, ControlToImage qui implique que la boîte de contrôle s’ajustera à l’image. Ajustez la taille de la fenêtre si nécessaire puis créez un bouton Retour identique à celui de la fenêtre Choix1.

Fig. 5.2 – Les trois fenêtres

5/ Code du bouton de validation

Vous avez maintenant trois fenêtres, dont la première propose quatre choix. Revenez sur la fenêtre principale puis affichez le code du bouton Validation. On désire par ce bouton valider le choix de l’utilisateur par un simple clic. Il s’agit donc de savoir ce qui se trouve dans le champ de la liste déroulante. Pour ce faire tapez le code suivant.

procedure Bouton_Validation_Click is

begin

-- Premier choix

If Text(Saisie.Choix) = "Choix numéro 1" then

-- Deuxième choix

elsif Text(Saisie.Choix) = "Choix numéro 2" then

-- Troisième choix

elsif Text(Saisie.Choix) = "Choix numéro 3" then

-- Quatrième choix

elsif Text(Saisie.Choix) = "Choix numéro 4" then

end if;

end Bouton_Validation_Click ;

Ici on compare la chaîne de caractère de la liste déroulante aux différentes valeurs possibles donnés comme items.

6/ Premier choix

Pour le premier on veut naturellement que la fenêtre Choix1 soit ouverte. En fait elle ne s’ouvrira pas mais deviendra visible. Allez dans les propriétés de la fenêtre Choix1. Une de ces propriétés est nommée Visible. Donnez lui la valeur False par défaut afin que la fenêtre ne soit pas visible à l’ouverture du programme exécutable. Pour la faire apparaître lors du premier choix de la liste déroulante, tapez le code suivant dans la branche du if correspondante (dans le code du Bouton_Validation).

-- Faire apparaître la fenêtre du premier choix

Visible(Choix1.Form,Gb.true);

-- et disparaitre la fenetre de depart

Visible(Saisie.Form,Gb.false);

7/ Second choix

Pour le deuxième choix on veut afficher un message d’erreur indiquant : Le deuxième choix est interdit.

Le code est donc :

-- Affiche une boite de message

MsgBox ("Le deuxième choix est interdit.", "Erreur deuxième choix");

8/ Troisième choix

Pour le troisième choix on veut faire disparaître la liste déroulante ainsi que les deux bouton Validation et Quitter de la fenêtre d’accueil et afficher un texte à la place ainsi qu’un bouton de retour (nommé Bouton_Retour_Choix2) permettant de réafficher la liste déroulante et faisant disparaître de les deux nouveaux objets.

Créez donc un Label affichant par exemple : " Affiche un nouveau texte dans la même fenêtre ".

Nommez le Message_Choix3, et attribuez lui la propriété Visible : false (ainsi il sera masqué au démarrage).

Créez un bouton Retour (toujours avec la propriété Visible à false), puis dans l’événement Click tapez :

-- Masquer les 3 objets du choix 2

Visible(Message_Choix2,Gb.false);

Visible(Bouton_Retour_Choix2,Gb.false);

-- Faire apparaître les objets principaux de la boite de saisie

Visible(Choix, Gb.true);

Visible(Bouton_Validation, Gb.true);

Visible(Bouton_Quitter, Gb.true);

Pour faire disparaître les deux boutons et la liste déroulante ainsi que faire apparaître le texte et le nouveau bouton de retour lors du troisième choix de la liste déroulante, tapez le code suivant dans la branche du if correspondante (dans le code du Bouton Validation).

-- Faire apparaître les objets du choix 2

Visible(Message_Choix2,Gb.true);

Visible(Bouton_Retour_Choix2,Gb.true);

-- Masquer les objets principaux de la boite de saisie du choix

Visible(Choix, Gb.false);

Visible(Bouton_Validation, Gb.false);

Visible(Bouton_Quitter, Gb.False) ;

9/ Quatrième choix

N’oubliez pas le code du 4eme choix (dans le code du bouton de Validation)

-- Faire apparaître la fenêtre du dernier choix

Visible(Choix4.Form,Gb.true);

-- et disparaitre la fenetre de depart

Visible(Saisie.Form,Gb.false);

10/ Edition de liens avec ressources (images, menus)

Voilà, votre application est terminée, il ne vous reste qu’à compiler et à éditer les liens.

Mais attention, vous avez introduit des images dans votre application. Cela implique la création de fichier de ressources dont l’éditeur de liens aura besoin. Dès lors il faut effectuer la marche à suivre suivante (à chaque ajout ou suppression d’éléments nécessitants une ressource, soit des images ou des menus) :

  1. Enregistrez votre projet GUI Builder (et toutes les fenêtres).
  2. Compilez sous Object Ada (peut se faire juste avant l’édition de liens).
  3. Ouvrez l’Explorateur Windows.
  4. Dans le répertoire du fichier du projet GUI Builder effacez tous les fichiers avec l’extension .res
  5. Pour chaque fichier .rc, glissez-le dans l’exécutable RC.exe (qui se trouve dans le répertoire ObjectAda/bin, et qui ne pèse que 17 ko) qui créera des fichiers de même nom mais avec l’extension .res.
  6. Dans les settings de votre projet ObjectAda sélectionnez l’onglet Link et inscrivez le chemin de votre fichier ressource à savoir le fichier .res portant le nom de votre projet GuiBuilder (dans notre cas Fenetre.res) dans la rubrique Pass to linker.
  7. Créez votre exécutable en faisant l’édition de liens.
  8. Exécutez votre programme et vérifiez que les images, icônes ou autres objets sont présents.

Vous constatez à ce moment qu’en fait il y a un bug : les boutons retour des fenêtres Choix1 et Choix4 n’agissent pas ! Il suffit de modifier le code événementiel (click) comme sur le bouton Retour du Choix3.

Si vous n’y arrivez pas par vous-même, jetez un coup d’œil sur les codes sources annexés ici.