Un formulaire sur une toile
Avec demande, les questions s'enchaînent une par une dans la console. Sur une toile, on peut faire mieux : un vrai formulaire, avec plusieurs zones de saisie et un bouton.
Une zone de saisie
La fonction saisie dessine une zone de texte sur la toile et la relie à une variable : ce que l'utilisateur tape arrive dans la variable.
fiche est une toile
dimension(fiche, 320, 150)
remplir(fiche, #F5F7FA)
prenom est un texte
x est un nombre
y est un nombre
label(fiche, 20, 32, 'Ton prénom', #0F1419)
saisie(fiche, prenom, 20, 42, 280, 32, 'Ex : Ada')
rectangle_arrondi(fiche, 200, 96, 100, 36, 8, #1D9BF0)
label(fiche, 222, 120, 'Valider', #FFFFFF)
affiche fiche
valide est un booléen vaut faux
tant que non valide
cliquer fiche dans x, y
valide vaut clique(x, y, 200, 96, 100, 36)
fin tant que
affiche 'Bonjour ' + prenom + ' !'
saisie(toile, variable, x, y, largeur, hauteur, indication) : le deuxième argument est le nom d'une variable déjà déclarée. Le dernier, facultatif, est le texte grisé affiché tant que la zone est vide.
Comment ça marche
Il n'y a pas de fonction pour « lire » la zone : on lit simplement la variable. Mais attention au moment où elle est mise à jour :
- on dessine les zones et le bouton, puis on affiche la toile ;
- l'utilisateur tape dans les zones ;
- au moment où
cliquer se débloque, chaque variable reçoit le texte de sa zone.
C'est pour cela qu'il faut toujours un bouton et un cliquer : sans clic, les variables restent vides. La boucle tant que non valide attend que le clic tombe bien sur le bouton, et pas à côté.
Question : À quel moment la variable prenom reçoit-elle le texte tapé dans la zone ? — Quand le cliquer se débloque. Les variables reliées aux zones sont mises à jour au moment où cliquer (ou interagir) se débloque sur cette toile.
Plusieurs zones, dont un nombre
Une zone peut être reliée à une variable nombre. Si l'utilisateur y tape autre chose qu'un nombre, le cliquer déclenche une erreur : on l'entoure donc d'un essayer.
fiche est une toile
dimension(fiche, 320, 190)
remplir(fiche, #F5F7FA)
prenom est un texte
age est un nombre
x est un nombre
y est un nombre
label(fiche, 20, 32, 'Prénom', #0F1419)
saisie(fiche, prenom, 20, 42, 280, 32, 'Ex : Ada')
label(fiche, 20, 100, 'Âge', #0F1419)
saisie(fiche, age, 20, 110, 100, 32)
rectangle_arrondi(fiche, 200, 140, 100, 36, 8, #1D9BF0)
label(fiche, 222, 164, 'Valider', #FFFFFF)
affiche fiche
valide est un booléen vaut faux
tant que non valide
essayer
cliquer fiche dans x, y
valide vaut clique(x, y, 200, 140, 100, 36)
attraper
affiche 'L’âge doit être un nombre.'
fin essayer
fin tant que
affiche 'Bonjour ' + prenom + ', dans 10 ans tu auras ' + (age + 10) + ' ans.'
En cas d'erreur, le message s'affiche et la boucle recommence : l'utilisateur peut corriger sa saisie. La zone se borde de rouge pendant la frappe quand le texte n'est pas un nombre.
Un convertisseur
Pour afficher le résultat sur la toile, on redessine tout après chaque clic. Le dessin est donc placé au début de la boucle, et un second bouton permet de quitter :
fiche est une toile
dimension(fiche, 320, 190)
euros est un nombre
resultat est un texte vaut 'Tape un montant en euros.'
x est un nombre
y est un nombre
fini est un booléen vaut faux
tant que non fini
// dessiner le formulaire
effacer(fiche)
remplir(fiche, #F5F7FA)
label(fiche, 20, 32, 'Montant en euros', #0F1419)
saisie(fiche, euros, 20, 42, 150, 32, 'Ex : 20')
rectangle_arrondi(fiche, 190, 42, 110, 32, 8, #00BA7C)
label(fiche, 208, 64, 'Convertir', #FFFFFF)
label(fiche, 20, 116, resultat, #1D9BF0, 15)
rectangle_arrondi(fiche, 190, 140, 110, 32, 8, #536471)
label(fiche, 216, 162, 'Quitter', #FFFFFF)
affiche fiche
// attendre un clic, puis réagir
essayer
cliquer fiche dans x, y
si clique(x, y, 190, 42, 110, 32) alors
resultat vaut euros + ' € = ' + decimal(euros * 1.08, 2) + ' dollars'
sinon si clique(x, y, 190, 140, 110, 32) alors
fini vaut vrai
fin si
attraper
resultat vaut 'Tape un nombre, par exemple 20.'
fin essayer
fin tant que
affiche 'À bientôt !'
À chaque tour, la toile est effacée puis redessinée avec le nouveau texte de resultat. Le taux de 1,08 dollar pour un euro est un exemple : adapte-le.
En résumé
saisie(toile, variable, x, y, largeur, hauteur) relie une zone de texte à une variable.- Les variables sont mises à jour quand
cliquer se débloque : il faut un bouton. - Avec une variable
nombre, on entoure le cliquer d'un essayer ... attraper. - Pour afficher un résultat sur la toile, on la redessine entièrement.
