1 00:00:07,740 --> 00:00:10,700 Bonjour. Dans cette séquence, vous allez voir la 2 00:00:10,900 --> 00:00:13,650 puissance de Seaside grâce à la composition de composants. 3 00:00:14,950 --> 00:00:16,610 En fait, on a défini des composants qui sont 4 00:00:16,810 --> 00:00:18,900 réutilisables et qui encapsulent de l'état, et maintenant 5 00:00:19,100 --> 00:00:21,030 on va voir comment est-ce qu'on est capable de composer 6 00:00:21,230 --> 00:00:23,690 ces composants en vue de construire des applications complexes. 7 00:00:24,000 --> 00:00:27,840 Une application, c'est un composant racine, et puis on 8 00:00:28,040 --> 00:00:31,200 profite du debuggage, du live debugging des applications. 9 00:00:32,180 --> 00:00:36,030 On va revenir sur 3 mécanismes importants pour composer 10 00:00:36,230 --> 00:00:40,490 des composants en Seaside. Le premier, l'agrégation de composants. 11 00:00:40,690 --> 00:00:43,700 Je vous rappelle qu'on avait défini 2 Counter, un Counter 12 00:00:43,900 --> 00:00:48,410 normal qui ressemblait à ça ici et puis un Counter TwitterCounter, ici. 13 00:00:51,210 --> 00:00:54,780 Comment est-ce que je pourrais maintenant agréger un 14 00:00:55,000 --> 00:00:58,470 composant au Counter en vue de construire une application multiCounter? 15 00:00:58,670 --> 00:01:00,290 En fait, je voudrais afficher plein de Counter sur une 16 00:01:00,490 --> 00:01:03,590 page et puis quand je clique sur ce + là par exemple, que 17 00:01:03,790 --> 00:01:06,660 ça incrémente la valeur de ce Counter et pas d'un autre. 18 00:01:06,960 --> 00:01:10,550 Donc, agréger comme ça plein de composants sur une même page facilement. 19 00:01:11,460 --> 00:01:12,710 Comment est-ce qu'on fait en Seaside? 20 00:01:12,910 --> 00:01:13,670 C'est extrêmement simple. 21 00:01:14,350 --> 00:01:16,100 Je vais définir une sous classe de composants, toujours 22 00:01:16,300 --> 00:01:18,670 pareil, qui s'appelle WAMultiCounter. 23 00:01:20,030 --> 00:01:23,260 Une variable d'instances, Counter, qui va définir une collection de Counter. 24 00:01:23,460 --> 00:01:28,230 Dans la méthode initialize, je vais créer une collection de 5 Counter ici. 25 00:01:30,750 --> 00:01:35,240 Et puis, je vais avoir la méthode renderContentOn ici où 26 00:01:35,440 --> 00:01:38,400 je vais parcourir ma collection de Counter avec un do, et 27 00:01:39,170 --> 00:01:44,000 je vais demander à l'objet HTML de rendre chacun des 28 00:01:44,200 --> 00:01:46,570 Counter, donc j'utilise une méthode particulière ici qui est render. 29 00:01:47,310 --> 00:01:51,950 Cette méthode render de l'objet HTML permet de 30 00:01:52,150 --> 00:01:54,920 demander à un composant de se rendre, de se dessiner, en HTML. 31 00:01:55,870 --> 00:01:57,740 Et on a une méthode importante ici qui s'appelle 32 00:01:57,940 --> 00:02:01,420 children, c'est-à-dire qu'un composant, lorsqu'il 33 00:02:01,620 --> 00:02:03,910 encapsule d'autres composants et qu'il leur demande de se 34 00:02:04,110 --> 00:02:06,610 rendre dans sa méthode renderContentOn, il doit les déclarer. 35 00:02:07,140 --> 00:02:10,180 Et pour les déclarer il doit rendre une collection de 36 00:02:10,380 --> 00:02:13,100 composants dans sa méthode children, qui contient tous 37 00:02:13,300 --> 00:02:15,900 les composants qu'il va rendre, tous ses enfants en fait. 38 00:02:16,100 --> 00:02:18,080 Ici, je rends bien la collection counter. 39 00:02:19,250 --> 00:02:20,720 C'est une méthode importante à définir. 40 00:02:23,120 --> 00:02:25,720 Les règles de base pour agréger des composants, pour 41 00:02:25,920 --> 00:02:27,340 composer des composants, c'est facile. 42 00:02:28,790 --> 00:02:31,360 Un composant va stocker ces sous-composants dans une 43 00:02:31,560 --> 00:02:34,190 variable d'instances, dans notre exemple c'était counters. 44 00:02:34,390 --> 00:02:38,010 Ensuite, il va envoyer le message render 45 00:02:42,010 --> 00:02:44,590 dans sa méthode render content on aux paramètres HTML en 46 00:02:44,790 --> 00:02:46,520 demandant à chacun de ses enfants de se rendre. 47 00:02:47,590 --> 00:02:49,830 Et puis, il va redéfinir la méthode children pour 48 00:02:50,030 --> 00:02:51,380 déclarer l'ensemble de ces sous- composants. 49 00:02:51,580 --> 00:02:54,340 Il y a toujours ces 3 volets-là. 50 00:02:58,080 --> 00:03:00,400 On peut aussi agréger des sous-composants différents, on 51 00:03:00,600 --> 00:03:02,490 n'est pas obligé d'agréger des composants du même type. 52 00:03:02,690 --> 00:03:05,610 Là, je n'avais agrégé que des Counter et maintenant on va 53 00:03:05,810 --> 00:03:09,350 avoir un composant MyApp. 54 00:03:10,160 --> 00:03:12,530 Dans la méthode initialize ici, c'est une collection, 55 00:03:12,750 --> 00:03:16,100 sauf que dans cette collection de composants j'ai mis l'application 56 00:03:16,300 --> 00:03:18,240 greeter qu'on avait mise dans une séquence précédente qu'on 57 00:03:18,440 --> 00:03:22,240 avait vue, un TwitterCounter et un Counter, donc 3 composants. 58 00:03:22,890 --> 00:03:27,000 Ma méthode children rend bien tous les children, tous les 59 00:03:27,200 --> 00:03:28,360 sous-composants de ce composant-là MyApp. 60 00:03:29,470 --> 00:03:32,840 Et dans renderContentOn, je vais bien parcourir l'ensemble 61 00:03:33,040 --> 00:03:36,200 de mes enfants et demander à ce qu'ils se rendent. 62 00:03:36,400 --> 00:03:40,460 Donc faire HTML render each, je vais faire HTML render du 63 00:03:40,660 --> 00:03:42,720 greeter, du TwitterCounter et du Counter. 64 00:03:43,760 --> 00:03:44,620 Voyons ce que ça donne. 65 00:03:45,210 --> 00:03:48,900 Ici on a bien le composant greeter qui s'est affiché sur 66 00:03:49,100 --> 00:03:52,510 la page Web, on a le Twittercounter qui s'est affiché ici 67 00:03:53,130 --> 00:03:55,330 et on a le Counter normal qui s'est affiché ici. 68 00:03:55,530 --> 00:03:58,700 On a bien composé des composants et ils fonctionnent tous indépendamment. 69 00:03:58,900 --> 00:04:01,420 Si je clique sur les +, les say hello et caetera, les 70 00:04:01,620 --> 00:04:02,690 composants fonctionnent parfaitement. 71 00:04:05,140 --> 00:04:07,310 Maintenant si on veut aller encore un petit cran plus 72 00:04:07,510 --> 00:04:10,390 loin, on ne voudrait pas afficher tous les composants d'un 73 00:04:10,590 --> 00:04:13,250 coup sur la page Web, on voudrait qu'il n'y en ait qu'un 74 00:04:13,450 --> 00:04:15,110 qui s'affiche à l'instant T et afficher un menu par 75 00:04:15,310 --> 00:04:17,340 exemple pour sectionner quels sous-composants on veut afficher. 76 00:04:17,830 --> 00:04:20,090 Typiquement, je voudrais afficher juste le greeter et 77 00:04:20,290 --> 00:04:22,730 quand je clique sur TwitterCounter ici, je ne vais 78 00:04:22,930 --> 00:04:25,010 afficher que le TwitterCounter dessous. 79 00:04:26,460 --> 00:04:27,720 Comment faire cette application ? 80 00:04:27,940 --> 00:04:30,590 C'est facile, je vais rajouter une variable d'instances 81 00:04:30,790 --> 00:04:33,630 dans mon application MyApp qui va s'appeler le composant 82 00:04:33,830 --> 00:04:35,850 sélectionné, quel est l'enfant qui a été sélectionné, par 83 00:04:36,050 --> 00:04:39,720 défaut je vais l'initialiser au premier sous-composant. 84 00:04:39,920 --> 00:04:44,200 Dans ma méthode renderContentOn ici, je l'ai modifié. 85 00:04:44,540 --> 00:04:48,180 Je vais afficher un menu qui va me donner la possibilité 86 00:04:48,380 --> 00:04:49,610 de sélectionner quel sous-composant je vais afficher. 87 00:04:50,930 --> 00:04:53,660 Et puis, je vais faire HTML render mais seulement du 88 00:04:53,860 --> 00:04:55,780 sous-composant que je veux afficher tout simplement. 89 00:04:56,780 --> 00:05:00,040 Et dans le menu, je vais générer ici une liste en 90 00:05:00,240 --> 00:05:03,100 ordonnées, je vais parcourir l'ensemble de mes 91 00:05:03,300 --> 00:05:06,560 sous-composants avec un index, ici i. 92 00:05:08,290 --> 00:05:11,410 Et je vais générer un élément de liste pour chacun des enfants. 93 00:05:11,710 --> 00:05:14,940 Donc ici je vais générer une ancre, c'est un lien 94 00:05:15,140 --> 00:05:18,450 cliquable et quand je clique sur ce lien ça va déclencher 95 00:05:18,650 --> 00:05:23,530 le callBack, l'exécution de ce bloc ici donc on 96 00:05:23,730 --> 00:05:28,450 va dire que le composant sélectionné par l'utilisateur, c'est 97 00:05:29,380 --> 00:05:32,400 l'enfant numéro, donc self children, je rappelle que c'était 98 00:05:32,600 --> 00:05:34,590 une collection, at i. 99 00:05:35,340 --> 00:05:39,910 Et i ici, ce n'est ni plus ni moins que le 100 00:05:40,110 --> 00:05:42,700 numéro de l'élément dans la collection children. 101 00:05:45,450 --> 00:05:49,130 Il est extrêmement facile de pouvoir parcourir l'ensemble 102 00:05:49,330 --> 00:05:51,350 des sous-composants et de générer spécifiquement ce qu'on 103 00:05:51,550 --> 00:05:53,330 veut, de contrôler complètement qui doit s'afficher et 104 00:05:53,530 --> 00:05:54,290 qui ne doit pas s'afficher. 105 00:05:56,350 --> 00:05:59,000 On va avoir un deuxième mécanisme de composition qui est le call answer. 106 00:06:00,100 --> 00:06:02,620 On a vu la composition de composants avec les 107 00:06:02,820 --> 00:06:04,650 sous-composants et maintenant on va voir le mécanisme call answer. 108 00:06:07,940 --> 00:06:11,230 Dans le code du composant A, on va écrire quelque chose 109 00:06:11,430 --> 00:06:15,940 qui ressemble à ce code ici, on va dire "Composant A 110 00:06:16,140 --> 00:06:18,750 appelle composant B, call composant B. 111 00:06:19,380 --> 00:06:23,490 " Le composant B va masquer le composant A sur la page 112 00:06:23,690 --> 00:06:25,740 Web, il va réaliser un traitement. 113 00:06:26,330 --> 00:06:28,390 Et à un moment donné, le composant B va dire "J'ai fini 114 00:06:28,590 --> 00:06:31,420 mon traitement donc je vais faire answer et je vais rendre un résultat. 115 00:06:31,620 --> 00:06:32,810 " Le résultat c'est une étoile. 116 00:06:34,100 --> 00:06:36,160 Ce résultat va être stocké dans X à la place du call 117 00:06:39,330 --> 00:06:40,090 composant B. 118 00:06:40,360 --> 00:06:42,510 Et maintenant, le composant A va se réafficher sur la page Web. 119 00:06:43,510 --> 00:06:46,380 Et le composant A va pouvoir utiliser ce résultat pour faire quelque chose. 120 00:06:47,000 --> 00:06:47,880 Je vous montre un exemple. 121 00:06:48,300 --> 00:06:52,200 Ici, on a un premier composant qui était le Counter, on 122 00:06:52,400 --> 00:06:55,790 lui a rajouté un bouton ici, set value, et on imagine que 123 00:06:56,000 --> 00:06:57,950 set value ça offre la possibilité à l'utilisateur de 124 00:06:58,150 --> 00:06:59,330 rentrer une nouvelle valeur pour le Counter. 125 00:06:59,750 --> 00:07:01,500 Quand on clique sur ce bouton set value, il y a un 126 00:07:01,700 --> 00:07:05,110 nouveau composant ici qui est affiché, c'était un peu 127 00:07:05,310 --> 00:07:07,510 comme le composant gritter qu'on avait vu avant, on peut 128 00:07:07,710 --> 00:07:09,680 rentrer une nouvelle valeur pour le Counter, cliquer sur 129 00:07:09,880 --> 00:07:12,000 le bouton OK, et quand je clique sur le bouton OK ça 130 00:07:12,200 --> 00:07:15,240 revient à notre composant compteur mais avec la valeur 131 00:07:15,440 --> 00:07:17,230 ici qui avait été rentrée par l'utilisateur au début. 132 00:07:20,030 --> 00:07:21,740 On a bien un enchaînement de plusieurs composants. 133 00:07:23,210 --> 00:07:25,100 Comment est-ce que c'est implémenté ? 134 00:07:25,300 --> 00:07:28,250 On a notre composant TwitterCounter qui a sa méthode renderContentOn. 135 00:07:29,470 --> 00:07:32,600 Dans sa méthode renderContentOn, on va rajouter un 136 00:07:32,800 --> 00:07:37,040 bouton, un Tbsbutton, ce bouton s'appelle set value ici. 137 00:07:37,520 --> 00:07:40,390 Quand on clique sur ce bouton c'est ce callBack qui va 138 00:07:40,590 --> 00:07:44,590 être exécuté, donc c'est la méthode set count to user value. 139 00:07:44,790 --> 00:07:46,240 SetCountToUserValue est défini ici. 140 00:07:47,120 --> 00:07:49,880 On va préparer ici une boîte de dialogue. 141 00:07:50,590 --> 00:07:52,610 On va utiliser un autre composant qui est offert par 142 00:07:52,810 --> 00:07:56,050 Seaside qui est une boîte de dialogue qu'on va paramétrer ici. 143 00:07:56,280 --> 00:07:58,380 On l'instancie, on la paramètre avec entrer une nouvelle 144 00:07:58,580 --> 00:08:00,820 valeur pour le compteur, par défaut c'est égal à 0. 145 00:08:01,020 --> 00:08:01,780 Et puis, il y aura un bouton OK. 146 00:08:04,490 --> 00:08:06,390 L'élément extrêmement intéressant, c'est cette ligne-là ici. 147 00:08:06,590 --> 00:08:08,500 On va dire "Composant 148 00:08:11,710 --> 00:08:16,660 courant, donc self, c'est le TwitterCounter, appelle 149 00:08:17,110 --> 00:08:22,000 la boîte de dialogue qu'on vient de créer et rends-moi le 150 00:08:22,200 --> 00:08:24,000 résultat", et le résultat ça sera la nouvelle valeur du Counter. 151 00:08:24,610 --> 00:08:28,690 Et ensuite quand on a fini ici, on va dire "Count, la 152 00:08:28,890 --> 00:08:31,340 valeur du counter, prends cette nouvelle valeur qui a été 153 00:08:31,540 --> 00:08:33,340 entrée par l'utilisateur convertie sous la forme d'un 154 00:08:33,540 --> 00:08:36,580 nombre", tout simplement. 155 00:08:36,780 --> 00:08:38,420 En interne, on peut regarder comment fonctionne cette 156 00:08:38,620 --> 00:08:41,430 boîte de dialogue WAInputDialog. En fait, c'est un 157 00:08:41,630 --> 00:08:44,460 composant Seaside réutilisable tout à fait classique, 158 00:08:45,000 --> 00:08:49,280 sauf qu'il a une particularité, il va utiliser la méthode 159 00:08:49,480 --> 00:08:51,300 answer pour renvoyer un résultat. 160 00:08:52,370 --> 00:08:55,380 En fait si on regarde sa méthode render content on à ce 161 00:08:55,580 --> 00:09:00,220 composant-là, quand on clique sur son bouton OK, donc 162 00:09:00,420 --> 00:09:03,650 ici son submitButton, il y a bien un callBack avec un 163 00:09:03,850 --> 00:09:08,480 block, et dans son callBack il va faire self 164 00:09:08,680 --> 00:09:12,770 answer value. Ça veut dire que ça 165 00:09:13,470 --> 00:09:17,460 va renvoyer les résultats au composant qui avait fait un call sur lui. 166 00:09:18,800 --> 00:09:22,110 Ça va vraiment revenir à l'endroit où le call avait été 167 00:09:22,310 --> 00:09:26,050 fait et renvoyer le résultat. 168 00:09:26,250 --> 00:09:28,160 On a vu le mécanisme call answer, maintenant on va voir 169 00:09:28,360 --> 00:09:30,950 un dernier mécanisme de composition de composants qui est 170 00:09:31,150 --> 00:09:32,580 celui des tâches, des tasks. 171 00:09:34,230 --> 00:09:36,180 En fait c'est très simple, les tâches c'est comme des 172 00:09:36,380 --> 00:09:38,000 composants, sauf qu'il n'y a pas de partie graphique, 173 00:09:38,200 --> 00:09:40,940 donc il n'y aura pas de méthode renderContentOn, pas de génération de HTML. 174 00:09:41,220 --> 00:09:44,830 L'idée, c'est vraiment de venir orchestrer, de venir 175 00:09:45,590 --> 00:09:48,550 décrire comment des composants doivent s'exécuter dans le 176 00:09:48,750 --> 00:09:50,630 temps: d'abord ce composant-là fera ça et ensuite 177 00:09:50,830 --> 00:09:54,300 celui-là, et cetera, en utilisant des call answers cachés derrière. 178 00:09:56,450 --> 00:09:59,530 On va définir une tâche qui s'appelle un adder et puis 179 00:09:59,730 --> 00:10:01,390 toutes les tâches ont une méthode qui s'appelle go. 180 00:10:02,690 --> 00:10:06,810 Ici par exemple dans cette tâche, on va demander à l'utilisateur 181 00:10:07,010 --> 00:10:08,850 de rentrer un nombre, donc self request number 1. 182 00:10:09,170 --> 00:10:12,010 Ensuite, on va lui demander de rentrer un deuxième 183 00:10:12,210 --> 00:10:13,000 nombre, self request number 2. 184 00:10:13,650 --> 00:10:18,450 Et ensuite, on va l'informer d'une valeur qui est l'addition 185 00:10:18,650 --> 00:10:20,570 de ces 2 nombres ici. 186 00:10:20,770 --> 00:10:24,030 A la dernière ligne, on enregistre ce composant comme une 187 00:10:24,230 --> 00:10:28,000 application Web classique pour pouvoir y accéder avec un navigateur. 188 00:10:30,300 --> 00:10:33,520 Si on regarde en interne, la méthode request comment 189 00:10:33,720 --> 00:10:34,480 est-ce qu'elle est implémentée ? 190 00:10:34,930 --> 00:10:39,770 La méthode request in fine utilise en interne call 191 00:10:40,540 --> 00:10:44,480 et answer. Si on revient à l'exemple précédent, on voit 192 00:10:44,680 --> 00:10:47,250 bien qu'au moment où on a fait request ici à l'intérieur, 193 00:10:47,920 --> 00:10:50,910 ça revient à appeler un autre composant et pas n'importe 194 00:10:51,110 --> 00:10:53,050 lequel, le composant WAInputDialog, à afficher les 195 00:10:55,500 --> 00:10:57,670 chaînes de caractères qui vont bien et puis ce composant 196 00:10:57,870 --> 00:10:59,710 va rendre le résultat à celui qui l'avait appelé. 197 00:11:00,190 --> 00:11:01,740 En l'occurrence qui est-ce qui l'avait appelé? 198 00:11:02,220 --> 00:11:03,080 Notre composant adder. 199 00:11:03,280 --> 00:11:05,600 Donc, il va bien récupérer une valeur dans value 1. 200 00:11:06,710 --> 00:11:08,030 La même chose pour value 2. 201 00:11:08,370 --> 00:11:12,330 Et ensuite, si on regarde dans le in form, comment est-ce 202 00:11:12,530 --> 00:11:13,290 qu'il est implémenté ? 203 00:11:13,700 --> 00:11:16,440 Lui aussi utilise un call answer mais sur un autre type 204 00:11:16,640 --> 00:11:18,950 de composant qui est informDialog. 205 00:11:20,010 --> 00:11:23,400 Ici on fait self callFormDialog; donc on va afficher une 206 00:11:23,600 --> 00:11:25,280 chaîne des caractères à l'utilisateur avec un bouton OK 207 00:11:25,480 --> 00:11:29,130 pour dire "OK, il a bien vu la chaîne de caractères. 208 00:11:29,330 --> 00:11:30,090 " 209 00:11:30,290 --> 00:11:32,040 Ce qui était important à retenir dans toutes ces formes 210 00:11:32,240 --> 00:11:35,730 de compositions, c'est qu'on n'a jamais parlé de requêtes 211 00:11:36,310 --> 00:11:40,320 http, d'URL, de découpage d'URL, de paramètres, on n'a 212 00:11:40,520 --> 00:11:42,500 pas parlé de routage de requêtes. 213 00:11:43,140 --> 00:11:46,070 On n'a pas non plus fixé des liens vers des pages 214 00:11:46,270 --> 00:11:50,000 suivantes, et cetera, on a uniquement parlé de composants 215 00:11:50,410 --> 00:11:52,790 qui ont de l'état, qu'on va pouvoir composer. 216 00:11:53,000 --> 00:11:56,060 Il y a 3 formes de compositions: un composant peut 217 00:11:56,260 --> 00:11:58,500 encapsuler d'autres composants, un composant peut appeler 218 00:11:58,700 --> 00:12:01,030 un autre composant, et puis on peut définir des workflow, 219 00:12:01,450 --> 00:12:04,920 des enchaînements de composants en Seaside, ce qui est extrêmement puissant. 220 00:12:05,220 --> 00:12:06,930 Et tout ça avec la possibilité de le debugger en live.