• a real separação entre conteúdo, lógica e apresentação; e

• facilidade/agilidade no uso de modelos.

Vamos sentir essas diferenças neste capítulo.

Sintaxe

ZPT é baseado em atributos de tags, reaproveitando as tags HTML, o que possibilita a visualização do modelo em um editor visual de HTML, como o Dreamweaver, pois os atributos usados em ZPT não são interpretados pelos editores visuais, que, por não interpretarem as tags ZPT ignoram estas. Essa caracteristica do ZPT possibilida a integração de programadores e designers, pois o ZPT não influencia o trabalho do designer, que mesmo depois de ter seu modelo programado pelo programador, ainda pode editar visualmente a página no editor de sua preferência. Veja sintaxe do ZPT abaixo:

<p class=”geral” tal:content=”template/title”>Titulo</p>

Tags principais

tal:content – a função do tal:content é substituir o conteúdo da tag pelo resultado da expressão contida nele, sem alterar a tag. Exemplo:

<span tal:content="here/title">Título</span>

Nesse exemplo o tal:content substitui o texto Título ques está envolto nas tags <span>, o here/title significa: retorne do contexto da aquisição a propriedade title, o que acontece é que o Zope retorna a propriedade title do template.

A expressão here/title está descrita de acordo com uma sintaxe definida no TAL (Template Attribute Language). Na prática, expressões tal podem ser facilmente reconhecidas pela simples presença do caracter barra (/). Expressões Python, por exemplo, sempre são escritas usando o caracter ponto (.). Assim, a expressão acima poderia ser descrita de uma outra forma, usando a sintaxe do python, como no exemplo abaixo::

<h1 tal:content="python:here.title">Título</h1>

Ou seja, para utilizarmos expressões Python basta o uso do prefixo “python:” Nesse caso o uso de uma expressão Python torna complexa uma tarefa simples, mas em outros casos a flexibilidade e poder de avaliação de expressões da linguagem Python é muito útil.

Mais alguns exemplos, usando tal, python e outros namespaces::

<h1 tal:content="request/titulo">Título</h1>

Aqui o resultado é a variável titulo que deve estar no request, caso ela não esteja será criada uma exceção.

<spam tal:content="template/id">id</spam>

Nesses caso temos como resultado o id do template, de acordo com o namespace template.

<div tal:content="here/absolute_url">path</div>

Neste último caso o resultado é o retorno de um método, o absolute_url, no contexto

tal:replace – Basicamente faz o mesmo que o tal:content, mas como uma diferença significante, o tal:replace substitui a tag pelo resultado da expressão.

Exemplos:

<h1 tal:content="here/tile">Título</h1>

Reenderizado: <h1>Esse é o título.</h1>

<h1 tal:replace="here/title">Título</h1>

Reenderizado: Esse é o título.

Falando a respeito de segurança, por default o ZPT ignora caracteres especiais no momento da reenderização da página, evitando possíveis ataques de cross-site scripting e SQL inject.

Em contrapartida, isso pode causar problemas quando é necessário reenderizar HTML vindo de algum objeto, para desabilitar esse escape do ZPT é necessário usar o argumento structure, como abaixo:

<p tal:replace="structure template/menu"></p>

tal:repeat – expressão usada para criação de estruturas de repetição, como o <dtml-in>.Vejamos u exemplo:

Crie um ZSQL com id seleciona_pessoa

com o seguinte conteudo

select nome, cpf, endereco from tabela_pessoa

Crie um Page Template com id lista_pessoa, e com o seguinte conteúdo:

<table>

<tr tal:repeat="pessoa here/seleciona_pessoa">

<td tal:content="pessoa/nome">Nome da pessoa</td>

<td tal:content="pessoa/cpf">CPF</td>

<td tal:content="pessoa/endereço">Endereço</td>

</tr>

</table>

Com o HTML criamos uma tabela com n linhas e 3 colunas e com o tal:repeat criamos uma estrutura de repetição dos dados que retornam do seleciona_pessoas, com isso temos uma tabela onde cada linha é um resultado da query do objeto seleciona_pessoas.

.

tal:define e tal:attributes – Visando facilitar, explicarei o tal:define e o tal:attributes juntos. Veja os exemplos abaixo::

Exemplo 1

<table>

<div tal:repeat="reg python:here.s_tabela(chave=request.get('chave',0))">

<tr tal:define="pintar reg/repeat/odd"

tal:attributes="bgcolor python:test(pintar,'#CCCCCC','#FFFFFF')">

<td tal:content="reg/campo1">Campo 1</td>

<td tal:content="reg/campo2">Campo 2</td>

<td tal:content="reg/campo3">Campo 3</td>

</tr>

</div>

</table>

Exemplo 2

<a tal:content="here/title"

tal:attributes="href here/absolute_url">Menu</a>

O primeiro exemplo demonstra claramente o uso do tal:define. Sua idéia principal é muito próxima ao do <dtml-let alias=expressao> onde é criado um "apelido" para acessar de forma mais conveniente o resultado de uma expressão. O tal:define foi criado para demonstrar que é possível criar uma expressão em tal e usar o resultado de sua avaliação dentro de uma expressão em python (no caso, o método test).

No que diz respeito ao tal:attributes usado nos 2 exemplos, sua função é de atribuir um valor dinâmico a um atributo da tag, algo bem diferente do que é feito pelo tal:content e tal:replace que atribuem valores ao conteúdo da tag e a própria tag como um todo.

O primeiro exemplo usa no tal:attributes o resultado do método test do python. Fiz questão de colocar esse método como exemplo pois ele é realmente muito útil para montarmos estruturas condicionais, algo também possível através do tal:condition (que explicarei a seguir) mas que é a única forma de representarmos um condicional in-line com um "else".

O segundo exemplo é também um exemplo bastante útil, demonstrando de maneira simples a estrutura base de um menu, ou seja, como é possível criar links dinâmicos. Perceba que o atributo href da tag <a> (que define para onde o link aponta) está sendo definido com um tal:attributes que ajusta seu valor para o caminho absoluto do objeto naquele contexto..

tal:condition – a função do tal:condition está implicita no seu nome, ele é usado para criar condicionais simples, no caso do uso do tal:condition e no caso da condicional não ser atendida a tag simplesmente não é reenderizada. Lembrando também que não existe um else no tal:condition, neste caso teríamos que duplicar a tag e fazer a condicional afirmativa e negativa, como no exemplo abaixo:

<p tal:condition=”python: request.nome == 'Rodrigo'”>Você é o Rodrigo!</p>

<p tal:condition=”python: request.nome != 'Rodrigo'”>Você não é o Rodrigo!</p>

tal:omit-tag – tem a função de omitir uma tag usada apenas para definir variaveis, ou numa estrutura de repetição, enfim, para omitir tags desnecessárias após a renderização, por exemplo:

<span tal:define="paginas context/objectValues” tal:omit-tag=””>

São apenas 4 parâmetros: metal:define-macro, metal:define-slot, metal:use-macro e metal:fill-slot. Vejamos a função de cada um:

metal:define-macro – define um modelo que pode ser utlizado na sua aplicação/site inteira.

metal:use-macro – usa o modelo definido no metal:define-macro

metal:define-slot – define uma parte do modelo que pode ser editada.

metal:fill-slot - abre para edição a parte editável do modelo.

Usando-os em conjunto, veja abaixo:

Exemplo 1 [id do objeto meu_modelo.html]

<html metal:define-macro="modelo">

<title tal:content="template/tile">Aqui vai o título do objeto</title>

<body>

<div metal:define-slot="principal">

Esse é o slot onde o conteúdo será substituído.

</div>

</body>

</html>

Exemplo2

<html metal:use-macro="here/meu_modelo.html/macros/modelo">

<div metal:fill-slot="principal">

Esse é o conteúdo que será sbstituido

</div>

</html>

No Exemplo1 definimos uma macro de nome modelo no objeto meu_modelo.html e um slot de nome principal, pode parecer um exemplo simples, agora imagine que é possível fazer isso em qualquer layout por mais complexo que seja e você vai perceber como o METAL é poderoso.

No Exemplo2 chamamos o modelo definido no Exemplo1 e preenchemos o slot principal com um texto qualquer.

Esse pequeno exemplo mostra como é poderoso o uso do METAL em aplicações web, e somando esse conhecimento com ZPT podemos fazer coisas muito robustas e interessantes.