1 00:00:00,040 --> 00:00:00,080 "Analyse d'objets avec l'Inspector" 2 00:00:00,120 --> 00:00:00,160 Quentin Ducasse. 3 00:00:04,000 --> 00:00:04,760 -Bonjour à tous. 4 00:00:05,080 --> 00:00:07,160 Dans cette vidéo, on va s'intéresser à l'Inspecteur 5 00:00:07,480 --> 00:00:10,440 qui est un outil Pharo très utile et qui nous permet, 6 00:00:10,760 --> 00:00:13,280 comme un microscope, de s'intéresser à nos objets, 7 00:00:13,600 --> 00:00:15,240 de voir comment ils réagissent de près 8 00:00:15,560 --> 00:00:18,200 et aussi de leur donner des méthodes depuis l'intérieur. 9 00:00:18,520 --> 00:00:22,640 On peut envoyer des messages à nos objets tout en les inspectant. 10 00:00:22,960 --> 00:00:25,080 Pour se servir de l'Inspecteur, je vous ai préparé 11 00:00:25,400 --> 00:00:28,840 une expression que vous ne verrez sûrement jamais dans la vraie vie, 12 00:00:29,160 --> 00:00:32,680 mais qui a le mérite d'être bien pour servir d'exemple. 13 00:00:33,000 --> 00:00:36,400 On aura un dictionnaire dans lequel je mettrai, sous la clé "Time", 14 00:00:36,720 --> 00:00:40,280 l'heure qu'il est maintenant, "Date", la date qu'il est aujourd'hui 15 00:00:40,600 --> 00:00:42,680 et une "Morph" que je présenterai tout à l'heure. 16 00:00:43,000 --> 00:00:43,960 On va l'inspecter. 17 00:00:44,280 --> 00:00:48,760 Vous pouvez faire clic droit, Inspect it ou le raccourci Cmd+I. 18 00:00:49,080 --> 00:00:52,600 L'Inspecteur va s'ouvrir. Je range. Ça, on ne va pas en avoir besoin. 19 00:00:52,920 --> 00:00:55,120 Vous pouvez voir qu'il y a trois onglets. 20 00:00:55,440 --> 00:00:57,800 Le premier onglet, Items, je reviendrai dessus. 21 00:00:58,120 --> 00:00:59,440 Pour l'instant, regardons Raw. 22 00:00:59,760 --> 00:01:03,840 Ça va être l'implémentation Pharo de notre dictionnaire. 23 00:01:04,160 --> 00:01:06,440 Donc, on aura la représentation de "self". 24 00:01:06,760 --> 00:01:08,560 Il y a un "OrderedDictionary" 25 00:01:08,880 --> 00:01:13,320 avec nos trois combinaisons de clés valeur avec les flèches. 26 00:01:13,840 --> 00:01:16,160 Ici, on peut avoir accès au dictionnaire directement. 27 00:01:16,480 --> 00:01:18,520 Et ici, on peut avoir accès aux clés ordonnées. 28 00:01:18,840 --> 00:01:20,320 On peut voir "Time", "Date", "Morph", 29 00:01:20,640 --> 00:01:21,880 puis "nil, nil, nil, nil, nil, nil, nil". 30 00:01:22,200 --> 00:01:24,240 On peut voir la représentation textuelle, ici. 31 00:01:24,560 --> 00:01:27,120 Une chose intéressante : si je clique sur "dictionary", 32 00:01:27,440 --> 00:01:30,480 une nouvelle fenêtre va s'ouvrir sur la droite 33 00:01:30,800 --> 00:01:33,760 sur non plus le "OrderedDictionary" mais le "Dictionary" lui-même 34 00:01:34,080 --> 00:01:35,240 avec d'autres choses. 35 00:01:35,560 --> 00:01:40,120 Ici, on aura l'"array" avec "Morph HSVA". 36 00:01:40,440 --> 00:01:42,640 On aura notre dictionnaire qui est au-dessus. 37 00:01:42,960 --> 00:01:45,200 On aura "tally", la taille du dictionnaire. 38 00:01:45,680 --> 00:01:49,040 Et on peut faire la même chose avec les "orderedKeys". 39 00:01:49,360 --> 00:01:52,800 On arrive ici et si on réinspecte le premier élément, "Time", 40 00:01:53,120 --> 00:01:54,000 on peut recliquer dessus. 41 00:01:54,320 --> 00:01:55,680 Ça ouvrira une autre fenêtre. 42 00:01:56,000 --> 00:01:57,560 Et on va avoir "Time" 43 00:01:57,880 --> 00:02:00,680 et la représentation ASCII des caractères, donc T, I, M, E. 44 00:02:01,000 --> 00:02:01,880 On les a ici. 45 00:02:02,200 --> 00:02:05,080 Vous pouvez voir en dessous qu'on peut avoir une preview, 46 00:02:05,400 --> 00:02:08,240 donc un aperçu de la première fenêtre où on était. 47 00:02:08,560 --> 00:02:10,440 Pour y retourner, on clique dessus. 48 00:02:10,760 --> 00:02:13,720 Les deux fenêtres sont décalées. On peut décaler la vue comme ceci. 49 00:02:14,040 --> 00:02:15,960 Et on peut aussi la rétrécir. 50 00:02:16,280 --> 00:02:19,400 Si je veux simplement voir la deuxième vue, je peux faire comme ça. 51 00:02:19,720 --> 00:02:21,880 Je peux réagrandir et réagrandir des deux côtés. 52 00:02:22,200 --> 00:02:24,080 Si vous voulez supprimer la dernière fenêtre, 53 00:02:24,400 --> 00:02:25,960 il suffit de cliquer sur la croix, ici. 54 00:02:26,280 --> 00:02:29,880 Donc, cette vue Raw est intéressante, 55 00:02:30,200 --> 00:02:32,480 mais en général, on aura des objets assez intelligents 56 00:02:32,800 --> 00:02:35,040 pour avoir des vues personnalisées comme ici. 57 00:02:35,360 --> 00:02:39,840 On peut voir dans notre dictionnaire qu'on a un onglet appelé Items. 58 00:02:40,160 --> 00:02:41,040 Je vais fermer Array. 59 00:02:41,360 --> 00:02:44,160 Cet onglet Items, c'est la même chose que ce qu'on a dans Raw, 60 00:02:44,480 --> 00:02:46,000 mais présenté de manière plus lisible. 61 00:02:46,320 --> 00:02:49,000 On va avoir les clés sur la gauche, les valeurs sur la droite. 62 00:02:49,320 --> 00:02:51,120 On va avoir "Time", la valeur associée. 63 00:02:51,440 --> 00:02:54,160 La valeur associée à "Time", c'est "Time now", 64 00:02:54,480 --> 00:02:55,760 l'heure qu'il est maintenant. 65 00:02:56,080 --> 00:02:58,480 "Date", on va avoir "Date today" et une "Morph". 66 00:02:58,800 --> 00:03:02,520 Si, par exemple, on s'intéresse à "Time", qu'on clique dessus, 67 00:03:02,840 --> 00:03:07,720 aTime va s'ouvrir et on va pouvoir aller regarder le temps. 68 00:03:08,040 --> 00:03:12,640 On peut mettre des méthodes directement ici, dans le Raw, dessous. 69 00:03:12,960 --> 00:03:16,320 Si je fais "self hours" et que je le print, on voit qu'il est 14 h. 70 00:03:16,640 --> 00:03:21,000 Si je fais "self browse" et que je fais Cmd+D pour Do it, 71 00:03:21,720 --> 00:03:27,640 il va m'ouvrir un System Browser sur le package Kernel dans la classe Time 72 00:03:27,960 --> 00:03:30,240 et je peux inspecter les méthodes qui le composent. 73 00:03:31,400 --> 00:03:33,360 Donc, c'est intéressant. On peut aussi avoir... 74 00:03:33,680 --> 00:03:38,760 Détails, ça nous donnera plus d'informations sur l'objet Time. 75 00:03:39,080 --> 00:03:42,840 Et l'onglet Meta, aussi présent ici, est un onglet qui nous montre 76 00:03:43,160 --> 00:03:45,840 la hiérarchie de classes de notre classe Time. 77 00:03:46,160 --> 00:03:49,360 On aura Time avec les différentes méthodes taguées avec les protocoles. 78 00:03:49,680 --> 00:03:53,400 Ici, on a des méthodes "converting", "accessing", "printing". 79 00:03:53,720 --> 00:03:55,400 Vous pouvez les chercher ici, filtrer. 80 00:03:55,720 --> 00:03:57,720 Et on peut aussi naviguer les super classes 81 00:03:58,040 --> 00:04:00,000 jusqu'à Object et même ProtoObject. 82 00:04:00,320 --> 00:04:03,360 C'est intéressant. Ça vous permet de naviguer dans la hiérarchie. 83 00:04:03,680 --> 00:04:07,440 Une autre chose qu'on peut regarder, c'est si je clique sur la date, 84 00:04:07,760 --> 00:04:09,520 on peut voir un onglet... 85 00:04:09,840 --> 00:04:11,560 Toujours l'onglet Raw qui apparaîtra 86 00:04:11,880 --> 00:04:14,960 avec la représentation brute de cet objet dans Pharo 87 00:04:15,280 --> 00:04:18,360 et cet onglet personnalisé Calendar qui montre qu'on est le 10 mai. 88 00:04:18,680 --> 00:04:22,480 Il nous présente cette vue Calendrier qui est implémentée dans la date. 89 00:04:23,000 --> 00:04:27,200 Pareil, je peux me mettre ici, faire "browse", Cmd+D. 90 00:04:27,840 --> 00:04:35,000 Ça va m'ouvrir une vue sur le package, encore une fois, Kernel avec la date. 91 00:04:35,320 --> 00:04:36,120 C'est intéressant. 92 00:04:36,440 --> 00:04:41,840 On va voir un objet plus compliqué qui est "HSVAColorSelectorMorph". 93 00:04:42,160 --> 00:04:44,960 On va voir ce que c'est. Si je clique dessus, on va voir que... 94 00:04:45,280 --> 00:04:46,080 Je vais agrandir ça. 95 00:04:46,400 --> 00:04:49,840 L'objet est plus compliqué, car il est rempli de... 96 00:04:50,160 --> 00:04:52,320 On ne sait pas trop à quoi ça correspond. 97 00:04:52,640 --> 00:04:53,840 C'est là où ça sera intéressant 98 00:04:54,160 --> 00:04:57,160 d'avoir des onglets qui sont cohérents et plus lisibles. 99 00:04:57,480 --> 00:04:58,960 Car si je clique sur "Morph", 100 00:04:59,280 --> 00:05:03,280 ça va me présenter à quoi cette "HSVAColorSelectorMorph" correspond. 101 00:05:03,600 --> 00:05:08,920 Je peux le faire ici. Par exemple, "self openInWorld", Do it. 102 00:05:09,240 --> 00:05:11,560 Notre Morph va s'ouvrir ici. On peut jouer avec. 103 00:05:11,880 --> 00:05:14,520 On a une sélection de couleurs, une collection de transparences, 104 00:05:14,840 --> 00:05:16,560 une sélection de la couleur, ici. 105 00:05:16,880 --> 00:05:21,000 On peut aussi faire, par exemple : "self selectedColor". 106 00:05:21,320 --> 00:05:24,000 Ça permettra de voir la couleur sélectionnée actuellement 107 00:05:24,320 --> 00:05:28,600 avec sa valeur en rouge, vert, bleu et en transparence. 108 00:05:29,520 --> 00:05:31,280 Ce qui est intéressant, c'est que... 109 00:05:31,600 --> 00:05:34,640 Imaginons qu'on veuille rajouter cette couleur dans l'Inspecteur, 110 00:05:34,960 --> 00:05:37,600 on peut faire Do it and go ou le raccourci Cmd+G. 111 00:05:37,920 --> 00:05:42,720 Ça nous permettra de rajouter notre couleur à droite de notre Inspecteur. 112 00:05:43,040 --> 00:05:45,800 On peut inspecter la couleur. On peut la visualiser ici, aussi. 113 00:05:46,120 --> 00:05:47,880 C'est cette couleur qu'on a sélectionnée. 114 00:05:48,400 --> 00:05:51,080 Je vais fermer. Je vais montrer autre chose d'intéressant. 115 00:05:51,400 --> 00:05:53,680 Si je l'ouvre en double, par exemple, ici, 116 00:05:54,960 --> 00:05:56,360 et que je ferme celle-là... 117 00:05:56,680 --> 00:05:58,480 Je peux réduire ici. Voilà. 118 00:05:58,920 --> 00:06:01,600 Je vais avoir deux fois un Inspecteur sur le même objet. 119 00:06:01,920 --> 00:06:03,560 Celui-là est ouvert. Ce n'est pas grave. 120 00:06:03,880 --> 00:06:07,000 Ce que je peux faire, c'est me placer sur l'onglet Submorphs, 121 00:06:07,320 --> 00:06:08,720 ici, me placer sur l'onglet Morph, 122 00:06:09,040 --> 00:06:14,640 et en déroulant cet arbre de composition qui, normalement, est représenté ici... 123 00:06:14,960 --> 00:06:19,200 On peut le chercher dans HSVAMorph, puis SVMorph... 124 00:06:19,520 --> 00:06:22,680 C'est un arbre assez compliqué dans l'implémentation brute. 125 00:06:23,000 --> 00:06:25,080 Si je me place dans Morph, ici, je peux voir... 126 00:06:25,400 --> 00:06:28,520 Si je clique sur an ImageMorph, cette vue, à droite, se mettra à jour. 127 00:06:28,840 --> 00:06:32,760 Par exemple, aBracketMorph, ColorSelectorMorph... 128 00:06:33,840 --> 00:06:36,520 On peut avoir toute l'architecture qui est retrouvable 129 00:06:36,840 --> 00:06:39,080 directement dans l'Inspecteur, sur la droite. 130 00:06:39,800 --> 00:06:42,440 Dans cette vidéo, on a présenté un objet un peu bizarre. 131 00:06:42,760 --> 00:06:44,520 Vous n'utiliserez pas forcément ce dictionnaire, 132 00:06:44,840 --> 00:06:47,000 car il contient une date, un temps et une Morph bizarre. 133 00:06:47,320 --> 00:06:50,680 C'était plus pour présenter l'Inspecteur, les différentes fonctionnalités, 134 00:06:51,000 --> 00:06:53,840 vous montrer que vous pouvez interagir depuis l'Inspecteur 135 00:06:54,160 --> 00:06:57,880 pour ouvrir la Morph, montrer la couleur qu'on a pu sélectionner, 136 00:06:58,200 --> 00:07:01,320 la rajouter dans l'Inspecteur et pouvoir naviguer, par exemple... 137 00:07:01,640 --> 00:07:06,320 Ici encore, je peux naviguer la hiérarchie de classes, les méthodes. 138 00:07:06,920 --> 00:07:11,760 Ce qui est intéressant, c'est que les objets créés par le système ou par vous, 139 00:07:12,080 --> 00:07:14,200 vous pouvez leur rajouter des extensions, 140 00:07:14,520 --> 00:07:17,240 des tabs dans l'Inspecteur, ici, qui seront plus intelligents. 141 00:07:17,560 --> 00:07:19,640 Les tabs Submorphs et Morph sont très intéressants, 142 00:07:19,960 --> 00:07:22,360 car ils permettent d'avoir sur une Morph, par exemple, 143 00:07:22,680 --> 00:07:26,120 un retour direct soit de l'arbre de composition de notre Morph, 144 00:07:26,440 --> 00:07:28,360 soit de la Morph en elle-même, sur le côté.