Sumário

Introdução
Capítulo Um - Criando uma Home Page
Capítulo Dois - Criando as outras páginas do site
Capítulo Três - Comidas Favoritas de Elvis
Capítulo Quatro - Informações de Contato do Site
Capítulo Cinco - Lugares que nos fazem lembrar de Elvis
Capítulo Seis - Lugares que nos fazem lembrar de Elvis, cont
Capítulo Sete - Arquivo de Fotos de Elvis
Capítulo Oito - Arquivo de fotos de Elvis, cont.

Introdução

Essa apostila mostra a você os princípios básicos de utilização do Zope. Você irá aprender como criar e gerenciar os recursos do Zope construindo um Web site que fala sobre Elvis. Cada capítulo inclui exemplos de trabalho no Zope que lhe permitirão aprender na prática a utilizá-lo.

O conteúdo da apostila é destinado a pessoas que detém conhecimentos básicos de tecnologias utilizadas na Internet, bem como algum conhecimento sobre HTML, URLs e navegadores.

Capítulo Um - Criando uma Home Page

Vamos criar uma página inicial para o nosso site. Primeiramente você precisa criar um Documento DTML para a home page. O Zope utiliza documentos DTML para construir as páginas. Selecione DTML Document no menu "Product Add List", na tela de gerenciamento.

1. Digite home.html no campo ID do novo documento.
2. Digite Elvis Lives no campo Title para ser o título de sua página.
3. Clique em Add and Edit.

Você deverá ver agora uma tela onde poderá editar sua página da Web.

1. Mude o conteúdo do documento para:

<dtml-var standard_html_header>
<dtml-var header.gif> 
<p>
  Bem Vindo ao <i><dtml-var title></i>,<br>
  Sua fonte de informações sobre os lugares por onde Elvis passou.
</p>
<dtml-var standard_html_footer>

2. Clique no botão Change.

Os conteúdos do documento são uma mistura de HTML e tags especiais chamadas DTML.

A Tag <dtml-var> insere objetos nas páginas Web produzidas através do Zope. Nesta página nós inserimos um cabeçalho , um "rodapé" , uma imagem e um título através do DTML.

Agora vamos ver qual a aparência de nossa página.

Para ver como está a aparência de nossa página, clique na aba View localizada no topo da tela de gerenciamento.

Anotações:

• Zope permite que você crie e gerencie objetos através da Web.
• O Zope utiliza Documento DTML para construir páginas Web.
• Através do menu Add Product você insere objetos em seu site.
• Para visualizar o conteúdo da página clique na aba View.
• Insira conteúdo em sua página através da tag <dtml-var>.
• No próximo capítulo nós iremos expandir o web site.

Capítulo Dois - Criando as outras páginas do site

Vamos fazer um link em nossa página inicial com informações sobre Graceland.

Crie um folder com a id graceland.

Dentro desta pasta você deverá encontrar alguns objetos, dentre eles, o documento index_html.

Ao acessar um folder que contém um objeto com o nome de index_html, teremos a sua visualização default. Por exemplo, num servidor Web, utilizamos um documento index.html ou default.htm para a visualização padrão de nossa página inicial. Note que o endereço do folder Internet aparece no topo de nossa tela de gerenciamento. Assim podemos observar a URL deste folder.

Você pode navegar entre as telas de gerenciamento utilizando este endereço.

1. Volte ao folder inicial clicando em sua id na tela de gerenciamento.
2. Clique no objeto home.html para editá-lo.
3. Mude o conteúdo do documento home.html para:

<dtml-var standard_html_header> 
<dtml-var header.gif>
<p>
  Bem Vindo ao <i><dtml-var title></i>,<br>
  Sua fonte de informação sobre Elvis e os lugares por onde ele passou...
</p>
<h2>Sobre Elvis</h2>
<p>
  Elvis Nasceu em <a href="graceland">Graceland</a>.
</p>
<dtml-var standard_html_footer>

4. Clique no botão Change.

Este procedimento adicionou um link para a pasta Internet. Agora vamos testar nosso link.

1. Clique na aba View.

Agora começamos a criar um site utilizando a tecnologia Zope.

Anotações:

Os Objetos do Zope têm uma mesma característica: possuem nome, são arranjados em categorias e possuem uma URL que corresponde à sua localização dentro de um website.

• No Zope os folders são objetos que contém outros objetos.
• Um objeto padrão para um folder é denominado index_html.
• As telas de gerenciamento do Zope permitem a navegação entre os folders e apresentam a URL desses objetos.

No próximo capítulo veremos como movimentar objetos através dos folders do Zope.

Capítulo Três - Comidas Favoritas de Elvis

Elvis realmente gostava de comer! Vamos agora aprender a fazer links entre os objetos do Zope. Vamos criar uma área sobre as comidas que Elvis gostava. Porém, nosso Web site precisa de uma área destinada a essa informação.

1. Selecione FOLDER na lista de produtos na página de gerenciamento.
2. Digite food para id do Folder.
3. Digite Elvis and Food para o title do Folder.
4. Desmarque os dois checkboxes "User Folder" e "Create Public Interface".
5. Clique no botão adicionar (Add).

Agora nos temos algum lugar para colocar nossas informações sobre as comidas favoritas de Elvis. Vamos mover alguns objetos para dentro desse folder.

1. Selecione os documentos sandwiches, pie, e meatloaf clicando em seus chekboxes.
2. Clique no botão "CUT".
3. Clique no Folder food para acessá-lo.
4. Clique no botão "Paste".

Agora que movemos alguns objetos, precisamos atualizar os links referentes a eles.

1. Volte ao documento home.html na pasta da lição 3 e clique sobre ele para editá-lo.
2. Mude os links dos documentos sandwiches, pie, e meatloaf para:

<p>
  Elvis gostava de comer:
  <a href="food/sandwiches">sandwiches</a>,
  <a href="food/pie">pie</a>,
  e <a href="food/meatloaf">meatloaf</a>.
</p>

3. Clique no botão "Change".
4. Clique na aba "View" para verificar as modificações efetuadas. Note que as informações sobre as comidas favoritas de Elvis estão agora corretamente linkadas, apesar de estarem em outra pasta.

Resumo

Você pode organizar objetos Zope em Folders. Você pode criar novos folders e mover objetos entre os folders.

• Mova objetos Zope com os comandos "Cut" e "Paste".
• Os Folders podem conter outros objetos do Zope.
• Movendo um objeto Zope entre os Folders alterará sua URL.

Capítulo Quatro - Informações de Contato do Site

Todo Website oferece um local de contato para que os usuários se comuniquem com os administradores do site. Vamos colocar uma área para que os visitantes entrem em contato através de email. Vamos criar um link de email em cada página, para que os vistantes possam dar sugestões e entrar em contato.

1. Clique na aba Proprierties
2. Digite webmaster no campo "Name".
3. Digite o seu endereço de email no campo "value".
4. Clique no botão "Add".

Agora você criou uma propriedade que define o seu endereço eletônico. Agora vamos colocar um link para o seu email na página "Footer".

1. Clique na aba "Contents" para retornar a lista de itens de seu folder, clicando posteriormente no método DTML standard_html_footer para editá-lo.
2. Mude o conteúdo desse método para:

<hr>
<a href="mailto:<dtml-var webmaster>?subject=<dtml-var title>">Email Webmaster</a>
</body>
</html>

3. Clique no botão "Change".

Agora nos fizemos modificações no documento standard footer do Zope. Vamos verificar como essa mudanças ocorreram em todo o site.

1. Acesse o documento home.html clicando sobre ele.
2. Clique na aba "View".

Note que agora existe um link de email no rodapé de todas as páginas. O Link de email usa a propriedade que você definiu e inclui o título de sua página como assunto do email enviado por seus usuários.

O link de email aparece em todas as páginas pois elas incluem o objeto standard_html_footer na tag <dtml-var>.

Resumo

Consolidando conteúdos em componentes como um rodapé comum a todas as páginas pode proporcionar mudanças uniformes em seu site.

• Propriedades contém pequenos fragmentos de conteúdos.
• Utilize a tag <dtml-var> para inserir propriedades em suas páginas.
• O <standard_html_footer> é utilizado como padrão Zope para rodapés em páginas.

Capítulo Cinco. - Lugares que nos fazem lembrar de Elvis

Vamos dizer que você deseja listar os lugares que lhe trazem lembranças de Elvis. Vamos organizar uma maneira fácil de listar alguns lugares e mostrá-las em seu Web site.

1. Clique no documento sightings.
2. Clique na aba View para visualizá-lo.

Note que a página mostra uma lista com alguns lugares e informações. Note também que estes locais não estão na aba contents de nosso exemplo. Então... De onde eles vieram?

1. Clique no Folder sightings para acessá-lo.
2. Clique no método Shelbyville para examiná-lo.
3. Volte ao folder sightings clicando no endereço na parte superior da tela de gerenciamento.
4. Selecione o método Shelbyville clicando em seu checkbox.
5. Clique no botão Delete.

Você apenas deletou um objeto Zope que descrevia um dos locais que lembravam Elvis. Vamos ver agora o que isso causou em nossa página.

1. Clique no documento sightings para acessá-lo.
2. Clique na aba View para visualizá-lo.

O local Shelbyville não está mais listado. A lista de lugares é construida de alguma forma a partir dos métodos contidos na pasta sightingsFolder.

Você quer retornar com essa informação? A partir do momento que você deletou esse objeto, você pode colocá-lo de volta. Você precisa "desfazer" sua ação!

1. Clique na aba Undo.
2. Selecione a primeira transação ("manage_delObjects") clicando em seu checkbox.
3. Clique no botão Undo.
4. Clique no folder sightingsFolder para acessá-lo.

Veja o que aconteceu.

Resumo

Múltiplos objetos do Zope podem ser combinados para formar complexas páginas Web.

• Documentos DTML podem conter fragmentos de conteúdo.
• Suas páginas podem usar Métodos DTML para inserir conteúdo.
• Você pode "reparar" os erros que cometer através da aba Undo.

Capítulo Seis - Lugares que nos fazem lembrar de Elvis, cont

Então vamos ver como a página monta as informações que se encontram no sightingsFolder...

1. Clique no documento sightings para editá-lo.
2. Mude o conteúdo do documento para:

<dtml-var standard_html_header> 
<h2><dtml-var title></h2>
<table border="1">
  <dtml-in expr="sightingsFolder.objectValues()"> 
    <tr><td>
      <dtml-var sequence-item>
    </td></tr>
  </dtml-in> 
</table>
<dtml-var standard_html_footer>

3. Clique no botão Change.
4. Clique na aba View.

Note como cada lugar descrito está dentro de uma célula de tabela.

A tag dtml-in retorna uma lista de objetos. A tag dtml-var <sequence-item> insere os objetos que estão atualmente disponíveis no folder. A expressão expr="sightingsFolder.objectValues()" que faz parte da tag dtml-in orienta ao Zope como "buscar" estes objetos. Isto chama o método objectValues do folder sightingsFolder. Este método (característico) do Zope retorna todos os objetos contidos em um folder.

Resumo

Você pode utilizar métodos mais avançados do Zope para apresentar os objetos de seu site. Múltiplos objetos do Zope podem ser combinados para montar páginas Web complexas.

Capítulo Sete - Arquivo de Fotos de Elvis

O Rei tinha muitas faces. Nós podemos oferecer aos visitantes de nosso site diversas fotos de Elvis

1. Clique no documento photos.
2. Clique na aba view para visualizá-lo.

Esta página mostra as fotos do arquivo uma após a outra. Isso não seria ideal para o nosso arquivo de fotos. Não é prático.

Vamos organizar a apresentação das fotos por título e tamanho. Nossa apresentação de fotos irá listar as fotos através de seu título e incluir um link para cada fotografia.

1. Clique no documento photos para editá-lo.
2. Mude o conteúdo deste documento para:

<dtml-var standard_html_header> 
<h2><dtml-var title></h2>
<dtml-in expr="photoArchive.objectValues()"> 
  <p>
    <a href="<dtml-var absolute_url>"><dtml-var title></a>
    (<dtml-var getSize> bytes)
  </p>
</dtml-in>
<dtml-var standard_html_footer>

3. Clique no botão change.
4. Clique na aba View.

Note como a lista de fotos agora mostra um link para cada foto, além do tamanho do arquivo da foto.

Resumo

Os arquivos de imagem podem conter informações como tamanho, Título e URL.

Utilize o método getSize para apresentar o tamanho de um arquivo.

Utilize o método absolute_url para apresentar a URL de nossos arquivos.

Capítulo Oito - Arquivo de fotos de Elvis, cont

Agora que temos um arquivo de fotos funcionando vamos "incrementá-lo" com a opção de coletar fotos através dos visitantes do site.

1. Clique no documento photoForm.
2. Clique na aba view para visualiza-lo
3. Faça um Upload de uma imagem (JPG, GIF, PNG)
4. Agora retorne ao folder do capítulo 8.
5. Clique no folder photoArchive para acessá-lo.

Note que agora existe uma arquivo de imagem novo. Este arquivo de imagem foi criado quando você fez o upload da foto.

Vamos ver como isso funciona. Além disso vamos adicionar a habilidade de que a foto enviada tenha um título.

1. Clique no documento photoForm.
2. Mude o seu conteúdo para:

<dtml-var standard_html_header> 
<h2><dtml-var title></h2>
<p>Upload a picture to the Elvis Photo Archive.</p>
<form action="photoAction" method="post" enctype="multipart/form-data">
  <p>
    Title: <input type="text" name="photo_title">
  </p>
  <p>
    File: <input type="file" name="file">
  </p>
  <input type="submit" name="submit">
</form>
<dtml-var standard_html_footer>

3. Clique no Botão Change.

Este documento coletará os dados necessários para criar um arquivo de imagem. Ele chama o documento photoAction. O documento photoAction adiciona a nova imagem.

4. Clique no documento photoAction para editá-lo.
5. Mude o seu conteúdo para:

<dtml-var standard_html_header> 
<h2><dtml-var title></h2>
<dtml-call expr="photoArchive.manage_addImage(id='',
  file=file, title=photo_title)">
<p>Thanks for your photo submission.</p>
<dtml-var standard_html_footer>

O documento photoAction usa a tag <dtml-call> para realizar uma ação de inserir algo em seu Web site. Ele chama o método manage_addImage do folder photoArchive. O manage_addImage é um método próprio do Zope para adicionar arquivos de imagem.

Resumo

Você pode usar formulários para atualizar os conteúdos de seu sistema Zope. Você pode criar novos objetos através da combinação de métodos e formulários.

Documentos do Zope podem ser "acionados" através de formulários HTML.

O método manage_addImage method adiciona novas imagens a um determinado folder.