1
00:00:07,640 --> 00:00:11,920
Hola, en esta secuencia,
verás el poder de Seaside,

2
00:00:12,080 --> 00:00:14,480
a través de la composición de los componentes.

3
00:00:14,640 --> 00:00:18,360
Definimos el reutilizable
y componentes con estado,

4
00:00:18,520 --> 00:00:21,760
ahora veremos cómo podemos
juntar estos componentes

5
00:00:21,920 --> 00:00:25,200
para construir aplicaciones complejas.
Como dijimos, una aplicación

6
00:00:25,360 --> 00:00:27,120
es un componente raíz,

7
00:00:27,280 --> 00:00:31,760
por lo que nos beneficiamos de la depuración,
de depuración en vivo de aplicaciones.

8
00:00:31,920 --> 00:00:35,240
Volveremos
3 mecanismos importantes

9
00:00:35,400 --> 00:00:37,480
para componer componentes en Seaside.

10
00:00:37,640 --> 00:00:40,080
El primero es la agregación de componentes.

11
00:00:40,240 --> 00:00:42,880
Recuerde, definimos 2 contadores,

12
00:00:43,040 --> 00:00:46,000
un contador normal,
que se parecía a esto

13
00:00:46,160 --> 00:00:49,800
y un contador de Twitter, aquí.

14
00:00:49,960 --> 00:00:51,000
¿OKAY?

15
00:00:51,160 --> 00:00:56,080
¿Cómo puedo agregar ahora?
un contador de componente

16
00:00:56,280 --> 00:00:58,280
con vistas al edificio
una aplicación de varios mostradores?

17
00:00:58,440 --> 00:01:00,720
Quiero mostrar mucho
de contadores en una página.

18
00:01:00,880 --> 00:01:03,360
Cuando hago clic en este +, por ejemplo,

19
00:01:03,520 --> 00:01:06,680
solo aumenta el valor
de este contador en particular, ¿de acuerdo?

20
00:01:06,840 --> 00:01:11,080
Entonces, agregando muchos componentes
en la misma página, fácilmente.

21
00:01:11,240 --> 00:01:13,800
Entonces, ¿cómo hacemos esto en Seaside?
Es muy simple

22
00:01:13,960 --> 00:01:17,400
Definiré una subclase de componente,
que es siempre el mismo,

23
00:01:17,560 --> 00:01:19,720
que se llama "WAMultiCounter",

24
00:01:19,880 --> 00:01:23,080
"contadores de variables de instancia",
definiendo una colección de contadores.

25
00:01:23,240 --> 00:01:28,480
En "método inicializar" crearé
una colección de 5 contadores, aquí.

26
00:01:29,520 --> 00:01:30,440
¿OKAY?

27
00:01:30,600 --> 00:01:34,840
Y luego tendré el método
"rendercontentOn", aquí

28
00:01:35,000 --> 00:01:38,920
donde diré que navegaré
mi colección de mostradores con un "hacer"

29
00:01:39,080 --> 00:01:42,400
y le preguntaré a cada contador,
al menos, el objeto html,

30
00:01:42,560 --> 00:01:47,000
para representar cada uno de los contadores.
Uso un método especial, "render".

31
00:01:47,160 --> 00:01:50,680
Este método render del objeto html

32
00:01:50,840 --> 00:01:55,560
le permite preguntar a un componente
para renderizarse, dibujarse en html.

33
00:01:55,720 --> 00:01:58,640
Tenemos un método importante aquí
llamado "niños",

34
00:01:58,800 --> 00:02:02,640
lo que significa que cuando un componente
encapsula otros componentes

35
00:02:02,800 --> 00:02:05,560
y les pide que hagan
en "renderContentOn",

36
00:02:05,720 --> 00:02:09,800
tiene que declararlos y hacer eso
tiene que representar una colección

37
00:02:09,960 --> 00:02:11,760
de componentes en su método "niños"

38
00:02:11,920 --> 00:02:15,440
que contiene todos los componentes
va a hacer, todos sus hijos.

39
00:02:15,600 --> 00:02:18,800
Aquí estoy renderizado
la colección "contadores".

40
00:02:18,960 --> 00:02:21,680
Es un método importante para definir.

41
00:02:22,600 --> 00:02:25,560
Entonces, las reglas básicas
para agregar componentes,

42
00:02:25,720 --> 00:02:27,840
Componer componentes es fácil.

43
00:02:28,000 --> 00:02:30,920
Un componente
almacenará sus subcomponentes

44
00:02:31,080 --> 00:02:35,680
en una variable de instancia.
En nuestro ejemplo, es "contadores", ¿de acuerdo?

45
00:02:35,840 --> 00:02:38,440
Luego pasará el mensaje "renderizado"

46
00:02:38,600 --> 00:02:41,760
a html,

47
00:02:41,920 --> 00:02:46,600
en su método "renderContentOn"
pidiendo a cada niño que se renderice.

48
00:02:47,480 --> 00:02:49,440
Luego redefinirá
el método "niños"

49
00:02:49,600 --> 00:02:52,000
para declarar todos sus subcomponentes.

50
00:02:53,080 --> 00:02:54,480
Siempre hay estas 3 partes.

51
00:02:57,240 --> 00:03:00,000
También podemos agregar
diferentes subcomponentes

52
00:03:00,160 --> 00:03:02,280
No tienen que ser del mismo tipo.

53
00:03:02,440 --> 00:03:06,800
Antes solo combinaba contadores
y aquí vamos a tener

54
00:03:06,960 --> 00:03:09,920
una aplicación, un componente de MyApp

55
00:03:10,080 --> 00:03:12,520
En el método "inicializar"
Es una colección,

56
00:03:12,680 --> 00:03:15,320
excepto que en esta colección pongo

57
00:03:15,480 --> 00:03:19,200
la aplicación "Greeter" que usamos
en una secuencia previa, que vimos,

58
00:03:19,360 --> 00:03:22,600
un contador de twitters y un contador.
3 componentes

59
00:03:22,760 --> 00:03:25,680
Mi método, "niños" se muestra

60
00:03:25,840 --> 00:03:29,200
todos los niños, los subcomponentes
de este componente MyApp,

61
00:03:29,360 --> 00:03:30,960
y en "renderContentOn"

62
00:03:31,120 --> 00:03:35,560
Quiero explorar mis hijos
y pídales que se representen.

63
00:03:35,720 --> 00:03:37,880
Entonces hacemos "html render:cada uno"

64
00:03:38,040 --> 00:03:40,480
y haré "html render" de Greeter,

65
00:03:40,640 --> 00:03:43,400
el contador y contador de Twitter.

66
00:03:43,560 --> 00:03:44,800
Veamos lo que tenemos.

67
00:03:44,960 --> 00:03:49,880
Aquí tenemos el componente Greeter,
que se muestra en la página web,

68
00:03:50,040 --> 00:03:52,840
tenemos el contador de Twitter
se muestra aquí,

69
00:03:53,000 --> 00:03:55,240
y el contador normal que se muestra aquí.

70
00:03:55,400 --> 00:03:58,640
Hemos compuesto los componentes.
y todos trabajan de forma independiente

71
00:03:58,800 --> 00:04:00,960
si hago clic en el +
y el "Say Hello", etc.,

72
00:04:01,120 --> 00:04:02,840
los componentes funcionan perfectamente.

73
00:04:04,880 --> 00:04:08,000
Entonces, si quieres,
hay una etapa más allá.

74
00:04:08,160 --> 00:04:12,200
No queremos que todos los componentes
a la vez en la página web.

75
00:04:12,360 --> 00:04:15,720
Queremos uno a la vez,
un menú, por ejemplo, para seleccionar

76
00:04:15,880 --> 00:04:17,560
que subcomponente
queremos que se muestre

77
00:04:17,720 --> 00:04:19,840
Típicamente,
Solo quiero mostrar el Greeter

78
00:04:20,000 --> 00:04:22,120
y cuando hago clic en el contador de Twitter aquí,

79
00:04:22,280 --> 00:04:26,120
Solo voy a mostrar
el contador de Twitter

80
00:04:26,280 --> 00:04:28,800
¿Cómo hacemos esta aplicación?
Es fácil.

81
00:04:28,960 --> 00:04:31,880
Agrego una variable de instancia
en mi aplicación MyApp,

82
00:04:32,040 --> 00:04:35,440
que se llama el seleccionado
Componente, el niño seleccionado.

83
00:04:35,600 --> 00:04:38,760
De forma predeterminada, lo inicializaré

84
00:04:38,920 --> 00:04:40,960
al primer subcomponente,

85
00:04:41,120 --> 00:04:44,280
En el método "renderContentOn"
aquí, lo he modificado,

86
00:04:44,440 --> 00:04:46,640
Mostraré un menú,

87
00:04:46,800 --> 00:04:50,680
dándome la posibilidad de seleccionar
qué subcomponente muestro,

88
00:04:50,840 --> 00:04:55,000
entonces hago "html render" pero solo
del subcomponente que quiero mostrar.

89
00:04:55,160 --> 00:04:56,520
Muy simple.

90
00:04:56,680 --> 00:05:00,440
En el menú, voy a generar
una lista desordenada,

91
00:05:00,600 --> 00:05:04,120
Examinaré todos mis subcomponentes

92
00:05:04,280 --> 00:05:06,680
que busco con un índice, "yo"

93
00:05:08,160 --> 00:05:11,480
y genero un elemento de lista
para cada niño

94
00:05:11,640 --> 00:05:13,680
Aquí, voy a generar un ancla,

95
00:05:13,840 --> 00:05:17,480
un enlace que se puede hacer clic
y cuando hago clic en este enlace,

96
00:05:17,640 --> 00:05:22,600
se activará la devolución de llamada,
La ejecución de este bloque, aquí.

97
00:05:22,760 --> 00:05:27,600
Entonces podemos decir que es fácil,
el componente seleccionado por el usuario

98
00:05:27,760 --> 00:05:31,480
es el número de niño ...
así que "hijos".

99
00:05:31,640 --> 00:05:33,320
Recuerda, es una colección ...

100
00:05:33,480 --> 00:05:35,000
"en:i"

101
00:05:35,160 --> 00:05:38,200
¿OKAY? Y "yo" aquí

102
00:05:38,360 --> 00:05:41,640
no es más ni menos
que la cantidad del elemento

103
00:05:41,800 --> 00:05:43,360
en la colección "niños".

104
00:05:45,200 --> 00:05:49,680
Entonces es extremadamente fácil poder
para explorar todos los subcomponentes

105
00:05:49,840 --> 00:05:52,320
y para generar específicamente,
controlar completamente

106
00:05:52,480 --> 00:05:54,600
lo que debe y no debe
se mostrará.

107
00:05:56,080 --> 00:05:59,640
Tenemos un segundo mecanismo de composición,
que es "respuesta de llamada".

108
00:05:59,800 --> 00:06:02,080
Hemos visto la agregación de componentes.

109
00:06:02,240 --> 00:06:05,800
con subcomponentes, y ahora veremos
el mecanismo de "respuesta de llamada".

110
00:06:05,960 --> 00:06:09,960
Si nos imaginamos,
en el código del componente A,

111
00:06:10,120 --> 00:06:14,280
escribiremos algo que luzca
como este código aquí, diremos,

112
00:06:15,040 --> 00:06:19,120
el componente A llama al componente B.
Llamar al componente B.

113
00:06:19,280 --> 00:06:24,240
Lo que sucederá es el componente B
enmascarará el componente A en la página web,

114
00:06:24,400 --> 00:06:26,120
se llevará a cabo un tratamiento,

115
00:06:26,280 --> 00:06:28,880
y después de un tiempo, el componente B
dirá:"He hecho mi tratamiento,

116
00:06:29,040 --> 00:06:31,200
"Responderé y daré un resultado".

117
00:06:31,360 --> 00:06:33,760
Aquí el resultado es una estrella,

118
00:06:33,920 --> 00:06:36,440
y este resultado se almacenará en X

119
00:06:37,320 --> 00:06:40,080
en lugar del "componente de llamada B".

120
00:06:40,240 --> 00:06:43,280
Ahora, el componente B reaparecerá
en la página web

121
00:06:43,440 --> 00:06:46,080
y el componente A puede usar este resultado
hacer algo.

122
00:06:46,720 --> 00:06:48,000
Te mostraré un ejemplo.

123
00:06:48,160 --> 00:06:51,760
Aquí tenemos un componente,
que era el contador.

124
00:06:51,920 --> 00:06:54,920
Hemos agregado un botón,
aquí, "Establecer valor",

125
00:06:55,080 --> 00:06:57,440
Nos imaginamos que "Set Value"
permite al usuario

126
00:06:57,600 --> 00:06:59,560
para ingresar un nuevo valor para el contador.

127
00:06:59,720 --> 00:07:03,440
Cuando hacemos clic en "Establecer valor"
se muestra un nuevo componente,

128
00:07:03,600 --> 00:07:07,000
que nos permite ingresar,
un poco como el componente Greeter,

129
00:07:07,160 --> 00:07:10,360
podemos ingresar un nuevo valor
Para el contador, haga clic en "Aceptar"

130
00:07:10,520 --> 00:07:14,120
y cuando hago clic en "Aceptar"
vuelve a nuestro componente contador

131
00:07:14,280 --> 00:07:18,080
pero con el valor ingresado aquí
por el usuario al principio.

132
00:07:18,280 --> 00:07:19,600
¿OKAY?

133
00:07:19,760 --> 00:07:22,080
Entonces tenemos una serie
de varios componentes

134
00:07:23,000 --> 00:07:24,640
¿Cómo se implementa esto?

135
00:07:24,800 --> 00:07:29,200
Tenemos nuestro contador de Twitter
con su método "renderContentOn".

136
00:07:29,360 --> 00:07:33,320
A su método "renderContentOn"
agregaremos un botón,

137
00:07:33,480 --> 00:07:37,160
un tbsButton, etc ...
Este botón se llama "Establecer valor", aquí.

138
00:07:37,320 --> 00:07:41,000
Cuando hacemos clic en este botón,
esta devolución de llamada se ejecutará.

139
00:07:41,160 --> 00:07:43,960
Es el método "setCountToUserValue".

140
00:07:44,120 --> 00:07:46,600
SetCountToUser se define aquí.

141
00:07:46,760 --> 00:07:50,120
Lo que hacemos es prepararemos
un cuadro de diálogo aquí.

142
00:07:50,280 --> 00:07:53,920
Usaremos otro componente
hecho por Seaside, un cuadro de diálogo.

143
00:07:54,080 --> 00:07:56,000
que configuraremos aquí,

144
00:07:56,160 --> 00:07:59,320
en este caso con
"Ingrese un nuevo valor para el contador".

145
00:07:59,480 --> 00:08:02,200
La configuración predeterminada es 0
y tenemos un botón OK.

146
00:08:02,840 --> 00:08:04,320
Qué haremos luego ...

147
00:08:04,480 --> 00:08:07,080
Lo realmente interesante
El elemento es esta línea aquí ...

148
00:08:07,840 --> 00:08:09,040
Aquí...

149
00:08:10,200 --> 00:08:13,400
Vamos a decir,
"componente actual", por lo que "Auto".

150
00:08:13,560 --> 00:08:15,800
Recuerda,
"Self" es el contador de Twitter.

151
00:08:15,960 --> 00:08:19,480
"Llamar al cuadro de diálogo
acabamos de crear,

152
00:08:19,640 --> 00:08:21,080
"y dame el resultado".

153
00:08:21,720 --> 00:08:24,360
El resultado será
El nuevo valor del contador.

154
00:08:24,520 --> 00:08:27,280
Entonces, cuando hayamos terminado
aquí, vamos a decir,

155
00:08:27,440 --> 00:08:29,800
"contar", por lo que el valor del contador,

156
00:08:29,960 --> 00:08:33,560
"Toma este nuevo valor ingresado
por el usuario en la forma de un número ".

157
00:08:34,520 --> 00:08:35,480
Muy simple.

158
00:08:35,920 --> 00:08:38,200
De manera interna,
podemos examinar el funcionamiento

159
00:08:38,400 --> 00:08:40,560
de este cuadro WAInputDialog.

160
00:08:40,720 --> 00:08:44,760
Es un componente Seaside reutilizable,
totalmente clásico,

161
00:08:44,920 --> 00:08:47,000
excepto por una característica especial,

162
00:08:47,160 --> 00:08:51,320
usa el método de "respuesta"
para enviar un resultado

163
00:08:52,080 --> 00:08:55,000
Si nos fijamos en el
Método "renderContentOn"

164
00:08:55,160 --> 00:08:56,720
de este componente,

165
00:08:56,880 --> 00:08:59,720
cuando hacemos clic en su botón Aceptar,

166
00:08:59,880 --> 00:09:02,040
aquí, es el botón "enviar"

167
00:09:02,200 --> 00:09:06,280
Tiene una devolución de llamada con un bloque,
y en su devolución de llamada

168
00:09:06,960 --> 00:09:10,560
Hará "auto respuesta:valor".

169
00:09:11,040 --> 00:09:15,120
Lo que significa que esto
enviará el resultado

170
00:09:15,280 --> 00:09:18,520
al componente que lo llamó.

171
00:09:18,680 --> 00:09:22,440
Realmente volverá al lugar
desde donde se realizó la llamada

172
00:09:22,600 --> 00:09:24,520
y enviar el resultado.

173
00:09:25,760 --> 00:09:27,400
Hemos visto el mecanismo de llamada / respuesta.

174
00:09:27,560 --> 00:09:30,440
Ahora veremos una última
mecanismo de composición de componentes

175
00:09:30,600 --> 00:09:33,120
el mecanismo de "tarea"

176
00:09:33,960 --> 00:09:35,160
En realidad, es muy simple.

177
00:09:35,320 --> 00:09:37,880
Las tareas son como componentes,
pero no hay partes de interfaz de usuario,

178
00:09:38,040 --> 00:09:41,320
así que no "renderContentOn"
no hay generación de htmls.

179
00:09:41,480 --> 00:09:44,000
La idea es realmente orquestar,

180
00:09:44,160 --> 00:09:48,640
para describir cómo los componentes
debe realizarse con el tiempo.

181
00:09:48,800 --> 00:09:51,480
Este componente hará esto primero,
entonces ese, etc ...

182
00:09:51,640 --> 00:09:55,960
Usando "call:answer" detrás de escena.

183
00:09:56,120 --> 00:09:58,920
Entonces definiremos una tarea
llamado un "sumador"

184
00:09:59,080 --> 00:10:02,120
y luego todas las tareas
tener un método llamado "ir".

185
00:10:02,280 --> 00:10:04,680
Aquí, por ejemplo, en esta tarea,

186
00:10:04,840 --> 00:10:09,800
le pediremos al usuario que ingrese un número,
por lo que "auto-solicitud:primer número"

187
00:10:09,960 --> 00:10:13,360
entonces le pediremos que ingrese
un segundo número, "número 2"

188
00:10:13,520 --> 00:10:17,160
entonces le informaremos de un valor

189
00:10:17,320 --> 00:10:21,120
que es la suma
de estos 2 números, aquí, ¿de acuerdo?

190
00:10:21,280 --> 00:10:25,240
En la última línea, nos registraremos
este componente como una aplicación ...

191
00:10:25,400 --> 00:10:28,240
una aplicación web clásica
para acceder a ella con un navegador.

192
00:10:29,920 --> 00:10:31,560
Entonces, si miramos dentro de él,

193
00:10:31,720 --> 00:10:34,680
¿Cómo se implementa el método de solicitud?

194
00:10:34,840 --> 00:10:36,360
El método de solicitud es una cadena.

195
00:10:36,520 --> 00:10:41,600
Internamente, como podemos ver,
Utiliza "llamada" y "respuesta".

196
00:10:41,800 --> 00:10:44,040
Si volvemos al ejemplo anterior,

197
00:10:44,200 --> 00:10:47,640
vemos que cuando hicimos
la solicitud aquí, internamente,

198
00:10:47,800 --> 00:10:50,120
llamó a otro componente,

199
00:10:50,280 --> 00:10:54,520
y no solo uno viejo,
el componente WAInputDialog,

200
00:10:54,680 --> 00:10:56,560
se muestra la cadena,

201
00:10:56,720 --> 00:10:59,920
y este componente devolverá
El resultado para quien lo solicitó.

202
00:11:00,080 --> 00:11:03,440
En este caso, ¿quién lo solicitó?
Nuestro componente "Adder".

203
00:11:03,600 --> 00:11:06,440
Entonces se recuperará
un valor en "Valor 1".

204
00:11:06,600 --> 00:11:09,960
Lo mismo para "Value 2"
y luego en "informar".

205
00:11:10,120 --> 00:11:13,440
Si echamos un vistazo
en cómo se implementa "informar"

206
00:11:13,600 --> 00:11:17,160
También usa una llamada / respuesta,
pero en otro tipo de componente,

207
00:11:17,320 --> 00:11:19,680
que es un "FormDialog".

208
00:11:19,840 --> 00:11:22,360
Si hacemos "self, llama:FormDialog"

209
00:11:22,520 --> 00:11:25,760
mostraremos la cadena
con un botón OK para decir,

210
00:11:25,920 --> 00:11:28,040
"Está bien, ha visto la cuerda".

211
00:11:28,800 --> 00:11:31,040
Entonces, ¿qué necesitas saber?

212
00:11:31,240 --> 00:11:33,120
en todas estas formas de composición,

213
00:11:33,280 --> 00:11:36,080
nunca hablamos de solicitudes,

214
00:11:36,240 --> 00:11:39,880
sobre las solicitudes http, sobre la URL,
análisis y configuración,

215
00:11:40,040 --> 00:11:42,880
No hemos hablado sobre el enrutamiento de solicitudes.

216
00:11:43,040 --> 00:11:46,680
No hemos hecho ningún enlace.
a las siguientes páginas, etc ...

217
00:11:46,840 --> 00:11:50,160
Solo hemos hablado de componentes,

218
00:11:50,320 --> 00:11:52,640
componentes con estado
que podemos componer,

219
00:11:52,800 --> 00:11:55,000
por lo que las 3 formas de composición.

220
00:11:55,160 --> 00:11:57,120
Un componente puede encapsular a otros,

221
00:11:57,280 --> 00:11:59,480
un componente puede llamar a otro componente,

222
00:11:59,640 --> 00:12:03,480
y podemos definir flujos de trabajo,
cadenas de componentes en Seaside,

223
00:12:03,640 --> 00:12:04,920
que es extremadamente poderoso,

224
00:12:05,080 --> 00:12:07,840
y todo con la posibilidad
de depuración en vivo.