JSF 2.0: Template em Facelets com Layout do PrimeFaces 3.0
Autor: andii.brunetta | Publicado: 2012-03-21T23:02:00-04:00


Olá pessoas!

Depois de meses ausente, estou voltando a escrever mas a partir de agora é sobre a versão 3 do PrimeFaces!

Primeiramente baixe a versão 3.0 do PrimeFaces aqui. Agora vamos criar um projeto, no meu caso o nome &nbsp;do meu projeto será "template",&nbsp;este terá a seguinte estrutura:







O que eu fiz de diferente... para ficar um projeto mais organizado, eu criei uma pasta tema dentro de Páginas Web, ainda dentro da pasta tema eu criei uma pasta imagens, que é onde eu guardo todas as imagens do design do sistema, nesse caso só coloquei a imagem que será o topo do nosso template.

O principal de tudo isso é o nosso padrao.xhtml que foi criado dentro do tema, ele será o responsável pelo nosso template, nele eu coloco tudo o que será comum a todas as páginas que terão template, por exemplo, o componente growl (que mostra avisos ao usuário, visto em postagens anteriores), além de styles CSS que as vezes é necessário.
O meu template ficará assim:





Então meu template (padrao.xhtml) ficou assim:

&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"&gt;

    &lt;h:head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
        &lt;title&gt;Meu Sistema&lt;/title&gt;
        &lt;style type="text/css"&gt;
            body {background-color: #eeeeee; font-size: 12px}
        &lt;/style&gt; 
    &lt;/h:head&gt;
    &lt;h:body&gt;
        &lt;div align="center"&gt;
            &lt;p:layout style="min-width:1020px;max-width:1020px;min-height:600px"&gt;  
                &lt;p:layoutUnit position="north" size="100"&gt;  
                    &lt;h:graphicImage url="/tema/imagens/topo.jpg" /&gt;
                &lt;/p:layoutUnit&gt;  

                &lt;p:layoutUnit position="west" size="220"&gt;  
                    &lt;ui:insert name="menu"&gt;
                        &lt;h:form&gt;
                            &lt;p:menu style="width: 200px"&gt;
                                &lt;p:submenu label="Menu"&gt;
                                    &lt;p:menuitem value="Login" icon="ui-icon-key" /&gt;
                                    &lt;p:menuitem value="Fazer meu cadastro" icon="ui-icon-contact" /&gt;         
                                &lt;/p:submenu&gt;
                            &lt;/p:menu&gt;
                        &lt;/h:form&gt;
                    &lt;/ui:insert&gt;
                &lt;/p:layoutUnit&gt;  
                &lt;p:layoutUnit position="center"&gt;  
                    &lt;ui:insert name="centro"&gt;
                        O que estiver aqui será substituido!
                    &lt;/ui:insert&gt;
                &lt;/p:layoutUnit&gt;  
            &lt;/p:layout&gt;  
        &lt;/div&gt;
    &lt;/h:body&gt;
&lt;/html&gt;


Vamos às observações quanto ao código:
Linha 4: Devemos observar que para usar a versão 3.0 do PrimeFaces a namespace é outra agora!
Linha 15: Criação de uma div centralizada, pois meu layout deverá ficar centralizado.
O segredo do template estão nas linhas 22 e 34&nbsp;por conta das tags ui:insert, ou seja são elas que definem onde ficará meus componentes. Perceba que eu já coloquei o menu diretamente no meu template, já que será algo para o projeto inteiro, caso precise de um outro menu para uma página exclusiva, apenas&nbsp;sobrescreva o menu na página que deseja. Observação: sempre fique atento ao name da tag ui:insert, pois são eles que definem o que será o menu, ou que será o centro da nossa página (não é obrigado a usar os mesmos nomes que eu coloquei).
Agora vamos ver como vai ficar nosso index.xhtml:






Veja que só mudou nossa frase do centro... agora vamos ver como usar o tal template!
Página index.xhtml:
&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
    &lt;ui:decorate template="/tema/padrao.xhtml"&gt;
        &lt;ui:define name="centro"&gt;
            Aqui é o centro do index!
        &lt;/ui:define&gt;
    &lt;/ui:decorate&gt;
&lt;/html&gt;


Vamos às observações:
1 - veja que na nossa página não temos mais as tags h:head e h:body ... elas foram substituídas pela tag ui:decorate (caso não saiba do que eu estou falando, veja essa postagem sobre facelets) nela eu defino qual é o template que eu estou usando nessa página, ou seja, é possível ter mais de um template no mesmo sistema sem problemas!
2 - observe que eu só sobrescrevi o centro (linha 5), tudo que deve ficar no centro da página deve ficar dentro da tag ui:define.

Conclusão: quando se utilizo templates, temos geralmente apenas uma página que contém h:head e h:body que é o próprio template (a não ser que o sistema tenha outras páginas sem template), quanto as outras páginas com template, elas precisam ter o ui:decorate ou ui:composition (veja a postagem de facelets, link acima). Ao executar seu sistema, olhe o código fonte, e veja que o código do template fica embutido com o código da sua página, como se tudo estivesse na mesma página.

Vantagem: Quer alterar o seu design? Quando começou o sistema o seu design era um, e agora já se cansou dele? Então, essa pode ser uma boa solução para você, pois a vantagem é bem essa, ter que fazer alterações em apenas uma página para trocar o design do sistema inteiro. Imagina o que seria um sistema com 50 páginas sem utilizar template? Seria necessário passar de página por página alterando o design, ainda correndo o risco de deixar uma página de fora das alterações.

Nesse exemplo eu fiz uma junção do componente p:layout do PrimeFaces com o Facelets (responsável pelas tags: ui:insert, ui:define ui:.... etc...), mas se preferir usar CSS, nada te impede, coloque o ui:insert dentro de div formatadas na posição que desejar.

Bom... o post de hoje foi curto, mas espero que seja útil!