ModalPanel pesquisa (JSF)

Ola todos!

Eu estou desenvolvendo telas de cadastro utilizando templates e me surgiu um problema. Dentro de um determinado cadastro eu faço uma chamada para a tela de pesquisa que acionará um ModalPanel. Quando eu clico no botão “pesquisar”, o ModalPanel simplesmente fecha. Olhando para a BB eu percebi que ele executou a Action, tanto que quando eu aciono novamente o ModalPanel, na dataTable aparecem os registros e eu consigo fazer a seleção.

Abaixo a parte do template_cadastro.xhtml que coloquei o ui:insert

(to dando uma cortada para facilitar o entendimento)


<html xmlns="http://www.w3.org/1999/xhtml"
      ... >
    
    <a4j:outputPanel id="pesqOutputPanel#{nomeForm}">
        <ui:insert name="pesqModalBlock">
        </ui:insert>
    </a4j:outputPanel>

</html>

dentro da tela de cadastro_equipamentos.xhtml


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

    <ui:composition template="/WEB-INF/template_cadastro.xhtml">

        <ui:define name="pesqModalBlock">
            <a4j:include viewId="/webPages/pesquisaModal.xhtml"/>
            ... ou ...
            <ui:include src="/webPages/pesquisaModal.xhtml"/>
            [b]... EM AMBOS O RESULTADO FOI O MESMO ....[/b]
        </ui:define>


    </ui:composition>
    
</html>

e dentro do pesquisaModal.xhtml…


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

    <ui:composition>

        <!-- modal de pesquisa no cadastro -->
        <rich:modalPanel id="mpPesquisa" width="625" height="500" resizeable="false">
            <f:facet name="header">Pesquisa</f:facet>

            <a4j:form>

                <h:panelGrid columns="4">
                    <h:column>
                            <h:outputText value="Pesquisa:" styleClass="campoLabel"/>
                    </h:column>
                    <h:column>
                        <h:inputText id="pesqNome" value="#{pesquisaMB.campoConsulta}" size="50"/>
                    </h:column>
                    <h:column>
                        <h:commandButton value="Pesquisar" action="#{pesquisaMB.pesquisar}"/>
                    </h:column>
                    <h:column>
                        <h:commandButton id="btnVolta" value="Voltar"
                                           onclick="#{rich:component('mpPesquisa')}.hide()"/>
                    </h:column>
                </h:panelGrid>

                <rich:spacer height="10"/>

                <rich:dataTable width="605"
                                id="listPesqPessoas"
                                rows="10"
                                rowClasses="odd-row,even-row"
                                columnClasses="col"
                                value="#{pesquisaMB.listaConsulta}"
                                var="row">

                    <rich:column sortBy="#{row.codigoOrdem}" sortOrder="ASCENDING" >
                        <f:facet name="header">
                            <h:outputText styleClass="headerText" value="Código"/>
                        </f:facet>
                        <h:outputText value="#{row.codigoOrdem}" />
                    </rich:column>

                    <rich:column sortBy="#{row.nome}" sortOrder="ASCENDING" >
                        <f:facet name="header">
                            <h:outputText styleClass="headerText" value="Nome"/>
                        </f:facet>
                        <h:outputText value="#{row.nome}" />
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:outputText styleClass="headerText" value="Ações"/>
                        </f:facet>
                        <span>
                            <h:commandLink value="selecionar"
                                             onclick="#{rich:component('mpPesquisa')}.hide()">
                                <f:setPropertyActionListener value="#{row}"
                                                             target="#{pesquisaMB.dadosPessoas}"/>

                            </h:commandLink>
                        </span>
                    </rich:column>
                </rich:dataTable>

                <rich:spacer height="10"/>

                <rich:datascroller align="center"
                                   for="listPesqPessoas"
                                   maxPages="10"
                                   reRender="outLista"/>

            </a4j:form>
        </rich:modalPanel>

        <rich:panel id="pParams"
                    style="vertical-align:top; text-align:left; width:922px;">

            <h:panelGrid columns="6">
                <h:column>
                    <h:outputText value="Cliente:" styleClass="campoLabel"/>
                </h:column>
                <h:column>
                    <h:outputLink value="#" id="link">(procurar)
                        <rich:componentControl for="mpPesquisa"
                                               attachTo="link"
                                               operation="show"
                                               event="onclick"/>
                    </h:outputLink>
                </h:column>
                <h:column>
                    <h:inputText id="pesqClienteCodigo"
                                 value="#{pesquisaMB.dadosPessoas.codigoOrdem}"
                                 size="6"
                                 styleClass="campoInput"
                                 disabled="true"/>
                </h:column>
                <h:column>
                    <h:inputText id="pesqClienteNome"
                                 value="#{pesquisaMB.dadosPessoas.nome}"
                                 size="65"
                                 styleClass="campoInput"
                                 disabled="true"/>
                </h:column>
            </h:panelGrid>

        </rich:panel>

    </ui:composition>

</html>

A pesquisa até funciona, mas o Modal fecha?

Gostaria da ajuda dos amigos mais experientes. Eu estou achando que é problema de submit das telas que está fechando mas pesquisei bastante esse fim de semana e não achei o bug.

Por favor, façam perguntas e estarei online no forum para podermos achar esse erro.

Conto com a ajuda da comunidade.

Bispo

Olá ibispo,
Recomendo não ficar duplicando seus posts. Você tem esse mesmo post em máis de uma categoria do Forum e isso não é legal.
Quanto a sua dúvida, provavelmente o seu Bean está redirecionado a página novamente e se por default o Model inicia fechado, dessa forma ele estará após a submissão do form.
O que você pode fazer é retornar null no seu método e fazer a renderização da página via AJAX.

[]´s

Daniel

Daniel, valeu a resposta,

Quando eu postei, eu nao sabia em qual classificacao eu poderia postar essa minha duvida, ai eu pensei que como postei desde manha sem resposta, eu decidi replica-la nessa categoria. Ficarei + esperto da prox vez.

Na Bean, abaixo o metodo Action acionado dentro da ModalPanel


   public void pesquisar() {

        this.listaConsulta = (ArrayList)
            this.pessoaDAO.getBusca( Utilitarios.TIPO_CLIENTE, this.tipoConsulta,
                                     this.campoConsulta, "A");

    }

A Bean esta com o scope dentro do faces-config.xhtml

Alguma outra sugestão?

Bispo.

Você tem certeza que a linha:

<h:commandButton value="Pesquisar" action="#{pesquisaMB.pesquisar}"/>

Está chamando o método VOID pesquisar()?
Estranho, posso estar maluco, mas sempre achei que a ACTION obrigatoriamente deveria retornar uma String.

Poderia postar todo o Bean?

[]´s

Daniel

Olá,

Tenho certeza. Ja fiz um teste colocando um System.out.println() mostrando uma mensagem e ele entrou certinho no metodo VOID. Abaixo todo o meu Bean (cortei os getters e setters dos atributos para facilitar a visualizacao):


public class PesquisaMB implements Serializable {

    private String nomeCadastro;

    private List listaConsulta;

    private String campoConsulta = "";
    private String tipoConsulta = Utilitarios.PESQUISA_PESSOAS_NOME;
    private String situacaoConsulta = Utilitarios.SITUACAO_ATIVO;
    private boolean mostraSituacaoConsulta;

    private ClienteDAO clienteDAO = new ClienteDAO();

    private Clientes dadosClientes = new Clientes();

    public void pesquisar() {

        this.listaConsulta = (ArrayList)
            this.clienteDAO.getBusca( this.tipoConsulta, this.campoConsulta);

    }

    ... GETTERS e SETTERS....
    
}

No aguardo, valeu!

Bispo.

Tente assim:

Bean:

public String pesquisar() {
        this.listaConsulta = (ArrayList) this.clienteDAO.getBusca( this.tipoConsulta, this.campoConsulta);
        return null;
    }

JSP:


        <!-- modal de pesquisa no cadastro -->
        <rich:modalPanel id="mpPesquisa" width="625" height="500" resizeable="false">
            <f:facet name="header">Pesquisa</f:facet>

            <a4j:form>

                <h:panelGrid columns="4">
                    <h:column>
                            <h:outputText value="Pesquisa:" styleClass="campoLabel"/>
                    </h:column>
                    <h:column>
                        <h:inputText id="pesqNome" value="#{pesquisaMB.campoConsulta}" size="50"/>
                    </h:column>
                    <h:column>
                        <a4j:commandButton value="Pesquisar" action="#{pesquisaMB.pesquisar}" reRender="mpPesquisa"/>
                    </h:column>
                    <h:column>
                        <h:commandButton id="btnVolta" value="Voltar" onclick="#{rich:component('mpPesquisa')}.hide()"/>
                    </h:column>
                </h:panelGrid>

                <rich:spacer height="10"/>

                <rich:dataTable width="605"
                                id="listPesqPessoas"
                                rows="10"
                                rowClasses="odd-row,even-row"
                                columnClasses="col"
                                value="#{pesquisaMB.listaConsulta}"
                                var="row">

                    <rich:column sortBy="#{row.codigoOrdem}" sortOrder="ASCENDING" >
                        <f:facet name="header">
                            <h:outputText styleClass="headerText" value="Código"/>
                        </f:facet>
                        <h:outputText value="#{row.codigoOrdem}" />
                    </rich:column>

                    <rich:column sortBy="#{row.nome}" sortOrder="ASCENDING" >
                        <f:facet name="header">
                            <h:outputText styleClass="headerText" value="Nome"/>
                        </f:facet>
                        <h:outputText value="#{row.nome}" />
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:outputText styleClass="headerText" value="Ações"/>
                        </f:facet>
                        <span>
                            <h:commandLink value="selecionar"
                                             onclick="#{rich:component('mpPesquisa')}.hide()">
                                <f:setPropertyActionListener value="#{row}"
                                                             target="#{pesquisaMB.dadosPessoas}"/>

                            </h:commandLink>
                        </span>
                    </rich:column>
                </rich:dataTable>

                <rich:spacer height="10"/>

                <rich:datascroller align="center"
                                   for="listPesqPessoas"
                                   maxPages="10"
                                   reRender="outLista"/>

            </a4j:form>
        </rich:modalPanel>

[]´s

Daniel

Obas,

Eu fiz, conforme sua sugestão mas o problema persiste.

Se a submissao do formulario está sendo feita, existe alguma forma de eu informar que NÃO quero que hava essa submissão?

Sei lá, to ficando grilado com esse problema.

Se tiverem + alguma sugestão, estou aqui.

Bispo.

Daniel, um coisa interessante:

Dentro do faces-config.xml eu estou mandando chamar a tela de pesquisa direto, isto é, sem aciona-la através do cadastro, só para testar e ai, funciona perfeito, isto é, eu clico, a bean executa a ação (metodo VOID) e a lista é preenchida SEM FECHAR O MODALPANEL.

Com isso c acha q devo estar bobeando em alguma coisa referente a maneira de chamar a tela de pesquisa?

No aguardo,

Bispo.

Verifique se você não tem FORM dentro de FORM. Isso normalmente da zica.
Se você já declarou um form fora do modelPanel, remova a a tag a4j:form dele.

[]´s

Daniel

Não esqueça de postar se deu certo ou não. Isso pode ajudar outras pessoas.

[]´s

Daniel

Olá Daniel,

Como falei pra vc. Esse meu projeto começa com menu.xhtml que é acionado quando o usuário passa pela tela de login com sucesso.

faces-config.xml

[code]

           <navigation-rule>
    <from-view-id>/loginForm.xhtml</from-view-id>
    <navigation-case>
        <from-outcome>login</from-outcome>
        <to-view-id>/menu.xhtml</to-view-id>
    </navigation-case>
</navigation-rule>

[code]

O que fiz? Na navegação acima eu mudei ao invés de menu.xhtml eu coloquei pesquisa.xhtml para chamar a tela de pesquisa antes de qualquer coisa.


               <navigation-rule>
	    <from-view-id>/loginForm.xhtml</from-view-id>
	    <navigation-case>
	        <from-outcome>login</from-outcome>
	        <to-view-id>/pesquisa.xhtml</to-view-id>
	    </navigation-case>
	</navigation-rule>

NESSE CASO FUNCIONOU PERFEITO, Roteiro

Clico no link (pesquisar) para abrir o ModalPanel de pesquisa -------- OK
Dentro do ModalPanel, clico no botão “Pesquisar” ---------------- OK
O sistema mostra os registros no dataTable SEM FECHAR o ModalPanel ---------------- OK
Eu clico sob o registro desejado, ele fecha e coloca o registro selecionado na tela --------------- OK

Agora quando eu aciono a tela de pesquisa de DENTRO DO MENU.xhtml

Clico no link (pesquisar) para abrir o ModalPanel de pesquisa -------- OK
Dentro do ModalPanel, clico no botão “Pesquisar” ---------------- OK
O sistema mostra os registros no dataTable SEM FECHAR o ModalPanel ---------------- *** NÃO *** (ele fecha)

############

pesquisa.xhtml


<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:rich="http://richfaces.org/rich">

        <link rel="StyleSheet" type="text/css"
              href="#{facesContext.externalContext.requestContextPath}/css/default.css"/>

    <a4j:outputPanel id="outpParams" ajaxRendered="true" >

        <rich:panel id="pParams"
                    style="vertical-align:top; text-align:left; width:922px;">

            <h:panelGrid columns="7">
                <h:column>
                    <h:outputText value="Cliente:" styleClass="campoLabel"/>
                </h:column>
                <h:column>
                    <a4j:commandLink id="link"
                                     action="#{pesquisaMB.setaOpcoes}"
                                     onclick="Richfaces.showModalPanel('mpPesquisa');">
                        <h:outputText value="(procurar)"/>
                    </a4j:commandLink>
                </h:column>
                <h:column>
                    <h:inputText id="pesqClienteCodigo"
                                 value="#{pesquisaMB.dadosPessoas.codigoOrdem}"
                                 size="6"
                                 styleClass="campoInput"
                                 disabled="true"/>
                </h:column>
                <h:column>
                    <h:outputText value="Nome:" styleClass="campoLabel"/>
                </h:column>
                <h:column>
                    <h:inputText id="pesqClienteNome"
                                 value="#{pesquisaMB.dadosPessoas.nome}"
                                 size="65"
                                 styleClass="campoInput"
                                 disabled="true"/>
                </h:column>
                <h:column>
                    <h:outputText value="Fantasia:" styleClass="campoLabel"/>
                </h:column>
                <h:column>
                    <h:inputText id="pesqClienteApelido"
                                 value="#{pesquisaMB.dadosPessoas.apelido}"
                                 size="35"
                                 styleClass="campoInputCapital"
                                 disabled="true"/>
                </h:column>
            </h:panelGrid>

            <h:panelGrid columns="7">
                <h:column>
                    <h:outputText value="Contato:" styleClass="campoLabel"/>
                </h:column>
            </h:panelGrid>

        </rich:panel>

        <rich:spacer height="10"/>

    </a4j:outputPanel>

    <!-- modal de pesquisa no cadastro -->
    <rich:modalPanel id="mpPesquisa" width="625" height="500" resizeable="false">
        <f:facet name="header">Pesquisa</f:facet>

        <a4j:form>

            <h:panelGrid columns="5">
                <h:column>
                        <h:outputText value="Pesquisa:" styleClass="campoLabel"/>
                </h:column>
                <h:column>
                    <h:selectOneMenu id="selCampoPesquisa"
                                     value="#{pesquisaMB.tipoConsulta}"
                                     style="width:120px">
                        <f:selectItem itemValue="1" itemLabel="Nome"/>
                        <f:selectItem itemValue="2" itemLabel="Telefone"/>
                        <f:selectItem itemValue="3" itemLabel="CEP"/>
                        <f:selectItem itemValue="4" itemLabel="E-mail"/>
                        <f:selectItem itemValue="5" itemLabel="Contato"/>
                        <f:selectItem itemValue="6" itemLabel="CNPJ/CPF"/>
                        <f:selectItem itemValue="7" itemLabel="Código"/>
                    </h:selectOneMenu>
                </h:column>
                <h:column>
                    <h:inputText id="pesqNome" value="#{pesquisaMB.campoConsulta}" size="50"/>
                </h:column>
                <h:column>
                    <a4j:commandButton value="Pesquisar" action="#{pesquisaMB.pesquisar}"/>
                </h:column>
                <h:column>
                    <a4j:commandButton id="btnVolta" value="Voltar" onclick="#{rich:component('mpPesquisa')}.hide()"/>
                </h:column>
            </h:panelGrid>

            <rich:spacer height="10"/>

            <a4j:outputPanel id="outpLista" ajaxRendered="true">

            <rich:dataTable width="605"
                            id="listPesqPessoas"
                            rows="10"
                            rowClasses="odd-row,even-row"
                            columnClasses="col"
                            columnsWidth="50, 305, 50, 130, 70"
                            value="#{pesquisaMB.listaConsulta}"
                            var="row">

                <rich:column sortBy="#{row.codigoOrdem}" sortOrder="ASCENDING" >
                    <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Código"/>
                    </f:facet>
                    <h:outputText value="#{row.codigoOrdem}" />
                </rich:column>

                <rich:column sortBy="#{row.nome}" sortOrder="ASCENDING" >
                    <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Nome"/>
                    </f:facet>
                    <h:outputText value="#{row.nome}" />
                </rich:column>

                <rich:column sortBy="#{row.descTipo}" sortOrder="ASCENDING" >
                    <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Tipo"/>
                    </f:facet>
                    <h:outputText value="#{row.descTipo}" />
                </rich:column>

                <rich:column sortBy="#{row.apelido}" sortOrder="ASCENDING" >
                    <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Fantasia"/>
                    </f:facet>
                    <h:outputText value="#{row.apelido}" />
                </rich:column>

                <rich:column>
                    <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Ações"/>
                    </f:facet>
                    <span>
                        <a4j:commandLink value="selecionar">
                            <f:setPropertyActionListener value="#{row}" target="#{pesquisaMB.dadosPessoas}"/>
                            <a4j:support event="onclick" reRender="outpParams" oncomplete="#{rich:component('mpPesquisa')}.hide()"/>
                        </a4j:commandLink>
                    </span>
                </rich:column>
            </rich:dataTable>

            <rich:spacer height="10"/>

            <rich:datascroller align="center"
                               for="listPesqPessoas"
                               maxPages="10"/>

            </a4j:outputPanel>

        </a4j:form>

    </rich:modalPanel>

</html>

RESUMINDO - Ele funciona perfeito quando chamo como 1a. tela do projeto, mas dentro dele ocorre o erro.

No aguardo,

Bispo.

Daniel,

Eu acredito depois do exemplo que o site http://java.sun.com/javaee/javaserverfaces/download.html mostra que o meu problema deve ser com relação as LIBs utilizadas. Abaixo te mostro quais são:


commons-beanutils-1.7.0.jar 
commons-codec-1.3.jar 
commons-collections-3.2.jar 
commons-digester-1.8.jar 
commons-el.jar 
commons-lang-2.3.jar 
commons-logging-1.1.jar 
jhighlight-1.0.jar 
jsf-api.jar 
jsf-facelets.jar 
jsf-impl.jar 
jstl.jar 
jtds-1.2.2.jar 
mysql-connector-java-3.1.6-bin.jar 
richfaces-api-3.2.0.GA.jar 
richfaces-impl-3.2.0.GA.jar 
richfaces-ui-3.2.0.GA.jar 
standard.jar 
tomahawk-1.1.6.jar 
tomahawk-facelets-taglib.jar 

Será que o caminho não é por ai?

Bispo

Olá todos,

Valeu pelas sugestões. Creio que o forum tá ai pra isso! Quanto mais compartilharmos conhecimento, melhor será para todos!

É o seguinte: Hj pela manhã, após uma noite de sono abri o projeto e pensei. Tenho uma tela que ao clicar em “pesquisar” abre um modalpanel. Poxa, se eu isolar esse ModalPanel no “form” principal chamado menu.xhtml?

Pois bem, separei o modalPanel da tela de pesquisa para o menu e TUDO FUNCIONOU CERTINHO! Inclusive colocando o a4j:status onde qualquer requisição que se faça, o sistema coloca “please wait” perfeito!

Só pra resumir:

Eu tenho o menu.xhtml e o pesquisa.xhtml, onde eu tenho um link para abrir o ModalPanel que estava dentro do pesquisa.xhtml.
Retirei o Modal de dentro do pesquisa.xhtml e coloquei ao final do </a4j:form> do menu.xhtml.

Com isso em qualquer lugar que desejar, posso aciona-lo sem problemas.

Qualquer dúvida a respeito, postem ai e eu terei o prazer de passar outras dicas!

Super valeu!

Bispo.

Daniel, Bom dia quero aprender usar Templates, tu tem esse exemplo ai ? web2ajax@gmail.com posta para mim

obrigado jr

[quote=ibispo]Olá todos,

Valeu pelas sugestões. Creio que o forum tá ai pra isso! Quanto mais compartilharmos conhecimento, melhor será para todos!

É o seguinte: Hj pela manhã, após uma noite de sono abri o projeto e pensei. Tenho uma tela que ao clicar em “pesquisar” abre um modalpanel. Poxa, se eu isolar esse ModalPanel no “form” principal chamado menu.xhtml?

Pois bem, separei o modalPanel da tela de pesquisa para o menu e TUDO FUNCIONOU CERTINHO! Inclusive colocando o a4j:status onde qualquer requisição que se faça, o sistema coloca “please wait” perfeito!

Só pra resumir:

Eu tenho o menu.xhtml e o pesquisa.xhtml, onde eu tenho um link para abrir o ModalPanel que estava dentro do pesquisa.xhtml.
Retirei o Modal de dentro do pesquisa.xhtml e coloquei ao final do </a4j:form> do menu.xhtml.

Com isso em qualquer lugar que desejar, posso aciona-lo sem problemas.

Qualquer dúvida a respeito, postem ai e eu terei o prazer de passar outras dicas!

Super valeu!

Bispo.[/quote]

Posta o código ai se você ainda o tiver. Estou com o mesmo problema.