estou recebendo muitos emails pedindo os fontes dos exemplos que posto aqui no blog. Para atender a todo mundo, achei legal publicar os fontes no repositório que uso para versionar minha biblioteca Tavs. Por falta de tempo, não consegui ainda publicar todos os fontes lá, mas quem se interessar pelo tutorial do flexigrid (mais procurado! ), pode fazer o checkout do projeto ou fazer o download dos arquivos.

Com o tempo vou publicando os outros arquivos para download, ok?

Abraços!

Com base nisso criei um plugin para o ZF que faz o carregamento dos arquivos sob demanda. Este plugin nada mais faz do que carregar os arquivos do módulo, controller, action (nesta ordem) no cabeçalho da página.

Para o correto funcionamento do plugin, é preciso que uma estrutura de pastas seja respeitada:

• [moduleName] – Nome do modulo corrente;
• [scriptPathName] – Nome da pasta de scripts JS. Por padrão, é adotado o nome ’scripts’;
• [controllerName] – Nome do controller corrente;
• [actionName] – Nome do action corrente;
• [scriptControllerName] – nome do script JS que será chamado a nível de controller. Por padrão, é adotado ‘controller’;
• [stylePathName] – Nome da pasta de estilos CSS. Por padrão, é adotado o nome ’styles’;
• [styleControllerName] – nome do estilo CSS que será chamado a nível de controller. Por padrão, é adotado ‘controller’;

O plugin irá tentar incluir todos estes arquivos no head somente se o arquivo existir.

O plugin deve ser registrado pelo objeto Zend_Controller_Front e o objeto de visualização (Zend_View_Interface) já deve estar previamente configurado para o correto funcionamento. O namespace Tavs_View_Helper deve ser adicionado através do método Zend_View::addHelperPath() para que o plugin acesse o helper Tavs_View_Helper_BaseUrl, responsável por incluir o baseUrl ao início do nome do arquivo.

Outra funcionalidade deste plugin é adicionar ao cabeçalho, códigos JS úteis para o javascript. Como o próprio baseUrl, ID da sessão e outros paths do sistema que só podem ser definidos pelo PHP.

O plugin Tavs_Controller_Plugin_View pode ser baixado juntamente com a minha biblioteca de códigos Tavs em http://tavslibary.googlecode.com/svn/trunk.

Neste post mostrarei como é feito as principais configurações (View, Modulos, IncludePath e etc…) utilizando a nova versão do poderoso Zend Framework 1.8. Para isso, criarei um novo projeto no eclipse chamado Tests no localhost.

A primeira coisa a ser feita é criar as pastas e arquivos do projeto, como segue a imagem a baixo:

Esta é a estrutura que gosto de usar, mas como o ZF é bem flexível, você pode organizar da maneira que achar mais conveniente. Neste caso, para acessar a aplicação, a url seria: http://localhost/Tests/httpdocs.

Criado os diretórios colocaremos “conteúdo” nos arquivos para iniciar a aplicação. O primeiro arquivo arquivo a ser editado é o .htaccess que reescreve as url’s de modo que todo acesso ao projeto seja redirecionado para o arquivo index.php.

SetEnv APPLICATION_ENV development

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]

Neste momento, qualquer acesso à url http://localhost/Tests/httpdocs/ será redirecionado para o arquivo index.php. Para testar, digite qualquer coisa depois de httpdocs. Se não der erro de página não encontrada, é porque você está no caminho certo.

O próximo passo é criar o arquivo index.php que definirá o ambiente que o a aplicação será rodada.

<?php

/**
* Define o diretorio onde a aplicacao esta rodando.
* Se não tiver definido anteriormente, define usando realpath(dirname(__FILE__) . '/../application').
* O resultado será C:\<caminho_para_localhost>\Tests\application
*/
defined('APPLICATION_PATH') || define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../application') . DIRECTORY_SEPARATOR);

/**
* Define o ambiente da aplicacao.
* Assume 'production' como ambiente padrao se a variavel APPLICATION_ENV nao tiver sido setada
*/
defined('APPLICATION_ENV') || define('APPLICATION_ENV', (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV') : 'production'));

//Zend_Application
require_once 'Zend/Application.php';

/**
* Cria uma instancia de Zend_Application passando o ambiente e o caminho para o arquivo de configuracoes.
* Este componente irá automatizar algumas configurações definidas no config.ini
*/
$application = new Zend_Application(
APPLICATION_ENV,
APPLICATION_PATH . 'config/config.ini'
);

//Faz as configuraçoes basicas (Views, Layout, DB, ...)
$application->bootstrap();

//Inicia efetivamente a aplicacao. Neste momento é dado o dispatch para instanciar os controllers e chamar os actions
$application->run();

Para setar variáveis de ambiente no Windows basta pressionar as teclas Window+Pause para a abrir a janela de propriedades do computador. Vá na guia Advanced/Avançado clica botão Environment Variables/Variáveis de Ambiente. Na próxima tela, acrescente a variável APPLICATION_ENV no grupo de System Variables/Variáveis de Sistema com o valor ‘development‘. Para não perder o costume, reinicie o computador. Uma alternativa seria setar a variável no .htaccess, igual ao citado anteriormente.

Agora teremos que criar a classe Bootstrap para iniciar as configurações básicas. Por padrão, o ZF consegue configurar algumas coisas como conexão com banco, diretorios dos modulos/controllers e etc apenas lendo o config.ini. Eu prefiro colocar no config.ini tudo aquilo que varia de ambiente para ambiente, configurando o restante na classe Bootstrap.

Um dos grandes benefícios desta classe é a inteligência para chamar os métodos de inicialização. Todo método iniciado por _init da classe Zend_Application_Bootstrap_Bootstrap será chamado, assim fica mais organizado o bootstrap onde cada método configura somente uma parte do projeto. No exemplo abaixo, criei somente o método _initFrontController para informar ao dispatcher onde está as pastas com os módulos. Nos próximos posts, mostrarei outras configurações como BD, View, IncludePath e etcs….

<?php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
/**

* Configura o objeto FrontControoler.     *
* @return Zend_Controller_Front
*/
protected function _initFrontController()
{
$front = Zend_Controller_Front::getInstance();
$front
->addModuleDirectory(APPLICATION_PATH . 'modules')
->setDefaultModule('default');

return $front;
}
}

Para o exemplo, defini a pasta modules como o diretorio que conterá todos os modulos do projeto. O Zend automaticamente lê cada diretório de ‘modules’ como sendo um módulo do projeto.

Agora criaremos os controller, actions e views para fazer a renderização. Edite o arquivo IndexController.php e implemente a classe IndexController como abaixo:

class IndexController extends Zend_Controller_Action
{
/**
* Irá renderizar o arquivo view/scripts/index/index.phtml
*
*/
public function indexAction()
{

}
}

Código do script index.phtml

<h3>Hello World</h3>

Neste momento, ao acessar http://localhost/Tests/httpdocs, você deverá ver uma página com o texto Hello World. No próximo post, mostrarei como configurar o banco de dados e o Zend_Layout, ótimo componente para utilização do MVC.

Abraços.

Atualmente o Zend_Paginator no permite paginar quatro tipos de model:

• Array
• DbSelect
• DbTableSelect
• Iterator

Para este exemplo farei a paginação usando o DbSelect, que acredito ser o mais utilizado por retornar registros do banco de dados.

A primeira coisa a ser feita é fazer a consulta ao banco de dados. Apenas selecionei todos os registros da tabela cliente:

//fazendo a consulta no banco de dados
$db = Zend_Db_Table::getDefaultAdapter();
$select = $db->fetchAll("SELECT * FROM cliente");

Realizada a consulta, vamos criar a paginação:

//criando a paginaçao
Zend_Paginator::setDefaultScrollingStyle('Sliding');
Zend_View_Helper_PaginationControl::setDefaultViewPartial('partials/paginator.phtml');
$paginator = Zend_Paginator::factory($select);

//pagina atual. Se nao vier nenhuma pagina, mostra a primeira
$currentPage = $this->_getParam('page', 1);
$paginator
->setCurrentPageNumber($currentPage)
->setItemCountPerPage(5);

//manda para a viewer
$this->view->paginator = $paginator;

As chamadas estáticas servem para mostrar ao paginator qual o tipo de paginação e qual será a template padrão da paginação. No exemplo, a template padrão será o paginator.phtml, localizado em view/scripts/partials/paginator.phtml. Segue o código dela:

<?php if ($this->pageCount): ?>
<div class="paginationControl">
<!-- Previous page link -->
<?php if (isset($this->previous)): ?>
<a href="<?php echo $this->url(array('page' => $this->previous)); ?>">
< Previous
</a> |
<?php else: ?>
<span class="disabled">< Previous</span> |
<?php endif; ?>

<!-- Numbered page links -->
<?php foreach ($this->pagesInRange as $page): ?>
<?php if ($page != $this->current): ?>
<a href="<?php echo $this->url(array('page' => $page)); ?>">
<?php echo $page; ?>
</a> |
<?php else: ?>
<?php echo $page; ?> |
<?php endif; ?>
<?php endforeach; ?>

<!-- Next page link -->
<?php if (isset($this->next)): ?>
<a href="<?php echo $this->url(array('page' => $this->next)); ?>">
Next >
</a>
<?php else: ?>
<span class="disabled">Next ></span>
<?php endif; ?>
</div>
<?php endif; ?>

Dica: Se o seu sistema possui várias paginações, seria interessante se as chamadas dos métodos estáticos mostrados acima ficassem no bootstrap. Com isso, a configuração da paginação serviria para toda aplicação.

Para finalizar a paginação, falta somente o script que renderizará a listagem e mostrar a paginação:

<?php
if ( count($this->paginator) > 0) :
foreach ($this->paginator as $item) :
Zend_Debug::dump($item);
endforeach;
echo $this->paginator;
endif;
?>

Checa se a paginacao possui algum registro, faz o loop para exibir os registros e, por fim, renderiza a lista de páginas renderizadas pelo Zend_Paginator.

Simples assim.

Leitura recomendada: Zend_Paginator

Abraços.

• php_uploadprogress_dll_WIN32.zip
• uploadprogress-1.0.0.tgz

A extensão precisa acessar a pasta de uploads temporária, portanto é necessário configurar no php.ini o caminho. Inclua as seguintes linhas no seu arquivo de configurações do php:

[UploadProgress]

extension=php_uploadprogress.dll
uploadprogress.file.contents_template="C:WINDOWSTempupload_contents_%s"
uploadprogress.file.filename_template="C:WINDOWSTempupt_%s.txt"

Obs: Reparem para a última parte dos caminhos que devem ser mantidos (“upload_contents_%s” e “upt_%s.tx”)

Obs2: Sei que não é a melhor opção, mas estou fazendo o tutorial baseado em ambiente Windows. Mas os passos são os mesmos para ambiente Unix.

Segue o controller que fará todo o controle do upload:

class IndexController extends Zend_Controller_Action
{
/**
* Monta o formulário
*
* @return void
*/
public function indexAction()
{
$request = $this->getRequest();
$this->view->id = md5(microtime() . rand());
}

/**
* Processo os arquivos quando forem finalizados
*
* @return void
*/
public function processAction()
{
Zend_Layout::getMvcInstance()->disableLayout();
$this->_helper->viewRenderer->setNoRender();

Zend_Debug::dump($_FILES);
Zend_Debug::dump($_POST);

}

/**
* Retorna o json com as informações do progresso do upload.
*
* @return void
*/
public function processInfoAction()
{
Zend_Layout::getMvcInstance()->disableLayout();
$this->_helper->viewRenderer->setNoRender();

$id = $this->_getParam('id');
echo Zend_Json::encode(uploadprogress_get_info($id));
}
}

indexAction apenas renderiza o formulário passando o ID do post. É por este ID que a extensão saberá identificar de qual upload deve ser retornado as informações.

processAction apenas recebe os arquivos e ecoa na tela as informações.

processInfoAction recebe o ID do upload e retorna o json necessário para o javascript fazer a barra de progresso.

Este é o HTML montado para o upload. Notem que é obrigatório o campo hidden com o identificador gerado no indexAction.

<form action="<?= $this->url(array('action'=>'process')) ?>" id="frmUpload" enctype="multipart/form-data" method="post">
<input type="hidden" name="UPLOAD_IDENTIFIER" value="<?= $this->id; ?>" id="UPLOAD_IDENTIFIER"/>

<label>Select File:</label>
<input type="file" name="file" style="display:block" />

<input type="submit" value="ok" />
</form>
<div id="uploadprogressbar"></div>

A div identificada por “uploadprogressbar” é onde o será feita a barra de progresso.

O que resta agora é somente o javascript. Para a barra de progresso é necessário o jQuery e o plugin jQuery ProgressBar.

Inclua o seguinte código JS no header da página que terá o formulário.

<script type="text/javascript">
var progress_key;

$(document).ready(function() {
progress_key = $("#UPLOAD_IDENTIFIER").val();
$("#frmUpload").bind("submit", function() {
beginUpload();
});
$("#uploadprogressbar").progressBar();
});

function beginUpload() {
$("#uploadprogressbar").fadeIn();
setTimeout("showUpload()", 100);
}

function showUpload() {
$.get("<?= $this->url(array('action'=>'process.info')); ?>/id/" + progress_key, function(data) {
if (!data)
return;

var response;
eval ("response = " + data);

if (!response)
return;

var percentage = Math.floor(100 * parseInt(response['bytes_uploaded']) / parseInt(response['bytes_total']));
$("#uploadprogressbar").progressBar(percentage);

});
setTimeout("showUpload()", 100);
}
</script>

Feito isso, é só testar e ver o resultado.

Para mais informações do plugin ProgressBar acesse o site do mesmo.

Qualquer dúvida entre em contato que farei o possível para ajudar.

Abraços!

Mais informações à respeito do evento pode ser encontradas no site oficial do grupo.

Para tentar exemplificar, irei fazer um passo-a-passo da integração. Estou assumindo que seu projeto já esteja funcionando corretamente, ou seja, MVC configurado corretamente e etc.

A primeira coisa a se fazer é adicionar o componente no mesmo nível onde está o ZF:

/library

/library/Tavs

/library/Zend

Feito isso, seu projeto já terá acesso ao componente Flexigrid. Obs: Tomei o cuidado de escrever as classes mantendo o padrão adotado pelo ZF, onde cada “/” é representada por “_” no nome da classe.

Com o componente incluído, já podemos escrever no controller os métodos que farão configuração do Flexigrid.

IndexController.php

<?php

class IndexController extends Zend_Controller_Action
{
/**
* Retorna a instancia do flexigrid
*
* @return Tavs_jQuery_Flexigrid
*/
private function _getFlexigrid()
{
$front = $this-&gt;getFrontController();
$flexigrid = new Tavs_jQuery_Flexigrid($front-&gt;getBaseUrl() . '/index/list');

$flexigrid
-&gt;setTitle('Clientes')
-&gt;orderBy(
$this-&gt;_getParam('sortname', 'cliente_nome'),
$this-&gt;_getParam('sortorder', Tavs_jQuery_Flexigrid::SORT_ASC)
);

$flexigrid
-&gt;addColumn('text', 'cliente_nome', array(
'label' =&gt; 'Nome'
))
-&gt;addColumn('text', 'cliente_email', array(
'label' =&gt; 'Email'
))
-&gt;addColumn('date', 'cliente_nascimento', array(
'label' =&gt; 'Data de Nascimento',
'align' =&gt; Tavs_JQuery_Flexigrid_Column_Abstract::ALIGN_CENTER
))
-&gt;addColumn('checkbox', 'cliente_ativo', array(
'label' =&gt; 'Ativo?',
'align' =&gt; Tavs_JQuery_Flexigrid_Column_Abstract::ALIGN_CENTER
));

//seletor e atributos da tabela
$flexigrid
-&gt;setSelector('#grid-clientes')
-&gt;addTableAttrib('id', 'grid-clientes');

//paginacao
$flexigrid-&gt;configPaginator($this-&gt;_getParam('rp', 20), $this-&gt;_getParam('page', 1));

return $flexigrid;

}

/**
* Recupera e a manda para a view a instancia do Flexigrid
*/
public function indexAction()
{
$this-&gt;view-&gt;flexigrid = $this-&gt;_getFlexigrid();
}

/**
* Faz a busca no banco de dados para listar no flexigrid.
*
*/
public function listAction()
{

Zend_Layout::getMvcInstance()-&gt;disableLayout();
$this-&gt;_helper-&gt;viewRenderer-&gt;setNoRender(true);

//cria o objeto para montar da query
$db = Zend_Db_Table::getDefaultAdapter();
$select = $db-&gt;select();

//monta o select
$select-&gt;from(array('C'=&gt;'cliente'), array('cliente_id', 'cliente_nome', 'cliente_email', 'cliente_nascimento', 'cliente_ativo'));

$field_search = $this-&gt;_getParam('qtype');
$field_search_value = $this-&gt;_getParam('query');

if ( !empty($field_search) &amp;&amp; !empty($field_search_value) )
{
$select-&gt;where($field_search . ' LIKE ?', '%' . $field_search_value . '%');
}

$flexigrid = $this-&gt;_getFlexigrid();

echo $flexigrid-&gt;generateRows($select, 'cliente_id');

}

}

É importante lembrar que a inclusão de colunas no flexigrid é obrigatória. O parâmetro do construtor é a URL que o flexigrid irá chamar para popular o grid com o dados. Lembrando que essa requisição é feita com AJAX.

A principal característica deste componente é a personalização das colunas. No exemplo acima temos 4 colunas: duas com texto normal, uma para exibição de data e outra para checkbox. Atualmente, o componente suporta colunas para:

1. Checkbox
2. Date
3. Link
4. Select
5. Text

Para criar uma coluna personalizada por você, é necessário extender a classe Tavs_JQuery_Flexigrid_Column_Abstract e implementar o método render(). Ainda não tive tempo para documentar a utilização do componente, mas é só fazer uma boa leitura no código que fica trivial.

O método listAction monta a consulta para executar no banco de dados. Depois de criado o objeto $select, este é passado como parametro para o método $flexigrid->generateRows onde será configurada a paginação e trazer somente os registros necessários para a página em questão.

Depois de configurado o flexigrid, ecoamos a instância que foi enviada para a view:

index.phtml

<?php echo $this->flexigrid ?>

Está quase pronto! Agora falta incluirmos os arquivos jquery.js, flexigrid.js e flexigrid.css. Normalmente se faz essas inclusões no layout “master” da aplicação, no meu caso:

main.phtml

<?php

$base = Zend_Controller_Front::getInstance()->getBaseUrl();

$this
->headScript()
->appendFile( $base . '/scripts/jquery-1.2.6.min.js' )
->appendFile( $base . '/scripts/flexigrid.js' );

$this
->headLink()
->appendStylesheet( $base . '/styles/flexigrid.css' );

echo $this->doctype()
?>
<html>

<head>
<meta http-equiv="Content-Type"; content="text/html; charset=UTF-8" />
<?php
echo $this->headScript();
echo $this->headLink();
echo $this->JQuery();
?>
</head>

<body>
<?php echo $this->layout()->content ?>
</body>

</html>

Arquivos utilizados para o tutorial:

* Biblioteca jQuery
* Flexigrid
* Tavs Library baseado em ZF (Classes PHP).

Script de banco de dados usado no tutorial:

CREATE TABLE `cliente` (
`cliente_id` int(11) NOT NULL,
`cliente_nome` varchar(50) NOT NULL,
`cliente_email` varchar(50) NOT NULL,
`cliente_nascimento` datetime NOT NULL,
`cliente_ativo` int(11) NOT NULL default ‘1′,
PRIMARY KEY (`cliente_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

–
– Extraindo dados da tabela `cliente`
–

INSERT INTO `cliente` VALUES(1, ‘Tales’, ‘tales@gmail.com’, ‘2009-03-29 22:15:00′, 0);
INSERT INTO `cliente` VALUES(2, ‘Tales’, ‘tales@hotmail.com’, ‘2009-03-27 22:15:11′, 1);

Qualquer contribuição é sempre bem vinda. Correção de bugs ou coisas do gênero pode ser informado através do email contato@talesaugusto.com.br

É isso aí pessoal, espero que ter conseguido passar alguma informação útil a vocês.

Abraços.

Para este primeiro post no blog, mostrarei um simples exemplo de como adicionar uma funcionalidade trivial no componente Zend_Form do ZF.

Basicamente, o que fiz é extender a classe Zend_Form e sobrepor o método addElement. Este método adiciona um novo elemento ao Zend_Form e seta o atributo tabindex se este não estiver setado anteriormente.

class MyForm extends Zend_Form {

private $_elementTabindex = 1;

public function addElement($element, $name = null, $options = null) {

parent::addElement($element, $name, $options);

if (null !== $name) {
$element = $this->getElement($name);
}

if (!isset($element->tabindex)) {
$element->tabindex = $this->_elementTabindex++;
}

return $element;

}

}

Este foi post, na verdade, foi para me familiarizar com a ferramenta Worpress. Estou preparando materiais para outros posts mais “robustos”. Pretendo escrever algo sobre ZF e jQuery.

Aguardem!