Criando Templates de páginas html em JSF utilizando PrimeFaces

Conteúdo do Post:

Definição
Criação da página de template
Tags ui:insert e ui:define
Alterando o arquivo index.html
finally{

Olá Pessoal, tudo bom?

O artigo de hoje está relacionado a criação de templates de páginas html para JSF, utilizando a biblioteca PrimeFaces. Esse artigo é uma continuação dos últimos artigos relacionados a JSF. Veja na continuação desse post…

Definição

A definição básica de template é modelo. Ou seja, ao criar um template está sendo criado um modelo com determinadas características, como áreas de utilização da página, cabeçalho, rodapé, conteúdo central, entre outros.

Alguns exemplos da biblioteca de extensão do PrimeFaces estão disponíveis nessa página. Além disso, o exemplo dessa página está disponível nesse showcase. Repare como existem diversas divisões para as áreas de uma página, isso é feito diretamente com as tags pe:layout e pe:layoutPane.

Criação da página de template

Caso você não possua um projeto Maven-JSF-PrimeFaces, o primeiro ponto é criar o projeto conforme o post relacionado.

Para criar uma página de template vamos utilizar a pasta webapp, se caso não existir criar uma folder paginas e outra folder templates. Caso não lembre como criar folders veja aqui. Dentro da folder templates crie um arquivo chamado layout.xhtml.

Para a questão do layout a ser adotado pelo sistema, será utilizado o padrão definido na Figura 01. Um Cabeçalho na parte norte da página, um rodação na parte sul. Na parte direita um painel para determinadas informações e por fim na parte central-esquerda um outro painel para páginas do sistema.

Figura 01 – Template do sistema de Seminarios Acadêmicos

O código da página layout.xhtml será o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions">

<h:head>
    <h:outputStylesheet name="geral.css" library="css" />
    <title>#{labels['titulo.seminariosAcademicos']}</title>
</h:head>
<h:body>
    <pe:layout id="fullPage" stateCookie="true" widgetVar="fpLayoutWidget">
        <pe:layoutPane minSize="250px" position="north" styleClassContent="conteudoPanel">
            Cabecalho - Menu
        </pe:layoutPane>
        <pe:layoutPane position="center" styleClassContent="conteudoPanel">
            Parte para inserir mensagens do sistema<br/>
            <ui:insert name="centerContent">
                Parte Central - Aonde vai a pagina xhtml a ser inserida
            </ui:insert>
        </pe:layoutPane>
        <pe:layoutPane position="east" styleClassContent="conteudoPanel">
            Painel à direita
        </pe:layoutPane>
        <pe:layoutPane position="south" styleClassContent="conteudoPanel">
            Rodapé
        </pe:layoutPane>
    </pe:layout>
</h:body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:p="http://primefaces.org/ui"

xmlns:pe="http://primefaces.org/ui/extensions">

<h:head>

<h:outputStylesheet name="geral.css" library="css" />

<title>#{labels['titulo.seminariosAcademicos']}</title>

</h:head>

<h:body>

<pe:layout id="fullPage" stateCookie="true" widgetVar="fpLayoutWidget">

<pe:layoutPane minSize="250px" position="north" styleClassContent="conteudoPanel">

Cabecalho - Menu

</pe:layoutPane>

<pe:layoutPane position="center" styleClassContent="conteudoPanel">

Parte para inserir mensagens do sistema<br/>

<ui:insert name="centerContent">

Parte Central - Aonde vai a pagina xhtml a ser inserida

</ui:insert>

</pe:layoutPane>

<pe:layoutPane position="east" styleClassContent="conteudoPanel">

Painel à direita

</pe:layoutPane>

<pe:layoutPane position="south" styleClassContent="conteudoPanel">

Rodapé

</pe:layoutPane>

</pe:layout>

</h:body>

</html>

Repare que está sendo utilizado três configurações básicas:

A primeira é a PrimeFaces Extensions, cuja configuração se encontra nesse artigo.
A segunda está relacionada aos arquivos resource bundles, cuja configuração está nesse artigo.
A terceira são as classes css utilizadas, configuração aqui.

Como é uma página template, é necessário criar um head e um body para a página. Além disso existem diversas partes que serão configuradas de acordo com a necessidade no projeto, como o cabeçalho, menu, mensagens do sistema, rodapé, painel à direita.

A única coisa que será coberta nesse artigo é a parte central, pois a próxima parte do artigo será modificar a página index.xhtml para que utilize o template. Dessa forma é necessário uma explicação à parte.

Tags ui:insert e ui:define

O arquivo template cria toda a estrutura para abrigar a página, isso é feito para que possa ser criado páginas só com o conteúdo principal, sem precisar se preocupar com menus e outros aspectos. Isso é muito interessante, pois se quisermos alterar a estrutura do projeto, apenas alteramos o layout do template e todas as páginas que o utilizam automaticamente serão organizadas.

A tag ui:insert serve para delimitar um determinado espaço na página de template o qual será ocupado por essa parte de conteúdo. Essa tag possui element chamado name, o qual serve para definir o nome dessa área de conteúdo. Por exemplo, na linha 21 da página layout.xhtml criada na seção anterior, foi definido o name centerContent para definir essa seção de conteúdo central.

Já a tag ui:define será utilizado na página destino, ou seja, na página que abrigará o conteúdo. Ela contém o mesmo element name, que deverá ser um nome de uma área válida definida no arquivo do template. Dessa forma o JSF buscará na página de template o name da área que foi informada na tag ui:define.

Caso a página de template não contenha o name informado, apenas não será renderizado o conteúdo da página. Não será apresentado nenhum erro no console, nem em nenhuma página JSF, cuidado com isso!

Por fim, na página de conteúdo ainda deverá ser utilizado a tag ui:composition informando no element template a localização do arquivo de template. Mais detalhes sobre a utilização das tags ui:define e ui:composition na próxima seção que irá mostrar como alterar o arquivo index.xhtml.

Alterando o arquivo index.html

Criado o arquivo de template é hora de alterar a página index.xhtml para utilizar do template e inserir o conteúdo central nesta página. A primeira alteração a ser realizada é trocar a tag html pela tag ui:composition. Adicionar a essa tag o element template com a localização do arquivo template e o namespace xmlns:ui=”http://java.sun.com/jsf/facelets” para que o JSF possa localizar a tag ui:composition e ui:define.

A segunda parte é remover as tags h:head e h:body, pois isso será utilizado apenas no template a partir de agora e no lugar destas colocar a tag ui:define com o name apontando para a area definida no template, no caso centerContent. O restante do conteúdo central do arquivo permanece igual. Veja o código abaixo com enfase nas partes destacadas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/paginas/templates/layout.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <ui:define name="centerContent">
        <p:outputLabel value="#{labels.index}"/>
        <br/><br/>
        <p:outputLabel value="#{msgs['IN0001']}"/>
    </ui:define>
</ui:composition>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition template="/paginas/templates/layout.xhtml"

xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:p="http://primefaces.org/ui">

<ui:define name="centerContent">

<p:outputLabel value="#{labels.index}"/>

<p:outputLabel value="#{msgs['IN0001']}"/>

</ui:define>

</ui:composition>

Agora inicie o servidor do JBoss e veja a mudança que irá acontecer na Figura 02.

Figura 02 – Diferença entre a utilização do template

Repare que as mensagens que apareciam antes, (Página inicial… e Operação realizada…) estão aparecendo na parte central definida no template.

Pronto agora o sistema JSF já possui um template xhtml para facilitar as alterações de layout.

finally{

Duvidas ou sugestões? Deixe seu feedback! Isso ajuda a saber a sua opinião sobre os artigos e melhorá-los para o futuro! Isso é muito importante!

Até um próximo post!

Criando Templates de páginas html em JSF utilizando PrimeFaces

Definição

Criação da página de template

Tags ui:insert e ui:define

Alterando o arquivo index.html

finally{

About Mauda

Leave a Reply Cancel reply

Definição

Criação da página de template

Tags ui:insert e ui:define

Alterando o arquivo index.html

finally{

About Mauda

Reader Interactions

Leave a Reply Cancel reply