Criando Pop Up em ZPT dentro do Plone

Esse artigo mostra como você pode criar uma pop up em ZPT de uma forma dinâmica e rápida, a pop up vai funcionar de acordo com um resultado de uma busca ao banco de dados.

Vamos iniciar, hoje vamos fazendo uma popup dinâmico a partir de uma busca no Bando de Dado(Catalog). Para começar adicionando um JavaScript, pela qual terá a função de abrir de popup e redimensionar (tamanho da janela), para adicionar um JavaScript use um tipo File da ZMI[1].

Colocando a mão na massa, entre em portal_skins/custom, la você deve adicionar um tipo File como na figura 1, que deve ser usado para mandar as diretrizes da PopUp.

Figura 1

Após criar no botão add ele vai te pedir as seguintes informações id, title e file basta preencher apenas o id, que será por enquanto o único usado neste artigo, preencha com o seguinte valor mypopup.js e clique em add, após clicar em add você irá retornar a lista de itens existentes na pasta custom, localize o JavaScript que acabamos de adicionar mypopup.js e clique nele, quando abrir a janela será exibido os seguintes campo Title, Content Type e Precondition, vamos alterar apenas o Precondition copie este código e cole la no Precondition, a nossa PopUp esta pré formatada para largura de 800(width=800) e altura de 600(height=600)

 function MM_openBrWindow(theURL) {
   popUp = open(theURL,'showImage','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbar=no,resizable=no,copyhistory=no,width=800,height=600,left=0,top=0,screenX=0,screenY=0');
   popUp.focus();
}

Pronto, basta clicar em Save Chenges.

Agora tem que inserir ele no header[2] do site Plone, vá para a raiz do seu site Plone e clique na ferramenta chamada portal_javascrits, nesta ferramenta fica quase todos os JavaScripts do plone inseridos no header , aguarde ela carregar por completo vá para o final da pagina, você encontrara um painel pronto para adicionar um novo JavaScript, o painel existe vários campos, neste primeiro momento vamos utilizar apenas o campo id. Preencha o campo id com o nome que demos ao JavaScript que adicionamos no começo do artigo que esta localizado na pasta custom com o nome mypopup.js como na figura 2

Figura 2

Vamos adicionar o Page Template chamado popup onde será colocar o código que chama a Pop Up. Como mostra na figura 3

Figura 3

Como mostrou na figura 3, adicionamos um Page Template[3] que vamos dar o nome de popup. Dentro do template vamos chamar as macros e slots do plone, para que ele já fique com todas as configurações do plone, como no exemplo abaixo.

<html metal:use-macro="context/main_template/macros/master">
 <div metal:fill-slot="main">
  <div tal:define="global resultados python:request.get('Resultados',
                   here.portal_catalog.searchResults(portal_type=('News Item'
                                                                 ,'Link'
                                                                 ,'Event'
                                                                 ,'Image'),
                                                                  orphan=0,
                                                                  review_state='published'));"
       tal:condition="python:test(template.getId()!='Resultados' and resultados, 1, 0)">
   <div tal:repeat="items resultados"> 

    <a href=""
       tal:attributes="onClick python:str('MM_openBrWindow(' +'\'' + items.getURL() + '\')') ;">
     <b tal:content="itens/Title"></b></a>

   </div> 
  </div>
 </div>
</html>

Como vemos no exemplo acima ele faz uma busca no portal_catalog (Banco de Dados do Plone) e gera um resultado chamado items como isso a tag <a href chamando a função do JavaScript e no mesmo passa para à função o endereço do objeto que deve abrir no popup quando clicado no link, Salve o código clicando no botão em Save Chenges.

[ZMI 1] http://www.tchezope.org/documentacao/glossario/zmi/?searchterm=ZMI

[Header HTML 2] http://www.bitpt.com/index.php/content/view/38/52/

[Page Template 3] http://www.tchezope.org/documentacao/tutorial/tutorial-de-zope-page-templates-zpt-html

Bom acho que fechamos por aqui esse teste e veja se funcionou blz. valew ate mais abraço

Thiago M. Figueiredo

Ferramentas Pessoais

Criando Pop Up em ZPT dentro do Plone

Figura 1

Figura 2

Figura 3

Ações do documento