MouseOver Studio

Dojo Offline é uma extensão da famosa livraria Dojo que tem como finalidade facilitar a criação de aplicações web que conseguem funcionar mesmo o usuário não estiver conectado na rede. Dojo Offline utiliza o Google Gears e não somente isso, também expande ele criando uma API mais completa e fácil de ser utilizada.

Nesse tutorial aprenderemos e implementaremos uma funcionalidade de um sistema de scraps similar ao do Orkut que funcione estando offline. A versão do Dojo a ser utilizada é a 0.9.0 . Também precisaremos do plugin do Google Gears.

O primeiro passo para poder trabalhar com Dojo Offline é importar os arquivos necessários. Precisaremos do dojo/dojo.js e dojox/off/offline.js. No meu caso, o código fica da seguinte maneira:

<script type=\"text/javascript\"
src=\"../../inc/dojo-0.9.0/dojo/dojo.js\"
djConfig=\"isDebug: true\"></script>
<script type=\"text/javascript\"
src=\"../../inc/dojo-0.9.0/dojox/off/offline.js\"></script>

Definimos o valor da propriedade isDebug do objeto djConfig como true para que assim o Dojo saiba que tem que imprimir as mensagens de debug, caso exista algum erro ou nos o solicitemos. Quando acabemos de desenvolver nossa aplicação, poderemos mudar o valor para false.

Dentro de aqueles arquivo offline.js que acabamos de importar esta definido um widget que tem como função informar o usuário do estado da aplicação (online ou offline) e do processo de sincronização, assim como oferecer mensagens de ajuda sobre como utilizar o sistema. Ao ser carregado o arquivo, uma instrução dentro dele procurara por um elemento com id “dot-widget” e convertera ele no widget mencionado anteriormente. Por tanto, para inserir nosso widget na nossa pagina somente temos que inserir o seguinte código na seção desejada:

<div id=\"dot-widget\"></div>

Criaremos agora um arquivo .js onde teremos nossas instruções em JavaScript. Por agora o código vai ser o seguinte:

dojo.require("dojo.parser");
dojox.off.ui.appName = "Scraps";
dojox.off.files.slurp();
dojo.connect(dojox.off.ui, "onLoad", "initScraps");
dojox.off.initialize();

function initScraps() {

	if(!dojox.off.isOnline){
		displayData();
	}

	dojo.connect(dojox.off.sync, "onSync",
			function(type) {
				if (type == "download") {
					dojox.storage.put("scraps", getData());
					dojox.off.sync.finishedDownloading();
				} else if (type == "finished") {
					displayData();
				}
			}
	)

	dojo.connect(dojox.off.sync.actions, "onReplay",
			function(action, actionLog) {
				/* */
				actionLog.continueReplay();
			}
	)
}

function replyOnline(id) {
	/* */
}

function replyOffline(id) {
	var answer = dojo.byId("answer" + id);
	var action = {
		name: "reply",
		data : {
			message: answer.value,
			receiver: answer.getAttribute("receiver")
		}
	}
	dojox.off.sync.actions.add(action);
	dojox.off.sync.actions.add(action);
}

Nosso script começa com a importação do parser do Dojo, encarregado por recorrer os nodos HTML e partir de eles criar widgets quando for necessário. Nosso primeiro contato com Dojo Offline ocorre na segunda linha, quando definimos um nome pra nossa aplicação. Nessa oportunidade nossa aplicação se chamara “Scraps”. Dojo Offline utiliza o nome da aplicação para ser mostrado em algumas frases do widget, como por exemplo “Aprenda a utilizar Scraps offline”. Depois de definir o nome da nossa aplicação, passaremos a chamar o método slurp. O método slurp tem como finalidade reconhecer os arquivos necessários pela aplicação e descarregar eles, de modo que possam ser acessados quando não estivermos online.

Cuando Dojo Offline terminar de ser carregado, um evento onLoad será chamado. Quando o método onLoad terminar de ser executado, queremos que seja chamada nossa função initScraps, que teŕa algumas instruções que precisam ser seguidas somente depois do Dojo Offline ter carregado com sucesso. Conseguiremos fazer isso com dojo.connect, encarregado de conectar eventos de forma simples.

Analisaremos agora nossa função initScraps, que basicamente conecta outros dois eventos (onSync e onReplay) a dois funções nossas.

Quando algum usuário entrar na nossa aplicação, Dojo Offline tentara sincronizar a versão local da aplicação com a versão do servidor. Nesse momento será executado o método onSync. O método onSync esta composto por cinco fases, mas por agora somente nos interessam duas. A primeira fase que nos interessa é a fase donwload. Na fase download o programa se encarrega de descarregar alguns dados do servidor para serem utilizados no cliente. A descarga de dados acontecerá na função getData(). Depois de descarregar nossos dados, o que temos que fazer é salvar eles em algum lugar, de modo que se o usuário desligar o computador e entrar em outra ocasião estando offline, eles estejam disponíveis. Para salvar nossos dados e que eles possam ser acessados mesmo o usuário tiver desligado o computador utilizamos o dojo.storage, que é nada menos que uma tabela hash que utiliza o sistema de storage persistente do Google Gears. Seguidamente chamamos o método finishedDownloading que informará ao Dojo Offline que os dados terminaram de ser descarregados e que podemos passar a seguinte fase (finished) onde mostraremos ao usuário os dados que foram descarregados. Essa ultima ação é realizada na função displayData().

Dentro da função displayData o que faremos é recuperar a data descarregada do servidor. Na aplicação Scraps, aquela data é um vetor de scraps, onde cada scrap é um objeto. Para cada scrap o que fazemos é mostrar a mensagem e seguidamente inserimos um textarea onde podemos escrever uma resposta. Do lado do textarea esta posicionado um botão que serve como trigger para enviar nossa mensagem. Dependendo do estado da nossa conexão, o processo a seguir quando for ativado o botão vai ser diferente. Se estivermos online, para enviar a resposta basta com utilizar Ajax e pronto, mas que acontece se estivermos offline? Para complicar um pouco mais, como vamos saber se estamos offline ou online? Para ressolver esse problema, Dojo Offline oferece uma propriedade booleana chamada isOnline. Se o valor da propiedade isOnline for true, chamaremos a função replyOnline. Caso contrario, chamaremos a função replyOffline. O código de criação de nosso botão fica assim:

var button = document.createElement("input");
button.type = "button";
button.value = "Responder";
dojo.connect(button, "onclick",
	function() {
		if (dojox.off.isOnline) {
			replyOnline(scrapId);
		} else {
			replyOffline(scrapId);
		}
	}
)

Quando realizemos algum evento offline que queremos que seja realizado posteriormente no servidor temos que criar uma ação. Uma ação é nada mais que um objeto que representa aquele evento e contem informação sobre ele. Na função replyOffline criamos uma ação e colocamos dentro dela a mensagem escrita e o id da pessoa que vai receber ela. Aquela ação e salvada logo no actionLog:

function replyOffline(id) {
	var answer = dojo.byId("answer" + id);
	var action = {
		name: "reply",
		data : {
			message: answer.value,
			receiver: answer.getAttribute("receiver")
		}
	}
	dojox.off.sync.actions.add(action);
	answer.parentNode.innerHTML = "A resposta sera enviada quando o sistema ficar online.";
}

Quando Dojo Offline percebe que o estado do usuário mudou de offline pra online, ele chama automaticamente o método onReplay, encarregado de sincronizar o servidor de acordo a as ações criadas. Na função initScraps conectamos aquele método com uma função nossa, na qual recebemos dois parâmetros: a ação atual e o actionLog. Depois de fazer o desejado com a ação, chamamos o método continueReplay do actionLog, que ira chamar novamente nossa função mais com a seguinte ação disponível.

No começo da explicação da função initScraps vimos que quando um usuário entrar na aplicação ele ira descarregar os dados e posteriormente serão mostrados, mas que acontece si o usuário estiver offline? Nesse caso teremos que mostrar os dados que forom descarregados anteriormente. Como ja sabemos, aquele processo é realizado na função displayData, a qual e chamada desde um começo se o usuário estiver offline.

Nosso script terminou e como podem observar, não implementamos a comunicação do cliente com o servidor. Decidi não colocar a comunicação no tutorial para que o código fique mais curto e seja mais fácil de entender, mas num futuro poderíamos ir completando ele.

Espero que o tutorial tinha sido do agrado de todos. Felizmente o código é muito simples e ajuda o entendimento. Si tiverem alguma duvida não duvidem em perguntar que eu responderei com muito prazer. O código completo do script pode ser acessado aqui. Para testar o resultado, podem entrar aqui.