Démonstration de l’événement clic sur bouton

Dans cette section, nous allons ajouter des événements aux boutons : un clic sur un bouton exécute du code pour réaliser des opérations. Nous allons illustrer deux cas : modifier le texte d’un bouton au clic, fermer la fenêtre avec un second bouton.

Créer un nouveau projet d’interface graphique

Cliquez sur le menu principal en haut : Project (Projet) → New Project (Nouveau projet) → Application (Application) (vous pouvez aussi passer par File (Fichier) → New → Project → Application) pour générer un programme GUI tout neuf.

Ou bien

Après création, plusieurs fenêtres s’affichent : barre de menu principale en haut, Inspecteur d’objets (Object Inspector) à gauche, et l’Éditeur de code (Source Editor) qui occupe la majeure partie de l’écran.

Ajouter deux boutons sur le formulaire

Sous la barre de menu principale se trouve la barre d’onglets de catégories de composants

Le cadre rouge ci-dessus est la barre de catégories de composants, divisée en onglets : le premier est Standard (Composants standard), le second Additional…

Si l’onglet « Standard (Composants standard) » n’est pas sélectionné, cliquez dessus pour l’activer ;

Cliquez sur l’icône bouton (rectangle avec OK), puis cliquez sur la partie gauche du formulaire Form1 : un bouton nommé Button1 apparaît sur le formulaire ;

Cliquez une nouvelle fois sur l’icône bouton de la barre standard, cliquez sur la partie droite du formulaire pour créer le second bouton Button2.

Si vous ne maîtrisez pas les étapes, référez-vous à la vidéo de la leçon précédente.

Suivez ces étapes pour ajouter les deux boutons

Modifier le texte de Button1 et écrire l’événement de clic

Cliquez pour sélectionner Button1 : l’inspecteur d’objets à gauche affiche toutes ses propriétés :

Si ce panneau de paramètres est masqué, cliquez sur la flèche dans la barre de composants pour l’afficher (ou utilisez le raccourci F12 pour basculer entre formulaire et code).

Sélectionnez le premier bouton : le panneau gauche indique que le composant actif est Button1, avec deux onglets en bas : Propriétés et Événements.

L’onglet Propriétés permet de configurer l’apparence, le style, la taille du bouton, etc.

L’onglet Événements permet de lier des actions au bouton (clic, survol souris, sortie de survol…).

• Trouvez la propriété Caption (Titre) en haut, remplacez la valeur par défaut Button1 par Press, validez par Entrée ou cliquez sur un espace vide : le texte du bouton se met à jour immédiatement ;
• Basculez sur l’onglet « Events (Événements) » de l’inspecteur d’objets : il liste tous les événements déclenchables du bouton (clic, survol, sortie…);
• Trouvez OnClick (Événement de clic), cliquez sur le bouton à trois points ... à droite : l’éditeur bascule automatiquement sur le code et génère une fonction de clic vide :

Cliquez sur un espace vide pour valider la modification, le texte du bouton sur le formulaire change.

Gardez le bouton sélectionné et passez sur l’onglet Events (Événements)

Cet onglet liste tous les événements natifs du bouton, vous pouvez lier n’importe quelle action. Prenons OnClick : quand l’utilisateur clique gauche sur le bouton, la méthode liée s’exécute.

Sélectionnez OnClick, cliquez sur le bouton ... à droite pour créer une fonction d’événement vide.

Ajoutez une ligne de code entre begin et end pour modifier le texte du bouton au clic.

procedure TForm1.Button1Click(Sender: TObject);
begin
  Button1.Caption := 'Press again'; // saisissez ce code
end;   Langage du code : JavaScript (javascript)

Au lancement du programme, un clic sur le bouton exécute ce code, nous entrons dans la logique Pascal pour réaliser toutes sortes d’opérations. La plupart des programmes GUI fonctionnent selon ce même modèle.

Raccourci F12 pour revenir rapidement sur l’éditeur de formulaire.

Configurer le texte de Button2 et l’événement de fermeture

Sélectionnez Button2, dans l’inspecteur d’objets modifiez la propriété Caption en Exit ;

Passez également sur l’événement OnClick, cliquez sur ... pour aller sur le code et saisissez l’instruction de fermeture :

procedure TForm1.Button2Click(Sender: TObject);
begin
  Close; // ferme la fenêtre et quitte le programme
end;Langage du code : JavaScript (javascript)

Sauvegarder le projet (sauvegardez régulièrement)

Dans le menu haut : Project → Save Project As (Enregistrer le projet sous), sauvegardez d’abord le fichier unité du formulaire (extension .pas) ;

Une fenêtre pop-up vous demande ensuite de sauvegarder le fichier de configuration du projet (extension .lpi).

Attention : le nom du fichier unité et le nom du projet ne doivent pas être identiques, sinon la compilation renvoie une erreur « identificateur dupliqué »

Compiler et lancer le programme

Deux manières de lancer l’exécution :

• Menu : Run (Exécuter) → Run ;
• Raccourci : appuyez directement sur F9. L’IDE compile et lie le code automatiquement, puis lance le programme si aucune erreur n’est détectée.

Au lancement, une fenêtre vide s’affiche (sans la grille de conception), c’est la fenêtre principale du logiciel :

• Cliquez sur le bouton Press : son texte devient Press again ;
• Cliquez sur le bouton Exit : la fenêtre se ferme, le programme se quitte, vous revenez automatiquement à l’éditeur de formulaire avec grille pour modifier le code.