Ola pessoas!Depois de meses ausente, estou voltando a escrever mas a partir de agora e sobre a versao 3 do PrimeFaces!Primeiramente baixe a versao 3.0 do PrimeFaces aqui. Agora vamos criar um projeto, no meu caso o nome do meu projeto sera "template", este tera a seguinte estrutura:O que eu fiz de diferente... para ficar um projeto mais organizado, eu criei uma pasta tema dentro de Paginas Web, ainda dentro da pasta tema eu criei uma pasta imagens, que e onde eu guardo todas as imagens do design do sistema, nesse caso so coloquei a imagem que sera o topo do nosso template.O principal de tudo isso e o nosso padrao.xhtml que foi criado dentro do tema, ele sera o responsavel pelo nosso template, nele eu coloco tudo o que sera comum a todas as paginas que terao template, por exemplo, o componente growl (que mostra avisos ao usuario, visto em postagens anteriores), alem de styles CSS que as vezes e necessario.O meu template ficara assim:Entao meu template (padrao.xhtml) ficou assim:<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"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Meu Sistema</title> <style type="text/css"> body {background-color: #eeeeee; font-size: 12px} </style> </h:head> <h:body> <div align="center"> <p:layout style="min-width:1020px;max-width:1020px;min-height:600px"> <p:layoutUnit position="north" size="100"> <h:graphicImage url="/tema/imagens/topo.jpg" /> </p:layoutUnit> <p:layoutUnit position="west" size="220"> <ui:insert name="menu"> <h:form> <p:menu style="width: 200px"> <p:submenu label="Menu"> <p:menuitem value="Login" icon="ui-icon-key" /> <p:menuitem value="Fazer meu cadastro" icon="ui-icon-contact" /> </p:submenu> </p:menu> </h:form> </ui:insert> </p:layoutUnit> <p:layoutUnit position="center"> <ui:insert name="centro"> O que estiver aqui sera substituido! </ui:insert> </p:layoutUnit> </p:layout> </div> </h:body></html>Vamos as observacoes quanto ao codigo:Linha 4: Devemos observar que para usar a versao 3.0 do PrimeFaces a namespace e outra agora!Linha 15: Criacao de uma div centralizada, pois meu layout devera ficar centralizado.O segredo do template estao nas linhas 22 e 34 por conta das tags ui:insert, ou seja sao elas que definem onde ficara meus componentes. Perceba que eu ja coloquei o menu diretamente no meu template, ja que sera algo para o projeto inteiro, caso precise de um outro menu para uma pagina exclusiva, apenas sobrescreva o menu na pagina que deseja. Observacao: sempre fique atento ao name da tag ui:insert, pois sao eles que definem o que sera o menu, ou que sera o centro da nossa pagina (nao e obrigado a usar os mesmos nomes que eu coloquei).Agora vamos ver como vai ficar nosso index.xhtml:Veja que so mudou nossa frase do centro... agora vamos ver como usar o tal template!Pagina index.xhtml:<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:decorate template="/tema/padrao.xhtml"> <ui:define name="centro"> Aqui e o centro do index! </ui:define> </ui:decorate></html>Vamos as observacoes:1 - veja que na nossa pagina nao temos mais as tags h:head e h:body ... elas foram substituidas pela tag ui:decorate (caso nao saiba do que eu estou falando, veja essa postagem sobre facelets) nela eu defino qual e o template que eu estou usando nessa pagina, ou seja, e possivel ter mais de um template no mesmo sistema sem problemas!2 - observe que eu so sobrescrevi o centro (linha 5), tudo que deve ficar no centro da pagina deve ficar dentro da tag ui:define.Conclusao: quando se utilizo templates, temos geralmente apenas uma pagina