BLOG::Nivaldo » Dojo Toolkit

Entrevista para a revista TI DIGITAL

Nivaldo Arruda — Mon, 18 May 2009 23:29:18 +0000

Fui convidado pela jornalista Flávia Freire a participar de uma entrevista para a matéria “Frameworks Javascript: Conheça os prós e os contras dos 10 mais populares“, que ela estava escrevendo. Como não podia deixar de ser, eu falei sobre o Dojo Toolkit. A matéria saiu na edição número 3 da revista TI DIGITAL.

Revista TI DIGITAL n° 3

Agora como um bom nerd, algumas considerações sobre a revista (que acabei de ler).

Distribuição: Ao menos aqui em Curitiba-PR, foi um tanto complicado de achar a revista na banca. Eu tive que mandar um email para a editora e eles me passaram alguns endereços de algumas bancas. Segue:

R.NILO PECANHA,n.1000

R.BOM JESUS,n.1032

RUA CEL. LUIZ JOSE DOS SANTOS,n.201

R.DES.WESTPHALEN C/ R.PEDRO IVO

RUA PEDRO IVO,n.600 (Comprei a minha aqui)

R.XV DE NOVEMBRO ESQ.MONS.CELSO

Conteúdo: O conteúdo da revista é bastante variado. Nenhum tipo de “preconceito” com nenhuma linguagem. Nessa edição, fora a matéria dos frameworks javascript, tem também uma sobre ASP.NET , outra sobre ActionScript e também Ruby on Rails. Falam um pouco sobre SEO e tem uma matéria sobre o jogo brasileiro: Capoeira Legends (Que parece ser bem legal, vou atrás depois para conhecer melhor).
Publicidade: Uma quantidade bem interessante de propaganda. Não atrapalha a leitura da revista e nem te deixa injuriado. ^^
Preço: Apenas R$7,90! Vale a apena comprar uma para você tirar suas próprias conclusões

Então é isso. Agradeço a Equipe da TI DIGITAL pela oportunidade e espero que tenham gostado da minha pequena contribuição.

Posts relacionados:

InlineEditBox alternando para FilteringSelect – DojoToolKit Criar os InlineEditBox (aqueles campos que se mostram como texto,...
Integrando o Zend Framework com o Dojo – Parte II Nessa segunda parte do tutorial, vou exemplificar um form utilizando...
Integrando o Zend Framework com o Dojo – Parte III Dando continuidade a nossa integração, vamos dar uma rapida olhada...

Integrando o Zend Framework com o Dojo – Parte III

Nivaldo Arruda — Mon, 16 Feb 2009 22:17:04 +0000

Dando continuidade a nossa integração, vamos dar uma rapida olhada na criação de layouts utilizando o dojo toolkit. Basicamente ele vai construir todos os blocos que formam o seu layout. Criando os DIVs com os IDs que você definir (que terão o estilo presente no css). O código final fica bem interessante e você já vai se habituando a utilizar os helper dos dojos e seus view.

Para esse exemplo, vamos utilizar novamente o Zend_Layout para abstrair o nosso html. Exemplo:

teste.phtml




    
	dojo()->isEnabled()){
            $this->dojo()->setLocalPath('/js/dojo/dojo.js')
                         ->setDjConfig(array(
                                          'parseOnLoad' => true,
                                          'extraLocale' => array('pt-br', 'en-us')
                                       ))
                         ->addStyleSheetModule('dijit.themes.nihilo');
        }
	?>

	dojo(); ?>


borderContainer()->captureStart('corpo', array('design' => 'headline'));

/* CABEÇALHO: INICIO */
echo $this->contentPane(
    'cabecalho',
    'TESTE DE LAYOUT COM DOJO'
);
/* CABEÇALHO: FIM */

/* BARRAS_EXTRAS: INICIO */
echo $this->contentPane(
    'caixa_mensagem',
    'CAIXA DE MENSAGEM'
);
/* BARRAS_EXTRAS: FIM */

/* CONTEUDO: INICIO */
echo $this->contentPane(
    'conteudo',
    $this->layout()->content
    .$this->inlineScript()
);
/* CONTEUDO: FIM */

/* MENU LATERAL: INICIO */
$barra_lateral =  $this->contentPane(
    'menu_lateral',
    'Opções

Opção 1
Opção 2
Opção 3
Opção 4
Opção 5


'
);

echo $this->contentPane(
    'box_menu_lateral',
     $barra_lateral
);
/* MENU LATERAL: FIM */
echo $this->borderContainer()->captureEnd('corpo');
/* CORPO: FIM */
?>

Explicando um pouco essa sopa de código. Logo no início do arquivo, adicionamos o Dojo em nosso layout e setamos para que ele utilize o tema chamado “nihilo”. É um tema bem interessante, para se trabalhar em escala de cinza.

Na sequência, criamos um “borderContainer” Start. Desse trecho, até o “borderContainer” End, ele vai capturar todo o código e jogara dentro de um div chamado “corpo”.

Seguindo a ordem das coisas, o próximo elemento a ser criado é o cabeçalho, seguido pela barra de mensagens. O “conteudo” e a “barra_lateral” são os próximos da lista. Eles ficarão um ao lado do outro (veremos isso logo a seguir no css).

Se você já percebeu o padrão de uso, o primeiro parametro do elemento é sempre o seu ID enquanto o segundo é o seu valor.

É o elemento “conteudo”:

/* CONTEUDO: INICIO */
echo $this->contentPane(
    'conteudo',
    $this->layout()->content
    .$this->inlineScript()
);
/* CONTEUDO: FIM */

que irá receber a saída da view do seu sistema. Os outros DIVs estão com os valores fixo, mas eles podem ser facilmente substituidos utilizando “placeholders” ou algum helper (para criar o menu por exemplo).

Para testar perfeitamente esse código, crie também esse arquivo de estilo:

teste.css

/* TAGS GENERICAS:INICIO */
body{font:12px verdana,arial,tahoma;background:#ffffff;}
ul{list-style:none;}
h3{font:13px verdana,arial,tahoma;color: #7172A3;font-weight: bold}
/* TAGS GENERICAS:FIM */

/* ELEMENTOS DO LAYOUT:INICIO */
#cabecalho{height: 40px; color: #ffffff; background-color: #794256;font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;font-size: 22px;padding: 10px;}
#caixa_mensagem{color: gray; background-color: #fffbcc;font-family: verdana, arial;font-size: 11px;padding: 10px;border-top: 1px solid #e6db55;border-bottom: 1px solid #e6db55;margin-top: 2px}
#caixa_mensagem div{height: 15px;}
#conteudo{float: left; background-color: black; padding: 3px;margin-top: 3px}
#menu_lateral{background-color: silver; padding: 3px;}
#box_menu_lateral{float: right; width: 230px; background-color: black; padding: 3px;margin-left: 10px;margin-top: 3px}
/* ELEMENTOS DO LAYOUT:FIM */

Se tudo correu bem, você terá algo parecido com isso:

Exemplo de layout com dojo

*OBS: O texto dessa screenshot está na view que chamei.

Por fim, acredito que fora o carater educativo do dojo layout é possivel se virar muito bem sem ele. Mas para um sistema totalmente integrado e interativo com dojo, ele é fundamental. Mas se me permitem uma ultima dica: Utilizem esse aprendizado apenas nas views e deixe o dojo layout amadurecer mais.

Posts relacionados:

Integrando o Zend Framework com o Dojo – Parte II Nessa segunda parte do tutorial, vou exemplificar um form utilizando...
Dojo Toolkit (ajax): Submetendo um form via POST Irei demonstrar nesse pequeno tutorial, como é fácil enviar os...
Integrando o Zend Framework com o Dojo Bom, como me bati um pouco para achar boas informações...

Dojo Toolkit (ajax): Submetendo um form via POST

Nivaldo Arruda — Sun, 08 Feb 2009 13:33:48 +0000

Irei demonstrar nesse pequeno tutorial, como é fácil enviar os dados de um formulário pelo método POST, utilizando o Dojo Toolkit para gerenciar as requisições http (xhr ou ajax).

Para o nosso exemplo, crie essa função genérica para envio dos dados:

function enviaForm(formulario_url, formulario_id){
	var config = {
	        url: formulario_url,
	        load: function(data){
			 /* retorno da informação. Você pode chamar uma outra função aqui para processar os dados de retorno da requisição, que estão contido na váriavel "data" */
	        },
	        error: function(data){
	                console.debug("An error occurred: ", data); /*Em caso de erro joga no console*/
	        },
	        timeout: 2000, //timeout da operação
	        form: formulario_id
	};

	dojo.xhrPost(config); /* Executa a requisição  */

}

Como vocês já devem ter percebido, é uma função bem pequena e simples (apesar de bastante útil). Acredito que só com os comentários contidos nela, você já consiga identificar o que cada bloco de comando é responsável em tratar. Para executa-la, é só adicionar sua chamada em um evento de sua preferência. Como por exemplo:

	Enviar dados

Aonde:

/mamifero/cadastrar é a url que você enviará os dados do formulário.

Simples não? Utilizando uma função genérica desse tipo, fica bem mais tranquilo trabalhar em sistemas dinâmicos. Principalmente se você der uma pequena implementada no atributo “load” (criando uma função genérica de tratamento de erros/mensagens, por exemplo) e com seus scripts server-sides sempre retornando dados padronizados, você consegue um bom resultado com apenas 2 pequenas funções.

Posts relacionados:

Integrando o Zend Framework com o Dojo – Parte III Dando continuidade a nossa integração, vamos dar uma rapida olhada...
Otimizando o Dojo Toolkit Se você já está usando o Dojo ou começou com...
Dojo (dojox) DataGrid Hoje vou apenas exemplificar a criação de um Dojox Datagrid....

Otimizando o Dojo Toolkit

Nivaldo Arruda — Thu, 27 Nov 2008 22:14:09 +0000

Se você já está usando o Dojo ou começou com seus testes, já deve ter percebido o quão pesado um simples formulário pode ser. Se você utilizar uns três ou quatro tipos diferentes de campos no form, o dojo facilmente realizará uns 20 request de arquivos em javascript.

Isso passa a ser um problema, pois a cada vez que você carregar a mesma tela, a biblioteca irá requisitar os mesmos arquivos novamente. Para resolver isso o dojo conta com uma funcionalidade chamada “Layer”, com ela, você pode empacotar alguns módulos em apenas um arquivo javascript, depois disso é só incluir esse script na sua página e pronto ^^ . O dojo, por ser extremamente modularizado, continuará requisitando os arquivos que não estão nesse pacote, mas daí o número de request caí para uns 5. Em uns testes meus, eu consegui sair de 64 request para apenas 18 (e desses 18, três eram de dados json).

Como Utilizar

Vamos precisar de apenas 3 passos.

Baixar os fontes do Dojo toolkit. Lembre-se de pegar os pacotes que terminar com “-src”
Configurar um arquivo de profile e utilizá-lo para o buildscript empacotar seus dados
Adicionar a chamada da layer no seu layout do Zend Framework

Passo 1:

Espero que já tenha sido resolvido nas linhas acima

Passo 2:

Após descompactar os fontes do Dojo Toolkit, entre no diretório:
dojo-release-1.2.1-src\util\buildscripts\profiles
e crie um arquivo chamado exemplo.profile.js com o seguinte conteúdo:

dependencies ={
    layers:  [
        {
        name: "../dojo/exemplo.js",
	  layerDependencies: [
	  ],
        dependencies: [
		"dojo.i18n",
		"dijit.form.FilteringSelect",
		"dijit.form.ValidationTextbox",
		"dojo.data.ItemFileReadStore",
		"dijit.form.NumberSpinner",
		"dijit.form.CurrencyTextbox",
		"dijit.form.Textarea",
		"dijit.form.Button",
		"dijit.form.Form",
		"dojo.data.ItemFileReadStore",
        ]
        }
    ],
    prefixes: [
        [ "dijit", "../dijit" ],
        [ "dojox", "../dojox" ]
     ]
};

A var “name” indica aonde o arquivo empacotado será criado. Em “dependencies” você irá definir todos os módulos que gostaria de empacotar. Com esse que listei, cheguei no resultado que comentei no começo do post. Em “prefixes“, você define o caminho dos diretórios das API que irá utilizar (esse caminho é o padrão que vem dentro do zip).

Depois de pronto, é só executar o script que irá gerar seu pacote. Detalhe, o buildscript utiliza java para esse fim, então certifique-se que o tenha instalado.

build.bat profile=exemplo action=release loader=”default” optimize=”shrinksafe” layerOptimize=”shrinksafe” copyTestes=”false” version=”1.2.1″

Após executar esse comando (demora um bocado, vai depender da sua máquina), será criada uma pasta chamada “Dojo” dentro do caminho: dojo-release-1.2.1-src\release
entre nela e copie o arquivo: dojo-release-1.2.1-src\release\dojo\dojo\exemplo.js para dentro da pasta dojo de sua aplicação. Você deve ter percebido que o script gerou toda a estrutura do dojo/dijit/dojox, você não precisa necessariamente utilizar essas pastas, pode utilizar a que já existe (se for o caso), sempre atento as versões.

Passo 3

Com o arquivo exemplo.js no local correto, está na hora de integrar ele no seu Zend Framework. Para isso, adicione a seguinte linha no seu load do dojo.

->addLayer('/js/dojo/exemplo.js')

seu código final deve ficar alguma coisa parecedida com isso:

   $this->dojo()->setLocalPath('/js/dojo/dojo.js')
       		       ->addLayer('/js/dojo/exemplo.js')
		       ->setDjConfig(array(
			        	'parseOnLoad' => true,
				 	'extraLocale' => array('pt-br', 'en-us')
				 	))
                 ->addStyleSheetModule('dijit.themes.tundra');

Simples não? três pequenos passo (que me deram uma certa dor de cabeça) e que pode melhorar e muito a sua aplicação. Sem problemas com requests, deixa mais ágil a substituição dos componentes e fica mais elegante também.

Qualquer problema/dica/sugestão, por favor, não deixem de comentar ^^

Posts relacionados:

Dojo Toolkit (ajax): Submetendo um form via POST Irei demonstrar nesse pequeno tutorial, como é fácil enviar os...
Integrando o Zend Framework com o Dojo – Parte III Dando continuidade a nossa integração, vamos dar uma rapida olhada...
Integrando o Zend Framework com o Dojo – Parte II Nessa segunda parte do tutorial, vou exemplificar um form utilizando...

Zend Framework 1.7

Nivaldo Arruda — Mon, 17 Nov 2008 22:24:10 +0000

Foi lançado a pouco o Zend Framework 1.7

Temos uma boa lista de mudança, segue ela:

Zend_Amf with support for AMF0 and AMF3 protocols
Dojo Toolkit 1.2.1 (esse muito me interessa)
Support for dijit editor available in the Dojo Toolkit (esse muito me interessa)
Zend_Service_Twitter
ZendX_JQuery in extras library (Finalmente ^^)
Metadata API in Zend_Cache
Google book search API in Zend_Gdata
Preliminary support for GData Protocol v2 in Zend_Gdata
Support for skip data processing in Zend_Search_Lucene
Support for Open Office XML documents in Zend_Search_Lucene indexer
Performance enhancements in Zend_Loader, Zend_Controller, and server components
Zend_Mail_Storage_Writable_Maildir enhancements for mail delivery
Zend_Tool in incubator
Zend_Text_Table for formatting table using characters
Zend_ProgressBar
Zend_Config_Writer
ZendX_Console_Unix_Process in the extras library
Zend_Db_Table_Select support for Zend_Paginator
Global parameters for routes
Using Chain-Routes for Hostname-Routes via Zend_Config
I18N improvements

Application wide locale for all classes
Data retrieving methods are now static
Additional cache handling methods in all I18N classes
Zend_Translate API simplified

File transfer enhancements

Support for file elements in subforms
Support for multifile elements
Support for MAX_FILES_SIZE in form
Support for breaking validation chain
Support for translation of failure ,messages
New IsCompressed, IsImage, ExcludeMimeType, ExcludeExtension validators
Support for FileInfo extension in MimeType validator

Zend_Db_Table_Select adapater for Zend_Paginator
Support for custom adapters in Zend_Paginator
More flexible handling of complex types in Zend_Soap

Como era de se esperar, ocorreram alterações/atualizações em diversas bibliotecas do framework. As que mais me interessam são a classes que integram com Dojo e o JQuery.

As alterações no DB para paginação me parecem ser interessante também. Sem contar com a File_transfer,que tive que usa-la esses tempos e realmente esta muito crua.

Fora isso para o fãs, tem um service para o twitter!

Depois de testar o ZF 1.7 exaustivamente eu tentarei me animar para um review melhor.

Abraços!

Posts relacionados:

Integrando o Zend Framework com o Dojo – Parte III Dando continuidade a nossa integração, vamos dar uma rapida olhada...
Otimizando o Dojo Toolkit Se você já está usando o Dojo ou começou com...
Integrando o Zend Framework com o Dojo – Parte II Nessa segunda parte do tutorial, vou exemplificar um form utilizando...

Integrando o Zend Framework com o Dojo – Parte II

Nivaldo Arruda — Wed, 29 Oct 2008 13:54:31 +0000

Nessa segunda parte do tutorial, vou exemplificar um form utilizando o Zend_Dojo_Form. Para isso, crie em seu application uma pasta chamada “forms” e salve dentro dela o arquivo Exemplo.php com o seguinte conteudo:

Código do Zend_Dojo_Form

no controller que você irá chamar o form, crie a propriedade:

protected $_form;

no método Init do controller, você deve adicionar a seguinte linha de código:

Zend_Dojo::enableView($this->view);

ainda no controller o método abaixo deve ser criado:

método getForm

Com esse código, você já terá um formulário validado tanto no serverside quanto no clientside. De uma olhada melhor depois nos filtros e no validadores do ZF, lá você vai encontrar mais opções fora essa que usei. Para visualizar o form, chame ele na ação de sua preferencia do controller com o código:

$this->view->form = $this->getForm();

No view dessa ação, você deve adicionar a seguinte linha:

form ?>

E por último, no arquivo de layout, para que ocorra a validação no momento do submit, você deve adicionar essa função abaixo da chamado do dojo:

dojo()->javascriptCaptureStart() ?> function validateForm(formid) { var form = dijit.byId(formid); if (!form.validate()) { alert("Verifique os campos marcados antes de continuar."); return false; }
return true; } dojo()->javascriptCaptureEnd() ?>

*Edit:
Atendendo ao pedido do Mozart Fazito, segue o arquivo com o post. Comi bola com essas imagens mesmo.

exemplo_zf_dojo_p2

Posts relacionados:

Integrando o Zend Framework com o Dojo – Parte III Dando continuidade a nossa integração, vamos dar uma rapida olhada...
Integrando o Zend Framework com o Dojo Bom, como me bati um pouco para achar boas informações...
Otimizando o Dojo Toolkit Se você já está usando o Dojo ou começou com...

Integrando o Zend Framework com o Dojo

Nivaldo Arruda — Thu, 23 Oct 2008 11:32:02 +0000

Bom, como me bati um pouco para achar boas informações sobre ZF+Dojo, resolvi escrever algo a respeito dessa integração. A princípio esse assunto será tratado em 2 posts diferentes. Esse primeiro mostra como habilitar o dojo via zend e um próximo irá exemplificar a criação de um formulário com o Zend_Dojo_Form. Ambos os posts serão simples e bem pequenos, pois pretendo preparar ao término de meus estudos um pequeno pdf com tudo que eu aprendi.

Esse código que vou aprensentar, foi testado com o Zend_Layout. Recomendo que você o utilize. A configuração do Zend_Layout é bem simples e os resultados são bem interessantes (mas isso já é assunto para o outro post também).

Instalando o Dojo

Baixe o pacote: Dojo Toolkit 1.2.0: Dojo + Dijit + DojoX e descompacte ele em sua pasta de js, dentro de public (caso esteja utilizando a estrutura de diretório do Zend_Tool). No fim você deve ter um estrutra desse tipo:

js/
   dojo/
   dijit/
   dojox/

Habilitando o dojo

Dentro da tag de seu html, insira o seguinte código:

dojo()->isEnabled()){
  $this->dojo()->setLocalPath('/js/dojo/dojo.js')
               ->setDjConfig(array(
                 'parseOnLoad' => true,
                 'extraLocale' => array('pt-br', 'en-us')
                 ))
               ->addStyleSheetModule('dijit.themes.tundra');
}
?>

Basicamente, esse pequeno script irá realizar o seguinte:

Validar se o dojo está habilitado no ZF.
Definir o caminho do script do dojo.
Configurar o script para: Realizar um parse dos widgets no momendo da leitura e carregar as configurações (data, números, moeda) das regiões do Brasil e do EUA.
Carregar o tema “tundra” para os widgets do dijit.

Adicionando código javascript

Para adicionar algum código pessoal, você deve escreve-los entre os seguintes comando do ZF:

dojo()->javascriptCaptureStart() ?>
//Código JS
dojo()->javascriptCaptureEnd() ?>

Esse método será o responsavel em adicionar todo o script na base que já está na memória para ser “printado” mais adiante.

Executando o Dojo

Para finalizar, você deve escrever no html tudo o que foi gerado e configurado nas linhas anteriores (e verá que mais para frente as configurações do Zend_Dojo_Form também serão escritas aqui) utilizando o comando:

dojo(); ?>

Simples não? ^^

Posts relacionados:

Integrando o Zend Framework com o Dojo – Parte III Dando continuidade a nossa integração, vamos dar uma rapida olhada...
Integrando o Zend Framework com o Dojo – Parte II Nessa segunda parte do tutorial, vou exemplificar um form utilizando...
Otimizando o Dojo Toolkit Se você já está usando o Dojo ou começou com...