Usando DOJO Toolkit com o Visual Studio 2008

Neste artigo é fornecer um ponto de partida para a utilização do DOJO toolkit no desenvolvimento de aplicações Web. Tentarei apresentar da forma mais simples como podemos utilizar o DOJO, desde a sua configuração até a sua aplicação em projetos Web.

Requisitos

Obviamente precisamos possuir o DOJO toolkit. Como o DOJO é totalmente livre, você poderá baixar sua versão mais recente através http://dojotoolkit.org/downloads.


Criando uma Web Application com o Visual Studio

Para iniciarmos nosso mini projeto criaremos uma solução no Visual Studio com um projeto Asp .net Web Application, conforme podemos verificar abaixo:

Configurando o DOJO no Visual Studio

Após descompactar o arquivo baixado na internet com o DOJO serão apresentadas quatro pastas (dijit, dojo, dojox e util). Entretanto, para o nosso projeto iremos utilizar apenas as pastas dijit e dojo. Para nosso projeto iremos criar uma pasta chamada jscripts e copiar para ela as pastas dijit e dojo. O projeto deverá ficar com a aparência abaixo:

Aplicando DOJO na Web Page

Depois de configurado poderemos iniciar a utilização dos recursos do DOJO em nosso projeto. Primeiramente vamos configurar o head da página.

Na primeira seção iremos utilizar o tema soria.css existente no pacote dijit. Existem outros temas no pacote utils, mas para este exemplo iremos utilizar o soria.css. Após a primeira seção foi inserido um elemento script que será o responsável por carregar o script base do DOJO que permitirá a utilização de todas as funcionalidades do DOJO.

Na segunda seção iremos inclui no elemento script o comando dojo.require. Essa instrução irá instrui o DOJO a carregar os buttons Widgets usados na nossa página. Se essa linha for omitida esta linha, o código de marcação para o botão não seria avaliada pelo DOJO após o carregamento, resultando em um botão HTML simples ao invés do que você espera.

Para concluir o head criaremos duas funções CallBack. Para isso, incluiremos um novo elemento script com as funções helloCallback e helloError. A chamada a essas funções será descrita mais adiante. Os dois parametros utilizados nas funções (data e ioArgs) são importantes. O primeiro argumento contém os dados enviados do servidor, enquanto o segundo argumento contém um Dojo I/O objeto Bind. No nosso projeto iremos utilizar apenas o primeiro parâmetro.

Ligando um evento a um Widget Button

Com o DOJO configurado e as funções implementadas iremos criar as chamadas paras essas funções de duas maneiras. Na primeira iremos utilizar a função alert, e a segunda será utilizada a função dojo.xhrGet. O primeiro apenas retornará uma mensagem, enquanto que o segundo submete uma requisição a um servidor qualquer.

Um detalhe importante a utilização dessas funções é a inclusão do script dentro do corpo da tag. Com isso, você pode aproveitar toda a potência do DOM Level 2 events dentro do script.

A função alert será invocada quando o primeiro botão for pressionado, apresentando a mensagem 'Você pressionou o botão'. Entretanto, para utilização da função dojo.xhrGet será necessário a utilização de uma página aspx que simulará nosso servidor neste exemplo. O novo Web Form será definido como ResponseGET.aspx e todo o source será substituído pelo script abaixo:

Pronto, nosso servidor está pronto para responder as solicitações requisitadas.

A função dojo.xhrGet possui os parâmetros:

url: Definirá o servidor onde que será enviada a requisição;
load: Método que receberá a resposta do servidor;
error: Método que receberá possíveis erros nas respostas do servidor;
content: responsável por enviar o valores necessários para o servidor;

Conclusão

Quando a aplicação for executada o serão apresentados dois botões e o caixa de entrada. O primeiro botão irá apresentar uma simples mensagem. Entretanto, o segundo botão irá apresentar o texto contido na caixa de entrada. Neste caso a aplicação através da função xhrGet irá passar o valor informado para a página ResponseGet.aspx que está simulando nosso servidor. Essa por sua vez irá apenas retornar esse valor para a aplicação. A aplicação receberá o retorno através do parâmetro data definido na função HelloCallBack.
Este foi apenas uma pequena demonstração de como podemos utilizar o DOJO. Nele existem inúmeras funcionalidades que poderemos descrever em novos artigos.