Como funciona a bilblioteca JAVASCRIPT DOJO?

Graças a Deus pela criatividade dos Web Designers programadores neste mundo! E principalmente por aqueles que criam códigos reutilizáveis e os compartilham gratuitamente. É o caso da biblioteca Javascript DOJO que vem com uma montanha de utilitários (widgets) para que os web designers criativos não precisem gastar dias ou meses programando para adicionar funcionalidades Javascript nos seus projetos WEB. Não vou usar minha capacidade de ignorância para transmitir a idéia de que exista apenas o DOJO com esta finalidade, sei que paralelamente estão em atividade as bibliotecas MochiKit, YUI, JQuery, EXT, GWT… Porém apenas posso comentar e dizer que é boa aquela que conheço e utilizo 🙂 .

Legal… mas o que o dojo faz?

Como dito anteriormente o dojo traz um cargamaço de widget‘s (utilitários de interface) e funcionalidades que podem ser facilmente adicionados às páginas HTML. O melhor de tudo, com uma dúzia de linhas de código Javascript você pode instalar um widget à página, com um código limpo, nada de misturanga de scripts e HTML. A figura abaixo mostra um exemplo de widget que gera um quadro que pode ter o conteúdo dividido por Abas. Uma boa parte destes recursos são úteis em ferramentas da área administrativa, ou para a implementação de WEB services.

Exemplo de WIDGET DOJO com Abas


No que tange a funcionalidades, tenho utilizado o serviço de ajax do DOJO, que funciona muito bem e é compatível com os browsers que aceitam objetos xmlHttpRequest. Em outra oportunidade poderemos ver como utilizá-lo, particularmente achei muito prático poder enviar dados via POST com o ajax do dojo. Se você ainda não conhece AJAX e seus benefícios visite nesta página o link: Desmistificando o temível AJAX!.

Usar o DOJO requer:

Download da biblioteca, existem várias opções  em http://dojotoolkit.org/downloads

As principais são a versão compacta, e a versão com os fontes (src). Sempre opto pela opção src, assim posso dar uma olhada nos fontes quando tenho dúvidas. Mas na hora de colocar no servidor, aí é claro que convém utilizar a versão compacta. Localize a última versão  em:

downloads > All downloads > Download latest Stable Release (1.2.3) >

dojo-release-1.2.3-src.zip  [versão com fontes]

dojo-release-1.2.3.zip [versão sem fontes]

Nos exemplos acima considerei a versão 1.2.3, quando for atualizado óbviamente constará diferente disso.

A biblioteca pode ser descompactada em qualquer diretório do computador. Para quem já tem servidor instalado na máquina, recomendo extrair para htdocs ou www.

Uma vez “downloadeado”, pode-se acessar diretamente nas pastas os diversos testes de exemplo que estão previamente preparados para experimentos iniciais de quem pretende utilizar a biblioteca. Tais exemplos estão dispostos em arquivos HTML e distribuídos em uma série de diretórios dentro da pasta principal que contém os arquivos do dojo, quando de-zipada. A maneira mais prática de encontrá-los é através de uma pesquisa pelo sistema de arquivos, solicitando apenas aqueles com extensão “.html”, e com nome iniciado por “test_”. Veja na figura 2 um exemplo de pesquisa executada no windows vista que retornou os arquivos desejados. No resultado desta pesquisa bastaria um clique duplo sobre o arquivo test_Calendar.html para abrir no browser o exemplo de uma interface de calendário muito amigável gerada pelo DOJO.

Figura 2

Estes exemplos não somente proporcionam uma clara visão do resultado como permitem que o usuário abra o código fonte para entender a estrutura HTML e Javascript da interface.

Na prática… ô parte boa!

Para nosso estudo de um widget vou escolher o arquivo de exemplo “test_Tooltip.html”. Tooltip é o utilitário usado para criar aqueles balões estilosos que descrevem algum objeto presente na página. Na figura 3 é mostrado um tooltip em ação que traz comentários sobre a caixa de texto #1. Infelizmente a seta do mouse não foi capturada no printscreen, mas ela estava posicionada sobre a caixa de texto à esquerda do balão.
figura 3

Examinando detalhadamente o arquivo “test_Tooltip.html” vamos encontrar no cabeçalho o seguinte script:

<script type=”text/javascriptsrc=”../../dojo/dojo.js
djConfig=”parseOnLoad: true, isDebug: false“></script>
<script type=”text/javascript” src=”_testCommon.js“></script>

<script type=”text/javascript“>
dojo.require(“dijit.Tooltip”);
dojo.require(“dojo.parser”);// find widgets

dojo.addOnLoad(function(){
console.log(“on load func”);
var tt = new dijit.Tooltip({label:”programmatically created tooltip”,
connectId:[“programmaticTest”]});
console.log(“created”, tt, tt.id);
});
</script>

Passo a passo:

<script type=”text/javascriptsrc=”../../dojo/dojo.js

Inicia pela referência ao arquivo que é o núcleo da referida biblioteca. Se dojo.js não for encontrado, os widgets não irão funcionar.

djConfig=”parseOnLoad: true, isDebug: false“></script>

O atributo
djConfig recebe configurações de comportamento que definem como o dojo vai interpretar este arquivo. O primeiro parâmetro parseOnLoad que é setado como true, informa que o dojo precisa “farejar” o HTML em busca de widgets. Ou seja, quando a página for carregada o dojo irá varrer todo o HTML da página, e identificar quais tags lhe pertencem, quais são as que contém widgets dojo. As tags identificadas precisam ser trabalhadas dinamicamente para que o comportamento delas se altere segundo as definições para o widget nela contido. O segundo parâmetro isDebug, se for setado como true irá acrescentar um console de erros a página para identificar possíveis problemas com os widgets. Este console é precioso para quem estiver trabalhando com Internet Explorer, pois até a versão 7 do IE as informações sobre erros de Javascript são bastante incompletas. Antes de publicar a página não esqueça de desativar o console do dojo (isDebug:false), para evitar que ele fique aparecendo inconvenientemente ao público geral.


<script type=”text/javascript” src=”_testCommon.js“></script>
Aqui trata-se de um script específico para o teste do tooltip.

<script type=”text/javascript“>
dojo.require(“dijit.Tooltip”);
dojo.require(“dojo.parser”);// find widgets

Carregamento dinâmico das ferramentas da biblioteca: de fato apenas dojo.js é essencial em todas as tarefas baseadas nesta biblioteca. As demais podem ser carregadas dinamicamente de acordo com a necessidade através de dojo.require. Isto colabora com a leveza do carregamento da página toda. Assim, no caso acima estão sendo invocadas as ferramentas para tooltip, e o parser, que é o farejador de widgets no meio do HTML. Nas linhas anteriores, em djConfig=”parseOnLoad: true foi configurado para que o parser atue quando a página for carregada, agora a ferramenta parser está sendo carregada através de require. Se não for carregada os widgets não funcionam (não será possível encontrar os coelhos na toca sem o cão farejador).

Até aqui foram vistos carregamentos de ferramentas básicas e suas configurações, agora começa um pouco de ação:

dojo.addOnLoad(function(){
console.log(“on load func”);
var tt = new dijit.Tooltip({label:”programmatically created tooltip”,
connectId:[“programmaticTest”]});
console.log(“created”, tt, tt.id);
});
</script>

Acima é criada uma função javascript, que será executada quando a página estiver toda carregada. Esta função cria dinamicamente um tooltip e informa no console se a criação foi bem sucedida. O mais interessante de tudo aqui, é a ferramenta dojo.addOnLoad.  Com ela pode-se criar qualquer função dentro de addOnLoad que precise ser executada quando a página for carregada. Experimente algo assim:

dojo.addOnLoad(function(){ alert(“oii”); });

Isto faria que alert(“oii”) fosse executado assim que a página terminasse de ser carregada.

Agora o HTML dos WIDGET’S:

<input type=”input” id=”id1″ value=”#1″>
<span dojoType=”dijit.Tooltip” connectId=”id1″>tooltip para a caixa 1</span>

A primeira tag “<input…” é uma tag normal que, por exemplo, pode ser a entrada de dados para um formulário, observe que esta input é identificada pelo id “id1”. Logo abaixo a tag “<span” também é uma tag normal html, porém neste caso foi acrescido a ela o atributo dojType, este atributo indica que esta tag contém um widget dojo. Assim quando o parser encontrar esta tag detectará que trata-se de um widget dojo, e o dojo tomará as devidas providências para que este widget funcione. Basicamente este widget providencia o tooltip para a tag input. O texto contido na tag span (“tooltip para a caixa 1”) é o texto que irá aparecer dentro do balão tooltip, quando o mouse estiver sobre a caixa de texto id1. Por que as duas tags estão ligadas pela referência no atributo connectId da tag span. É importante perceber que aqui, no meio do html não foi requerido nenhum script especial, pois o dojo já efetua todas as tarefas de montagem quando a página for carregada, e depois fica aguardando apenas que os eventos (click, mouseover…) aconteçam. Assim, se fossem atribuídos 10 tooltip’s para outras 10 tag’s input, nenhuma nova linha de javascript seria requerida para isto.

Bom, por hoje é só.

Tags: , , , , , , , ,

3 Responses to “Como funciona a bilblioteca JAVASCRIPT DOJO?”

  1. Marlon Says:

    Leonir parabéns pelo post, muito bom. Continua compartilhando teus conhecimentos.

  2. Joao Says:

    Olá Leonir parabens pelo Post 🙂

    Gostaria de saber se o dojo tem algo parecido com o alert do javascript?

    Eu tentei usar o dialog mas quando ele fecha a janela o form fica sem poder utiliza-lo 😦

    Abraços

  3. jorge Says:

    Obrigado, vc me ajudou muito. valeu!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: