terça-feira, 9 de novembro de 2010

[Java] Criando templates com Facelets

Obs: As referências a bibliotecas de tags, xml, imports e configurações serão omitidas. O objetivo é apenas compreender a composição de um template.

Sabemos que é possível compor uma página JSP utilizando includes para melhor reaproveitar trechos de páginas que serão comuns em todo o site ou aplicação.

Com JSP é possível fazer isso pela tag <%@include%> ou ainda, utilizando-se dos recursos JSTL, por meio da construção c:import.

Interessante! Entretanto, estas abordagens podem nos trazer alguns problemas. Por exemplo, é impossível passar parâmetros, dinamicamente, da página que declara os includes para os arquivos incluídos. O recurso <jsp:param> não funcionará nem para o JSF, porque este recurso guarda conteúdo em escopo de página, o que não é suportado pelo JSF. Além disso, alguns containers poderão causar replicações inesperadas de conteúdo, executando uma instrução include mais de uma vez (ver ciclo de vida jsf). Estes problemas vão além de meros bugs da implementação de alguns containers.

O Facelets resolve estes problemas com mecanismo de template baseado em uma abordagem de passagem de parâmetros por EL e suporte completo ao modelo de componentes do JSF.

Veremos por meio de exemplos a composição de um template comum a uma aplicação hipotética, utilizando os recursos do Facelets.

Para um template, basta criar um arquivo xhtml e definir as áreas que serão substituídas quando o template for aplicado. Vamos exemplificar isto construindo um xhtml (vou chamar de meuTemplate.xhtml), informando ao template que o título, o cabeçalho e o conteúdo, serão voláteis, ou seja, irão mudar a cada página:

<head>
    <title>
        <ui:insert name=”titulo”>
          Aqui vai o titulo
        </ui:insert>
    </title>
</head>

<body>
    <ui:insert name=”cabecalho”>
      Aqui vai o cabeçalho
    </ui:insert>
    <ui:insert name=”conteudo”>
      Aqui vai o conteúdo
    </ui:insert>
</body>

Na página em que vamos usar o template, referenciamo-lo da seguinte forma:

<ui:composition template=”meuTemplate.xhtml”></ui:composition>

Redefinindo o valor das áreas voláteis da seguinte forma:

<ui:define name=”titulo”>
  Novo valor do título
</ui:insert>
<ui:define name=”cabecalho”>
  Novo valor do cabeçalho
</ui:insert>
<ui:define name=”conteudo”>
  Novo valor do conteúdo
</ui:insert>

Este é um exemplo muito simples do Facelets para a definição de templates, muita coisa mais sofisticada podemos fazer com estas tags. Saiba que existem outras e espero explorá-las aqui no blog em breve.

Referências:


Grande abraço.