Ao trabalharmos com arquivos xhtml em JSF, muitas vezes, nos deparamos com arquivos enormes, com isso o JSF possui a tag ui:include que permite a inclusão de outros arquivos do mesmo formato possibilitando uma separação de responsabilidades em arquivos de visão.

Para que a inclusão seja mais eficaz, o JSF fornece a tag ui:param, a qual pode ser utilizada em conjunto com ui:include, possibilitando a passagem de parâmetros para o xhtml a ser incluído.

Segue a baixo um exemplo de uma listagem de carros que possui a apresentação dos dados de um carro em um arquivo distinto, o qual espera um objeto carro por parâmetro para que possa renderizar as informações necessárias.

listagem-carro.xhtml

<ui:composition 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"
                template="/commons/template.xhtml">

    <ui:define name="conteudo">

        <h1>Listagem Carros</h1>

        <h:form>
            <p:panel header="Filtros">
                ...
            </p:panel>

            <p:panel header="Listagem">
                <ui:repeat value="#{carroController.carros}" var="carro">
                    <ui:include src="listagem-carro-tabela.xhtml">
                        <ui:param name="carro" value="#{carro}" />
                    </ui:include>
                </ui:repeat>
            </p:panel>

        </h:form>
    </ui:define>
</ui:composition>

• ui: É a tag que referência o facelets(http://java.sun.com/jsf/facelets);
• ui:include: É o componente para inclusão de xhtmls dentro de outro arquivo xhtml;
• ui:param: É a tag que define o nome e o valor do parâmetro a ser passado.

listagem-carro-tabela.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets">

    <div class="row">
        <h4>#{carro.marca} - #{carro.nome}</h4>
    </div>

    <div class="row">
        <table class="table table-striped">
            <ui:repeat value="#{carro.modelos}" var="modelo">
                <tr>
                    <td>#{modelo.nome}</td>
                </tr>
            </ui:repeat>
        </table>
    </div>
</ui:composition>

A utilização dessa forma traz benefícios como:

• Redução do tamanho do arquivo xhtml, sendo vantajoso quando houver um grande número de informações a ser apresentada pelo objeto;
• Redução da dependência do controller em novos xhtml, em casos que são necessários utilizar include