mn	Activité/application	Notions abordées	supports
	Hello world 5 (traduction bidirectionnelle) ajout d'un 2°bouton : quand on clique sur celui de gauche, l'application fonctionne comme avant, quand on clique sur celui de droite, l'écoute et la traduction se font dans le sens inverse.	Design renommer bouton en "BoutonDirectEcouter", et le mettre en gris créer un bouton "BoutonReverseEcouter", et le mettre en rose créer un arrangement horizontal avec les boutons à l’intérieur et un label séparateur Blocs/programmation quand clic sur "boutonDirectEcouter", ajouter mettre la couleur de fond de screen1 à gris mettre" langueInput" à SpinnerLangue_In.Selection mettre" langueOutput" à SpinnerLangue_Out.Selection dupliquer "quand clic sur boutonDirectEcouter" et le recommmer en "quand clic sur boutonReverseEcouter" modifier son contenu (couleur et inversion input/output) mettre la couleur de fond de screen1 à rouge mettre langue_Out à Spinner_In.Selection et langue_In à SpinnerLangue_Out.Selection

Ce que vous allez faire :

Dans cette 5° version de l'application, vous pourrez choisir le sens de la traduction pour une conversation entre 2 étrangers. Vous pouvez le faire avec un 2° bouton, un pour chaque sens.

Design :

• ajouter un arrangement horizontal "Argt_hor_boutons" en pleine largeur
• et déplacez le premier bouton à l'intérieur et renommez ce bouton "boutonDirectEcouter"
• créez un 2° bouton identique,placez le aussi à l'intérieur, à droite nommez ce bouton "boutonReverseEcouter".
• pour distinguer et séparer les boutons, changez la couleur de fond du 2° et ajoutez un comppsant label entre les deux, avec une largeur de 10% et un texte vide.
  • "SpinnerLangue_In" pour la langue à écouter
  • "SpinnerLangue_Out" pour la langue dans laquelle on traduit
  • puis séparer ces spinners par un label vide pour les écarter
• ajouter un composant "Image1" de type image, et associez à sa propriété "image" une image importée en format paysage, de petite taille (une largeur max 480 pixels), jpeg, jpg ou png

Pour cette dernière version, on reprend tous les composants, ceux en bleu correspodnant aux derniers modifiés.

type	catégorie	Nom	rôle	propriété	valeur
		Screen1	racine	alignt horiz alignt horiz couleur fond orient.écran titre visible	centré centré rose portrait Non
image	Interface utilisateur	Image1	déco	largeur image	remplir parent [nom fichier importé]
Arrangement horizontal	Disposition	Arrangt_horiz1		couleur fond largeur	aucun remplir parent
zone de texte	interface utilisateur	Zone_de_texte_In	texte en entrée	couleur fond taille police largeur alignt texte texte	transparent 24 remplir parent centre Bonjour le monde
zone de texte	interface utilisateur	Zone_de_texte_Out	texte traduit	couleur fond taille police largeur alignt texte texte	transparent 24 remplir parent centre Bonjour le monde
arrangement horizontal	Disposition	Argt_hor_langues	alignement	align.hor couleur fond largeur	centré aucun remplir parent
curseur animé	Interface utlisateur	SpinnerLangue_In	choix langue	Elements Selection	fr,de,en,es,it,pt fr
label	Interface utilisateur	Label1	séparateur	Largeur Texte	10% [vide]
curseur animé	Interface utilisateur	SpinnerLangue_Out	choix langue	Elements Selection	fr,de,en,es,it,pt fr
arrangement horizontal	Disposition	Argt_hor_boutons	alignement	align.hor couleur fond largeur	centré aucun remplir parent
bouton	interface utilisateur	BoutonDirectEcouter	lecture texte	couleur fond gras taille police texte alignt texte	gris clair oui 24 traduire et lire centre
label	Interface utilisateur	Label1	séparateur	Largeur Texte	10% [vide]
bouton	interface utilisateur	BoutonReverseEcouter	lecture texte	couleur fond gras taille police texte alignt texte	rouge oui 24 traduire et lire centre
notificateur	interface utilisateur	Notificateur1	afficher messages
texte a parole	media	Texte_à_parole1	lire texte
translator	media	Translator1	traduire
reconnaissance vocale	media	Reco_vocale1	Reco parole

Codage (blocs)

On passe ensuite au codage par blocs en cliquant en haut à droite sur le bouton "blocs".

• dans l'évènement "quand BoutonDirectEcouter.clic" :
  • mettre à gris, la couleur du fond d'écran, pour que l'utilisateur sache que la traduction se fait dans le sens direct
  • mettre à jour la variable "langue_In" avec la propriété "SpinnerLangue_In.langue"
  • mettre à jour la variable "langue_Out" avec la propriété "SpinnerLangue_Out.langue"
  
• dupliquer le script de l'évènement "quand BoutonDirectEcouter.clic" et modifiez le nom du composant dans cet évènement pour le remplacer par "quand BoutonDirectEcouter.clic"
  puis dans le script de cet évènement
  • mettre à rouge, la couleur du fond d'écran, pour que l'utilisateur sache que la traduction se fait dans le sens inverse
  • inversez les valeurs assignées aux variables langue_In et langue_Out pour inverser les langues
  
• vous pouvez éventuellement supprimer les scripts des évènements :
  • A présent, les variables langue_In et langue_Out sont lues directement dans les spinner quand on clique sur les boutons. Leur mise à jour par les évènements "quand spinnerLangue_In.après sélection" et "quand spinnerLangue_Out.après sélection" ne sont plus nécessaires. On peut donc supprimer les scripts de ces évènements.
    (ca n'est pas grave si vous les laissez, elles ne servent plus.)

Transfert de l'application au smartphone :

Transférez le résultat au smartphone, puis testez en changeant les langues en entrée et en sortie.