Buenos días. En esta secuencia veremos el Framework
web Seaside, que es un Framework innovador para
construir aplicaciones Web, en Pharo.
es muy potente y permite de construir
aplicaciones complejas. Veremos que la noción
central es la noción de componentes que son
reutilizables y con estado, construidos sobre un
protocolo sin estado que es http clásico de las aplicaciones Web.
Así que Seaside por supuesto que es seguro por defecto,
soporta todas las últimas novedades Web 2 0, Ajax y
ect.. así como las arquitecturas REST.
Así que tenéis la pagina Web de Seaside donde podréis
consultar la documentación, así como el libro
gratuito de Seaside que se encuentra en linea.
Ademas encontrareis un conjunto de tutoriales sobre
Seaside, y finalmente os aconsejo de mirar la
mailing list Seaside donde podréis plantear vuestras dudas
y existe una comunidad activa que responde a todas las
preguntas que necesitéis.
Así que un poco de historia.
Seaside esta en producción desde el 2002.
Esta activamente mantenido y ademas es también uno de los
Framworks a la base de muchas historias de éxito
en Pharo; podéis ir a la pagina web de Pharo y
en este link, podréis ver que existen muchos
proyectos Web, y la mayoría de estos proyectos Web
utilizan el Framework seaside.
Como os decía Seaside es un Framework Web
centrado sobre la noción de componentes.
Así que los componentes serán reutilizables y con estado.
De acuerdo! Y veremos un lenguaje dedicado que nos
permitirá de fácilmente de construir estos componentes en HTML.
Luego tendremos las reglas de composición de estos componentes.
Estamos de acuerdo que hay varias y las explicitaremos
en una próxima secuencia. Una aplicación Web es
únicamente un componente raíz, seremos capaces de
inspeccionar las aplicaciones Web en vivo directamente con el debugger de Pharo.
Luego tendréis una secuencia que os
mostrará como hacer para generar automáticamente los
formularios, en todo caso para no tener que
escribirlos a mano.
Así como algunos ejemplos de aplicaciones construidas
con Seaside, que son en producción desde el 2002.
Así que si hacemos un zoom, tenemos otros, aquí vemos
una aplicación que utiliza muchos gráficos,
así que muchos componentes que están imbricados los unos con
los otros para construir una aplicación compleja.
Os facilito un otro ejemplo de aplicación
que podéis encontrar en la pagina Web de Pharo, así que
tenemos realmente tablas de report que son bastante
complejas y imbricadas las unas con las otras, y podemos
construir realmente esto simplemente con el Framework Seaside.
Así que en Seaside la noción central como os decía es
la noción de componentes. Así que un componente no es ni
mas ni menos que una subclase de la clase
WAComponent, facilitada por el Framework Seaside.
Así que un componente es reutilizable y con estado y
sera en HTML por ejemplo bajo la forma de un div y ect.
Así que una aplicación Web en Seaside no es ni mas ni m
ni menos que un componente raiz, aquí por ejemplo
WACounter, que podremos registra en el sistema como una
aplicación Web bajo el nombre Counter.
Así que y podremos acceder a la url con el nombre Counter.
Aquí un ejemplo mi aplicación Counter
en la url, es un componente que se muestra aquí en
HTML, así que la valor del Counter, y aquí tenemos dos links "tac
plus plus" así que si pulso encima incrementara
el valor del Counter, y "menos menos" si pulso
encima reducirá el valor del Counter.
Así que ahora os mostraré el código para
implementar esta aplicación Web.
es extremadamente simple.
Construiré un subclase de SWComponent a la que llamo
WACounter, esta clase tendrá una variable de instacia: count.
Un método par inicializar el valor del Counter a 0.
Un método de increment para aumentar el valor del
Counter, un método de decrement. De hecho solo nos
falta ahora la parte HTML.
Así que como vamos a describir este Counter incapaz
de mostrarse en HTML? De hecho sera necesario simplemente
facilitar un método renderContenOn, que es
un parámetro, y este parámetro nos ayudara a generar el código HTML.
aquí un ejemplo.
aquí facilito el método renderContentOn a la clase
Counter y me sirvo del parámetro, si , que
es un objeto clásico Pharo, instancia de la clase
WHtmlCanvas, facilitada por Seaside, y
enviaré mensajes a este objeto para generar el código HTML.
Así que puedo generar un titulo una ancla así que
una ancla es un link, y aquí soy capaz de especificar
a que mensaje callback, cuando pulso en este link
ejecuta este block de código.
aquí pulso sobre el link que se llama "+ +",
esto ejecutara el método self increase del Counter, y
cuando pulso sobre el link "- -" esto ejecutara el
método self decrease del Counter.
Así de simple.
Podemos ir más lejos.
Si un error se produce cuando pulso sobre un
link, es decir que en este callback
he introducido a propósito un punto de control.
Esto podría ser un error pero he introducido realmente un
punto de corte en el método Decrease, selfhaltIf.
Así que si el contador se reduce y pasa a negativo en este
caso se dispara la aparición del debugger.
Y vemos que hago esto en mi aplicación
Web tengo el debugger aquí se se muestra, y vemos
bien la pila de ejecución del programa aquí, con
el método renderCounterOn, y el decrease aquí.
Así que nos hemos parado correctamente en el haltIf.
aquí puedo modificar directamente el código de mi
aplicación, pulsar el botón Proceed y my
navegador recibirá la respuesta HTML como si nada hubiera ocurrido.
Así que otro problema con las aplicaciones Web es el
problema del Back Button. Así que la idea es que cuando el usuario
pulsa el Back Button esto desincroniza el estado entre
el servidor y el cliente. Por ejemplo: imaginemos que
incremento 5 veces mi contador, así que vale 5, delante
mio tengo un 5 que se muestra. Pulso el botón
de vuelta de mi navegador. Así que voy a ver el valor 4.
Por contra el servidor no esta al corriente que he
pulsado este botón de vuelta. Así que si vuelvo a pulsar sobre
"Incrementar el valor del contador" veré la respuesta 6.
Así que este es un problema puesto el que lado servidor
pensaba que estaba aun en 5, y al incrementar pasamos a 6.
¿Como gestionamos esto con Seaside?
es muy sencillo.
Vamos a definir un nuevo método en la clase Counter
que es el método States, que devolverá un conjunto de
objetos de los que es necesario conservar el estado cuando pulsamos
en el botón de vuelta. En este caso únicamente el objeto
self es el contador corriente.
De acuerdo! Ahora si pulso el botón Devolver y
vuelvo a pulsar increment, tendré el valor correcto 5
del ejemplo anterior.
Así que los Callback de hecho son bloques de código
en los que tenemos toda la potencia de Pharo.
Así que aquí en un Callback puedo escribir cualquier código Pharo.
aquí he tomado un ejemplo mas complejo donde esta vez
puedo utilizar una alternativa para decir incremento el
contador de un punto o de dos puntos en función de si es
un nombre par o impar por ejemplo.
My Counter se incrementara mas rápido en un caso en
en lugar de incrementarse de golpe.
Podemos ver que tenemos realmente una gran potencia
con estos bloques de Callback.
Por ejemplo en el caso anterior, si
pulso en "+ +" aquí llegaremos a
una nueva ventana que me dice que se trata de un numero par.
Os puedo mostrar otro ejemplo.
En este caso es una aplicación en la que el usuario
introduce su nombre.
Nos gustaría que el usuario pudiera introducir su nombre
y cuando pulse el botón Say Hello aquí,
nos gustaría mostrarle una cadena de caracteres que es
"Hi" y su nombre, el nombre que ha introducido al inicio aquí.
De acuerdo! Como puedo hacer para escribir esta
aplicación en Seaside?
Muy sencillo.
Construiré una subclase de la classe WAComponent,
que dotare con una variable de instancia username.
Y en el método renderContenOn, esta que os
enseño aquí, simplemente mostraré el campo username
y diré un Text Input.
Así que le Text Input es el campo de texto que habéis
visto anteriormente en el que el usuario podía escribir "Bob".
Y tendré un Callback, esta vez el Callback es un bloque
un bloque que es a un parámetro Value.
Así que el parámetro Value este bloque sera la cadena de
caracteres que ha introducido el usuario en el campo
texto, en nuestro ejemplo Bob.
Y seremos capaces de guardar esta cadena de
caracteres en la variable de instancia del componente "Peter", username.
Luego cuando pulsemos en el SubmitButton
diremos cuando pulso sobre el botón seré capaz
self inform, aquí llamare a un nuevo componente
en el que diré "Muestra la cadena Hi Bob".
Así que concateno la cadena de caracteres con el campo
Hi con el que había entrado en el campo texto anterior.
Espero que hayáis remarcado que, para aquellos que
tenéis la costumbre de construir aplicaciones Web, en Seaside
no he hablado de partes de la petición, es que
hay parametros en la petición, en la URL etc.
No he hablado de configuración del fichero con sus correos
complicados, no he hablado de ficheros, no he
hablado de paginas, no he hablado de links con la pagina siguiente.
De hecho solo he hablado de componentes, objetos,
mensajes, Callback y de la posibilidad de inspeccionar
directamente el código gracias al debuger de Pharo.
En resumen lo que se debe retener es que una
aplicación Web en Seaside es fácil,
es un componente raíz y veremos que se puede combinar los
componentes entre ellos para construir aplicaciones más complejas.
Un componente sabe mostrarse en HTML gracias a su método renderCounterOn.
Disponemos de un lenguaje dedicado que permite generar el código
HTML para cada uno de los componentes.
Veremos este lenguaje más en detalle en la próxima secuencia.