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