2.4 Interactivité d'une application (Vidéos)
Vidéos et défis d'interactivité.
- Pour commencer, assurez-vous d'être connecté à votre compte dans Studio Code.
- Visionnez les différentes vidéos.
- En vous assurant d'être bien dans la section « Concevoir » de Studio Code, relevez les défis un par un en mettant les vidéos sur pause et en y revenant le nombre de fois nécessaires. Vous pouvez également utiliser le menu de la barre de progression, en la survolant avec le curseur, pour naviguer plus rapidement dans les vidéos.
- Finalement, cliquez sur le bouton ci-dessous afin d'accéder à la page du devoir et remettez-le.
(00:07:20)
1ère vidéo : Permettre la navigation entre les trois écrans en ajoutant des boutons de navigation et leur interactivité en respectant les consignes.
Renommer les trois écrans de cette façon : Écran1, Écran2, Écran3.
Sur l’Écran1.
Ajouter des éléments de type « Boutons » (Button) et bien les identifier :
Sur l’Écran1, insérer un bouton bleu « Écran 2 » et un bouton rouge « Écran 3 » afin de permettre de se rendre sur chaque écran à partir de ces boutons
Sur l’Écran2, insérer un bouton bleu avec l’icône d’une flèche-retour dans le coin supérieur gauche de l’écran afin de permettre le retour-arrière vers l’Écran1.
Sur l’Écran3, insérer un bouton rouge avec l’icône d’une flèche-retour dans le coin supérieur gauche de l’écran afin de permettre le retour-arrière vers l’Écran2.
Sur l’Écran3, insérer un bouton avec l’icône d’une maison noire dans le coin inférieur droit de l’écran afin de permettre le retour direct vers l’Écran1.
Appliquer le codage pour permettre l’interactivité.
PASSEZ À L'ONGLET NOMMÉ « INFORMATIONS »
(00:01:23)
2e vidéo : Demander des informations à l’utilisateur (nom, groupe, équipe observée).
Sur l’Écran1.
Insérer trois éléments « Text Input » différents en inscrivant les consignes dans les cases « Text ».
PASSEZ À L'ONGLET NOMMÉ « ADDITIONNER + »
(00:05:35)
3e vidéo : Addition de nombres en cliquant un bouton « + » et faire un total.
Sur l’Écran2.
Insérer un bouton orange en l’identifiant « plus1 » et en inscrivant « +1 » dans la case « Text »
Répéter la démarche précédente en identifiant le bouton « plus2 ». Pour sauver du temps, utiliser l’option « Duplicate » à droite de l’écran.
Insérer un élément « Label » en inscrivant « résultat1 » comme « id », inscrire le chiffre « 0 » dans la case « Text » et placer cet élément à côté du bouton orange « plus1 ».
Répéter la démarche précédente en inscrivant « résultat2 » comme « id » et placer l’élément à côté du bouton orange « plus2 ». Pour sauver du temps, utiliser l’option « Duplicate » à droite de l’écran.
Insérer un élément « Label » en inscrivant « Total » dans la case « id » et inscrire le chiffre « 0 » dans la case « Text ».
Appliquer le codage en faisant en sorte que les boutons « plus1 » et « plus2 » fassent augmenter leur résultat respectif de 1 et que l’élément « Total » soit le résultat de l’addition de « résultat-plus1 » et de « résultat-plus2 ».
PASSEZ À L'ONGLET NOMMÉ « SOUSTRAIRE »
(00:06:20)
4e vidéo : Soustraction de nombres en utilisant des boutons « + » et « - » (se référer au défi 3 et les boutons « plus1 » et « plus 2 »).
Sur l’Écran2.
Insérer un bouton rouge en l’identifiant « moins1 » et en inscrivant « -1 » dans la case « Text ». Positionner ce bouton sous le bouton « plus1 ».
Répéter la démarche précédente en insérant un nouveau bouton identifié « moins2 » et positionné sous le bouton « plus2 ». Pour sauver du temps, utiliser l’option « Duplicate » à droite de l’écran.
Insérer un bouton vert « Rafraîchir » (Reset) qui remettra les compteurs à zéro.
Appliquer le codage en faisant en sorte que les boutons « moins1 » et « moins2 » fassent diminuer leur résultat respectif de 1 et que l’élément « Total » s’adapte.
PASSEZ À L'ONGLET NOMMÉ « ADDITIONNER »
(00:05:16)
5e vidéo : Addition de nombre en insérant des nombres dans des zones de texte.
Sur l’Écran3.
Insérer deux éléments « Text Input », les identifier « nombre 1 » et « nombre 2 » et inscrire « Nombre 1 » et « Nombre 2 » dans les cases « Text ».
Insérer un élément « Label » en inscrivant « + » dans la case « Text » et placer l’élément entre les deux éléments précédents de façon à créer une addition sur l’écran de l’application.
Répéter la démarche précédente pour obtenir le symbole « = ». Pour sauver du temps, utiliser l’option « Duplicate » à droite de l’écran.
Insérer un élément « Label » en l’identifiant « Total-nombres » et en inscrivant le chiffre « 0 » dans la case « Text ».
Appliquer le codage en faisant en sorte que les nombres inscrits dans les éléments « Text Input » soient additionnés et donne un résultat final dans l’élément « Total-nombres ».
PASSEZ À L'ONGLET NOMMÉ « COULEUR »
(00:02:04)
6e vidéo : Changer la couleur d’un élèment pour une autre couleur (écran, bouton, texte).
Sur l’Écran3.
Insérer un élément « Button » et changer son identifiant et le texte pour « Couleurs ».
Mettre le texte en noir et l’arrière-plan du bouton en blanc.
Appliquer le codage en faisant en sorte que le bouton « Couleurs » change de couleur.
PASSEZ À L'ONGLET NOMMÉ « POSITION »
(00:02:30)
7e vidéo : Changer un élément de position sur l’écran.
Sur l’Écran3.
Insérer un élément « Image » et changer son identifiant et le texte pour « Position ».
Positionner cet élément dans le coin inférieur gauche de l’écran.
Ajuster la hauteur de l’élément (height) à « 70 px » et la largeur (width) à « 70 px » également.
Insérer un icône au choix et le mettre bleu.
Appliquer le codage en faisant en sorte que cet icône change de position pour le coin supérieur droit de l’écran en inscrivant les données x = 210 et y = 5.