6. Customizando o Layout do Plone

Alguns conceitos básicos

Skins

Uma pele é um conteúdo visual. Ela pode conter pequenas porções de lógicas diretamente relacionadas para aquela representação visual. Quando você instala o Plone você verá a pele padrão, esta é a que os usuários estão mais familiarizados e é o padrão que você verá no plone.org e em outros sites. Escrevendo uma nova skin você pode mudar o jeito do layout do Plone, entretanto ela terá ainda aquela aparência similar ao Plone - zopezen.org ou zopera.org por exemplo.

Mas o Plone não tem que se parecer com todos os outros ou até mesmo ser reconhecido vagamente, como um site Plone. Pegue, por exemplo, a lista de sites encontrados aqui - todos eles são totalmente diferentes e adaptados a vontado do usuário. Na maioria dos casos os sites podem facilmente mover-se entre as skins oferecendo diferentes skins para os usuários. Muito sites usam o poder e a flexibilidade da interface do Plone internamente assim os usuários podem adicionar e editar conteúdo facilmente, apesar de apresentar uma visualização externa totalmente diferente.

As skins são definidas na ZMI na ferramenta portal_skins. Quando clicar no portal_skins clique em properties. Isto apresentará uma lista de skins disponíveis neste site. Por exemplo, há uma skin chamada "Plone Default". No formulário você verá uma entrada para esta skin e alguns valores próximos a ele, estas são as camadas.

Na aba properties um usuário pode alterar a skin padrão para ser mostrada aos usuários e ou permitir que os usuários mudem suas skins Se os usuários podem mudar suas skins eles podem ir para a tela my preferences e mudá-la.

Layers (Camadas)

Cada skin contém camadas. Uma camada é um conjunto individual de templates e scripts que são apresentados aos usuários, combinando estas camadas uma skin é formada. Isto permite que um usuário adicione ou remova facilmente componentes em uma skin alterando estas camadas. Novamente, por exemplo, na skin "Plone Default" (acessada através da ZMI indo por portal_skins -> properties), tem uma série de camadas, "custom, ..." e assim por diante. Estas são as camadas para esta skin.

Duas coisas são importante para saber sobre camadas:

• a ordem das camadas é importante, a que estiver no topo será checada primeiro para um objeto
• cada camada é uma entrada em portal_skins -> contents, e é geralmente uma Visualização do Diretório do Filesystem ou um Folder.

Mudando o logo, um rápido exemplo

Depois de ler acima, você está provavelmente intimidado a tentar alterar algo. A pergunta mais comum é "como eu faço para mudar o logo no canto superior esquerdo do logo do Plone". Isto é uma coisa muito simples de se fazer.

• na ZMI vá até portal_skins -> plone_images
• ache logo.jpg na lista e clique nele
• clique no botão Customize
• carregue uma nova imagem usando a navegação e clique em Upload

É isto, volte para a interface do Plone, a imagem foi alterada. Simples.

Alterando o logo, a explicação

No exemplo acima mostramos como mudar o logo da página principal. ISto acontece porque usamos uma das principais características das skins, as camadas como descrevemos acima. Uma das coisas mais importantes sobre camadas é a ordem da busca, a camada que está mais acima (a primeira da lista) será sempre verificada primeiro para achar o item procurado.

Assim, primeiro vamos olhar as camadas da skin "Plone Default". A primeira camada é "custom", esta é a pasta padrão achada em portal_skins -> custom. Em algum lugar abaixo desta lista você vai achar a camada plone_images. Ela mapeia o Filesystem Directory View e estes arquivos podem ser encontrados no sistema de arquivos dentro da instalação do Plone. QUando você clica na imagem image (portal_skins -> ploneimages, não haverá opção para editar a imagem, mas você pode customizá-la, o texto na imagem abaixo vai ajudar a explicar isto.

Clicar em customise faz uma cópia da imagem dentro da pasta de customização dentro do ZODB e leva você diretamente a ela. Se você olhar com atenção vocÊ verá que o caminho da imagem foi alterado, o meta type mudou e agora você pode editar a imagem.

Por que isto é feito, porque em nossa lista de camadas vem antes a camada plone_images, depois que esta imagem foi copiada dentro da pasta de customização esta imagem é agora a primeira imagem a ser procurada. Assim quando quando o browser requer logo.jpg, ele vai procurar em cada camada, achando a imagem na customização primeir, e retornará aquela imagem.

Agora, no quarto passo acima carregamos uma nova imagem. Este logo.jpg é alterado e a imagem será encontrada como primeira da lista.

Este é o conceito básico de skins e camadas no Plone. Alterando as camadas e movendo os elementos individualmente entre as camadas vocÊ pode facilmente alterar e customizar seu site. Permite que você customize tanto quanto quisero seu site.

Customizando o resto do site

Antes de você se embrenhar nas customização do site e dos page templates, o primeiro lugar para olhar são as stylesheets (folhas de estilo).

Style sheets

A maioria dos estilos do Plone são controlados das folhas de estilo e configurar estas folhas de estilo faz você mudar radicalmente o Plone. Há quatro stylesheets no portal_skins -> plone_styles:

• ploneCustom.css: são as stylesheet padrão, está em branco. Você deve customizar esta primeiro. Nota: Esta folha foi adicionada no Plone1.1.
• plone.css: são as stylesheet principais que controlam a maioria das configuração para o site, se possível altere o ploneCustom.css primeiro.
• ploneNS4.css: são as stylesheet para o Netscape 4
• plonePresentation.css: contém código para o modo de apresentação do Opera
• plonePrint.css: contém código para páginas impressas

Um elemento futuro, stylesheet_properties contém todasas definições de cores, fontes e tamanhos correntes que são usados nos stylesheets acima. Customizar estas propriedades é uma maneira fácil de alterar o layout. Por exemplo se você customizar este ojeto e você pode alterar a fonte principal, alterando a propriedade mainFont para "65% Verdana, Helvetica, Arial, sans-serif".

As outras pastas no portal_skins -> plone_styles são skins que vêm com o Plone e oferecem bom exemplos de sites diferentes.

Images

Todas as imagens (exceto produtos específicos) estão contidas no plone_images.

Plone content

Contém os templates relacionados ao conteúdo. Estes são todos Page Templates, que é Zope templating languages, usado mais que HTML e usado quase exclusivamente pelo Plone. Page Templates são um exemplo extremamente poderoso e elegante de linguagem de templating language[1]. Alterando qualquer um deste templates você pode alterar como o conteúdo está apresentado.

Plone templates

Aqui está, provavelmente a parte mais importante do site, os templates principais, o cabeçalho e rodapé padrão e assim por diante.

Realmente a maneira principal de customizar um novo site é achar as partes que você precisa que sejam customizadas. Isto é atualmente fácil de se fazer. Primeiro ache a URL da página que você está chamando, se há um último elemento como login_form ou document_edit, então estes serão relacionados diretamente aos objetos no diretório portal_skins. Para achar o objeto atual vá para portal_skins -> find e digite o último elemento da URL. Para elementos mais complicados você vai precisar examinar a ferramenta portal_types para ver que ação está sendo chamada. Se todos este falharem, use o find ou grep para achar os arquivos no sistema de arquivos.

Fazendo uma skin totalmente nova

Certamente modificar skins é bom e legal, mas agora vamos fazer uma nova skin.

• vá para portal_skins e adicione uma pasta, dê o nome de alpha
• então vá ao portal_skins -> properties e adicione uma skin, para fazer isto digite o nome e alista de camadas, apenas digite alpha

Para uma nova skin você pode querer ou não adicionar ao seu Plone anterior e aos elementos do CMF, se você adicioná-los depois na camada alpha. É isto, você tem uma nova skin chamada alpha que pega os itens primeiramente da camada alpha.

Exemplo de sites

Um exemplo de site que usa Plone é o ZopeZen.org e todo o código da skin do ZopeZen está disponível. E o conjunto de três artigos discutem como esta skin foi feita. Entretanto com as novas versões do Plone se tornaram desatualizadas em partes, a maioria continua relevante.

• "Building ZopeZen, Part One": http://www.zopezen.org/Members/zopista/News_Item.2002-09-30.2355
• "Building ZopeZen, Part Two": http://www.zopezen.org/Members/zopista/News_Item.2002-10-02.2007
• "Building ZopeZen, Part Three": http://www.zopezen.org/Members/zopista/News_Item.2002-10-09.3743
• Código e skin

Outras configurações

Abas

Abas são determinadas por "Actions" e "Action Providers", abordadas no Capítulo 5 do Livro do Plne. Abas são geradas pela criação de ações. O campo categoria afeta as abas da seguinte maneira:

• se a categoria é portal_tabs será mostrada no topo do site,(por exemplo: News)
• se a categoria é object_tabs será mostrada na borda verde editável (por exemplo: Edit)
• se a categoria é folder_buttons será mostrada como um botão no folder_contents (por exemplo: Folder Contents)

Exemplo: Adicionando uma aba no Plone.org para documentação

Uma tarefa comum é adicionar uma aba no topo do portal apontando para uma pasta de conteúdo. Por exemplo no Plone.org toda a documentação está em uma pasta chamada documentation. Depois queremos que usuários possam acessar facilmente a documentação, uma ação foi adicionada.

• Na interface do Plone:
• Crie uma pasta chamada documentation na raiz do seu site Plone.
• Publique esta pasta (se necessário)
• Na ZMI:
• Vá até portal_actions
• Vá até o final da página para a seção Add e digite o seguinte:
• Name: documentation
• Id: documentation
• Action: string:$portal_url/documentation
• Condition: leave blank
• Permission: View
• Category: portal_tabs
• Visible: checked
• Selecione Add

Você agora tem uma aba visível para qualquer um, para documentação.

Datas

O Plone apresenta data em um certo formato para melhor ler. Estes formatos podem ser alterados da Zope Management Interface. Os valores estão armazenados como propriedades no site. Na ZMI vá até portal_properties -> site properties.

• localTimeFormat são data e hora curtas
• localLongTimeFormat são data e hora em um formato longo

Ambos valores usam o módulo de formato de hora do Python para produzir o formato da hora. A referência para estes formatos podem ser encontrados aqui - Se você não está familiarizado com este módulo, aqui está um rápido resumo.

• %a Abrevia nome dos dias da semana (exemplo: Mon)
• %A Nome completo dos dias da semana (exemplo: Monday)
• %b Nome abreviado do mês (exemplo: Jan)
• %B Nome completo do mês (exemplo: January)
• %d Dia do mês como um número decimal
• %H Hora (24) como um número decimal
• %I Hora (12) como um número decimal
• %m Mês como um número decimal
• %M Minuto como um número decimal
• %S Segundos como um número decimal
• %y Ano sem século como um número decimal
• %Y Ano com século como um número decimal

Por exemplo a configuração padrão para o localTimeFormat é %b. %d, %y. Isto formata a data fazendo com que esteja no formato de mês abreviado. dia númérico, ano com dois dígitos, por exemplo: Oct. 24, 02. Se queremos incluir o nome do dia, tem uma maneira simples de alterar o localTimeFormat para ler %A, %b. %d, %y. Produz o seguinte: Thursday, Oct. 24, 02.

Renderizando as páginas do Plone

Créditos: Jean Jordaan pela documentação inicial

Aqui abordamos como uma página do Plone é renderizada assim você pode alterar ou editar esta renderização e adequá-la ao seu próprio site. A apresentação do conteúdo no Plone se dá através do page template chamado main_template.pt, que pode ser encontrado no sistema de arquivos en skins\plone_templates e através da ZMI para customização em portal_skins -> plone_templates -> main_template.

Agora está desatualizado, precisa ser atualizado para a 1.1

[1] Page Templates são explicados no Zope Book veja os Capítulos 6 e 13 para mais informações.

Próximo: Extendendo o Plone Anterior: Configurando o Plone