Buenos días. En esta secuencia volvemos sobre Seaside,
y especialmente sobre la parte de la generación de código HTML, de un componente.
Os recuerdo que en Seaside hay componentes.
Todos los componentes responden al mensaje renderContentOn,
que permite generar el código HTML que corresponde a un componente.
Así que este método tiene un parámetro que se llama HTML que
es un objeto instancia de la clase WAHtmlCanvas o de una
subclase, que se ha especializado así que ofrece una API
a los programadores, para generar los códigos HTML validos.
Aquí os recuerdo el código del Counter así que este
objeto HTML Aquí se utiliza para genera títulos,
anclas, espacios y otra ancla.
De acuerdo!
Así que volveremos a este lenguaje dedicado en esta secuencia.
Así que este lenguaje dedicado de hecho se constituye de
pinceles, brushes, de acuerdo y cada pincel se
especializara en la generación de una baliza HTML particular.
Pero con una API que es un objeto.
De acuerdo!
Y por construcción a la fuerza, dado que utilizo el
envío de mensajes a objetos, por construcción el
HTML generado sera siempre valido si no nos hemos
equivocado en el envío de mensajes.
Os muestro un ejemplo Aquí.
Si utilizo el lenguaje dedicado y este objeto HTML,
le envío el mensaje div lo que me devolverá un
objeto y este objeto es un pincel especializado en la
generación de código HTML div.
Así que comprende el mensaje "Id" y comprende
el mensaje "With". Así que Aquí me generara bien una div
con el atributo "id = Title" y después del mensaje div
el parámetro, he situado una cadena de caracteres
titulo que se encuentran en la div.
Puedo generar cosas mas complejas,
así que normalmente el mensaje tiene siempre el mismo comienzo, así
HTML div id:list, de acuerdo así Aquí esta el div, salvo que
en el interior de esta div puedo tener un montón de otras balizas.
Por esto with en lugar de pasar directamente una
cadena de caracteres voy a pasar un bloque, y en el interior
de este bloque podre reutilizar mi objeto HTML y
otros pinceles para genera otros tipos de balizas.
Así HTML span class Item, así que introduzco un spam que es
un atributo de clase con un contenido.
Ahora puedo utilizar bucles porque se trata de un
lenguaje dedicado que tiene toda la potencia de Pharo.
Así que por ejemplo voy a generar una lista no ordenada, Aquí.
UnordererList Aquí "ul", que tiene un atributo Id list.
Y luego en el interior de esta lista no ordenada voy
a tener unos listItem así lisitem que están Aquí, salvo que
los he generado utilizando un bucle For.
Así que Aquí tengo un bucle 1 to do.
Así que 1 simple, do realiza un bucle clásico de Pharo,
voy a generar 5 listas Item con un atributo classe
Item, así que el mismo atributo clase y luego el nombre de
cada uno de los listItem y he concatenado el cursor de bucles
: Así Item 1, Item 2, Item 3, Item 4.
Podemos ir un poco más lejos.
Podríamos decir de hecho que quiero clases CSS
diferentes para cada uno de los item de la lista en función de
si el cursor de bucles es par o impar.
Así por ejemplo Aquí voy a utilizar el
mensaje "class if", así que añado esta clase si esta
condición se cumple o entonces añado esta clase CSS
si esta condición se verifica.
Y podemos ver que en el código generado tenemos el
primer listItem que tiene esta clase CSS Aquí, itemOdd, y
el segundo list Item que tiene esta clase CSS Aquí.
Aquí es un elemento par, impar, ect y ect....
Podemos ver que Aquí tenemos una sintaxis concisa que utiliza
toda la potencia de Pharo para generar el código HTML
gracias a este lenguaje dedicado.
Así que este lenguaje dedicado tiene otra propiedad y es que
es extensible, así que es fácil de hacerle soportar los
Frameworks CSS modernos como los Framework CSS
Tweeter Bootstrap por ejemplo. Así que est Framework CSS
utiliza clases CSS para generar los elementos HTML
que son bellos, como por ejemplo campos verdes, azules y
ect. ect...
¿Y como funciona para extender este lenguaje dedicado?
Tendremos pinceles específicos Aquí son
todos prefijados con tbs.
Tbs significa Tweeter BootStrap.
Así que a mi objeto HTML le envío el mensaje tbsAlert
para que genere una div HTML, o un elemento HTML,
conforme con el Framework Tweeter BootStrap.
Así que vamos a tener un montón de pinceles relativos a este
Framework Tweeter Boot Strap, así que puedo generar
elementos del tipo botón o tbsButton.
Unos Tbsbutton group para construir grupos de botones
vemos que los 3 botones esta relacionados en el mismo grupo, y ect.. ect..
Por ejemplo si tomamos el ejemplo del contador que
teníamos en la secuencia anterior, habíamos definido
un contador simple y ahora quiero construir
la version tweeter Bootstrap de este contador.
Así que es muy fácil.
Voy a construir una subclase de mi contador anterior
que voy a llamar "WATwitterCounter" Paso
al lado clase de esta clase
y defino el método initialize en el que
voy a declarar cuidado que este componente utiliza la
biblioteca TbsDevelopmentLibrary, JQDeploymentLibrary.
Así que es el Framework Javascript y el Framework CSS.
Luego volveré al lado instancia de esta clase y
voy definir el nuevo método renderCounterOn, podéis
volver a definir la que habíamos definido anteriormente,
y voy a utilizar unos pinceles que empiezan todos por Tbs.
Así que TbsButtongroup, TbsButton, etc. ect...
Pero esto no va a cambiar nada de mi código clásico así que es
siempre unos Callback puedes ver con self increase, y self decrease.
Esto no cambia absolutamente nada.
De acuerdo! son solo los pinceles de renderizado del código
HTML los que utilizan Tbs.
Ahora podemos ver la nueva apariencia de mi Contador.
Podemos ver que he utilizado un ButtonGroup con 2 botones +
y -, hay un bonito badge para mostrar el valor del
Counter que es la versión Bootstrap de my contador.
Pero de hecho podéis ir aun mas lejos, no estáis
obligados a utilizar BootStrap podéis definir
vuestras propias reglas de estilo en vuestro contador.
Por ejemplo Aquí he decidido de decir que todos los elementos
impares odd, tendrán la clase odd.
De hecho cada vez que devuelvo el valor de mi
Contador Aquí bajo la forma de tbsBadge, así que
¿que va a mostrarse?
Sera el valor de mi contador, salvo que voy
a añadir la clase CSS odd Aquí, solo si el valor
es impar. De acuerdo!
Así que Aquí 7.
Así que esta clase CSS se añadirá solo si cumple esta condición.
Puesto que he definido la clase CSS odd.
De hecho puedo definir el método style en mi contador
que devolverá una cadena de caracteres con las reglas de
estilo CSS que se aplicaran.
Así que point odd color red.
Y el valor de contador pasara a rojo en caso de ser impar.
Como conclusión: un componente, una aplicación Web
Seaside es un componente raíz.
Todos los componentes saben como mostrarse en HTML gracias al
método renderContenOn. Y disponemos de un lenguaje dedicado
extremadamente potente y extensible que permite de escribir
la generación de código HTML muy fácilmente, gracias a
los pinceles y gracias a su extensibilidad para soportar
los Framework CSS existente, tales como BootStrap, jQuery
UI, ect... ect...
Y podréis aprovechar de toda la potencia del
lenguaje Pharo, los bucles ect... ect...
podremos generar fácilmente un conjunto de elementos.