Apresentando o Dojo Toolkit

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Veja nesse artigo uma apresentação da biblioteca Javascript Dojo Toolkit, suas características, como baixa-la ou usa-la diretamente da web, uma rápida comparação com a famosa biblioteca jQuery e por fim exemplos de operações básicas.

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á.

Estrutura de pastas para o exemplo

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.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?