Return to Video

07-42 Add the Reset Button

  • 0:00 - 0:04
    Voici la photo de notre application
    de compteur de court, ou
  • 0:04 - 0:06
    au moins ce à quoi il
    doit ressembler.
  • 0:06 - 0:10
    Maintenant, je vais suivre mon propre
    conseil et commencer avec le XML.
  • 0:10 - 0:13
    Pensons à la vue
    dès maintenant.
  • 0:13 - 0:18
    Donc, nous avons encore toutes ces vues,
    et ces vues sont en verticale
  • 0:18 - 0:19
    LinearLayout.
  • 0:19 - 0:23
    Nous avons un LinearLayout pour l'équipe B
    et pareil pour l'équipe A.
  • 0:23 - 0:27
    et vous ne pouvez pas avoir
    deux vues racines, en outre
  • 0:27 - 0:31
    ceux-ci sont enveloppées dans un
    LinearLayout, qui est horizontal, de sorte
  • 0:31 - 0:35
    que ces 2 lignes peuvent
    être à côté l'une de l'autre.
  • 0:35 - 0:38
    Bon, maintenant nous voulons ajouter
    un bouton de reset ici.
  • 0:38 - 0:41
    Pour le bien de votre cerveau afin qu'il
    n'explose pas en pensant à tout ça
  • 0:41 - 0:45
    et ces différents agencement, je veux que
    vous pensiez à tout ce qui est dans
  • 0:45 - 0:48
    ce LinearLayout horizontale
    un peu comme une seule vue.
  • 0:48 - 0:53
    Et maintenant vous essayez d'agencer
    cette ligne horizontale d'agencement ici
  • 0:53 - 0:54
    et ce bouton de reset.
  • 0:54 - 0:57
    Vous essayez de tracer deux points de vue.
  • 0:57 - 1:02
    Un point de vue est en haut et l'autre vue
    est au bas de l'écran.
  • 1:02 - 1:06
    Donc la question est maintenant quelle
    vue groupée vous permettra d'avoir
  • 1:06 - 1:09
    une vue ici au sommet et
    une vue vers le bas de l'écran ?
  • 1:09 - 1:13
    Et il se trouve qu'un RelativeLayout
    est un très bon candidat pour ça.
  • 1:13 - 1:17
    Je peux avoir mon LinearLayout horizontal
    ici, qui correspond en largeur
  • 1:17 - 1:20
    au patron, et puis enveloppe
    le contenu pour la hauteur.
  • 1:21 - 1:24
    Et je peux avoir mon bouton de reset
    ici, aligné avec le centre et
  • 1:24 - 1:26
    bas entre les deux colonnes.
  • 1:26 - 1:29
    Bon, vous avez un RelativeLayout, et
  • 1:29 - 1:33
    ce RelativeLayout a un bouton enfant
    et un LinearLayout enfant.
  • 1:33 - 1:36
    Et ce bouton enfant est
    ce bouton de reset, et
  • 1:36 - 1:40
    Le LinearLayout est le Linear Layout
    ici, celui qui est horizontal.
  • 1:40 - 1:44
    En outre, ce LinearLayout horizontal
    a deux enfants, et
  • 1:44 - 1:47
    ces enfants sont
    également des LinearLayout
  • 1:47 - 1:50
    Ce sont le LinearLayout pour
    équipe A et le LinearLayout pour
  • 1:50 - 1:52
    l'équipe B que vous voyez ici.
  • 1:52 - 1:57
    Le LinearLayout pour l'équipe A a
    deux vues de texte et trois boutons.
  • 1:57 - 2:00
    c'est la même chose pour
    le Linear Layout de l'équipe B.
  • 2:00 - 2:03
    cinq enfants, deux vues de texte,
    et trois boutons.
  • 2:03 - 2:05
    Cette partie du Layout
    vous l'avez déjà fait,
  • 2:05 - 2:09
    il vous suffit d'ajouter ceci,
    ok, faisons-le.
  • 2:09 - 2:13
    Je suis ici dans mon code XML et ce
    que je vais faire est que je vais
  • 2:13 - 2:18
    faire la RootRelative Layout
    que vous avez vu dans le diagramme.
  • 2:18 - 2:24
    Donc ici vous allez taper
    RelativeLayout, et je veux
  • 2:24 - 2:28
    couper et coller ces 2 lignes car elles
    doivent être dans la disposition racine.
  • 2:28 - 2:34
    Je les coupe donc et je les colle
    ici, dans ma RootLayout.
  • 2:34 - 2:37
    Bon, maintenant, je vais fermer
    mon RelativeLayout ici et
  • 2:37 - 2:44
    Je vais passer ce closing
    tag vers le bas.
  • 2:46 - 2:49
    Okay, donc ce que j'ai
    maintenant est cette partie du diagramme.
  • 2:49 - 2:53
    Ok, on dirait
    que j'ai quelques erreurs aussi.
  • 2:53 - 2:57
    Voyons voir, ha oui je n'ai pas défini une
    hauteur ou une largeur, alors faisons-le.
  • 2:59 - 3:02
    Maintenant mon relative layout à
    un bouton en bas au centre de l'écran.
  • 3:02 - 3:05
    Donc, pour ce faire, il va probablement
    falloir remplir tout l'écran.
  • 3:05 - 3:07
    Donc, je vais faire match
    parent sur les deux
  • 3:09 - 3:12
    Bon, maintenant je dois ajouter le bouton.
  • 3:12 - 3:18
    Je vais descendre, ici,
    à l'endroit où le linear layout s'arrête,
  • 3:18 - 3:23
    Mais je suis toujours dans le relative
    layout, et je vais ajouter un bouton.
  • 3:23 - 3:27
    Et je vais aller envelopper
    le contenu de ce bouton,
  • 3:27 - 3:30
    Parce que ce n'est pas un bouton qui
    s'étend pour remplir tout le fond de
  • 3:30 - 3:33
    l'écran ou
    s'étend pour remplir tout l'écran.
  • 3:34 - 3:37
    Et maintenant, le parent de ce bouton
    est le RelativeLayout, et
  • 3:37 - 3:40
    nous allons définir le texte
    de ce bouton pour le reset.
  • 3:40 - 3:43
    Voyons à quoi cela ressemble.
  • 3:43 - 3:47
    Bon alors, mon bouton de reset
    ici n'est pas exactement où je veux qu'il
  • 3:47 - 3:52
    soit, mais son parent est en dehors,
    ça remplit tout l'écran.
  • 3:52 - 3:54
    Donc je peux aligner avec le parent.
  • 3:54 - 3:57
    Je veux l'aligner avec
    le fond du parent, et
  • 3:57 - 4:01
    je veux que ce soit au centre du
    parent, horizontalement de toute façon.
  • 4:01 - 4:04
    Cool, mon bouton semble
    être au bon endroit.
  • 4:04 - 4:06
    Je vais sélectionner tout ceci ici.
  • 4:06 - 4:10
    Et je vais faire
    une option de commande L sur Mac.
  • 4:10 - 4:14
    Qui est la même chose que Control-Alt-L
    sur Windows pour reformater le code et
  • 4:14 - 4:16
    faire en sorte que ça ai l'air bien.
  • 4:16 - 4:19
    Bon revenons à notre code Java.
  • 4:19 - 4:23
    Maintenant, j'ai mon bouton, mais
    Il ne fait rien.
  • 4:23 - 4:26
    Commençons par
    faire une méthode pour cela.
  • 4:26 - 4:32
    Je vais faire ça au dessus des
    méthodes d'affichage, ici, public void.
  • 4:32 - 4:35
    Je vais appeler cette méthode
    ResetScore,
  • 4:35 - 4:38
    parce que c'est ce que je veux
    qu'il fasse.
  • 4:38 - 4:43
    Remontez, je vais faire
    correspondre à ces autres méthodes
  • 4:43 - 4:47
    avec la vue v, puis des accolades.
  • 4:47 - 4:50
    Je ne vais pas vous soucier de ce qui
    va aller ici pour l'instant.
  • 4:50 - 4:53
    Je vais revenir à mon code XML et
  • 4:53 - 4:57
    je vais faire la seconde partie de
    l'accrochage du bouton avec le code Java
  • 4:57 - 5:02
    en ajoutant un attribut onClick ici pour
    ResetScore.
  • 5:02 - 5:06
    Maintenant quand je clique sur ce bouton
    le code ici sera exécuté, mais
  • 5:06 - 5:08
    il n'y a aucun code ici.
  • 5:08 - 5:09
    Essayons d'imaginer
    ce que je dois ajouter.
  • 5:11 - 5:14
    Bon, revenons à cette discussion de
    de PseudoCode.
  • 5:14 - 5:17
    Quand je clique le bouton de reset
    à quoi je veux arriver ?
  • 5:17 - 5:21
    Eh bien, je veux à la fois que ces deux
    scores pour affichent 0.
  • 5:21 - 5:24
    En outre, je veux que les variables pour
    le score de l'équipe A et
  • 5:24 - 5:27
    le score de l'équipe B reviennent à 0.
  • 5:27 - 5:30
    Rappelez-vous, lorsque je clique sur un
    de ces boutons, j'ajoute 2
  • 5:30 - 5:32
    et j'affiche la variable.
  • 5:32 - 5:34
    Donc, si je ne mets pas
    la variable à zéro,
  • 5:34 - 5:36
    cela va afficher un nombre incorrect.
  • 5:36 - 5:39
    Alors, voici ce à quoi j'arrive
    avec un Pseudocode.
  • 5:39 - 5:43
    La première chose que je veux faire est de
    définir le score pour l'équipe A à zéro.
  • 5:43 - 5:46
    Et je veux faire la même
    chose pour l'équipe B.
  • 5:46 - 5:50
    Maintenant les 2 scores sont égaux à 0,
    mais rien n'a encore été affiché, c'est
  • 5:50 - 5:55
    pourquoi à l'étape 3, je vais afficher le
    score pour l'équipe A, qui a été mis à 0.
  • 5:56 - 6:00
    Et pour être un peu plus précise,
    je vais afficher le score pour
  • 6:00 - 6:04
    une équipe ici, et puis je vais afficher
    le score pour l'équipe B ici.
  • 6:04 - 6:08
    Et parce que dans les étapes 1 et 2,
    Je me suis assuréz qu'ils sont mis à zéro,
  • 6:08 - 6:10
    ils afficheront zéro ici et ici.
  • 6:10 - 6:14
    Quand je clique sur un de ces boutons
    pour mettre à jour ScoreForTeamA ou
  • 6:14 - 6:18
    ScoreForTeamB, il va être mise à jour
    mais à partir d'un score de zéro.
  • 6:20 - 6:24
    Bon, alors dans le score de reset je vais
    taper mon PseudoCode en code.
  • 6:24 - 6:29
    Donc ce que je vais faire est
    de prendre le score et de régler sa valeur
  • 6:29 - 6:34
    à 0 à l'aide d'un opérateur d'affectation
    ici et la valeur zéro.
  • 6:34 - 6:36
    Oh, et
    ne pas oublier le point-virgule, bien sûr.
  • 6:37 - 6:39
    Je vais faire la même
    chose pour le score B.
  • 6:42 - 6:49
    Après cela, je vais afficher dans le coin
    de l'équipe A, le score pour l'équipe A.
  • 6:49 - 6:53
    Et puis je vais faire la même manipulation
    pour le score pour l'équipe B.
  • 6:55 - 6:57
    Je vais aussi
    ajouter un commentaire.
  • 6:59 - 7:00
    Bon, tout cela semble raisonnable.
  • 7:00 - 7:04
    Et ça fait un moment que je n'ai pas
    lancé quelque chose sur mon téléphone
  • 7:04 - 7:07
    alors je vais appuyer sur le bouton
    Exécuter, ok, cool.
  • 7:07 - 7:08
    J'ai un bouton de reset.
  • 7:08 - 7:09
    Voyons voir si cela fonctionne.
  • 7:13 - 7:15
    Bon, il met à zéro.
  • 7:15 - 7:16
    Cliquons un peu plus,
  • 7:16 - 7:19
    juste pour vous assurer que tout
    marche correctement.
  • 7:24 - 7:28
    Cool, et on dirait que tout est ok.
  • 7:28 - 7:30
    Bon alors ça cétait un peu
    une question délicate.
  • 7:30 - 7:34
    Alors regardons ce qui se passe si
    vous aviez changé l'ordre,
  • 7:34 - 7:35
    pour faire quelque
    chose un peu différemment.
  • 7:36 - 7:39
    Que faire si je change ces deux là ?
  • 7:39 - 7:41
    Eh bien, nous allons voir ce qui arrive.
  • 7:42 - 7:46
    Ok, voilà, voyons ce que ça a fait.
  • 7:46 - 7:48
    Bon, alors je vais
    ajouter quelques points.
  • 7:49 - 7:53
    Maintenant, pour le moment de vérité,
    le bouton reset.
  • 7:53 - 7:56
    Hein, il ne semble pas
    faire quoi que ce soit.
  • 7:56 - 7:59
    Essayons en cliquant,
    hein, intéressant.
  • 7:59 - 8:01
    Eh bien, c'est un peu difficile à voir,
  • 8:01 - 8:05
    mais le score avant disait 19, j'ai cliqué
    sur le bouton de reset rien n'a changé,
  • 8:05 - 8:08
    mais alors quand je clique
    sur lancé franc ça affiche 1.
  • 8:10 - 8:12
    Essayons avec l'autre côté, si je clique
    pour ajouter deux points.
  • 8:12 - 8:14
    Oh, il affiche deux.
  • 8:14 - 8:18
    Regardons à nouveau le code pour
    pourquoi c'est comme ça.
  • 8:18 - 8:21
    Donc je regarde au niveau de l'affichage
    et du réglage du score.
  • 8:21 - 8:25
    Juste pour voir quel type d'erreur
    il peut y avoir ici.
  • 8:25 - 8:30
    Disons que l'équipe A a un score de
    30 et B a un score de 40.
  • 8:30 - 8:33
    Quand je dis displayForTeamA
    il va afficher 30 et
  • 8:33 - 8:37
    quand je dis displayForTeamB
    il va afficher 40.
  • 8:37 - 8:41
    Seulement après cela, il va effectivement
    définir ces valeurs à zéro.
  • 8:41 - 8:46
    Mais comme il affiche d'abord cela ne
    va pas montrer les valeurs de zéro.
  • 8:46 - 8:48
    Mais la variable sera nulel.
  • 8:48 - 8:53
    Alors, quand je presse quelque chose comme
    addThreeForTeamB, il va prendre
  • 8:53 - 9:00
    la valeur de zéro que je mets ici,
    ajouter trois, puis afficher trois.
  • 9:00 - 9:06
    Donc, pour nous, on dirait que l'équipe B
    va avoir un score de 30 alors
  • 9:06 - 9:12
    après avoir cliqué sur le bouton reset, un
    score de 3 apparait, ce qui est bizarre.
  • 9:12 - 9:15
    Maintenant une façon de régler ça, sans
    revenir à la version précédente,
  • 9:15 - 9:19
    est que je pourrais
    mettre un affichage à zéro ici.
  • 9:19 - 9:22
    Et vous pouvez tester cela,
    et cela va effectivement marcher.
  • 9:22 - 9:24
    C'est juste un peu contre-intuitif.
  • 9:25 - 9:29
    J'aime montrer des exemples de ce genre
    parce que cela montre la beauté et
  • 9:29 - 9:31
    la subjectivité du code.
  • 9:31 - 9:34
    Maintenant, dans ce cas, je pense
    fortement que la première méthode
  • 9:34 - 9:36
    avec laquelle j'ai fait
    le code était mieux.
  • 9:36 - 9:39
    Mais vous pourriez voir des scénarios
    où il pourrait y avoir deux différentes
  • 9:39 - 9:43
    façons d'écrire le code, et
    où les 2 sont techniquement correctes.
  • 9:43 - 9:45
    Comme il n'y a pas toujours
    une seule bonne réponse,
  • 9:45 - 9:49
    vous ne devriez pas vous sentir
    obliger de faire la méthode parfaite.
  • 9:49 - 9:53
    Essayez de coder un truc qui marche pour
    vous, et voyez comment les autres font,
  • 9:53 - 9:58
    et comparez ensuite, qui est le plus
    efficace et quel code est le plus clair.
  • 9:58 - 10:01
    Ce genre de discussions pourrait être
    une expérience d'apprentissage utile.
  • 10:01 - 10:04
    Accord, mais je remettre le code
    à l'état où il était avant
  • 10:04 - 10:05
    qui marchait et maintenant,
  • 10:05 - 10:10
    j'ai toutes les fonctionnalités mais ce
    n'est pas beau, nous allons corriger cela.
Title:
07-42 Add the Reset Button
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
10:11

French subtitles

Revisions