Mi cursada - UNQ‎ > ‎Clases‎ > ‎Bitácoras‎ > ‎Bitácoras 2011 S1‎ > ‎Bitacoras 2012 1c‎ > ‎

Clase Seaside - 23/05/2012

publicado a la‎(s)‎ 23 may. 2012 15:11 por gisela decuzzi   [ actualizado el 23 may. 2012 15:44 ]

Seaside

Metafora que usa Seaside 

Canvas: el lugar donde "pintamos" (el lienzo)
Brush: es un pincel, donde basicamente son las herramientas que usamos para dibujar en el canvas. Podemos decir que lo que en wicket decimos componentes aca lo vamos a llamar como pinceles. Por ejemplo un combo, textbox ...
Los brushes tienen mucha relacion con el html, de hecho la mayoria de los tags html tienen un pincel asociado, por ejemplo el div
Componentes: un componente es algo que se sabe mostrar.
Implementa el mensaje #renderContentOn: recibe un canvas y utiliza los pinceles para pintar en ese lienzo

Hoy vamos a ver:

1. Como crear un componente
2. Como pintar en el canvas con los brushes
3. Como se pueden comunicar los componentes


Trabajando en Seaside

La forma más facil de obtener seaside es: Bajandose la imagen del site de seaside que ya viene con todo instalado (pero no es la ultima versión de Pharo, es la imagen 1.2).

Para levantar el server: Desde Seaside Control Panel lo iniciamos o lo paramos
Para agregar una nueva aplicacion:
podemos desde la imagen de pharo definiendo el initialize en clase de nuestro componente para registrar la aplicación.
desde el browser entrando a /browse -> eligiendo /config

Vimos como un ejemplo la ruleta (que tanto queremos ya), la vista tenia:
- JugadorView
- RuletaView
- CasilleroView

Todos estos componentes se saben mostras, por lo que implementan el mensaje renderContentOn:
Vimos el ejemplo del jugador:
JugadorView>>renderContentOn: canvas
canvas heading level3 with: 'Dale jugá pibe'

Comparamos la diferencia entre:
canvas print: '<h1>Hola</h1>'
canvas heading: 'hola'

Y notamos que en la segunda alternativa nos independizamos de la clase del canvas, podriamos estar haciendo una aplicacion de escritorio o una web u otra cosa y la responsabilidad de renderizarce como corresponda esta en el canvas.

Vimos la RuletaView>>
renderContentOn: canvas
canvas heading: 'Ruleta'.
canvas div
class: '#ruleta';
with: [self casilleros do: [:casillero | canvas render: casillero]].
canvas div 
class: #form;
with: self form.

Despues de hablar un rato sobre los componentes dijimos que podiamos categorizar los metodos en tres:
  • Cosas de configuración pura
  • Cuando el objeto se muestra
  • cuando el objeto se modifica (su comportamiento)
Cosas de configuracion: particular de Seaside, por ejemplo los métodos
  • style:sirve para definir los estilos de esa clase
  • children: los hijos que tiene el componente (los sub-componentes que tenemos)
  • states: los objetos de los que queremos acordarnos

CasilleroView>>renderContentOn: canvas
canvas span
class: '#casillero';
with: [
canvas anchor
callback: [self ruleta comenzarApuesta: (CIUPleno a: self casillero)];
with: self casillero numero
]

El callback: es el comportamiento que quiero que se ejecute cuando alguien clickee el link, el codigo dentro del bloque se puede ejecutar codigo server side.
El concepto Clave de esto es continuations (que se escapa a la materia pero quizas sirva para empezar a buscar sopbre como es que esto es implementable)

CIUApostarTask >> renderContentOn: canvas
canvas heading level3 with: 'Creando nueva apuesta'.
canvas text: 'elija un tipo de apuesta'.
cavas select
list: CIUApuesta apuestasPosibles;
on: #apuesta of: self.
Jugamos con las continuations y la posibilidad de hacer cosas distintas cuando las usamos, vimos el onAnswer: y jugamos un poco con ellos. Implementamos una Task y definimos el método go para solucionar problemas que teniamos con la solución anterior.









Comments