1 00:00:00,770 --> 00:00:03,090 Buenos días. En esta secuencia volvemos sobre Seaside, 2 00:00:03,290 --> 00:00:06,810 y especialmente sobre la parte de la generación de código HTML, de un componente. 3 00:00:07,590 --> 00:00:10,260 Os recuerdo que en Seaside hay componentes. 4 00:00:10,460 --> 00:00:12,720 Todos los componentes responden al mensaje renderContentOn, 5 00:00:14,160 --> 00:00:17,890 que permite generar el código HTML que corresponde a un componente. 6 00:00:19,060 --> 00:00:22,610 Así que este método tiene un parámetro que se llama HTML que 7 00:00:22,810 --> 00:00:26,320 es un objeto instancia de la clase WAHtmlCanvas o de una 8 00:00:26,520 --> 00:00:28,890 subclase, que se ha especializado así que ofrece una API 9 00:00:29,180 --> 00:00:31,090 a los programadores, para generar los códigos HTML validos. 10 00:00:32,170 --> 00:00:35,570 Aquí os recuerdo el código del Counter así que este 11 00:00:35,770 --> 00:00:38,180 objeto HTML Aquí se utiliza para genera títulos, 12 00:00:38,380 --> 00:00:40,300 anclas, espacios y otra ancla. 13 00:00:40,500 --> 00:00:41,360 De acuerdo! 14 00:00:41,920 --> 00:00:44,500 Así que volveremos a este lenguaje dedicado en esta secuencia. 15 00:00:46,240 --> 00:00:48,650 Así que este lenguaje dedicado de hecho se constituye de 16 00:00:48,850 --> 00:00:52,350 pinceles, brushes, de acuerdo y cada pincel se 17 00:00:52,550 --> 00:00:55,610 especializara en la generación de una baliza HTML particular. 18 00:00:56,150 --> 00:00:59,260 Pero con una API que es un objeto. 19 00:00:59,680 --> 00:01:01,380 De acuerdo! 20 00:01:01,580 --> 00:01:03,880 Y por construcción a la fuerza, dado que utilizo el 21 00:01:04,080 --> 00:01:06,640 envío de mensajes a objetos, por construcción el 22 00:01:06,840 --> 00:01:09,920 HTML generado sera siempre valido si no nos hemos 23 00:01:10,120 --> 00:01:12,900 equivocado en el envío de mensajes. 24 00:01:15,090 --> 00:01:16,370 Os muestro un ejemplo Aquí. 25 00:01:16,610 --> 00:01:20,390 Si utilizo el lenguaje dedicado y este objeto HTML, 26 00:01:20,590 --> 00:01:23,650 le envío el mensaje div lo que me devolverá un 27 00:01:23,850 --> 00:01:27,450 objeto y este objeto es un pincel especializado en la 28 00:01:27,650 --> 00:01:30,200 generación de código HTML div. 29 00:01:30,400 --> 00:01:35,310 Así que comprende el mensaje "Id" y comprende 30 00:01:35,510 --> 00:01:39,350 el mensaje "With". Así que Aquí me generara bien una div 31 00:01:39,550 --> 00:01:44,240 con el atributo "id = Title" y después del mensaje div 32 00:01:44,440 --> 00:01:45,810 el parámetro, he situado una cadena de caracteres 33 00:01:46,010 --> 00:01:47,810 titulo que se encuentran en la div. 34 00:01:49,390 --> 00:01:51,960 Puedo generar cosas mas complejas, 35 00:01:52,160 --> 00:01:55,330 así que normalmente el mensaje tiene siempre el mismo comienzo, así 36 00:01:55,530 --> 00:02:00,160 HTML div id:list, de acuerdo así Aquí esta el div, salvo que 37 00:02:00,360 --> 00:02:02,470 en el interior de esta div puedo tener un montón de otras balizas. 38 00:02:02,910 --> 00:02:05,650 Por esto with en lugar de pasar directamente una 39 00:02:05,850 --> 00:02:08,410 cadena de caracteres voy a pasar un bloque, y en el interior 40 00:02:08,610 --> 00:02:11,460 de este bloque podre reutilizar mi objeto HTML y 41 00:02:11,660 --> 00:02:13,560 otros pinceles para genera otros tipos de balizas. 42 00:02:14,020 --> 00:02:18,790 Así HTML span class Item, así que introduzco un spam que es 43 00:02:19,000 --> 00:02:21,110 un atributo de clase con un contenido. 44 00:02:24,410 --> 00:02:27,370 Ahora puedo utilizar bucles porque se trata de un 45 00:02:27,570 --> 00:02:29,670 lenguaje dedicado que tiene toda la potencia de Pharo. 46 00:02:30,010 --> 00:02:34,290 Así que por ejemplo voy a generar una lista no ordenada, Aquí. 47 00:02:35,260 --> 00:02:40,060 UnordererList Aquí "ul", que tiene un atributo Id list. 48 00:02:40,570 --> 00:02:42,860 Y luego en el interior de esta lista no ordenada voy 49 00:02:43,060 --> 00:02:46,510 a tener unos listItem así lisitem que están Aquí, salvo que 50 00:02:46,710 --> 00:02:48,290 los he generado utilizando un bucle For. 51 00:02:48,550 --> 00:02:50,930 Así que Aquí tengo un bucle 1 to do. 52 00:02:51,130 --> 00:02:54,660 Así que 1 simple, do realiza un bucle clásico de Pharo, 53 00:02:55,000 --> 00:02:58,390 voy a generar 5 listas Item con un atributo classe 54 00:02:59,030 --> 00:03:02,620 Item, así que el mismo atributo clase y luego el nombre de 55 00:03:02,820 --> 00:03:06,540 cada uno de los listItem y he concatenado el cursor de bucles 56 00:03:08,300 --> 00:03:09,720 : Así Item 1, Item 2, Item 3, Item 4. 57 00:03:12,680 --> 00:03:14,650 Podemos ir un poco más lejos. 58 00:03:14,910 --> 00:03:17,060 Podríamos decir de hecho que quiero clases CSS 59 00:03:17,260 --> 00:03:21,770 diferentes para cada uno de los item de la lista en función de 60 00:03:22,110 --> 00:03:23,650 si el cursor de bucles es par o impar. 61 00:03:24,470 --> 00:03:27,080 Así por ejemplo Aquí voy a utilizar el 62 00:03:27,280 --> 00:03:31,860 mensaje "class if", así que añado esta clase si esta 63 00:03:32,060 --> 00:03:35,000 condición se cumple o entonces añado esta clase CSS 64 00:03:35,550 --> 00:03:37,000 si esta condición se verifica. 65 00:03:37,340 --> 00:03:40,080 Y podemos ver que en el código generado tenemos el 66 00:03:40,280 --> 00:03:45,180 primer listItem que tiene esta clase CSS Aquí, itemOdd, y 67 00:03:45,380 --> 00:03:47,810 el segundo list Item que tiene esta clase CSS Aquí. 68 00:03:49,110 --> 00:03:51,690 Aquí es un elemento par, impar, ect y ect.... 69 00:03:52,860 --> 00:03:55,800 Podemos ver que Aquí tenemos una sintaxis concisa que utiliza 70 00:03:56,000 --> 00:03:57,600 toda la potencia de Pharo para generar el código HTML 71 00:03:58,150 --> 00:03:59,190 gracias a este lenguaje dedicado. 72 00:04:00,820 --> 00:04:03,160 Así que este lenguaje dedicado tiene otra propiedad y es que 73 00:04:03,360 --> 00:04:05,390 es extensible, así que es fácil de hacerle soportar los 74 00:04:05,590 --> 00:04:07,920 Frameworks CSS modernos como los Framework CSS 75 00:04:08,120 --> 00:04:11,750 Tweeter Bootstrap por ejemplo. Así que est Framework CSS 76 00:04:11,950 --> 00:04:14,430 utiliza clases CSS para generar los elementos HTML 77 00:04:14,630 --> 00:04:19,440 que son bellos, como por ejemplo campos verdes, azules y 78 00:04:19,640 --> 00:04:20,400 ect. ect... 79 00:04:20,600 --> 00:04:23,130 ¿Y como funciona para extender este lenguaje dedicado? 80 00:04:23,400 --> 00:04:27,390 Tendremos pinceles específicos Aquí son 81 00:04:27,590 --> 00:04:28,740 todos prefijados con tbs. 82 00:04:28,940 --> 00:04:30,070 Tbs significa Tweeter BootStrap. 83 00:04:30,270 --> 00:04:33,900 Así que a mi objeto HTML le envío el mensaje tbsAlert 84 00:04:34,950 --> 00:04:38,350 para que genere una div HTML, o un elemento HTML, 85 00:04:38,640 --> 00:04:40,270 conforme con el Framework Tweeter BootStrap. 86 00:04:43,620 --> 00:04:47,840 Así que vamos a tener un montón de pinceles relativos a este 87 00:04:48,040 --> 00:04:50,460 Framework Tweeter Boot Strap, así que puedo generar 88 00:04:50,660 --> 00:04:52,120 elementos del tipo botón o tbsButton. 89 00:04:53,190 --> 00:04:56,440 Unos Tbsbutton group para construir grupos de botones 90 00:04:56,640 --> 00:05:00,480 vemos que los 3 botones esta relacionados en el mismo grupo, y ect.. ect.. 91 00:05:02,560 --> 00:05:05,080 Por ejemplo si tomamos el ejemplo del contador que 92 00:05:05,280 --> 00:05:08,000 teníamos en la secuencia anterior, habíamos definido 93 00:05:08,200 --> 00:05:10,120 un contador simple y ahora quiero construir 94 00:05:10,320 --> 00:05:12,260 la version tweeter Bootstrap de este contador. 95 00:05:12,670 --> 00:05:13,750 Así que es muy fácil. 96 00:05:14,040 --> 00:05:15,940 Voy a construir una subclase de mi contador anterior 97 00:05:16,140 --> 00:05:21,070 que voy a llamar "WATwitterCounter" Paso 98 00:05:21,270 --> 00:05:25,790 al lado clase de esta clase 99 00:05:26,220 --> 00:05:28,260 y defino el método initialize en el que 100 00:05:28,460 --> 00:05:31,930 voy a declarar cuidado que este componente utiliza la 101 00:05:32,130 --> 00:05:33,350 biblioteca TbsDevelopmentLibrary, JQDeploymentLibrary. 102 00:05:37,720 --> 00:05:42,180 Así que es el Framework Javascript y el Framework CSS. 103 00:05:46,000 --> 00:05:50,190 Luego volveré al lado instancia de esta clase y 104 00:05:50,390 --> 00:05:52,130 voy definir el nuevo método renderCounterOn, podéis 105 00:05:52,330 --> 00:05:54,750 volver a definir la que habíamos definido anteriormente, 106 00:05:55,270 --> 00:05:57,500 y voy a utilizar unos pinceles que empiezan todos por Tbs. 107 00:05:58,470 --> 00:06:01,780 Así que TbsButtongroup, TbsButton, etc. ect... 108 00:06:02,490 --> 00:06:05,320 Pero esto no va a cambiar nada de mi código clásico así que es 109 00:06:05,520 --> 00:06:10,060 siempre unos Callback puedes ver con self increase, y self decrease. 110 00:06:10,400 --> 00:06:11,160 Esto no cambia absolutamente nada. 111 00:06:11,370 --> 00:06:16,280 De acuerdo! son solo los pinceles de renderizado del código 112 00:06:16,480 --> 00:06:18,050 HTML los que utilizan Tbs. 113 00:06:19,740 --> 00:06:22,420 Ahora podemos ver la nueva apariencia de mi Contador. 114 00:06:22,660 --> 00:06:25,850 Podemos ver que he utilizado un ButtonGroup con 2 botones + 115 00:06:26,050 --> 00:06:28,740 y -, hay un bonito badge para mostrar el valor del 116 00:06:28,940 --> 00:06:31,220 Counter que es la versión Bootstrap de my contador. 117 00:06:34,600 --> 00:06:36,600 Pero de hecho podéis ir aun mas lejos, no estáis 118 00:06:36,800 --> 00:06:38,430 obligados a utilizar BootStrap podéis definir 119 00:06:38,630 --> 00:06:40,860 vuestras propias reglas de estilo en vuestro contador. 120 00:06:41,140 --> 00:06:45,750 Por ejemplo Aquí he decidido de decir que todos los elementos 121 00:06:46,110 --> 00:06:50,180 impares odd, tendrán la clase odd. 122 00:06:51,470 --> 00:06:53,500 De hecho cada vez que devuelvo el valor de mi 123 00:06:53,700 --> 00:06:57,950 Contador Aquí bajo la forma de tbsBadge, así que 124 00:06:58,150 --> 00:06:59,390 ¿que va a mostrarse? 125 00:06:59,590 --> 00:07:02,020 Sera el valor de mi contador, salvo que voy 126 00:07:02,220 --> 00:07:06,860 a añadir la clase CSS odd Aquí, solo si el valor 127 00:07:07,060 --> 00:07:08,550 es impar. De acuerdo! 128 00:07:08,750 --> 00:07:09,570 Así que Aquí 7. 129 00:07:10,810 --> 00:07:14,270 Así que esta clase CSS se añadirá solo si cumple esta condición. 130 00:07:16,290 --> 00:07:18,440 Puesto que he definido la clase CSS odd. 131 00:07:18,830 --> 00:07:21,940 De hecho puedo definir el método style en mi contador 132 00:07:22,140 --> 00:07:23,940 que devolverá una cadena de caracteres con las reglas de 133 00:07:24,140 --> 00:07:25,300 estilo CSS que se aplicaran. 134 00:07:25,500 --> 00:07:27,030 Así que point odd color red. 135 00:07:27,230 --> 00:07:30,050 Y el valor de contador pasara a rojo en caso de ser impar. 136 00:07:31,490 --> 00:07:34,940 Como conclusión: un componente, una aplicación Web 137 00:07:35,150 --> 00:07:37,230 Seaside es un componente raíz. 138 00:07:37,840 --> 00:07:40,610 Todos los componentes saben como mostrarse en HTML gracias al 139 00:07:40,810 --> 00:07:43,950 método renderContenOn. Y disponemos de un lenguaje dedicado 140 00:07:44,150 --> 00:07:48,220 extremadamente potente y extensible que permite de escribir 141 00:07:48,420 --> 00:07:51,370 la generación de código HTML muy fácilmente, gracias a 142 00:07:51,570 --> 00:07:55,940 los pinceles y gracias a su extensibilidad para soportar 143 00:07:56,140 --> 00:07:58,720 los Framework CSS existente, tales como BootStrap, jQuery 144 00:07:58,920 --> 00:07:59,720 UI, ect... ect... 145 00:08:00,850 --> 00:08:03,680 Y podréis aprovechar de toda la potencia del 146 00:08:03,880 --> 00:08:06,000 lenguaje Pharo, los bucles ect... ect... 147 00:08:06,200 --> 00:08:07,810 podremos generar fácilmente un conjunto de elementos.