Ferramentas Pessoais
| Home \ Artigos \ Criando Pop Up em ZPT  

 

Criando Pop Up em ZPT

Esse artigo mostra como você 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 fazendo um popup dinâmico a partir de uma busca no Bando de Dado(Catalog).
 Para começar adicione um JavaScript pela qual terá a função de abrir a popup e redimensionar(tamanho da tela) a popup, para se adicionar um JavaScript deve se usar o tipo (File) da ZMI. Vamos começar a trabalhar entre em portal_skins/custom la você deve adicionar um tipo File como na figura 1 que vai ser usado para mandar as diretrizes da PopUp.

file.jpg

Figura 1

 

 

  Após criar em 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 ele vai retornar a lista de itens existentes na pasta custom localize o JavaScript que acabamos de adicionar mypopup.js e clique nele, quando ele abrir ele vai vim com os seguintes campo Title, Content Type e Precondition só vamos alterar o Precondition copie este código e cole la no Precondition, a nossa PopUp esta pre 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 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 para o header do site Plone, clique na ferramenta portal_javascripts ao entrar na ferramenta e ela carregar por completa vá para o final da pagina você encontrara um painel pronto para adicionar um novo JavaScript, o painel tem vários campos neste primeiro momento só vamos usar o campo id, preencha o campo id com o nome que demos ao nosso JavaScript que fizemos la na pasta custom o mypopup.js como na figura 2

portal_javascripts-add.jpg

Figura 2

 

 

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

page-template-pop-up.jpg

Figura 3

Como na figura 3 adicionamos um Page Template popup nele teste page template vamos montar como se foce um template do plone mesmo vamos chamar as macros e slots do plone mesmo 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 e gera um resultado chamado items como você pode ver na tag <a href ele já esta chamando a função JavaScript e passando para a função o endereço do objeto basta clicar em Save Chenges para salvar.

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

Thiago M. Figueiredo

Ações do documento