Reaproveitamento de código nas pagina xhtml com JSF2

6 respostas
F

Oi gente, tudo bem,

tenho uma aplicação com JSF2, facelets e richfaces 4, porém tenho cerca de 40 paginas(cada uma referencia uma tabela no banco de dados) e cada uma delas tem um formulario que pode ser preenchido pelo usúario e uma lista que exibe os dados ja cadastrados em cada formulario, porém com isso estou tendo que escrever muito codigo html.
Usei o facelets para poder reaproveitar o topo, rodape e menu lateral, porém cada formulário eu uso uma tabela pra exibi-lo.
Gostaria de saber se é possivel usar alguma coisa(talvez o próprio facelets para reaproveitar as paginas) ou gerar algum componente especializado para exibir meu formularios e lista de resultado(que é feita com rich:datatable) que pudesse gerar uma economia de código

1 pagina de exemplo

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/template/principalSec.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"                
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                >
    
    <ui:define name="migalha">
        Home > Secretaria > Histórico > Comunidade e Obra
    </ui:define>

    <ui:define name="body">
        <div align="center">            

            <table>
                <tr>
                    <td><rich:message for="gravar" /></td>
                    <td><rich:message for="excluir" /></td>
                </tr>
            </table>
            <br/>
            <rich:panel header="Historico - Comunidade e Obra">
                <h:form id="FormHistComunidadeObra">
                    <h:inputHidden id="hcoId" value="#{gravaHistComunidadeObra.hco_id}"/>
                    <table class="alinhaDireita">
                        <tr>
                            <td>ID:</td>
                            <td><h:inputText id="hcoIdLeitura" disabled="true" value="#{gravaHistComunidadeObra.hco_id}"/><br/></td>
                        </tr>
                        <tr>
                            <td>Comunidade:*</td>
                            <td><h:selectOneMenu required="true"  id="comId" value="#{gravaHistComunidadeObra.com_id}">
                                <f:selectItems value="#{gravaComunidade.comunidades}" var="u" itemLabel="#{u.com_nom_residencia}" itemValue="#{u.com_id}" />
                        </h:selectOneMenu></td>
                        </tr>
                        <tr>
                            <td colspan="2"><h:message  styleClass="mensagemErro" for="comId" /></td>
                        </tr>
                        <tr>
                            <td>Obra:*</td>
                            <td><h:selectOneMenu required="true" id="obrId" value="#{gravaHistComunidadeObra.obr_id}">
                                <f:selectItems value="#{gravaObra.obras}" var="u" itemLabel="#{u.obr_nom}" itemValue="#{u.obr_id}" />
                        </h:selectOneMenu></td>
                        </tr>
                        <tr>
                            <td colspan="2"><h:message  styleClass="mensagemErro" for="obrId" /></td>
                        </tr>
                        <tr>
                            <td>Data de Inicio:*</td>
                            <td><h:inputText required="true" styleClass="data" id="hcoDataInicial" value="#{gravaHistComunidadeObra.hco_data_inicial}" >
                            <f:convertDateTime type="date" pattern="dd/MM/yyyy" locale="pt_BR" timeZone="GMT-3"/>
                        </h:inputText></td>
                        
                        </tr>
                        <tr>
                            <td colspan="2"><h:message  styleClass="mensagemErro" for="hcoDataInicial" /></td>
                        </tr>
                        <tr>
                            <td>Data de Fechamento:</td>
                            <td><h:inputText  id="hcoDataFinal" styleClass="data" value="#{gravaHistComunidadeObra.hco_data_final}" >
                            <f:convertDateTime type="date" pattern="dd/MM/yyyy" locale="pt_BR" timeZone="GMT-3"/>
                        </h:inputText></td>
                        
                        </tr>
                        <tr>
                            <td colspan="2"><h:message  styleClass="mensagemErro" for="hcoDataFinal" /></td>
                        </tr>
                    </table>

                    <br/>
                    <h:commandButton immediate="true" onclick="limpador()"  value="Limpar"/>

                    <h:commandButton id="gravar" value="Gravar" action="#{gravaHistComunidadeObra.gravar}" />

                    <h:commandButton id="excluir" value="Excluir" action="#{gravaHistComunidadeObra.excluir}" />
                </h:form>
            </rich:panel>

            <br/>

            <rich:panel header="Pesquisa" >
                <h:form >
                    <h:inputText value="#{pesquisaTudo.digitar}" />
                    <h:commandButton value="Pesquisar" action="#{pesquisaTudo.pesquisaRelacionar}">
                        <f:param name="classe" value="br.salesianos.modelo.Hist_Comunidade_Obra" />
                        <f:param name="campo" value="co.com_nom_residencia" />
                        <f:param name="segundaEntidade" value="comunidade" />
                        <f:param name="apelidoAlias" value="co" />
                    </h:commandButton>
                    <br/><br/>

                </h:form>
                
                    <div class="scroller">
                
                        <rich:dataTable id="items" styleClass="pesquisar"
                                        value="#{pesquisaTudo.suaListaPesquisa}" 
                                        var="x">
                            <h:column >     
                                <h:form>
                                    <h:commandButton value="Editar" action="#{gravaHistComunidadeObra.editar}">
                                        <f:param name="id" value="#{x.hco_id}" />
                                    </h:commandButton>
                                </h:form>                                
                            </h:column> 
                            <h:column > 
                                <f:facet name="header"> 
                                    <h:outputText value="ID " /> 
                                </f:facet> 
                                <h:outputText value="#{x.hco_id}"/> 
                            </h:column>                              
                            <h:column> 
                                <f:facet name="header"> 
                                    <h:outputText value="Comunidade"/> 
                                </f:facet> 
                                <h:outputText value="#{x.comunidade.com_nom_residencia}"/> 
                            </h:column> 
                            <h:column> 
                                <f:facet name="header"> 
                                    <h:outputText value="Obra"/> 
                                </f:facet> 
                                <h:outputText value="#{x.obra.obr_nom}"/> 
                            </h:column>
                            <h:column> 
                                <f:facet name="header"> 
                                    <h:outputText value="Data Inicial"/> 
                                </f:facet> 
                                <h:outputText value="#{x.hco_data_inicial}"><f:convertDateTime type="date" pattern="dd/MM/yyyy" /></h:outputText>
                            </h:column>
                            <h:column> 
                                <f:facet name="header"> 
                                    <h:outputText value="Data Final"/> 
                                </f:facet> 
                                <h:outputText value="#{x.hco_data_final}"><f:convertDateTime type="date" pattern="dd/MM/yyyy" /></h:outputText>
                            </h:column>
                        </rich:dataTable> 
                                                
                    </div>
                
            </rich:panel>
            <br/>

        </div>
    </ui:define>

</ui:composition>

Nesse exemplo tenho 149 linhas de codigo, eu acho muito, e ainda existem outros formularios que possuem mais

Vlw

6 Respostas

Flavio_machine

O Jboss seam faz isso

F

E como ele pode fazer isso? Tem como dar um exemplo?

tebosoftware

Você poderia utilizar os templates do JSF. Abaixo um exemplo:

Código da página template, no meu caso eu gravei na pasta WEB-INF/templates/interno.xhtml

&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html 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.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"&gt;
    &lt;h:head&gt;
        &lt;title&gt;&lt;ui:insert name="titulo" /&gt;&lt;/title&gt;
        &lt;h:outputStylesheet library="css" name="padrao.css" /&gt;
        &lt;h:outputScript library="js" name="padrao.js" target="body" /&gt;
        &lt;ui:insert name="css" /&gt;
        &lt;ui:insert name="js" /&gt;
    &lt;/h:head&gt; 
    &lt;h:body id="corpo" &gt;
        &lt;div id="divTitulo"&gt;
            &lt;ui:insert name="titulo" /&gt;
        &lt;/div&gt;        
        &lt;div id="divMenu"&gt;
            &lt;ui:include src="/restrito/menu.xhtml" /&gt;
        &lt;/div&gt;
        &lt;h:panelGroup id="divConteudo"&gt;
            &lt;p:messages id="mensagem" showDetail="false" /&gt;
            &lt;ui:insert name="conteudo" /&gt;
        &lt;/h:panelGroup&gt;
        &lt;div id="divRodape"&gt;
            &lt;ui:include src="/publico/rodape.xhtml" /&gt;
        &lt;/div&gt;
    &lt;/h:body&gt;
&lt;/html&gt;

Código exemplo de uso:

&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"&gt;
    &lt;ui:composition template="/WEB-INF/templates/interno.xhtml"&gt;
        &lt;ui:define name="titulo"&gt;Principal&lt;/ui:define&gt;
        &lt;ui:define name="conteudo"&gt;Conteúdo da página&lt;/ui:define&gt;
    &lt;/ui:composition&gt;
&lt;/html&gt;

espereo ter ajudado.

F

Oi, eu entendi seu codigo e uso uma boa parte dele tbm,

<ui:define name="conteudo">Conteúdo da página</ui:define>

Nesta parte do seu codigo é inserido o conteudo na pagina, porém dentro desta parte é que vai todo o conteudo do meu

<ui:define name="body">

O que esta dentro dele que eu gostaria de reduzir, espero que eu tenha conseguido explicar melhor

tebosoftware

Ah tá entendi.

Bom eu comecei a desenvolver componentes para JSF.
No meu caso eu fiz tipo assim:

  • integerInput
  • floatInput
  • cepInput

ai dependo do que vai fazer. Tem como colocar grids padrão.

Você precisa determinar exatamente o que você quer criar como componente.
Coloca um esboço q eu tento te ajudar

F
Começando de uma coisa bem basica, veja o exemplo
<ui:define name="conteudo">

<h:commandButton immediate="true" action="#{limpar.refresh}"  value="Limpar"/>
<h:commandButton id="gravar"   value="Gravar" action="#{gravaAtividade.gravar}" />
<h:commandButton id="excluir"  value="Excluir" action="#{gravaAtividade.excluir}" />

</ui:define>
Todas as minhas paginas tem esse conteudo Como posso usar o template para poder evitar de repetir esse codigo em todas as paginas?

O primeiro h:commandButton nunca muda, porém os outros 2 mudam somente a action

É possivel usar algo do tipo

<ui:define name="body">
#{gravaAtividade.excluir}"
</ui:define>
e ter definido na template
<h:commandButton id="excluir"  value="Excluir" action="<ui:insert name="acao1"></ui:insert>" />
Criado 19 de outubro de 2011
Ultima resposta 20 de out. de 2011
Respostas 6
Participantes 3