SWT (Squeak Web Toolkit) - Algo más para mostrar: Ping-Pong

Las cosas van tomando su fomar y ahora el framework (SWT) nos permite hacer algunos ejemplos divertidos. Les voy a mostrar uno de los ejemplos incluidos en SWT: Ping Pong.

El ejemplo Ping-Pong es, según creo, el caso más simple de uso del SWT que, a su vez, muestra las características interesantes del framework.

Uhhh... cuanta introducción... mejor vamos directamente al grano.

Para utilizar el framework empezamos creando 2 clases: SWTPingPongClientApplication y SWTPingPongServerApplication.

La primera (SWTPingPongClientApplication) es subclase de SWTClientApplication. La segunda (SWTPingPongServerApplication) es subclase de SWTServerApplication.

Según el SWT, una "aplicación" está partida entre su parte Client y su parte Server.

La parte Client (en nuestro ejemplo: SWTPingPongClientApplication) se traduce a código Javascript (usando el ST2JS) y se ejecuta en el browser de Internet. Por otro lado, la parte Server (SWTPingPongServerApplication) se ejecuta en el Squeak.

Por cada browser (de Internet) conectado, tendremos un par de instancias (la Server y la Client) que se mantienen "unidas" por el framework.

Cuando estamos en el Client, podemos enviar mensajes a la parte Server de la siguiente forma:

self serverSide foo.

De forma análoga, cuando estamos en el Server podemos enviar mensajes a la parte Client de la siguiente forma:

self clientSide bar.

La parte Client, al enviarle el mensaje #serverSide, nos devuelve un Proxy que reenvía los mensajes al Squeak usando JSON-RPC. Por otro lado, la parte Server, cuando le envíamos el mensaje #clientSide nos devuelve un Proxy que reenvía los mensajes recibidos, al Cliente, usando la conexión Comet.

Con esto ya sabemos lo suficiente para ver el código del ejemplo Ping-Pong.

La parte Client de nuestro ejemplo (SWTPingPongClientApplication) tiene sólo 2 métodos, veamos el primero:

initializeWidgets "Initialize the receiver's widgets" | root | root := self rootWidget. root addWidget: (SWTHeader level: 2 contents: 'Ping Pong'). root addWidget: (SWTButton caption: 'ping server' onClick: [:event | self serverSide ping]).

Allí vemos como se crean 2 widgets: Un Header y un Button. Si, lo sé... no es nada espectacular... pero lo interesante está dentro del evento #onClick del botón:

self serverSide ping

Cuando hagamos click sobre el botón, el mensaje #ping se evaluará, ¡pero del lado del servidor!. Veamos entonces la implementación de #ping en el Server (SWTPingPongServerApplication).

ping Transcript show: 'ping!'; cr. self clientSide pong.

Este método, además de mostrar algo en el Transcript, devuelve el "favor" a su contraparte Client en la última línea.

Ahora, para terminar, veamos la implementación de #pong en lado Client (SWTPingPongClientApplication).

pong ^ self inform: 'pong!'

Si les gustó, miren este Screencast