Introdução
Nesse artigo vamos falar sobre o Dojo Toolkit. Para aqueles que nunca ouviram falar, Dojo Toolkit é uma biblioteca JavaScript de código aberto criada para facilitar os desenvolvedores, dando praticidades ao desenvolverem suas aplicações web, de maneira rápida e fácil, e possibilitando mais interatividade entre usuário e aplicações.
Como foi dito, o Dojo é gratuito e sua documentação oficial pode ser encontrada no link http://dojotoolkit.org/api/. Nesse artigo teremos uma breve introdução ao uso dessa biblioteca, fornecendo as informações básicas necessárias ao leitor que deseje iniciar a integração do Dojo com suas aplicações web.
Formas de usar o Dojo Toolkit
Para utilizar as funcionalidades da biblioteca é necessário referenciar um arquivo js, através de uma tag script no head da página. Para isso, existem duas formas básicas.
1º forma: Utilizando um servidor de entrega Web de conteúdo (CDN). Essa é a forma mais pratica de estar utilizando o Dojo Toolkit, porque dessa maneira não é necessário instalar nada, pois será utilizado um servidor de redes de entrega de conteúdo.
Os servidores indicados são os da AOL e da Google.
Listagem 1: Direcionando para o CDN da AOL
<script Type="text/javascript">
SRC = "http://o.aolcdn.com/dojo/1.8.1/dojo/dojo.xd.js"/>
</script>
Listagem 2: Direcionando para o CDN da Google
<script Type= ”text/javascript”> Src=”http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js”>
</script>
Agora, para a segunda forma de utilizar o Dojo Toolkit, vamos ter de fazer o download do Dojo através do seguinte link: http://dojotoolkit.org/download/. Nessa página encontraremos a seguinte seção:
Figura 1: Download do Dojo Toolkit 1.8
Após o download ser concluído, vamos descompactar e teremos as seguintes pastas.
Figura 2: Pastas após descompactar Dojo Toolkit 1.8
- Dojo: Essa pasta possui arquivos com funcionalidades básicas, tais como ligações de métodos remotos, fazer manipulação DOM e também estilização através de Cascading Style Sheets (CSS). O Dojo suporta também recursos de animação e funções de arrastar e soltar.
- Dijit: É a pasta que contém a biblioteca de Widgets, construída em cima da base do Dojo. Fornece exemplos de Widgets acessíveis não apenas para controle de elementos simples, mas também para Widgets avançados, como por exemplo, controle de calendários, menus, barra de ferramentas, barras de progresso, tabelas e gráficos.
- Dojox: É pasta que contem o container responsável pelo desenvolvimento de extensões para o Dojo Toolkit. Esse container atua como uma incubadora de novas ideias e um teste para funções experimentais para o Kit de ferramentas principal, bem como um repositório de extensões estável e madura.
Vamos ver agora a segunda maneira de utilizar o Dojo Toolkit, para isso precisamos de um servidor web local. Para aqueles que não conhecem esse servidor local, ele pode ser criado com o Wamp Server, por exemplo, que é de fácil download e instalação. Agora para chamar o Dojo vamos por o seguinte código dentro da tag <head>.
Listagem 3: Referenciando o Dojo localmente
<script Type=”text/javascript” src=”js/dojo/dojo.js”/>
O Dojo Toolkit é dividido em vários arquivos, mas uma vez que o Dojo.js seja carregado , todos os outros arquivos serão carregados automaticamente.
Praticando
Vamos aprender um pouco mais agora sobre o Dojo na prática. No exemplo a seguir vamos ter quatro botões e ao passarmos o mouse sobre deles irá aparecer uma mensagem em posicionamentos diferentes.
- Botão 1 : em cima
- Botão 2 : embaixo
- Botão 3 : à direita
- Botão 4 : à esquerda
Para que possamos entender melhor, o código desse exemplo será dividido em partes.
Listagem 4: Carregando a folha de estilos
<head>
<title>Demo: Mixed Tooltip Usages</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<!—Fim carregamento folha de estilo -->
Podemos optar por carregar essa folha de estilos utilizando um servido de entrega web (CDN), pois dessa forma não precisamos ter nada instalado.
Agora vamos carregar o Dojo.
Listagem 5: Carregando o Dojo Toolkit
<script src=http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js data-dojo-config="parseOnLoad: true"></script>
<script>
dojo.require("dijit.Tooltip");
</script>
Carregamos o Dojo, também através de um servidor de entrega web (CDN),
e usamos o Dojo.require para carregar o que vamos utilizar, nesse caso o “dijit.Tooltip”. O Tooltip serve para exibir pequenas mensagens, como dicas.
Agora vamos criar os botões e configurar a mensagem que vai ser exibida através do atributo “tooltip”.
Listagem 6: Criando os botões e configurações do Tooltip
<body class="claro">
<h1>Dica: Posicionamentos diferente.</h1>
<h2> Utilizando (dijit.form.Button), para criar dicas </h2>
<button id="tooltipButton1" onmouseover="dijit.Tooltip.defaultPosition=['above', 'below']">Botao 1</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipButton'">Dica <strong>acima</strong> do botao</span></div>
<button id="tooltipButton2" onmouseover="dijit.Tooltip.defaultPosition=['below','above']">Botao 2</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipButton2'">Dica <strong>Abaixo</strong> do botao</span></div>
<button id="tooltipButton3" onmouseover="dijit.Tooltip.defaultPosition=['after','before']">Botao 3</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipButton3'"> Dica <strong> a direita</strong> do botao</span></div>
<button id="tooltipButton4" onmouseover="dijit.Tooltip.defaultPosition=['before','after']">Botao 4</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipButton4'">Dica <strong> a esquerda </strong> do botao</span></div>
</body>
Assim terminamos de criar nosso exemplo, vamos ver como ficou.
Figura 3: Botão 1 com Tooltip em cima
Figura 4: Botão 2 comTooltip embaixo
Figura 5: Botão 3 comTooltip à direita
Figura 6: Botão 4 com Tooltip à esquerda
Podemos ver que de acordo com a criação de cada botão a dica foi exibida em uma posição diferente.
Conclusão
O Dojo Toolkit não fornece apenas ferramentas necessárias para realizar tarefas básicas, mas também fornece suporte a vários navegadores (Cross-Browsers), é flexível, personalizável e possui Widgets. Nesse artigo foi mostrada apenas uma das várias funcionalidades que essa biblioteca possui.
Assim concluímos mais um artigo, o qual espero que seja de agrado de todos os leitores. Fiquem à vontade para deixarem suas duvidas, perguntas, sugestões e temas para novos artigos.
Abraço a todos e até o próximo.
