BLOG::Nivaldo » ZF+Dojo

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

Testando a integração do Jquery com o Zend Framework

Nivaldo Arruda — Wed, 04 Feb 2009 02:06:22 +0000

Desde a versão 1.7.0 do Zend Framework, está disponível o suporte a Jquery como uma alternativa à integração do Dojo Toolkit existente.

Atualmente o Jquery pode ser integrado em sua aplicação por três maneiras diferentes:

View helper para ajudar a configurar o ambiente do jquery (incluir o script basicamente)
Helpers do Zend_view especifícos para o Jquery
Elementos específicos para o Zend_Form

É essa integração com o Zend_form que vamos ver agora.

OBS: Sempre lembrando que a pasta ZendX se encontra dento de extras/librarys no zip do zendframework mais recente (versão full)

Instalando
Levando em consideração que você já possui o ZF rodando, baixe o jquery e um tema para o ui do jquery (http://ui.jquery.com/themeroller/). Descompacte os dois pacotes dentro de sua pasta js em public. No meu caso ficou assim:

public/js/jquery/
public/js/jqueryui/

Configurando o view
Com os arquivos em seus devidos lugares, devemos agora configurar nosso view para jogar os comandos jquery. Notem que é igual a configuração do dojo, algumas coisas eu tentei sem olhar a documentação, somente por já conhecer a integração com o dojo.

teste.phtml

jquery()->isEnabled()){

$this->jquery()->setLocalPath('/js/jquery/jquery.js')->setUiLocalPath('/js/jqueryui/jquery.ui.all.js')->addStylesheet('/js/jqueryui/theme/ui.all.css');
}

echo $this->jquery();

?>

Agora, vamos partir para o controller. É aqui que iremos pegar o form (que será criado mais adiante) e inseri-lo no template.

testeController.php

view);
}

public function getForm()
{

$formid = 'fteste';
$this->_form = new TestejqueryForm(array(
'action' => '/teste/salvar',
'method' => 'post',
'id' => $formid,
));
}
return $this->_form;
}

public function indexAction()
{
$this->view->form = $this->getForm();

}
}

O form propriamente dito:

Fjquery.php

createElement('DatePicker', 'data_nasc');
$campo->addValidator('NotEmpty')
->addValidator('StringLength', true, array(1,10))
->setJQueryParam('dateFormat', 'dd/mm/yy')
->setRequired(true)
->setLabel('Data de nascimento');
$this->addElement($campo);

$campo = $this->createElement('Slider', 'teste_slider');
$campo->addValidator('NotEmpty')
->setJQueryParams(array('defaultValue' => '75'))
->setRequired(true)
->setLabel('Jquery Slider');
$this->addElement($campo);

}
}

E por fim, de um echo do form no seu view

   form ?>

Esse é o resultado dos códigos acima:

zendx_jquery

Conclusão

Com certeza o ZendX_JQuery tem muito a evoluir. Ao menos no quesito form, ele esta muito crú. Nem de perto possuí todas as funcionalidades que a integração com o dojo proporciona. Mas devo confessar que não li sobre o motivo dessa integração e nem seus objetivos. Talvez o lance principal esteja nos helpers mesmo, para facilitar o uso apenas.

Na screen que eu tirei, percebe-se que o calendário e o slider se fundem, quando o calendário deveria sobrepor os outros elementos. Outro problema é um erro que o firebug acusa sempre que eu tento trabalhar com o slider. Cada vez que vou arrastar o ponteiro ele da o erro, dizendo que não possui uma função chamada. Isso ocorreu também com os elementos “AutoComplete” e “Spinner”, mas esses infelizmente nem chegaram a aparecer na tela. Não sei responder se acabei fazendo algo errado com esses elementos ou se é um problema na integração. Se alguém teve mais sorte que eu, agradeceria as explicações.

Resumindo tudo. Ainda fico com o Dojo. Possui mais opções de elementos e uma integração muito mais concreta. Próximo teste no Jquery com ZF só daqui algumas boas atualizações!

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...
Integrando o Zend Framework com o Dojo Bom, como me bati um pouco para achar boas informações...

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