O template é dividido em alguns blocos conceituais: descrição, variáveis de integração e outros elementos.

O bloco de descrição possui os seguintes campos, relacionados ao gadget: distribuidor (vendor), nome (name), versão atual (version), autor (author), endereço de email do autor (mail), uma breve descrição do gadget (description), endereço da imagem do gadget para exibição no catálogo (imageuri) e endereço para maiores informações sobre o gadget (wikiuri).

A descrição segue o seguinte formato:

<Catalog.ResourceDescription>
  <Vendor>IMEUSP</Vendor>
  <Name>Nome do Gadget</Name>
  <Version>1.0</Version>
  <Author>Rafael</Author>
  <Mail>rafael.suguiura@gmail.com</Mail>
  <Description>
    Este é um exemplo de uma breve descrição do gadget.
  </Description>
  <ImageURI>http://servidor/imagem.png</ImageURI>
  <WikiURI>http://servidor/wiki</WikiURI>
</Catalog.ResourceDescription>
						

O bloco de variáveis de integração é composto por quatro seções: preferências, propriedades de estado, vinculação e contexto.

Preferências podem ser mudadas através da interface oferecida pela plataforma. Cada preferência possui, obrigatoriamente: o nome da preferência (name), que será usado para referenciar a variável no gadget; o rótulo (label), que identificará a preferência na interface ao usuário; a descrição da preferência (description); e o tipo (type), que pode ser texto, número, booleano, senha ou lista. Caso a preferência seja do tipo lista, ela poderá conter um número qualquer de opções, sendo que cada opção deverá conter um nome e um valor associado. Por exemplo, posso limitar o acesso a servidores Tetrinet apenas aos que estiverem na lista:

<Platform.Preferences>
  <Preference
    name="nick"
    type="text"
    description="Apelido"
    label="Apelido"
  />
  <Preference
    name="host"
    type="list"
    description="Servidor"
    label="Endereço do servidor"
  >
    <Option name="Jetrix(localhost)" value="127.0.0.1:31457"/>
    <Option name="TetriNET.no" value="tetrinet.no:31457"/>
  </Preference>
</Platform.Preferences>
						

Já as propriedades de estado são variáveis em que a plataforma permite que valores do gadgets sejam persistidos para cada usuário. Cada propriedade de estado contém os atributos nome, tipo e rótulo, semelhantes aos da preferência, exceto pelo fato do único tipo aceito ser texto. Por exemplo, poderíamos armazenar o IP e a data do último acesso do usuário com o seguinte:

<Platform.StateProperties>
  <Property name="ip" type="text" label="IP do último acesso"/>
  <Property name="date" type="text" label="Data do último acesso"/>
</Platform.StateProperties>
						

As variáveis de vinculação abre canais de comunicação entre gadgets. Existem dois tipos de variáveis de vinculação, o slot, variável esta que recebe mensagens de events, e event, que as envia. Cada variável de vinculação possui os campos nome, tipo, rótulo e código de correspondência (friendcode). Assim como as propriedades de estado, o único tipo aceito é texto. O código de correspondência permite que variáveis de vinculação correspondentes possam ser encontrados mais facilmente através da identificação do código de correspondência das variáveis de vinculação dos outros gadgets. Podemos pegar como exemplo um gadget de chat que envia e recebe mensagens de texto:

<Platform.Wiring>
  <Slot name="income" type="text" label="Message" friendcode="msg"/>
  <Event name="outcome" type="text" label="Message" friendcode="msg"/>
</Platform.Wiring>
						

Um detalhe é que é possível vincular dois gadgets mesmo com códigos de correspondência diferentes.

As variáveis de contexto permitem obter informações sobre o ambiente, sendo ContextGadget a variável que disponibiliza informações sobre o próprio gadget e Context, a que disponibiliza informações externas, sobre a plataforma. Ambas as variáveis possuem tres atributos: nome, tipo e conceito (concept). Aqui, o tipo aceita apenas texto como valor. O conceito provê a semântica à variável, Atualmente, apenas altura (height) e largura (width) são oferecidas para o contexto do gadget, e nome de usuário (user_name) e idioma (language), para o contexto da plataforma. Exemplo:

<Platform.Context>
  <Context name="user" type="text" concept="user_name"/>
  <Context name="language" type="text" concept="language"/>
  <GadgetContext name="height" type="text" concept="height"/>
  <GadgetContext name="width" type="text" concept="width"/>
</Platform.Context>
						

Os outros elementos do template são o endereço do código, que possui um elemento, o XHTML, com apenas o atributo href, que é a referência ao código do gadget; e a renderização, que contém os atributos altura e largura do gadget. Exemplo:

<Platform.Link>
  <XHTML href="http://servidor/gadget.html" />
</Platform.Link>
<Platform.Rendering width=“5" height="7" />
						

A implementação do gadget na plataforma utiliza o JavaScript para a utilização das variáveis descritas no template. As variáveis são acessíveis através de uma biblioteca, também em JavaScript, fornecida pela plataforma, o EzWebAPI.

A API dispõe de dois métodos para tratamento das variáveis: o createRGadgetVariable, para criação de objetos para variáveis de leitura apenas e createRWGadgetVariable, para leitura e escrita. Os dois métodos tem o nome da variável como parâmetro. Porém, o método createRGadgetVariable recebe um segundo parâmetro que é uma função de tratamento. Essa função é chamada sempre que há uma mudança de valor da variável ao qual está associada. Quando isso acontece, ela é chamada com um parametro, o novo valor desta variável.

As variáveis de leitura apenas são o slot, as variáveis de preferência, e as de contexto. Já as variáveis de leitura e escrita são o event e as de propriedades de estado.

O objeto devolvido por esses métodos possuem o método get e, para as variáveis de escrita, o método set. Este possui um parâmetro, o novo valor da variável, enquanto aquele não possui parametros, mas devolve o valor da variável.

Assim, para as variáveis de propriedades de estado do exemplo da seção anterior, posso obter o valor do IP anterior e atribuir um novo valor da seguinte forma:

var ipVariable = EzWebAPI.createRWGadgetVariable("ip");
var oldIpValue = ipVariable.get();
var newIpValue = "127.0.0.1";
ipVariable.set(newIpValue);
						

Já um código para o tratamento da variável de contexto, também tomando o exemplo da seção anterior, é o seguinte:

var handler = function (username)
{
  alert("Olá, " + username + "!");
};
var userVariable = EzWebAPI.createRGadgetVariable("user", handler);
						

Um objeto XMLHttpResquest permite a comunicação do cliente com o servidor através das chamadas HTTP usando métodos post, get, put e delete. Porém, devido a questões de segurança, essas chamadas são restritas apenas ao mesmo domínio da página. Contudo, com o uso do serviço da plataforma EzWeb como intermediário, é possível contornar tal restrição utilizando respectivos métodos que a biblioteca também disponibiliza: send_post, send_get, send_put e send_delete.

O jQuery é uma biblioteca JavaScript que oferece açúcares sintáticos para obter elementos DOM, tratamento de eventos, animação e AJAX. Com a biblioteca, é possível selecionar elementos DOM usando a sintaxe da linguagem CSS. A documentação mais detalhada pode ser encontrada no site do jQuery em http://docs.jquery.com/, mas uma breve descrição dos comandos mais utilizados vem a seguir:

$("div")

Seleciona todos os elementos do tipo "div".

$("div.box")

Seleciona todos os elementos do tipo "div" cuja classe é "box".

$("div #username")

Seleciona todos os elementos descendentes de algum elemento "div", cujo ID é "username".

$("div #username").css("background", "blue")

Para todos os elementos selecionados, muda o atributo "background" do CSS para "blue".

$("div #username").html("<input type='text' name='username'>")

Açúcar sintático para $("div #username").innerHTML(...).

O TinyURL oferece um serviço de redução de links, recebendo um endereço e devolvendo um código correspondente, único e determinístico.

Para facilitar a organização da implementação, o código JavaScript deste gadget foi dividido em três arquivos: ezweb.js, app.js e url.js. O ezweb.js é um açúcar sintático para a criação de variáveis do EzWeb, disponibilizando a função createGadgetVariable, cujos parâmetros são o nome da variável EzWeb e opcionalmente um método de tratamento (caso esse método seja dado, ele tenta criar uma variável de leitura apenas; caso contrário, ele tenta criar uma variável de leitura e escrita); o app.js faz todo o controle do aplicativo; e url.js faz o tratamento das variáveis do EzWeb:

url.js:

// Cria o namespace CONNECTOR, caso não exista.
var CONNECTOR = CONNECTOR || {};

// Instancia o objeto assim que todo o documento estiver pronto.
$(document).ready(function(){CONNECTOR.url = new CONNECTOR.Url();});

// Construtor.
CONNECTOR.Url = function()
{
  this.wire = EZWEB.createGadgetVariable("urlIn", this.handler);
  this.wire = EZWEB.createGadgetVariable("urlOut");
};

// Trata o URL recebido de algum outro gadget.
CONNECTOR.Url.prototype.handler = function(url)
{
  TINYURL.app.load(url);
};

// Envia o URL para outro gadget.
CONNECTOR.Url.prototype.send = function(url)
{
  this.wire.set(url);
}
						

app.js:

// Cria o namespace TINYURL, caso não exista.
var TINYURL = TINYURL || {};

// Instancia o objeto assim que todo o documento estiver pronto.
$(document).ready(function(){TINYURL.app = new TINYURL.App();});

// Construtor.
TINYURL.App = function()
{
  this.element = $("#tinyurl");
};

// Escreve o html no elemento.
TINYURL.App.prototype.html = function(html)
{
  this.element.html(html);
};

// Envia uma mensagem para o send_get e, caso seja executado com sucesso,
// chame o método tryGet. Caso contrário, chame o método this.catchGet.
TINYURL.App.prototype.load = function(url)
{
  var requestURL = "http://tinyurl.com/api-create.php?url=" + url;
  this.html("<p>Loading...</p>");
  EzWebAPI.send_get(requestURL, this, this.tryGet, this.catchGet);
};

TINYURL.App.prototype.tryGet = function(res)
{
  var url = res.responseText;
  var html = '<a href="javascript:CONNECTOR.url.send(\'" + url + "\');">';
  html += url;
  html += '</a>';
  this.html(html);
};

TINYURL.App.prototype.catchGet = function(res)
{
  this.html("Error: could not get the url!");
};
						

Note que o método load se utiliza da intermediação do serviço da plataforma para realizar uma requisição em outro domínio, o do TinyURL. A resposta é dada em um texto simples e sem formatação.

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet"
      href="/files/tinyurl/style.css">

    <!-- libraries -->
    <script type="text/javascript"
      src="/files/EzWebAPI.js">
    </script>
    <script type="text/javascript"
      src="/files/jquery-1.3.2.min.js">
    </script>

    <!-- utilities -->
    <script type="text/javascript"
      src="/files/ezweb.js">
    </script>
    <!-- application -->
    <script type="text/javascript"
      src="/files/tinyurl/app.js">
    </script>
    <!-- connectors -->
    <script type="text/javascript"
      src="/files/tinyurl/connector/url.js">
    </script>
  </head>

  <body>
    <div id="tinyurl"></div>
  </body>
</html>
						

template.xml:

<Template schemaLocation="http://morfeo-project.org/2007/Template">
  <Catalog.ResourceDescription>
    <Name>TinyURL</Name>
    <Version>1.1</Version>
    <Author>Rafael</Author>
    <Mail>rafael.suguiura@gmail.com</Mail>
    <Vendor>IMEUSP</Vendor>
    <Description>A TinyURL generator</Description>
    <ImageURI>/files/tinyurl/image.png</ImageURI>
    <WikiURI>http://www.ime.usp.br/</WikiURI>
  </Catalog.ResourceDescription>

  <Platform.Wiring>
    <Slot name="urlIn" type="text" label="url" friendcode="url" />
    <Event name="urlOut" type="text" label="url" friendcode="url" />
  </Platform.Wiring>

  <Platform.Link>
    <XHTML href="/files/tinyurl/index.html" />
  </Platform.Link>
  <Platform.Rendering width="3" height="3" />
</Template>
						

Para adicionar o gadget ao catálogo da plataforma, é preciso clicar na opção "Development Options", na aba "Add Gagets". O endereço do template deve ser colocado na entrada de texto de "Template URL" e, em seguida, adicionado ao catálogo ao se clicar em "Create resource".

O jogo foi dividido em componentes, sendo que cada componente, representada por um gadget, responde a uma funcionalidade específica do jogo.

Orbited

Gadget para a camada de comunicação com o servidor Orbited, disponibilizando as mensagens recebidas para outros gadgets.

Tetrinet

Gadget que interpreta e distribui as mensagens recebidas. Este gadget também armazena informações pertinentes ao jogo como um todo, como o nome, o time e o campo de cada usuário.

TetrisEngine

Implementação da mecânica do jogo.

TetrisInterface

Interface para a interação com o usuário. Cabe a este gadget interceptar os comandos de jogo dados pelo usuário, dados pelo teclado.

TetrisFields

Exibe os campos dos jogadores.

Logger

Exibe eventos de texto.

Sender

Envia mensagens para a sala de bate-papo.

List

Exibe uma lista de itens.

A comunicação é feita através do protocolo TCP. Os comandos utilizados na comunicação deste projeto são os seguintes:

noconnecting

Mensagem dada pelo servidor, caso a conexão do cliente não possa ser estabelecida.

playernum

Assim que o cliente conecta ao servidor, o cliente recebe um número entre 1 e 6 para a identificação do jogador.

playerjoin

Sinaliza a entrada de um jogador.

playerleave

Sinaliza a saída de um jogador.

disconnect

Envia a mensagem ao servidor, avisando que o cliente está desconectando.

pline

Comando para o envio e recebimento de mensagens dos usuários na sala de bate-papo.

plineact

Semelhante ao pline, mas ao invés de mensagens, o texto é exibido no formato de ações.

startgame

Inicia ou termina um jogo de acordo com o parâmetro utilizado.

pause

Pausa ou continua o jogo, caso este estiver pausado.

f

Envia ou recebe o conteúdo de um campo.

sb

Envia ou recebe um bloco especial.

Assim que o canal de comunicação é aberta, a conversa é iniciada enviando um código inicial, resultado de uma função hash que usa como parâmetros o IP do cliente e a concatenação que identifica a versão do cliente com o apelido do jogador. Este código não possui um comando associado e é enviado na mesma forma que foi gerado. Porém, um jogador não pode conectar no servidor caso já exista um outro jogador já conectado com o mesmo apelido que ele escolheu. Caso isto ocorra, o jogador que não conseguir conectar é notificado através da mensagem dada pelo comando noconnecting.

Caso o cliente consiga conectar com sucesso, o cliente recebe o número de identificação através do comando playernum. Se o jogador possuir o menor número de identificação, este obtém a responsabilidade de iniciar, pausar ou parar um jogo. Porém, se ele possuir esta responsabilidade e um outro jogador conectar ao servidor, sendo notificado através do playerjoin, e obter um número de identificação menor, então estas operações passam a ser responsabilidades deste novo jogador. O oposto também ocorre, quando um jogador fica com o menor número de identificação quando outro jogador, que mantinha o menor número de identificação, sair, sendo esta operação notificada pelo comando playerleave.

Durante todo o momento em que o jogador permanecer conectado, ele pode enviar e receber mensagens e realizar e notificar ações na sala de bate-papo, através dos comandos pline e plineact, respectivamente.

Com um jogo iniciado, através de startgame, cada cliente envia o estado do seu campo usando o comando f. O parâmetro de f pode ter duas formas: uma cadeia de caracteres sendo que cada caracter representa um bloco da serialização simples de um campo; ou a diferença do campo anterior com o campo atual, contendo os códigos e as posições dos blocos que foram modificados.

O envio de um bloco especial pode ser feito a qualquer momento, enquanto o jogador ainda estiver em jogo e possuir blocos especiais na fila, com o comando sb. O bloco é ativado quando o jogador pressionar o número correspondente ao jogador alvo. Cada bloco especial é descrito a seguir:

a

Adiciona uma linha ao jogador alvo. Esta linha é preenchida de blocos normais, com a exceção de 1, 2 ou 3 posições, que são deixados vazios (blocos vazios), e é adicionada na parte de baixo do campo, descolando todas as linhas já existentes para cima. Caso a linha do topo possuir algum bloco, o jogador perde o jogo.

c

Em oposição ao bloco especial "a", este bloco especial remove a linha de baixo e desloca todas as linhas uma posição abaixo.

n

Remove todos os blocos do campo, transformando-os em blocos vazios.

r

Remove até 10 blocos, em posições aleatórias, do campo.

s

Troca de campo com outro jogador.

b

Transforma todos os blocos especiais do campo alvo em blocos normais.

g

Aplica o efeito de gravidade. Move todos os blocos do campo uma posição abaixo, caso esta posição estiver vazia, até que não haja um bloco com uma posição vazia abaixo dele.

q

Para cada linha, desloca a linha no sentido horizontal, circularmente, em uma a três posições.

o

Para cada bloco especial "o" que estiver no campo alvo, desloca os blocos adjacentes a ele para posições aleatórias no campo.

O jogo de um jogador termina na condição do bloco especial "a" ou quando não for possível movimentar um bloco a partir de sua posição inicial. Quando todos os jogadores oponentes perderem, o jogador ou a equipe que permanecer é declarado ganhador da partida.

A implementação da interface do usuário para cada gadget foi feita buscando-se exibir apenas as informações relevantes ao usuário. Todo o tratamento de elementos no documento foi feito utilizando o arcabouço jQuery e da linguagem de estilos CSS. A seguir, segue uma descrição sobre a implementação de cada gadget:

Orbited

As únicas ações permitidas ao usuário, neste gadget, são as ações de conectar e desconectar, em botões que se alternam. Porém, para tanto, é preciso escolher e salvar previamente em qual servidor ele deseja se conectar no menu de preferências do gadget. Além dos botões, são exibidos mensagens de alerta e estado da conexão.

Tetrinet

Este gadget possui campos para preenchimento de apelido e equipe. O campo apelido deve ser preenchido antes que a conexão do Orbited seja efetuada. Assim que a conexão seja feita, o campo apelido é bloqueado e, caso o jogador seja responsável pelo controle de jogo, o botão start é exibido e, quando estiver em jogo, este botão é ocultado e os botões pause e stop são exibidos, sendo que pause é alternado com unpause quando o jogo for pausado e vice-versa.

TetrisEngine

Exibe o estado do jogo e os tetrominos atual e próximo.

TetrisInterface

Exibe o campo de tetris do jogador. Também é este gadget que recebe os eventos do teclado.

TetrisFields

Exibe o campo de tetris de todos os jogadores.

Logger

Apenas exibe mensagens de outros gadgets, com a adição da data e do horário do recebimento.

Sender

Possui apenas um campo de entrada de texto, sendo que este é enviado assim que o enter é pressionado.

List

Exibe duas lista, uma lista de jogadores conectados e outra lista de blocos especiais disponíveis.

À parte da implementação do gadget responsável pelo tratamento da comunicação entre outros gadgets na plataforma foi dado o nome de conector. Um conector realiza o envio e o tratamento das mensagens recebidas com relação a apenas um dos gadgets com que o gadget se comunica.

Abaixo estão as descrições dos dados enviados pelos gadgets, por pares que trocam informações bidirecionalmente:

Orbited ↔ Tetrinet

Mensagens do protocolo usado pelo Tetrinet.

Tetrinet ↔ Partyline

Troca de mensagens de texto simples.

Tetrinet ↔ TetrisEngine

Ações de comando da mecânica do jogo, como início e fim de jogo, atualizações de campo e blocos especiais.

TetrisEngine ↔ TetrisInterface

Atualizações de campo e comandos do jogo.

Algumas comunicações unidirecionais são as seguintes:

Tetrinet → PlayerList

Lista de nome dos jogadores.

Tetrinet → TetrisField

Serialização do estado de um campo.

TetrisEngine → SpecialList

Lista de blocos especiais.