JSF + PrimeFaces, usa dois botões dentro de um componente

Olá a todos,

Estou tentando utilizar três botões em uma página JSF, só que esses três botões fazem parte de um mesmo form, o que dificulta separar as ações deles.

Como poderia separar a funcionalidade desses botões?
O botão Salvar deve verificar se os campos do panelGeral foram preenchidos, mas ignorar os do tabView, e os botões adicionar ignorar os campos do panelGeral e apenas adicionar os campos que pertence a ele na dataTable, de certa maneira eu até consegui fazer isso funcionar em partes, mas foi uma gambiarra, então compromete o funcionamento correto.

Alguém teria alguma sugestão de como eu fazer isso funcionar?

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html 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"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition id="composicao" template="/template.xhtml">
        <!--   <ui:define name="title">
              <h:outputText value="#{bundle.CreateAicTitle}"> </h:outputText>
          </ui:define> -->
        <ui:define name="body">


            <f:view contentType="text/html; charset=ISO-8859-1">
                <f:metadata>
                    <f:viewParam name="codigo" value="#{aicController.selected}" />
                </f:metadata>

                <h:outputScript name="js/locale-primefaces.js"/>
                <h:outputScript name="js/jquery.maskMoney.js"/>

                <script  type="text/javascript">
                    $(document).ready(format);
                    function format() {

                        jQuery('input[id*=cd]').unmaskMoney();
                        jQuery('input[id*=cd]').maskMoney({symbolStay: false, symbol: "R$ ", decimal: "", thousands: "", showSymbol: false});
                        
                        jQuery('input[id*=odex]').unmaskMoney();
                        jQuery('input[id*=odex]').maskMoney({symbolStay: false, symbol: "R$ ", decimal: "", thousands: "", showSymbol: false});
                       
                        jQuery('input[id*=projeto]').unmaskMoney();
                        jQuery('input[id*=projeto]').maskMoney({symbolStay: false, symbol: "R$ ", decimal: "", thousands: "", showSymbol: false});
                        
                        jQuery('input[id*=odi]').unmaskMoney();
                        jQuery('input[id*=odi]').maskMoney({symbolStay: false, symbol: "R$ ", decimal: "", thousands: "", showSymbol: false});
                        
                        jQuery('input[id*=valor]').unmaskMoney();
                        jQuery('input[id*=valor]').maskMoney({symbolStay: false, symbol: "R$ ", decimal: ",", thousands: ".", showSymbol: true, precision: 2, allowNegative: true});
                        
                    }
                </script>


                <h:form id="form">
                    <p:panel id="panelGeral" styleClass="centralizado"  header="Cadastrar nova Obra"  style="margin-top: 10px; width: 1024px; border: 0">

                        <h:panelGrid width="100%" columns="3">
                            <h:outputLabel value="ODEX:" for="odex" />
                            <h:outputLabel value="Ordem:" for="descricaoOdex" />
                            <h:outputLabel value="Projeto:" for="projeto" />
                            
                            <p:inputText id="odex" required="true" maxlength="10" value="#{aicController.selected.odex}" title="#{bundle.CreateAicTitle_odex}" requiredMessage="Prenche o campo Odex"/>
                            <p:inputText id="ordem" required="true" maxlength="12" title="#{bundle.CreateAicTitle_odex}" requiredMessage="Prenche o campo Odex"/>
                            <p:inputText id="projeto" required="true" maxlength="10"  title="#{bundle.CreateAicTitle_odex}" requiredMessage="Prenche o campo Odex"/>
                        </h:panelGrid>
                        
                        <h:panelGrid width="100%" columnClasses="colunaTabela33, colunaTabela33, colunaTabela33" columns="3">
                            <h:outputLabel value="Município:" for="cr" />
                            <h:outputLabel value="PEP ou CD:" for="odi" />
                            <h:outputLabel value="Data Imobilização:" for="dataAvisoConclusao" />
                                
                            <p:autoComplete id="municipio"  forceSelection="true" value="#{aicController.selected.cr}"
                                            maxResults="8" size="30" dropdown="true" required="true" requiredMessage="Preencha o campo CR"
                                        var="cr" itemLabel="#{cr.cr}#{cr.idArea.area}#{cr.idDepartamento.departamento}"  itemValue="#{cr}" 
                                        completeMethod="#{crController.completeCreate}" converter="crConverter"/>
                            <p:inputText id="pepCD" maxlength="9" value="#{aicController.selected.odi}" title="#{bundle.CreateAicTitle_odi}" />
                            <p:calendar locale="pt" pattern="dd/MM/yyyy" id="dataImobilizacao" value="#{aicController.selected.dataAvisoConclusao}" title="#{bundle.CreateAicTitle_dataAvisoConclusao}" />
                        </h:panelGrid>
                       
                        <h:panelGrid width="100%" columnClasses="colunaTabela33, colunaTabela33, colunaTabela33" columns="3">
                            <h:outputLabel value="Valor ENEL (R$):" for="dataAvisoConclusao" />
                            <h:outputLabel value="Valor Cliente (R$):" for="statusAvisoConclusao" />
                            <h:outputLabel value="Valor ERD (R$):" for="dataEnergizacao" />
                            
                            <p:inputText id="valorEnel" maxlength="10" value="#{aicController.selected.valor}" title="#{bundle.CreateAicTitle_valor}" required="true" requiredMessage="Preencha o campo Valor." >
                                <f:convertNumber pattern="#,##0.00"/>
                            </p:inputText>
                            <p:inputText id="valorCliente" maxlength="10" value="#{aicController.selected.valor}" title="#{bundle.CreateAicTitle_valor}" required="true" requiredMessage="Preencha o campo Valor." >
                                <f:convertNumber pattern="#,##0.00"/>
                            </p:inputText>
                            <p:inputText id="valorErd" maxlength="10" value="#{aicController.selected.valor}" title="#{bundle.CreateAicTitle_valor}" required="true" requiredMessage="Preencha o campo Valor." >
                                <f:convertNumber pattern="#,##0.00"/>
                            </p:inputText>
                        </h:panelGrid>
                        
                        <h:panelGrid width="100%" columnClasses="colunaTabela33, colunaTabela33, colunaTabela33" columns="3">
                            <h:outputLabel value="Status Pagamento" for="valor" />
                            <h:outputLabel value="#{bundle.CreateAicLabel_interessado}" for="interessado" />
                            <h:outputLabel value="Formato:" for="obrasTerceiro" />
                            
                            <p:selectOneMenu id="statusPagamento" value="#{aicController.selected.obrasTerceiros}" title="#{bundle.CreateAicTitle_obrasTerceiro}" >
                                <f:selectItem itemLabel="Aguardando Analise" itemValue="Aguardando Analise"/>
                                <f:selectItem itemLabel="Aguardando Validação" itemValue="Aguardando Validação"/>
                            </p:selectOneMenu>
                            <p:inputText id="interessado"  maxlength="255"  value="#{aicController.selected.interessado}" title="#{bundle.CreateAicTitle_interessado}" required="true" requiredMessage="Preencha o campo #{bundle.CreateAicTitle_interessado}"/>
                            <p:selectOneMenu id="formato" value="#{aicController.selected.obrasTerceiros}" title="#{bundle.CreateAicTitle_obrasTerceiro}" >
                                <f:selectItem itemLabel="Fisico" itemValue="Fisico"/>
                                <f:selectItem itemLabel="Digital" itemValue="Digital"/>
                            </p:selectOneMenu>
                        </h:panelGrid>
                    </p:panel>
                    
                        <p:tabView id="tabView">
                            <p:tab title="Consumidor" id="tabConsumidor">
                                <h:panelGrid width="100%" columnClasses="colunaTabela33, colunaTabela33, colunaTabela33" columns="3">
                                    <h:outputLabel value="Unidade Consumidora:" for="dataAvisoConclusao" />
                                    <h:outputLabel value="Nome:" for="statusAvisoConclusao" />
                                    <h:outputLabel value="CPF:" for="dataEnergizacao" />

                                    <p:inputText id="unidadeConsumidora" maxlength="10" value="#{aicController.selected.valor}" title="#{bundle.CreateAicTitle_valor}" required="#{param['form:botaoSalvar']==null}" requiredMessage="Preencha o campo Unidade Consumidora." />
                                    <p:inputText id="nomeConsumidor" value="#{aicController.selected.valor}" title="#{bundle.CreateAicTitle_valor}" required="#{param['form:botaoSalvar']==null}" requiredMessage="Preencha o campo Valor." />
                                    <p:inputText id="cpf" maxlength="11" value="#{aicController.selected.valor}" title="#{bundle.CreateAicTitle_valor}" required="#{param['form:botaoSalvar']==null}" requiredMessage="Preencha o campo Valor." >
                                        
                                    </p:inputText>
                                </h:panelGrid>
                                <br/>
                                <p:commandButton id="addConsumidor" value="Adicionar" action="#{parciaisEdesImobAreasController.addItemInList}" update="form:tabView:tabConsumidor" ajax="true" process="form:tabView:tabConsumidor"/>
                                
                                &nbsp;
                                &nbsp;
                                <p:commandButton id="rmvConsumidor" value="Remover" action="#{parciaisEdesImobAreasController.rmvItemList}" update="dataTable" immediate="true" ajax="false" process="@this"/>
                                <br/>
                                <br/>
                                <p:dataTable id="dataTableConsumidor" var="item" emptyMessage="Sem consumidores inseridos." selectionMode="single" value="#{parciaisEdesImobAreasController.dataModel}" selection="#{parciaisEdesImobAreasController.selected}" rowKey="#{item.codigo}" rows="10">
                                    <f:facet name="header">
                                        Lista de Consumidor
                                    </f:facet>

                                    <p:ajax process="@this" event="rowSelect"/>

                                    <p:column headerText="Tipo" style="width: 20%">
                                        <h:outputText value="#{item.odex}" />
                                    </p:column>

                                    <p:column headerText="Protocolo" style="width: 20%">
                                        <h:outputText value="#{item.odd}" />

                                    </p:column>

                                    <p:column headerText="Data" style="width: 20%">
                                        <h:outputText value="#{item.projeto}" />
                                    </p:column>

                                    <p:column headerText="Observação" >
                                        <h:outputText value="#{item.responsavel}" />
                                    </p:column>

                                </p:dataTable>
                            </p:tab>
                            <!--<p:tab title="Interessado" id="tabInteressado">
                                <h:panelGrid width="100%" columns="1">
                                    <h:outputLabel value="Interessado:" for="interessado" />

                                    <p:inputText id="interessado" value="#{aicController.selected.valor}" title="#{bundle.CreateAicTitle_valor}" required="#{param['form:botaoSalvar']==null}" requiredMessage="Preencha o campo Interessado." />
                                </h:panelGrid>
                                <br/>
                                <p:commandButton id="addInteressado" value="Adicionar" action="#{parciaisEdesImobAreasController.addItemInList}" update="form:tabView:tabInteressado" ajax="true" process="form:tabView:tabInteressado"/>
                                
                                &nbsp;
                                &nbsp;
                                <p:commandButton id="rmvInteressado" value="Remover" action="#{parciaisEdesImobAreasController.rmvItemList}" update="dataTable" immediate="true" ajax="false" process="@this"/>
                                <br/>
                                <br/>
                                <p:dataTable id="dataTableInteressado" var="item" emptyMessage="Sem interessados inseridos." selectionMode="single" value="#{parciaisEdesImobAreasController.dataModel}" selection="#{parciaisEdesImobAreasController.selected}" rowKey="#{item.codigo}" rows="10">
                                    <f:facet name="header">
                                        Lista de Consumidor
                                    </f:facet>

                                    <p:ajax process="@this" event="rowSelect"/>

                                    <p:column headerText="Interessado" style="width: 20%">
                                        <h:outputText value="#{item.odex}" />
                                    </p:column>

                                </p:dataTable>
                            </p:tab>-->
                        </p:tabView>
                    
                    <p:panel styleClass="centralizado" header="#{bundle.acoes}" style="margin-top: 10px; width: 1024px;">
                        <h:panelGrid style="text-align: center" columnClasses="colunaTabela33, colunaTabela33, colunaTabela33" columns="3" width="100%">    
                            <p:commandButton id="botaoSalvar" icon="ui-icon-disk" action="#{aicController.create}" value="#{bundle.CreateAicSaveLink}" ajax="false"/>
                            <p:commandButton id="botaoConsultar" icon="ui-icon-search" action="#{aicController.prepareList}" value="#{bundle.CreateAicShowAllLink}" ajax="false" immediate="true"/>
                            <p:commandButton id="botaoNovo" icon="ui-icon-document"  value="#{bundle.novo}" action="#{aicController.prepareCreate}" ajax="false" immediate="true"/>
                        </h:panelGrid>
                    </p:panel>
                </h:form>
            </f:view>
        </ui:define>
    </ui:composition>

</html>

Amigo, não seria interessante tratar isso via server? Creio que seja mais fácil.

1 curtida

Olá @Rodrigomarden

Eu não sei se você ja resolveu, mas utilize a propriedade process do botão para escolher o que você quer processar (ou ignorar)

O código abaixo processa apenas os campos do componente painel-2

<p:commandButton action="#{bean.metodo}" process="painel-2"/>

Faça isso com os seus botões e remove o ajax=false e immediate

1 curtida

Obrigado pelas respostas,

Eu já consegui resolver o problema, foi algo parecido com o que o @Mike mandou, quando eu tiver mais tempo, edito e coloco a solução.