[Resolvido] Configurando ZendX_JQuery

Pessoal

Hoje veremos como configurar o helper jQuery() no Zend Framework, com o intuito de utilizar o DatePicker.

Primeiro, dentro da pasta public, vamos criar uma pasta chamada scripts e dentro dela outra pasta chamada jquery. Criaremos também uma pasta chamada styles, também com uma pasta jquery dentro. Depois, baixe o jQuery e o jQuery UI e coloque dentro da pasta jquery, ficando assim:

/public
/scripts
/jquery
jquery-1.4.2.min.js
jquery-ui-1.8.2.custom.min.js
/style
/jquery
jquery-ui-1.8.2.custom.css
/images
// todas as imagens do jQuery UI

Agora, no nosso Bootstrap.php, adicionaremos o seguinte:

	protected function _initViewHelpers() {
 $view = new Zend_View ();
 $this->bootstrap ( 'layout' );
 $layout = $this->getResource ( 'layout' );
 $view = $layout->getView ();
 $view->addHelperPath ( 'ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper' );
 $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer ();
 $viewRenderer->setView ( $view );
 Zend_Controller_Action_HelperBroker::addHelper ( $viewRenderer );
	}

Em nosso arquivo de layout, faremos o seguinte:

$this->jQuery()
 ->setLocalPath('scripts/jquery/jquery-1.4.2.min.js')
 ->setUiLocalPath('scripts/jquery/jquery-ui-1.8.2.custom.min.js')
 ->addStylesheet('styles/jquery/jquery-ui-1.8.2.custom.css')
 ->addJavascriptFile('scripts/jquery/jquery.ui.datepicker-pt-BR.js');
echo $this->jQuery();

Veja que definimos então todos os recursos do jQuery para o Zend Framework, inclusive a tradução do DatePicker, também disponível no site do jQuery UI.

Agora, vamos fazer funcionar em nosso controller. Então, vamos imaginar que o formulário terá 2 campos. Data e nome.

ExemploController.php

/**
* Método que cria o formulário com as validações

 * @return Zend_Form
 */
	private function getForm() {
 // criando os filtros básicos
 $filtros = array (new Zend_Filter_StringTrim (), new Zend_Filter_StripTags () );

 // criando o objeto Zend_Form
 $form = new Zend_Form ();
 $form->setMethod ( Zend_Form::METHOD_POST );

 // elemento Nome
 $nome = new Zend_Form_Element_Text ( 'nome' );
 $nome->setLabel ( 'Nome: *' )->setRequired ()->addFilters ( $filtros );
 $form->addElement ( $nome );

 // elemento Data, com Date Picker jQuery
 $data = new ZendX_JQuery_Form_Element_DatePicker ( 'data' );
 $data->setLabel ( 'Data: *' )->setRequired ()->addValidator ( new Zend_Validate_Date () )->addFilters ( $filtros )->addFilter ( new Zend_Filter_LocalizedToNormalized () );
 $form->addElement ( $data );

 // elemento Enviar
 $enviar = new Zend_Form_Element_Submit ( 'enviar' );
 $enviar->setLabel ( 'Enviar' );
 $form->addElement ( $enviar );

 // habilitando o formulário para o jQuery
 ZendX_JQuery::enableForm ( $form );

 // retornando o formulário
 return $form;
	}

Pronto. Veja que as duas partes importantes são:

$data = new ZendX_JQuery_Form_Element_DatePicker ( 'data' );e

ZendX_JQuery::enableForm ( $form );

Outro detalhe importante. O ZendX_JQuery_DatePicker() é meio "burro". Apesar de ser uma interface para seleção de data, ele não adiciona por padrão um validador de data. Por isto, não esqueça de adicionar, para garantir mais segurança.

Era isto. Espero que seja util. Comentários são bem vindos. Dúvidas também.

Carlos Eduardo