Arquivo de Nov/2008

27 NovOtimizando o Dojo Toolkit

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.

  1. Baixar os fontes do Dojo toolkit. Lembre-se de pegar os pacotes que terminar com “-src”
  2. Configurar um arquivo de profile e utilizá-lo para o buildscript empacotar seus dados
  3. 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 ^^

27 NovMySQL 5.1

Finalmente a versão 5.1 passa a ser estável (Apesar que eu já estava utilizando ela e não vi nada de errado). Pode garantir sua cópia em http://dev.mysql.com/downloads.

Na nova versão foi adicionado algumas funções bem intessantes:  partitioning, row based replication, o event scheduler (Esse eu quero ir atrás para testar), uma nova plugin infrastructure, e logs on demand.

Veja as outras alterações aqui.

Caso você ainda não tenha testados as versões anteriores por serem consideradas instáveis, acho que agora vale um teste e/ou um upgrade.

^^

26 NovZend_Translate – pt_BR

Para quem está utilizando o Zend Framework, já deve ter percebido quão chato é encontrar uma lista de variáveis a serem traduzidas, eu mesmo não encontrei uma completa,  essas váriaveis são encontradas nos arquivos de validações por exemplo. O que eu fiz, foi entrar em cada um desses arquivos, pegas suas constantes e seus valores, colocar em um dos padrões aceitos pelo ZF e traduzir.

Então, estou disponibilizando esse arquivo em pt_br, para download. Acredito que possa facilitar a vida de muitas pessoas. Algumas mensagens estão estranhas, tentei manter uma tradução mais fiel ao original.

Para meu uso eu preferi substituir algumas mensagens para deixar mais amigável ao usuário.

^^

21 NovZend_Layout

Zend_Layout

O Zend Layout foi desenvolvido para automatizar e simplificar o uso de templates no seu site/sistema. Ele consegue abstrair com bastante simplicidade e performance o layout do seu site. Assim, você fica com um arquivo aonde implementa todo o template e mantém nos seus arquivos de views apenas o conteúdo. Realmente indispensável para trabalhar com MVC.

Vantagens:

  • Automatiza a seleção e a renderização dos layouts
  • Separar as variáveis relacionadas a layout e views em escopos diferentes.
  • Permite configurar o nome do layout, resolução e caminho
  • Permite desabilitar e trocar layouts em tempo de execução diretamente nos controllers

Para começar, abra o seu bootstrap e adicione as seguinte linha:


Zend_Layout::startMvc(array(
      'layout'=> 'padrao',
      'layoutPath' => '../application/views/layouts'
));

Aonde: padrao é nome do layout escolhido e
../application/views/layouts é aonde estão todos os layouts

Caso ainda não o tenha feito, criei a pasta “/application/views/layouts” e dentro dela o arquivo: padrao.phtml com o seguinte conteúdo:

<html>
<head>
<title>Zend_Layout</title>
<!-- Adicione aqui seus css e js -->
</head>
<body>
<?php echo $this->layout()->content; ?>
</body>
</html>

O Comando: <?php echo $this->layout()->content; ?> é o responsavel em pegar todo o conteúdo do view ativo e anexar ao layout.

Se você gosta de se organizar, pode separar cada pedaço do seu layout em um arquivo diferente (que deve ficar na mesma pasta do layout padrao). Para exibi-los, utilize o

<?php echo $this->render('nome_arquivo.phtml'); ?>

exemplo:

<html>
<head>
<title>Zend_Layout</title>
<!-- Adicione aqui seus css e js -->
</head>
<body>
<?php echo $this->render('_cabecalho.phtml'); ?>
<?php echo $this->layout()->content; ?>
<?php echo $this->render('_rodape.phtml'); ?>
</body>
</html>

Para desabilitar o layout em um controller (para utilizar uma popup ou ajax por exemplo):

$this->_helper->layout->disableLayout();

Para alternar entre outro layout (mudar tema ou área do site):

<?php $this->layout()->setLayout('nome_layout'); ?>

Vale o teste, eu garanto ^^

*edit: Obrigado saraiva, vc e seu olho biônico sempre acham meus erros de parser  ajeuhaeuhaueh

19 NovGmail Themes

Eu ja tenho, e você? =)

Um viva para o minimalist

Um viva para o minimalist

17 NovZend Framework 1.7

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
  1. Application wide locale for all classes
  2. Data retrieving methods are now static
  3. Additional cache handling methods in all I18N classes
  4. Zend_Translate API simplified
  • File transfer enhancements
  1. Support for file elements in subforms
  2. Support for multifile elements
  3. Support for MAX_FILES_SIZE in form
  4. Support for breaking validation chain
  5. Support for translation of failure ,messages
  6. New IsCompressed, IsImage, ExcludeMimeType, ExcludeExtension validators
  7. 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!

17 NovGreyBox (js window)

DICA RÁPIDA.

Precisa criar uma janela em javascript? Precisa criar uma galeria de imagens? Precisa abrir uma seção do seu site (que não utiliza ajax e realiza posts e tudo mais) em uma janela javascript (sem precisar reprograma-la)?

Pois é, eu também precisei. E usei o GreyBox . Ele faz tudo isso que você precisa com o minimo de código.  Leve, bonito e funciona muito bem.  Abre uma janela em JS, barra todo o conteúdo que existe atras dela e mantém o source que você chamar dentro de um iframe, assim a maioria dos códigos irão funcionar sem qualquer alteração ;-)

  • Utilizando:

Aqui você irá definir o caminho da aplicação.

<script type="text/javascript">
var GB_ROOT_DIR = "/js/greybox/"; //meu exemplo com ZF
</script>

em seguida, inclua os arquivos do script:

<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

Galeria de imagem?

<a href="/imagens/imagem1.jpg" rel="gb_imageset[imagens]" title="Imagem 01">01</a>
<a href="/imagens/imagem2.jpg" rel="gb_imageset[imagens]" title="Imagem 02">02</a>
<a href="/imagens/imagem3.jpg" rel="gb_imageset[imagens]" title="Imagem 03">03</a>

Simples não?
Precisa abrir uma seção do seu site?

<a rel="gb_page_center[800, 600]" title="admin" href="/admin">[administração]</a>

Post rápido só para apresentar ^^
Mais exemplos em: http://orangoo.com/labs/greybox/examples.html

11 NovDojo (dojox) DataGrid

Hoje vou apenas exemplificar a criação de um Dojox Datagrid. É um recurso muito interessante do dojo para exibir dados em tabelas. Algumas das vantagens do Datagrid:

  • - Ela obtém dinâmicamente os dados para ser alimentada (via uma url json por exemplo).
  • - Permite ser ordenada por qualquer umas de suas colunas.
  • - Permite que a query (que filtra os dados) possa ser alterada dinâmicamente também.
  • - Existe a possibilidade de editar os dados que estão nela.
  • - Me parece uma boa alternativa para fazer telas bem dinâmicas, cheia de eventos em js.

Eu ainda não tive tempo de testar todas as suas opções, mas um básico para colocar para funcionar junto com o Zend Framework seria isso:

view.phtml

<?php
$this->dojo()->setLocalPath('/js/dojo/dojo.js')
->setDjConfig(array(
'parseOnLoad' => true,
'extraLocale' => array('pt-br', 'en-us')
))
->addStyleSheetModule('dijit.themes.tundra')
->requireModule('dojox.grid.DataGrid')
->requireModule('dojox.grid.DataGrid')
->requireModule('dojo.data.ItemFileReadStore');
?>
<style type="text/css">
@import "/js/dojo/resources/dojo.css"
@import "/js/dojox/grid/resources/Grid.css";
@import "/js/dojox/grid/resources/tundraGrid.css";

</style>
<?php $this->dojo()->javascriptCaptureStart() ?>
var animaisStore = new dojo.data.ItemFileReadStore({ url: "/animais/listajson/"});

dojo.addOnLoad( function() {

document.getElementById('gridNode').style.width="649px";
document.getElementById('gridNode').style.height="20px";

})
<?php $this->dojo()->javascriptCaptureEnd() ?>

<?php echo $this->dojo(); ?>
<table id="gridNode" jsId="grid" dojoType="dojox.grid.DataGrid"
query="{ nome_popular: '*' }" store="estoqueStore" autoHeight="25">
<thead>
<tr>
<th field="nome_popular" width="220px">Nome Popular</th>
<th field="nome_cientifico" width="190px">Nome Científico</th>
<th field="dieta" width="190px">Dieta</th>
</tr>
</thead>
</table>

Com isso o dojo ja interpreta esses IDs e os transforma em um Datagrid. Por debaixo dos panos ele já vai carregando a URL para depois inserir os dados.

/animais/listajson/
Essa URL deve retornar um json com um array no seguinte padrão:
{"items":[{"nome_popular":"pop1","nome_cientifico":"cie1","dieta":"C"},{"nome_popular":"pop2","nome_cientifico":"cie2","dieta":"H"}]}

Esses códigos já são o suficiente para lhe apresentar uma grid dinâmica, com dados vindos direto de uma url e você pode atualizar esses dados a qualquer momento :)

Com algo muito parecido você consegue utilizar o Dojo Store e popular um select, utilizando o FilteringSelect do Dijit.

Até a próxima. Abraços.

SEO Powered by Platinum SEO from Techblissonline