[Resolvido] 2 ou mais botoes no formulario JSF 2.0 + primefaces

14 respostas
C

Olá a todos, pessoal, tenho 2 p:commandbuttons em um formulario, uso JSF 2.0 + primefaces, um deles é pra fazer login, e está colocado em um panelgrid, e tenho outro panelgrid, com campos de filtros para pesquisar produtos, e nesse tbem tem outro commandbutton, mas quando eu estou digitando um filtro e teclo enter, sempre é executado a action de login, não tem como fazer um esquema assim: se estou nos campos de login e teclar enter, executa a action de login, e se estou nos campos de filtro de pesquisa e teclo enter, executa a action de pesquisa de produtos?

Desde já grato t+

14 Respostas

Q

Bom dia,
Se você estiver usando JSF + RichFaces, existe um componente chamando hotkey que pode lhe ajudar.
Você define os atributos:

  • “key” que no caso seria um “return” (o enter)
  • “selector” que vai ser o seu campo, por exemplo um inputText que vc acabou de digitar alguma coisa e quer dar enter (return) para chamar um button
  • “handler” que vai ser um rich:element(‘idDoSeuButton’).onclick(); ele vai procurar um button com esse id e vai fazer a action do click
<rich:hotKey selector="#CpfCnpjRevenda" key="return" handler="#{rich:element('filtrar')}.onclick(); return false;" />

Qualquer coisa posta aqui ou da uma olhadinha :slight_smile:
http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_hotKey.html

Espero ter ajudado

C

pois é Quindin, pesquisando por ai, eu ja tinha visto esse componente do rich, mas infelizmente o projeto aqui é só primefaces, mas valeu ai, acho q deve ter algo meio parecido no prime, tenho quase certeza q vai ser uma coisinha bem besta isso, como várias das minhas duvidas em jsf, kkkkk

Q

Cara… da uma olhadinha aqui no prime tem um negocio de HotKey tb
http://www.primefaces.org/showcase/ui/hotkey.jsf

C

pois é, já estou dando uma olhadinha… mas tah dificil, aquele exemplo q tem no showcase do prime nao ajuda muito… nao sei exatamente onde colocar essa tag <p:hot key… /> e quais atributos dela usar para quando eu pressiono o enter, se estiver nos campos de login executar a action do botão de login, e se estiver nos campos de pesquisa de produtos executar a action que o botão de pesquisar produtos executa…

C

bom pessoal, só pra constar, ja resolvi meu problema, e nao foi usando p:hotkey, pelo q eu entendi, ele define uma tecla de atalho para um determinado campo no formulario, e não o que será executado quando a tecla enter for pressionada, que é o que eu preciso… em locais diferentes no form executar determinada action quando teclar o enter

resolvi meu problema colocando mais de um h:form na minha pagina, fiz um h:form id=“frmLogin” com os campos de login, ai quando eu preciono enter em algum campo dentro desse form a action de login é executada, e o outro é o h:form id=“frmPesquisa” que tem dois botoes, um para pesquisar e outro para limpar os filtros, ai quando eu preciono enter, é executada a action de pesquisa pq o botão de pesquisa esta declarado antes do botão de limpar, mas deu certo, na verdade acho q essa é a unica solução…

C

Tem como postar a solução ? A minha pesquisar esta assim, mas não consigo atualizar a página com o resultado da seleção.

===============================================================

<script type="text/javascript">
    function closePopUp() {
        window.close();
    }
</script>
<h:head>
    <title>Buscar itens</title>
</h:head>
<h:body>
    <h:form>
        <!-- Titilo da aplicacao  -->
        <table width="90%" align="center">
            <tr>
                <td>
                    <strong><font size="5">Pesquisar itens</font></strong>
                </td>
            </tr>
        </table>
    </h:form>
    <!-- Dados do form  -->
    <ui:insert name="conteudo">
        <h:form>
            <p:dataTable var="item" value="#{itemFace.list}" paginator="true" rows="10"
                         selection="#{itemTabelaPrecoFace.selectedLinhaBusca}" selectionMode="single"
                         onRowSelectUpdate="display"                     
                         emptyMessage="Não há registros a exibir"
                         style="font-size: 10px; background-color: lightblue">

                <f:facet name="header">
                    Lista de itens cadastrados - Double click para selecionar
                </f:facet>
                <p:column sortBy="#{item.codigo}" filterBy="#{item.codigo}" style=" font-size: 10px" >
                    <f:facet name="header">
                        <h:outputText value="Codigo"/>
                    </f:facet>
                    <h:outputText value="#{item.codigo}"/>
                </p:column>
                <p:column sortBy="#{item.descricao}" filterBy="#{item.descricao}" style=" font-size: 10px">
                    <f:facet name="header">
                        <h:outputText value="Descricao"/>
                    </f:facet>
                    <h:outputText value="#{item.descricao}"/>
                </p:column>
               <p:column style="width:30px">
                    <f:facet name="header">
                        <h:outputText value="Ação" style="font-size: 10px"/>
                    </f:facet>                    
                   <h:commandLink title="Selecionar registro" action="#{itemTabelaPrecoFace.doConfirmaBuscaItem}" id="bt_confirmar" onclick="window.close();">
                        <p:graphicImage title="Selecionar registro" value="#{pageContext.servletContext.contextPath}/resources/imagens/confirmar.png" width="15" height="15" alt="Selecionar registro" />
                        <f:setPropertyActionListener target="#{itemTabelaPrecoFace.selectedLinhaBusca}" value="#{item}"/>                            
                    </h:commandLink>
                </p:column>                    
            </p:dataTable>
            <p:messages/>
        </h:form>
    </ui:insert>
</h:body>
C

cristianoassis, pelo q entendi do seu problema, nao tem muito a ver com o meu, mas me diga uma coisa, vc esta tentandando atualizar o q exatamente nessa pagina ? eu vi q vc tem um comandlink na tabela, que seta o objeto no managedbean e executa um metodo e tbem faz window.close(), mas não há nenhuma tag update definindo se algum componente será atualizado… eu vi q tem a tag onRowSelectUpdate=“display” mas esse display existe ? o q é ele ? explica melhor ai seu problema…
ah, nao esquece na proxima vez q postar código utilize esse botãozinho [Code] pra deixar seu código entre as tags {code}{/code} fica muito melhor pra gnt ler.

vlw t+

C

Obrigado pelas dicas. Vou tentar explicar melhor.

Tenho essa tela para incluir os preços dos produtos :

<ui:insert name="conteudo" >
                        <script type="text/javascript">
                            // Abre Popup Busca de Itens
                            function openPopup() {
                                features = "height=400,width=600,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes";
                                window.open('../../../comercial/cadastros/tabelapreco/popupBuscaItem.faces', '', features);
                            }

                            // Carrega Itens
                            function carregarItem(id, nome) {
                                form = document.forms["fmEtiqLog"];
                                form[form.id + ":id"].value   = id;
                                form[form.id + ":nome"].value = nome;
                            }
                        </script>
                        <h:form id="fmEditar">
                            <p:panel header="Incluir item na tabela de preço - #{tabelaPrecoFace.selectedBean.codigo}" style="background-color: #dddddd">
                                <table>
                                    <tr>
                                        <h:commandLink title="Salvar" action="#{itemTabelaPrecoFace.doSaveItemTabelaPreco(tabelaPrecoFace.idTabelaPreco)}" id="bt_salvar">
                                            <p:graphicImage title="Salvar" value="#{pageContext.servletContext.contextPath}/resources/imagens/confirmar.png" width="20" height="20" alt="Salvar" />                                        
                                        </h:commandLink>                            
                                        &nbsp;
                                        <h:commandLink immediate="true" action="#{itemTabelaPrecoFace.doListItemTabelaPreco}" title="Cancelar" id="bt_cancelar">
                                            <p:graphicImage value="#{pageContext.servletContext.contextPath}/resources/imagens/cancelar.png" width="20" height="20" alt="Cancelar" />    
                                        </h:commandLink>
                                    </tr>        
                                    <tr>
                                        <td>Item</td>
                                        <td>
                                            <p:inputText value="#{itemTabelaPrecoFace.selectedBean.item}" size="20" valueChangeListener="#{itemTabelaPrecoFace.itemNovo}" onblur="submit()" rendered="true" >
                                                <f:converter converterId="itemConverter"/>
                                            </p:inputText>
                                            &nbsp;
                                            <h:commandLink immediate="true" title="Pesquisar" id="bt_busca" onclick="openPopup();">
                                                <p:graphicImage value="#{pageContext.servletContext.contextPath}/resources/imagens/busca.png" width="20" height="20" alt="Pesquisar" />
                                            </h:commandLink>
                                            &nbsp;
                                            <h:outputText value="#{itemTabelaPrecoFace.itemNovo.descricao}" style="color: #036fab"/>                                           
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Preço unitário</td>
                                        <td>
                                            <p:inputText  value="#{itemTabelaPrecoFace.selectedBean.preco}" styleClass="monetario" style="text-align: right">
                                                <f:convertNumber type="currency" locale="pt_BR"/>
                                            </p:inputText>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>% Desconto</td>
                                        <td>
                                            <p:inputText  value="#{itemTabelaPrecoFace.selectedBean.desconto}" styleClass="decimal" style="text-align: right">
                                                <f:convertNumber minFractionDigits="2" locale="pt_BR"/> 
                                            </p:inputText>
                                        </td>
                                    </tr>
                               </table>
                               <p:messages/>                        
                            </p:panel>
                        </h:form>
                    </ui:insert>

Quando clico no botão pesquisar, abre o popup abaixo (até esta tudo funcionando legal) .

<html xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <script type="text/javascript">
        function closePopUp() {
            window.close();
        }
    </script>
    <h:head>
        <title>Buscar itens</title>
    </h:head>
    <h:body>
        <h:form>
            <!-- Titilo da aplicacao  -->
            <table width="90%" align="center">
                <tr>
                    <td>
                        <strong><font size="5">Pesquisar itens</font></strong>
                    </td>
                </tr>
            </table>
        </h:form>
        <!-- Dados do form  -->
        <ui:insert name="conteudo">
            <h:form>
                <p:dataTable var="item" value="#{itemFace.list}" paginator="true" rows="10"
                             selection="#{itemTabelaPrecoFace.selectedLinhaBusca}" selectionMode="single"
                             onRowSelectUpdate="display"        
                             emptyMessage="Não há registros a exibir"
                             style="font-size: 10px; background-color: lightblue">

                    <f:facet name="header">
                        Lista de itens cadastrados - Double click para selecionar
                    </f:facet>
                    <p:column sortBy="#{item.codigo}" filterBy="#{item.codigo}" style=" font-size: 10px" >
                        <f:facet name="header">
                            <h:outputText value="Codigo"/>
                        </f:facet>
                        <h:outputText value="#{item.codigo}"/>
                    </p:column>
                    <p:column sortBy="#{item.descricao}" filterBy="#{item.descricao}" style=" font-size: 10px">
                        <f:facet name="header">
                            <h:outputText value="Descricao"/>
                        </f:facet>
                        <h:outputText value="#{item.descricao}"/>
                    </p:column>
                   <p:column style="width:30px">
                        <f:facet name="header">
                            <h:outputText value="Ação" style="font-size: 10px"/>
                        </f:facet>                    
                       <h:commandLink title="Selecionar registro" action="#{itemTabelaPrecoFace.doConfirmaBuscaItem}" id="bt_confirmar" onclick="window.close();">
                            <p:graphicImage title="Selecionar registro" value="#{pageContext.servletContext.contextPath}/resources/imagens/onsys/confirmar.png" width="15" height="15" alt="Selecionar registro" />
                            <f:setPropertyActionListener target="#{itemTabelaPrecoFace.selectedLinhaBusca}" value="#{item}"/>                            
                        </h:commandLink>
                    </p:column>                    
                </p:dataTable>
                <p:messages/>
            </h:form>
        </ui:insert>
    </h:body>

</html>

O problema esta quando eu confirmo a seleção no popup, ele fecha, mas não atualiza o inputtext abaixo da tela principal (que chamou o popup).

<p:inputText value="#{itemTabelaPrecoFace.selectedBean.item}" size="20" valueChangeListener="#{itemTabelaPrecoFace.itemNovo}" onblur="submit()" rendered="true" >
                                                <f:converter converterId="itemConverter"/>
                                            </p:inputText>
C

ah tah, entendi, mas acho q nao vou conseguir te ajudar, pelo q vi, vc tah usando uns scripts pra abrir o popup, eu nunca usei dessa maneira, nao sei se vc esta usando algum framework tipo rich ou primefaces, eu uso primefaces, e pra fazer isso q vc faz, eu uso o componente p:dialog, e ele tem um atributo q posso usar pra atualizar componentes, o onCloseUpdate onde eu coloco o nome do componente que quero atualizar após fechar o dialog, se estiver ao seu alcance usar um framework assim, acho interessante, vai facilitar seu trabalho, agora no seu caso infelizmente nao sei oq vc poderia fazer pra atualizar o inputtext após fechar o popup sendo q vc esta usando script pra fechá-lo…

C

Meu Camarada, foi uma ótima dica!!! Como utilizo o primefaces, consegui resolver meu problema com o componente p:dialog, não tinha pensado nisso. Muito obrigado !!!

C

Meu Camarada, foi uma ótima dica!!! Como utilizo o primefaces, consegui resolver meu problema com o componente p:dialog, não tinha pensado nisso. Muito obrigado !!!

C

So mais um detalhe amigo, caso possa me ajudar. Consegui fazer o popup com o componente p:diolog, mas o problema é que quando eu fecho o p:dilog os campos anteriores da tela são apagados. Sabe como posso evitar isso ? Segue abaixo o código da página.

Grato.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <ui:composition xmlns:p="http://primefaces.prime.com.tr/ui"
                    xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    template="../../../base.xhtml"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core">    
    <ui:define name="title">
    </ui:define> 
    <ui:define name="topo">
    </ui:define>    
    <ui:define name="content">
        <script type="text/javascript" src="../../../resources/js/jquery.price_format.js"></script> 
        <h:body>
                <p:panel style="width: 910px; margin: 0 auto; min-height: 500px; font-size: 12px">
                <h:panelGrid columns="1" style="width: 100%;">  
                    <ui:insert name="usuario">
                    </ui:insert>
                    <ui:insert name="conteudo">
                        <h:form id="fmEditar">
                            <p:focus for="idCodigo"/>
                            <p:panel header="Incluir item" style="background-color: #dddddd">
                                <table>
                                    <tr>
                                        <h:commandLink action="#{itemFace.doFinishCreateItem(usuarioFace.loggedUser.empresa.codigo)}" title="Salvar" id="bt_salvar">
                                            <p:graphicImage value="#{pageContext.servletContext.contextPath}/resources/imagens/confirmar.png" width="20" height="20" alt="Salvar" />
                                        </h:commandLink>
                                        &nbsp;                                        
                                        <h:commandLink immediate="true" action="#{itemFace.doListItens}" title="Cancelar" id="bt_cancelar">
                                            <p:graphicImage value="#{pageContext.servletContext.contextPath}/resources/imagens/cancelar.png" width="20" height="20" alt="Cancelar" />
                                        </h:commandLink>
                                    </tr>                                
                                    <tr>
                                        <td>Código</td>
                                        <td>
                                            <p:inputText id="idCodigo" value="#{itemFace.selectedBean.codigo}" size="20"/>                                           
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Descrição</td>
                                        <td><p:inputText value="#{itemFace.selectedBean.descricao}" size="60"/></td>
                                    </tr>
                                    <tr>
                                        <td>UN</td>
                                        <td>
                                            <h:selectOneMenu style="width: 300px" value="#{itemFace.selectedBean.unidademedida}">
                                                <f:selectItems var="itemSel" itemLabel="#{itemSel.descricao}"  itemValue="#{itemSel}" value="#{itemFace.allUnidadeMedida}"/>
                                                <f:converter converterId="unidadeMedidaConverter"/>
                                            </h:selectOneMenu>       
                                            <p:commandButton process="@this" type="button" value="..." onclick="dlgun.show()" style=" height: 25px; width:35px"/>                                            
                                        </td>
                                    </tr>                                    
                                    <tr>
                                        <td>Preço unitario </td>
                                        <td>                                            
                                            <p:inputText value="#{itemFace.selectedBean.preco}" styleClass="monetario" style="text-align: right">
                                                <f:convertNumber type="currency" locale="pt_BR"/>
                                            </p:inputText>                                        
                                        </td>
                                    </tr>
                            </table>
                            <p:messages/>                        
                            </p:panel>              
                        </h:form>
                    </ui:insert>
               </h:panelGrid> 
            </p:panel>
        </h:body>    
        <p:dialog id="idPesquisa" widgetVar="dlgun" 
                  header="Busca unidade de medida" width="525" height="400" 
                  showEffect="explode" hideEffect="explode">  
            <h:form>
                <p:dataTable var="item" value="#{unidadeMedidaFace.list}" paginator="true" rows="10"
                             selection="#{itemFace.selectedLinhaBuscaUn}" 
                             selectionMode="single"   onRowSelectUpdate="display"                                           
                             emptyMessage="Não há registros a exibir"
                             style="font-size: 10px; background-color: lightblue">

                    <f:facet name="header">
                        Lista de unidades cadastradas
                    </f:facet>
                    <p:column sortBy="#{item.un}" filterBy="#{item.un}" style=" font-size: 10px" >
                        <f:facet name="header">
                            <h:outputText value="Unidade"/>
                        </f:facet>
                        <h:outputText value="#{item.un}"/>
                    </p:column>
                    <p:column sortBy="#{item.descricao}" filterBy="#{item.descricao}" style=" font-size: 10px">
                        <f:facet name="header">
                            <h:outputText value="Descrição"/>
                        </f:facet>
                        <h:outputText value="#{item.descricao}"/>
                    </p:column>                    
                   <p:column style="width:30px">
                        <f:facet name="header">
                            <h:outputText value="Ação" style="font-size: 10px"/>
                        </f:facet>                    
                       <h:commandLink  title="Selecionar registro" action="#{itemFace.doConfirmaBuscaUn}" id="bt_confirmar" onclick="window.close();">
                            <p:graphicImage title="Selecionar registro" value="#{pageContext.servletContext.contextPath}/resources/imagens/onsys/confirmar.png" 
                                            width="15" height="15" alt="Selecionar registro" />
                            <f:setPropertyActionListener target="#{itemFace.selectedLinhaBuscaUn}" value="#{item}"/>                            
                        </h:commandLink>
                    </p:column>                    
                </p:dataTable>
            </h:form>
        </p:dialog>   
        <script type="text/javascript">
            jQuery('.monetario').priceFormat({
                   prefix : 'R$ '
                });
        </script>
        <script type="text/javascript">
            jQuery('.decimal').priceFormat({
                    prefix : '  '
                });
        </script>
     </ui:define>
     </ui:composition>
</html>
C

cara eu acho q tem algo a ver com essa linha abaixo, eu nunca usei tbem process="@this" nem sei o que isso significa, mas eu desconfio q ela submeta todo o formulario né ? me corrija se estiver errado…

<p:commandButton process="@this" type=“button” value="…" onclick=“dlgun.show()” style=" height: 25px; width:35px"/>

outra coisa q pode estar causando seu problema, é se o seu managedbean estiver em escopo request ResquestScope, ai quando vc fecha o dialog e atualiza a pagina, ele acaba por zerar o seu managedbean, mas isso se a primeria frase estiver correta, pra q serve aquela tag process com valor @this ?

C

Resolvi assim :

<h:commandLink action="#{itemFace.doConfirmaBuscaUn}" onclick="dlgun.hide();"> 
                                <p:graphicImage value="#{pageContext.servletContext.contextPath}/resources/imagens/confirmar.png" width="20" height="20"/>
                                <f:setPropertyActionListener target="#{itemFace.selectedLinhaBuscaUn}" value="#{item}"/>  
                                <p:ajax update="fmEditar:idUn"/> 
                       </h:commandLink>

Obrigado!!!

Criado 28 de julho de 2011
Ultima resposta 13 de jan. de 2012
Respostas 14
Participantes 3