Hola, en esta secuencia, verás el poder de Seaside,
a través de la composición de los componentes.
Definimos el reutilizable y componentes con estado,
ahora veremos cómo podemos juntar estos componentes
para construir aplicaciones complejas. Como dijimos, una aplicación
es un componente raíz,
por lo que nos beneficiamos de la depuración, de depuración en vivo de aplicaciones.
Volveremos 3 mecanismos importantes
para componer componentes en Seaside.
El primero es la agregación de componentes.
Recuerde, definimos 2 contadores,
un contador normal, que se parecía a esto
y un contador de Twitter, aquí.
¿OKAY?
¿Cómo puedo agregar ahora? un contador de componente
con vistas al edificio una aplicación de varios mostradores?
Quiero mostrar mucho de contadores en una página.
Cuando hago clic en este +, por ejemplo,
solo aumenta el valor de este contador en particular, ¿de acuerdo?
Entonces, agregando muchos componentes en la misma página, fácilmente.
Entonces, ¿cómo hacemos esto en Seaside? Es muy simple
Definiré una subclase de componente, que es siempre el mismo,
que se llama "WAMultiCounter",
"contadores de variables de instancia", definiendo una colección de contadores.
En "método inicializar" crearé una colección de 5 contadores, aquí.
¿OKAY?
Y luego tendré el método "rendercontentOn", aquí
donde diré que navegaré mi colección de mostradores con un "hacer"
y le preguntaré a cada contador, al menos, el objeto html,
para representar cada uno de los contadores. Uso un método especial, "render".
Este método render del objeto html
le permite preguntar a un componente para renderizarse, dibujarse en html.
Tenemos un método importante aquí llamado "niños",
lo que significa que cuando un componente encapsula otros componentes
y les pide que hagan en "renderContentOn",
tiene que declararlos y hacer eso tiene que representar una colección
de componentes en su método "niños"
que contiene todos los componentes va a hacer, todos sus hijos.
Aquí estoy renderizado la colección "contadores".
Es un método importante para definir.
Entonces, las reglas básicas para agregar componentes,
Componer componentes es fácil.
Un componente almacenará sus subcomponentes
en una variable de instancia. En nuestro ejemplo, es "contadores", ¿de acuerdo?
Luego pasará el mensaje "renderizado"
a html,
en su método "renderContentOn" pidiendo a cada niño que se renderice.
Luego redefinirá el método "niños"
para declarar todos sus subcomponentes.
Siempre hay estas 3 partes.
También podemos agregar diferentes subcomponentes
No tienen que ser del mismo tipo.
Antes solo combinaba contadores y aquí vamos a tener
una aplicación, un componente de MyApp
En el método "inicializar" Es una colección,
excepto que en esta colección pongo
la aplicación "Greeter" que usamos en una secuencia previa, que vimos,
un contador de twitters y un contador. 3 componentes
Mi método, "niños" se muestra
todos los niños, los subcomponentes de este componente MyApp,
y en "renderContentOn"
Quiero explorar mis hijos y pídales que se representen.
Entonces hacemos "html render:cada uno"
y haré "html render" de Greeter,
el contador y contador de Twitter.
Veamos lo que tenemos.
Aquí tenemos el componente Greeter, que se muestra en la página web,
tenemos el contador de Twitter se muestra aquí,
y el contador normal que se muestra aquí.
Hemos compuesto los componentes. y todos trabajan de forma independiente
si hago clic en el + y el "Say Hello", etc.,
los componentes funcionan perfectamente.
Entonces, si quieres, hay una etapa más allá.
No queremos que todos los componentes a la vez en la página web.
Queremos uno a la vez, un menú, por ejemplo, para seleccionar
que subcomponente queremos que se muestre
Típicamente, Solo quiero mostrar el Greeter
y cuando hago clic en el contador de Twitter aquí,
Solo voy a mostrar el contador de Twitter
¿Cómo hacemos esta aplicación? Es fácil.
Agrego una variable de instancia en mi aplicación MyApp,
que se llama el seleccionado Componente, el niño seleccionado.
De forma predeterminada, lo inicializaré
al primer subcomponente,
En el método "renderContentOn" aquí, lo he modificado,
Mostraré un menú,
dándome la posibilidad de seleccionar qué subcomponente muestro,
entonces hago "html render" pero solo del subcomponente que quiero mostrar.
Muy simple.
En el menú, voy a generar una lista desordenada,
Examinaré todos mis subcomponentes
que busco con un índice, "yo"
y genero un elemento de lista para cada niño
Aquí, voy a generar un ancla,
un enlace que se puede hacer clic y cuando hago clic en este enlace,
se activará la devolución de llamada, La ejecución de este bloque, aquí.
Entonces podemos decir que es fácil, el componente seleccionado por el usuario
es el número de niño ... así que "hijos".
Recuerda, es una colección ...
"en:i"
¿OKAY? Y "yo" aquí
no es más ni menos que la cantidad del elemento
en la colección "niños".
Entonces es extremadamente fácil poder para explorar todos los subcomponentes
y para generar específicamente, controlar completamente
lo que debe y no debe se mostrará.
Tenemos un segundo mecanismo de composición, que es "respuesta de llamada".
Hemos visto la agregación de componentes.
con subcomponentes, y ahora veremos el mecanismo de "respuesta de llamada".
Si nos imaginamos, en el código del componente A,
escribiremos algo que luzca como este código aquí, diremos,
el componente A llama al componente B. Llamar al componente B.
Lo que sucederá es el componente B enmascarará el componente A en la página web,
se llevará a cabo un tratamiento,
y después de un tiempo, el componente B dirá:"He hecho mi tratamiento,
"Responderé y daré un resultado".
Aquí el resultado es una estrella,
y este resultado se almacenará en X
en lugar del "componente de llamada B".
Ahora, el componente B reaparecerá en la página web
y el componente A puede usar este resultado hacer algo.
Te mostraré un ejemplo.
Aquí tenemos un componente, que era el contador.
Hemos agregado un botón, aquí, "Establecer valor",
Nos imaginamos que "Set Value" permite al usuario
para ingresar un nuevo valor para el contador.
Cuando hacemos clic en "Establecer valor" se muestra un nuevo componente,
que nos permite ingresar, un poco como el componente Greeter,
podemos ingresar un nuevo valor Para el contador, haga clic en "Aceptar"
y cuando hago clic en "Aceptar" vuelve a nuestro componente contador
pero con el valor ingresado aquí por el usuario al principio.
¿OKAY?
Entonces tenemos una serie de varios componentes
¿Cómo se implementa esto?
Tenemos nuestro contador de Twitter con su método "renderContentOn".
A su método "renderContentOn" agregaremos un botón,
un tbsButton, etc ... Este botón se llama "Establecer valor", aquí.
Cuando hacemos clic en este botón, esta devolución de llamada se ejecutará.
Es el método "setCountToUserValue".
SetCountToUser se define aquí.
Lo que hacemos es prepararemos un cuadro de diálogo aquí.
Usaremos otro componente hecho por Seaside, un cuadro de diálogo.
que configuraremos aquí,
en este caso con "Ingrese un nuevo valor para el contador".
La configuración predeterminada es 0 y tenemos un botón OK.
Qué haremos luego ...
Lo realmente interesante El elemento es esta línea aquí ...
Aquí...
Vamos a decir, "componente actual", por lo que "Auto".
Recuerda, "Self" es el contador de Twitter.
"Llamar al cuadro de diálogo acabamos de crear,
"y dame el resultado".
El resultado será El nuevo valor del contador.
Entonces, cuando hayamos terminado aquí, vamos a decir,
"contar", por lo que el valor del contador,
"Toma este nuevo valor ingresado por el usuario en la forma de un número ".
Muy simple.
De manera interna, podemos examinar el funcionamiento
de este cuadro WAInputDialog.
Es un componente Seaside reutilizable, totalmente clásico,
excepto por una característica especial,
usa el método de "respuesta" para enviar un resultado
Si nos fijamos en el Método "renderContentOn"
de este componente,
cuando hacemos clic en su botón Aceptar,
aquí, es el botón "enviar"
Tiene una devolución de llamada con un bloque, y en su devolución de llamada
Hará "auto respuesta:valor".
Lo que significa que esto enviará el resultado
al componente que lo llamó.
Realmente volverá al lugar desde donde se realizó la llamada
y enviar el resultado.
Hemos visto el mecanismo de llamada / respuesta.
Ahora veremos una última mecanismo de composición de componentes
el mecanismo de "tarea"
En realidad, es muy simple.
Las tareas son como componentes, pero no hay partes de interfaz de usuario,
así que no "renderContentOn" no hay generación de htmls.
La idea es realmente orquestar,
para describir cómo los componentes debe realizarse con el tiempo.
Este componente hará esto primero, entonces ese, etc ...
Usando "call:answer" detrás de escena.
Entonces definiremos una tarea llamado un "sumador"
y luego todas las tareas tener un método llamado "ir".
Aquí, por ejemplo, en esta tarea,
le pediremos al usuario que ingrese un número, por lo que "auto-solicitud:primer número"
entonces le pediremos que ingrese un segundo número, "número 2"
entonces le informaremos de un valor
que es la suma de estos 2 números, aquí, ¿de acuerdo?
En la última línea, nos registraremos este componente como una aplicación ...
una aplicación web clásica para acceder a ella con un navegador.
Entonces, si miramos dentro de él,
¿Cómo se implementa el método de solicitud?
El método de solicitud es una cadena.
Internamente, como podemos ver, Utiliza "llamada" y "respuesta".
Si volvemos al ejemplo anterior,
vemos que cuando hicimos la solicitud aquí, internamente,
llamó a otro componente,
y no solo uno viejo, el componente WAInputDialog,
se muestra la cadena,
y este componente devolverá El resultado para quien lo solicitó.
En este caso, ¿quién lo solicitó? Nuestro componente "Adder".
Entonces se recuperará un valor en "Valor 1".
Lo mismo para "Value 2" y luego en "informar".
Si echamos un vistazo en cómo se implementa "informar"
También usa una llamada / respuesta, pero en otro tipo de componente,
que es un "FormDialog".
Si hacemos "self, llama:FormDialog"
mostraremos la cadena con un botón OK para decir,
"Está bien, ha visto la cuerda".
Entonces, ¿qué necesitas saber?
en todas estas formas de composición,
nunca hablamos de solicitudes,
sobre las solicitudes http, sobre la URL, análisis y configuración,
No hemos hablado sobre el enrutamiento de solicitudes.
No hemos hecho ningún enlace. a las siguientes páginas, etc ...
Solo hemos hablado de componentes,
componentes con estado que podemos componer,
por lo que las 3 formas de composición.
Un componente puede encapsular a otros,
un componente puede llamar a otro componente,
y podemos definir flujos de trabajo, cadenas de componentes en Seaside,
que es extremadamente poderoso,
y todo con la posibilidad de depuración en vivo.