Como criar um tema para Plone usando o Diazo

Diazo é uma nova forma de implementar layouts que o Plone está usando e que tem tudo para se tornar a maneira oficial para se desenvolver temas daqui para frente. Basicamente, ele permite que você aplique um tema de uma página com CSS e HTML estático e transformar em um site dinâmico com o mínimo de constrangimento.

Existem várias vantagens nesta abordagem, entre elas:

Abrir a porta para que mais e novos designers possam trabalhar com o Plone.
Você pode usar um wireframe HTML criado por um webdesigner que nem conhece o Plone
Seu tema passa pode ser facilmente reaproveitado em outros CMS e vice versa.
É possível redesenhar uma interface do usuário sem sequer ter acesso ao código fonte da aplicação
Você pode implementar temas em um tempo muito mais reduzido.
O tema original permanece intocado facilitando a reutilização e manutenção.
Há ainda um ganho de performance pois recursos estáticos como imagens, css e javascripts são fornecidos sem passar pelo Plone

Meu primeiro tema

A maneira mais rápida de usar o Diazo é instalar o produto plone.app.theming, com ele você ganha uma nova opção nas configurações do site e então tudo o que precisará fazer é subir um arquivo zipado contendo o seu tema. Vamos criar um tema bem simples para um fácil e rápido entendimento inicial:

Crie um diretório /meutema e coloque nele o arquivo tema.html:

<html> <head> <title>Meu Diazo Feliz</title> <link rel="stylesheet" href="estilos.css" /> </head> <body> <h1 id="title">Meu tema para Diazo</h1> <div id="content"> Lorem ipsum </div> </body> </html>

Coloque também nesta pasta o arquivo estilos.css:

body { background: #fff repeat-x; color: #000; font-family: Arial, Helvetica, sans-serif; } #content {width: 960px; margin: 0 auto;}

Crie então um arquivo chamado rules.xml:

Por fim crie um arquivo zip desta pasta e suba pelo painel de configurações do Diazo em @@theming-controlpanel

Seu mini-tema deve então estar disponível em seu site.

As regras do jogo

É no arquivo rule.xml que a mágica acontece. Este arquivo contêm as regras que unem o Plone e o tema, substituindo com o espaço do html estático com o conteúdo de verdade. Vamos entender nosso exemplo simples:

<rules> Aqui são definidos três namespaces que fazem o Diazo funcionar. Graças a eles o Diazo permite o uso de seletores completos de CSS3 e XPath, incluindo coisas como o pseudo seletor nth-child.

<theme> Dá a referencia para o arquivo de html estático que será usado no tema.

<drop> Usado para apagar elementos do tema ou do conteúdo. No nosso exemplo estamos eliminando a tag plone-document-byline e tudo o que há dentro dela.

<replace> Uma das mais usadas na implementação de um tema. Isso porque, como o nome já diz, ela substitui um conteúdo estático por um conteúdo dinâmico que você indicar. No nosso exemplo o Diazo colocará todo o #portal-column-content do Plone dentro da tag #content definida em nosso tema estático.

Existem ainda outras tags que podem ser usadas como <before>, <after>, <strip>. <copy>, <notheme> e <merge>. Para um conhecimento mais aprofundado consulte a documentação do Diazo ou aguarde futuros posts aqui no nosso blog.

Perigos do Diazo

É necessário destacar que o Diazo facilitará bastante o desenvolvimento de temas no futuro, mas ele também abre a possibilidade de estragarmos o Plone no processo (Como fizemos neste tutorial). O Plone possui uma história de preocupação com a experiência de uso e possui uma interface poderosa que agora pode ser destruída com poucas linhas. Entre outras coisas o uso indiscriminado do Diazo pode significar:

Perda das validações de código
Perda de usabilidade
Perda de portabilidade
Perda de acessibilidade
Perda na otimização para buscas
Possível incompatibilidade com alguns produtos

Sendo assim é necessário mais do que nunca implementar um tema preocupando-se em manter estas e muitas outras vantagens nativas do Plone. Isso significa atenção aos detalhes, auto-crítica e constante acompanhamento do código gerado pelo Plone. Pode ser uma tarefa trabalhosa, mas o resultado é compensador.

Blog Post