Skip to content

fabiorizzo.com - PZP Rocks!!!

Sections
Personal tools
You are here: Home Cursos Online Curso Online - Zope Básico - Versão 2.9.2 Páginas Dinâmicas I - DTML
Document Actions

Curso Online - Zope Básico - Versão 2.9.2

Introdução ao Zope

Páginas Dinâmicas I - DTML

Document Template Markup Language

Antes de falarmos sobre páginas dinâmicas há algo que precisa ser explicado, o Zope trabalha com um poderoso mecanismo de aquisição que funciona da seguinte forma, quando uma variável (ou metadado, pasta, objeto,etc..) qualquer é solicitada (pelo DTML por exemplo) o Zope procura a variável no contexto (diretório atual) onde ela foi chamada, não encontrando no contexto, ele sobe um nível da árvore de diretórios e continua a procura sussesivamente até chegar a raiz do site, caso não encontre a variável gera um erro. Esse mecanismo é muito útil quando precisamos de conteudos diferentes entre contextos diferentes, como pais e filhos. Nesse caso, quando a variavel é acessada por um filho ela retorna o conteudo de acordo com o contexto o filho, e assim também para com o pai.

O que é DTML?


DTML (Document Template Markup Language) é a linguagem de apresentação e script baseada em tag do Zope, que roda no lado do servidor (server side), como SSI, PHP, ASP, e JSP. Ou seja, os comanndos DTML são executados pelo servidor e reenderizados como HTML para a interpretação do browser, em contrapartida, as linguagens que rodam no “lado do cliente”, como Javascript, não são interpretadas no servidor, e sim enviadas ao browser para que ele interprete o código.


Como vimos na aula passada, podemos usar o DTML em dois tipos de objetos no Zope, DTML Documents e DTML Methods. Uma das vantagens do DTML é que ele se parece muito com o HTML, pessoas familiarizadas com HTML tem facilidade em aprender o DTML.


O DTML suporta reuso de conteúdo e layout, formata de dados heterogêneos, e separa a apresentação da lógica e do conteúdo.


Um exemplo claro do reuso de layout são o cabeçalho e rodapé default do Zope, veja o código abaixo:


<dtml-var standard_html_header>

<p>Hello world.</p>

<dtml-var standard_html_footer>


Nesse código temos HTML e DTML juntos, separando:

<dtml-var standard_html_header>

é o DTML que chama um objeto default do Zope que se encontra na raiz do Zope, não importa aonde esteja sua página, o Zope econtra o objeto de nome 'standard_html_header' e reenderiza o codigo dese objeto no contexto do objeto que chama o 'standard_html_header'.


<p>Hello world.</p>

é o HTML do conteúdo


<dtml-var standard_html_footer>

é o DTML que faz a mesma coisa do header no footer.


Está página reenderizada no browser ficaria assim:


<html>

<body bgcolor="#FFFFFF">

<p>Hello world.</p>

<hr>

<p>Last modified 2000/10/16 by AmosL</p>

</body>

</html>


Além do reuso do código, é possível formatar todos os tipos de dados, para chamar métodos, pesquisas a banco de dados, inserir objetos no Zope, processar formulários, e mais.


Quando um objeto retornar o conteúdo de uma pesquisa ao seu bando de dados (um ZSQL Method), nomalmente em forma de lista, o DTML pode facilmente formatar os dados na página


<ul>

<dtml−in sql_retorna_clientes>

<li><dtml−var nome_cliente ></li>

</dtml−in>

</ul>


A tag dtml-in interage nos resultados da query usando o HTML (<li>) para formatar a saída dos dados. Se fossem 5 resultados retornados pela query, a página reenderizada ficaria assim:


<ul>

<li>Rodrigo Castardo</li>

<li>Sheila Melo</li>

<li>Fabio Rizzo </li>

<li>Cheila Carvalho</li>

<li>Fabio Júnior</li>

</ul>


Observe que não é necessário dizer ao DTML que o conteudo é resultado de uma query, muito menos onde achar os argumentos para a query, é necessário apenas dizer qual objeto eu quero e ela interpreta qual tipo de objeto, como eu chamo o objeto e passa os argumentos a ele.


Esta facilidade na formatação de dados torna a DTML uma ferramenta útil para apresentação.



Sintaxe


DTML tem sua sintaxe semelhante a do HTML, como foi dito acima, e é baseada em tags. Existem dois tipos de tags, as simples e blocos. Na tag simples, não existe necessidade de fechar a tag, como abaixo:


<dtml-var nome_cliente>


Tag em blocos exigem duas tags, uma abre a tag e outra fecha, como abaixo:


<dtml-in retorna_materias>
<p><dtml-var noticias></p>
</dtml-in>


Também podemos trabalhar com alguns atributos, o atributo oferece informação sobre como a tag trabalha. Alguns deles tem valor, como abaixo:


<dtml-var nome_aluno missing="sem nome">

o atributo missing substitui o valor da variável nome_aluno caso ela não exista


E outros não tem, como no exemplo abaixo:


<dtml-var nome_aluno upper>

o atributo upper torna a variável nome_aluno em caixa alta.


Inserindo variáveis com dtml-var


Uma tarefa básica é a inserção de variáveis, vejamos como fazer esta tarefa com DTML.


Faça os seguintes passos:

  • crie um arquivo de id titulo_dinamico

  • edite o title para a seguinte frase “exercício de título dinâmico”

  • insira o código abaixo:


<dtml-var standard_html_header>

<h1>O titulo da página é: <dtml-var title></h1>

<p>Esta página insere conteúdo dinâmico na linha acima</p>

<dtml-var standard_html_footer>


O pedaço de código <dtml-var title> exibe dinâmicamente o conteudo do metadado title do obejto, agora clique na aba view para ver o resultado.


<html>
<body>
<h1>O titulo da página é: exercício de título dinâmico</h1>

<p>Esta página insere conteúdo dinâmico na linha acima</p>
</body>
</html>



Processando dados vindos de um formulário


É fácil processar formulários usando o Zope e DTML, o Zope procura variáveis em diversos lugares como as informações que vem da ação submit dos formulários HTML, o request. Você não precisa de nenhum objeto especial, DTML Documents e DTML Methods farão todo o trabalho.


Vamos criar dois DTML Documents, um com o id meu_form e outro com o id dados_meu_form com os seguintes conteúdos:


meu_form

<dtml-var standard_html_header>
<p>Por favor insira seus dados baixo:</p>
<form action="infoAction">
nome: <input type="text" name="usuario"><br>
e-mail: <input type="text" name="mail"><br>
<input type="submit" value=”enviar”>
</form>
<dtml-var standard_html_footer>


dados_meu_form

<dtml-var standard_html_header>
<h1>Seguem abaixo as variáveis do DTML Document meu_form</h1>
<p>O nome contido no campo nome da página anterior é: <dtml-var usuario></p>
<p>E o email é: <dtml-var mail></p>
<dtml-var standard_html_footer>


Visualizem o DTML Document meu_form e em seguida insira dados no form, lembrando que não existe validação nesse form, ou seja, ele pode ser submetido sem dado algum, é possível usar o JavaScript para fazer essa validação no lado do cliente, portando insira dados nos dois campos e depois clique em enviar os dados serão enviados para o request e você será remetido para o DTML Document dados_meu_form.


Nele usando dtml-var acessamos facilmente o conteúdo do form da primeira página, e com a mesma facilidade que visualizamos os dados podemos fazer lógica com dados, enviá-los para uma query, etc...


Vamos tentar submeter o form sem dados, vejamos o que acontece! Vamos também visualizar, através da aba view, o DTML Document dados_meu_form e ver o que acontece. Nos dois casos uma exceção é gerada pois o Zope não encontra as variáveis no objeto corrente, no seu repositório ou o request da web.



Atributos da Tag Var


É possível controlar o comportamento da tag var usando seus atributos, essa tag tem muitos atributos que úteis em situações comuns de fomatação. Segue abaixo uma amostra dos atributos:


html_quote - este atributo faz com que os valores inseridos sejam postos entre aspas. Isto significa que <, > e & são aproveitados.


Missing - permite usar um valor para o caso de não achar a variável. Por exemplo: <dtml-var bananas missing="We have no bananas">

fmt - controla o formato da saída das tags var. Existem muitos atributos úteis como o atributo fmt que formata valores monetários.


Vamos fazer um exercício para entedermos melhor o funcionamento de um atributo, crie uma propriedade float em seu folder raiz com o nome custo, de o valor 2.2 a ela.


Mostrando a propriedade custo da folder raiz:


Crie DTML Document ou Method com o seguinte codigo:


<dtml-var custo fmt=dollars-and-cents>


Salve e clique em view, isto faz com que a propriedade custo seja reenderizada assim "$2.20".

obs.: o atributo arredondará os números decimais para o centavo mais próximo.


Sintaxe de Entidade da Tag Var


Uma sintaxe suscinta da DTML apenas para a simples tag var é oferecida pelo Zope, porque a tag var é singular, ela pode ser representada com uma entidade HTML como a seguinte sintaxe:


&dtml-cockatiel;


Isto equivale a :


<dtml-var name="cockatiel" html_quote>


A razão para o uso dessa sintaxe de entidade é permitir o uso de tags DTML dentro de tags HTML. Como no exemplo:


<input type="text" value="<dtml-var name="variável">">


Com essa sintaxe podemos fazer códigos mais legíveis para o seu editor de HTML, como abaixo:


<input type="text" value="&dtml-variável;">


DTML-IF


Essa tag é usada para fazer lógica no DTML, de uma maneira muito restrita pois seria um trabalho muito penoso fazer operações matemáticas com DTML, para isso use um script Python. O dtml-if é mais usado para condicionais mais simples como veremos nesta aula.


O que é uma condição? Uma condição é tanto um valor falso como um verdadeiro. Em geral todos os objetos são considerados verdadeiros a menos que eles sejam 0, None, uma sequência vazia ou uma sring vazia.


Um uso simples, porém útil é uma condicional como a mostrada abaixo:


<dtml-if nome_do_usuário>

Olá, <dtml-var nome_do_usuário>!

</dtml-if>


Podemos usar também expressões como no exemplo:


<dtml-if expr="nome_do_usuário == 'Zope'">

Olá, <dtml-var nome_do_usuário>!

</dtml-if>


E por útimo também podemos usar o dtml-else e o dtml-elif, como abaixo:


<dtml-if nome_do_usuário>

Olá, <dtml-var nome_do_usuário>!

<dtml-else>

Usuário desconhecido

</dtml-if>


<dtml-if expr="nome_do_usuário == 'Zope'">

Olá, <dtml-var nome_do_usuário>!

<dtml-elif expr="nome_do_usuário == 'Python'">

Caro <dtml-var nome_do_usuário>, bem vindo!

<dtml-elif expr="nome_do_usuário == 'Plone'">

Nome de usuário: <dtml-var nome_do_usuário>

</dtml-if>



DTML-IN


Essa é uma tag de bloco, que interage sobre uma sequência de objetos num bloco de execução, executando o código a cada item na sequência. Na programação, isto é frequentemente chamado interação, ou looping. Veja o exemplo:


<dtml-in lista_de_nomes>

<p><dtml-var cada_nome></p>

</dtml-in>


Este exemplo executa um loop sobre uma lista de objetos chamada lista_de_nomes, para cada ocorrencia da lisa_de_nomes é inserido um parágrafo em HTML com o cada nome.


Interação é extremamente útil em aplicações!


Aqui temos um exemplo de como interagir sobre o conteúdo de um folder, este código faz um loop sobre todos os arquivos em um folder e mostra um link para cada um, mostrando como é possível e fácil mostrar todos os objetos do tipo "File" de uma folder na página usando o dtml-in para interagir os resultados da expressão objectValues(File).


<dtml-var standard_html_header>

<ul>

<dtml-in expr="objectValues(File)">

<li><a href="&dtml-absolute_url;"><dtml-var title_or_id></a></li>

</dtml-in>

</ul>

<dtml-var standard_html_footer>

by Fabio Rizzo Matos last modified 25/12/2005 04:40




 
 

Powered by Plone CMS, the Open Source Content Management System

This site conforms to the following standards: