Redirecionamento de URL em PrimeFaces Usando remoteCommand

Redirecionamento de URL em PrimeFaces Usando p:remoteCommand §

---

Abstract

Apresentação de uma solução para um problema comum no desenvolvimento de aplicações web com PrimeFaces, onde o redirecionamento para uma URL após a execução de uma ação no servidor não funciona corretamente. A solução envolve o uso de p:remoteCommand para garantir que o link seja gerado de forma síncrona antes de ser aberto pelo navegador.

Introdução §

Em aplicações web utilizando JSF, pode surgir a situação onde a URL gerada no servidor não é aberta corretamente no navegador. Isso acontece frequentemente porque o redirecionamento é feito antes que o servidor tenha completado o processamento e fornecido o link necessário.

Uma solução simples para garantir que o link seja aberto após a geração correta da URL é utilizar o componente p:remoteCommand do PrimeFaces, o qual permite chamar métodos no servidor e, ao mesmo tempo, executar comandos no lado do cliente (JavaScript).

Solução §

1. Uso do p:remoteCommand para Redirecionamento §

No PrimeFaces, o p:commandButton é frequentemente usado para disparar ações no servidor. Porém, ao tentar fazer um redirecionamento logo após a ação, pode ocorrer o problema do link não estar disponível ou ser redirecionado incorretamente (como para uma página “about:blank”). Para garantir que o redirecionamento ocorra somente após a URL ser gerada corretamente, utilizamos o p:remoteCommand.

2. Fluxo de Execução §

• O p:commandButton executa uma ação no servidor, onde o link de pagamento é gerado e armazenado em uma variável do bean (paymentLink).
• O p:remoteCommand chama o método no servidor para garantir que a URL seja gerada de forma síncrona.
• Após o processamento, o p:remoteCommand executa um comando JavaScript que abre o link gerado em uma nova aba.

Exemplo §

<p:column>
    <p:commandButton
        id="copyPaymentLinkButton"
        styleClass="rounded-button ui-button-secondary" 
        icon="pi pi-link"
        process="@this"
        actionListener="#{paymentLinkController.createPaymentLink(prospect)}"
        update=":form"
        oncomplete="openPaymentLink();" />
    <p:tooltip for="copyPaymentLinkButton" value="Copiar link de pagamento" showEffect="clip" hideEffect="fold"/>
</p:column>
 
<p:remoteCommand name="openPaymentLink"
                 action="#{paymentLinkController.createPaymentLink(prospect)}"
                 oncomplete="window.open('#{paymentLinkController.paymentLink}', '_blank');" async="false" />

1. p:commandButton:

   • Ao ser clicado, o botão chama o método createPaymentLink no bean para gerar o link de pagamento. A ação de processamento (process="@this") garante que o próprio botão seja processado, e o atributo update=":form" faz a atualização do formulário após a execução.
   • O evento oncomplete="openPaymentLink();" chama a função openPaymentLink() para abrir o link gerado em uma nova aba do navegador.

2. p:remoteCommand:

   • A tag p:remoteCommand é configurada para invocar o método createPaymentLink no servidor e, ao completar a execução no servidor, dispara um comando JavaScript.
   • O comando JavaScript window.open('#{paymentLinkController.paymentLink}', '_blank'); abre o link gerado em uma nova aba.

3. Síncrono com async="false":

   • Definir async="false" no p:remoteCommand garante que o link seja gerado de forma síncrona antes de executar a ação do cliente (abrir a nova aba).

Referências §

---