Hoje em dia não podemos pensar em aplicações web sem o uso de Javascript, por isso nada mais natural do que o aparecimento de diversas bibliotecas ou frameworks que facilitem a utilização da mesma. Entre essas bibliotecas está a jQuery, a mais conhecida, tanto que alguns desenvolvedores não conhecem outras. Seguindo esse preceito, esse artigo abordará de maneira simples uma apresentação de outra biblioteca Javascript, a Dojo Toolkit.
Olá! Eu sou o Dojo Toolkit
Como já foi mencionado, o Dojo Toolkit é uma biblioteca Javascript que traz muito mais produtividade ao desenvolvimento de nossas aplicações. Veja algumas características da mesma:
- Código aberto.
- Modular.
- Sintaxe simplificada.
- Funções para chamadas AJAX.
- Componentes gráficos.
- Efeitos visuais.
- Validações.
Esses recursos podem nos proporcionar um código mais legível e com muito menos linhas. No decorrer desse artigo iremos ver estes recursos na prática.
Dojo VS jQuery
É impossível não fazermos uma comparação com a biblioteca jQuery. Nesse contexto podemos dizer que o Dojo ToolKit é menos extensível do que a outra, porém, seu escopo é muito maior, enquanto o jQuery é mais leve para o navegador, sendo que não podemos esquecer dos inúmeros plugins para jQuery que existem tornando esta tão completa quanto o Dojo Toolkit .
É importante resaltar também que o Dojo é modular, ou seja, podemos carregar apenas os componentes que formos utilizar.
Portanto, podemos dizer que a escolha de qual usar depende do projeto em que será aplicado.
Baixando e Testando o Dojo Toolkit
Para baixarmos a versão mais atual da biblioteca basta clicar no link http://dojotoolkit.org/download/ e baixar a versão em formato zip. No momento de escrita desse post a versão 1.7.3 é a mais recente.
Ao descompactar o zip baixado você terá três pastas.
Podemos usar também a versão do Goolge CDN pelo endereço http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js.
Vejamos na Listagem 1 um exemplo simples, famoso Hello World, incorporando pelo endereço do Google.
Listagem 1: Hello World com oDojo Toolkit.
<!DOCTYPE html>
<html>
<head>
<title>Hello Dojo</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>
<script>
dojo.ready(function(){
var element = dojo.byId("id");
element.innerHTML = "Hello World";
});
</script>
</head>
<body>
<h1 id="id"></h1>
</body>
</html>
Analisando o código da Listagem 1 temos que primeiro importamos a biblioteca e logo depois usamos a função ready() que é executada logo depois que a pagina termina de ser carregada, depois usamos byId() para capturarmos o elemento com id igual a “id” e, por fim, usamos o propriedade innerHTMl para inserir a string “Hello World” dentro do elemento.
Vamos aprofundar um pouquinho, realizando um dos processos mais comuns do uso de Javascript, uma chamada AJAX.
Teste de chamada AJAX
Para realizar o exemplo a seguir irei usar a versão que baixamos. Então, primeiro coloque as pastas descompactadas dentro do diretório /hellodojo/js/ de modo que você terá de criar estes, devendo ficar como na Figura 1. Usarei uma página em PHP para fazer o papel do servidor para o qual nossa chamada AJAX apontará.
Figura 1: Estrutura de pastas para o exemplo
Agora crie um arquivo chamado index.html dentro de /dojo com o conteúdo da Listagem 2.
Listagem 2: Conteúdo do arquivo índex.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Dojo!</title>
<!-- load Dojo -->
<script src="js/dojo/dojo.js"></script>
<script>
require(["dojo/_base/xhr", "dojo/on", "dojo/dom", "dojo/domReady!"],
function(xhr, on, dom) {
xhr.get({
url: "getMensagem.php",
handleAs: "json",
load: function(data) {
dom.byId("msg").innerHTML = data.msg;
},
error: function() {
dom.byId("msg").innerHTML = "Ops! Erro.";
},
preventCache: true
});
});
</script>
</head>
<body>
<div id="msg"></div>
</body>
</html>
No código da Listagem 2 estamos fazendo uso da função get() do objeto xhr para fazer a chamada assíncrona à pagina getMensagem.php setada na propriedade url. Em handleAs, definimos o formato como “json”, dessa forma a string enviada pelo servidor será convertida em objeto(lembre-se que a string deve ser no formato json). Finalmente inserimos a mensagem vinda do servidor no elemento selecionado pelo id “msg” com byId(). Em error configuramos o comportamento para quando houver erro na chamada.
Agora crie o arquivo getMensagem.php dentro da pasta /dojo com o conteúdo da Listagem 3.
Listagem 3: Conteúdo do arquivo getMensagem.php.
<?php
$variavel = array("msg"=>"Hello World! AJAX.");
echo json_encode($variavel);
?>
O código da Listagem 3 é muito simples, temos um array com a posição “msg” que tem o valor “Hello World! AJAX.”. Na linha seguinte escrevemos o nosso array convertido para o formato json.
Então...
Bem, fico por aqui. Espero que esse artigo tenha despertado a sua curiosidade sobre essa biblioteca. Caso isso tenha acontecido, vocês podem ter acesso à documentação no próprio site do projeto http://dojotoolkit.org/documentation/. Comentem, compartilhem e me corrijam caso eu tenha cometido algum erro.
