Modal Panels no JSF: como fazer.

Quando se fala em usabilidade de sistemas, as modal panels,
ou também conhecidas como pop-ups, ou simplesmente modais, se tornam essenciais para
facilitar pequenas e rápidas ações do usuário ou para o carregamento de novas
informações à partir de alguma ação do sistema. No entanto, quando se fala de
criar tais recursos utilizando JSF, de maneira a obter boa performance e fácil
utilização, para a grande maioria programadores a tarefa se torna um tanto
quanto complexa.

Este post visa, portanto, mostrar como fazer estas modais de
uma maneira simples e prática.
Os principais desafios enfrentados pelos programadores são:
  1. o carregamento das modais é lento;
  2. a abertura da modal só ocorre após a requisição feita ao
    servidor;
  3. após a requisição, para a abertura da modal, é necessário
    antes que toda a árvore de objetos do JSF seja atualizada;
  4. pouco feedback (mensagens de retorno) ao usuário sobre o
    carregamento ou gravação dos dados.

 

A solução:

Visando sanar a todos estes problemas, eis aqui uma solução
passo-a-passo a que cheguei à conclusão, após pesquisar alguns métodos. Darei
um exemplo de alteração de uma determinada data, mediante digitação da
justificativa pelo usuário:

Passo 1: incluir a
chamada no evento que abrirá a modal da seguinte forma:

<a4j:commandLink value=“#{msgs.comando_geral_alterar}”
       actionListener=“#{meuManagedBean.exibirAlteracao}”
       onclick=”Richfaces.showModalPanel(‘painelAlteracaoDados’);”
       reRender=“painelDadosAlteracao”
       ajaxSingle=“true”>
</a4j:commandLink>
Neste caso estou chamando o Managed Bean, como “meuManagedBean“, no qual terá a ação ajax a ser
executada, confome colocado no atributo “actionListener
“.  A modal abrirá instantaneamente
com o evento onclick, que chamará um javascript para abrir a modal que chamei
de “painelAlteracaoDados”. O atributo reRender,
renderizará o painel que está dentro da modal “painelDadosAlteracao
” com o resultado da busca ajax. Conforme código do próximo passo abaixo.

Passo 2: criar a
modal como um componente:

 

<?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 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”
xmlns:a4j=“http://richfaces.org/a4j”
 xmlns:rich=“http://richfaces.org/rich”>
<ui:composition>

 

       <rich:modalPanel id=“painelAlteracaoDados” autosized=“true”
              zindex=“2000”>
              <f:facet name=“header”>
                     <h:panelGroup>
                             <h:outputText value=“#{msgs.nome_tela_altera_dados}” />
                     </h:panelGroup>
              </f:facet>
              <f:facet name=“controls”>
                     <h:panelGroup>
                             <a4j:ajaxCommandButton id=“hideImageAlteracaoDados” immediate=“true”
                                    ajaxSingle=“true” image=“/imagens/close.png”
                                    action=“#{CotacaoBean.alterarDisplayModalAlteracaoDados}”
/>
                             <rich:componentControl for=“painelAlteracaoDados”
                                    attachTo=“hideImageAlteracaoDados” operation=“hide” event=“onclick”
/>
                     </h:panelGroup>
              </f:facet>
              <rich:panel id=“painelDadosAlteracaoDados” rendered=“${rendered}”>
                     <h:form id=“formularioAlteracaoDados”>
                             <a4j:region id=“processamentoModalDados”>
                                    <h:panelGrid columns=“2” width=“100%”>
                                           <a4j:calendar id=“dataAlteracao”
                                                  value=“#{meuManagedBean.data}”
                                                  datePattern=“dd/MM/yyyy HH:mm” enableManualInput=“true” />
                                           <a4j:inputTextarea id=“justificativaAlteracaoDados”
                                                  value=“#{meuManagedBean.justificativa}” />
                                    </h:panelGrid>
                                    <rich:messages style=”color:darkred
                                           id=“mensagemErroAlteracaoDados” />
                                    <h:inputHidden id=“idAlteracao” value=“#{meuManagedBean.id}” />
                                    <a4j:ajaxCommandButton id=“saveButtonAlteracaoDados”
                                           reRender=“painelDadosAlteracaoDados, mensagemModal”
                                           value=“#{msgs.comando_geral_salvar}”
                                           action=“#{meuManagedBean.alterarDados}” ajaxSingle=“true”
                                           process=“dataAlteracao, justificativaAlteracaoDados,
idAlteracao”
/>
                                    <a4j:ajaxCommandButton id=“hideButtonAlteracaoDadosCancelar”
                                           value=“#{msgs.comando_geral_fechar}”
                                           action=“#{meuManagedBean.alterarDisplayModalAlteracaoDados}”
ajaxSingle=“true”
                                           immediate=“true” />
                                    <rich:componentControl for=“painelAlteracaoDados”
                                           attachTo=“hideButtonAlteracaoDadosCancelar” operation=“hide”
                                           event=“onclick” />
                                    <a4j:status>
                                           <f:facet name=“start”>
                                                  Salvando
                                           </f:facet>
                                    </a4j:status>
                             </a4j:region>
                     </h:form>
              </rich:panel>
       </rich:modalPanel>
</ui:composition>
</html>

 

Repare que estou criando a modal como um
“ui:composition” para que a mesma seja um componente do Facelets. A renderização da data a ser alterada, se dará na região
demarcada pela tag  “a4j:region”. Isto indica ao JSF que não é necessário
carregar toda a árvore de componentes uma vez que a modal já está aberta, mas
somente deve recarregar o que nos interessa: os campos que foram populados pela
requisição ajax.
Foi utilizado também a tag “a4j:status”
para que, enquanto o salvamento das informações é processado, exiba a mensagem
“salvando…” ao usuário.
Repare que o controle do carregamento das informações e
fechamento da modal se dá pelo atributo “rendered”
colocado no painel que circunda todo o conteúdo da modal. O que indicará então
se a modal recarregará os dados (rendered=”true”) ou se fechará após
tudo ser salvo com sucesso (rendered=”false”) é uma variável booleana
que o método ajax do Managed Bean alterará. O código do método do Managed Bean
está no passo 4.
O outro componente citado pelo reRender, “mensagemModal“, nada mais é que outra modal
criada apenas para exibir mensagens de sucesso ao usuário após esta modal
principal se fechar. Você pode substituí-la por uma região da página principal
(a chamadora) que exibirá sua mensagem.

 

Passo 3: incluir o
seguinte código que monta o componente modal, na mesma tela do evento chamador:

<componente:alteraDadosModal rendered=“${meuManagedBean.displayModalAlteracaoDados}” />
O “displayModalAlteracaoDados
” é a variável booleana de controle da exibição, de que comentei
anteriormente. Ela é controlada pelos métodos seguintes.

 

Passo 4:  os métodos de abertura e processamento do
Managed Bean:

             public void exibirAlteracaoDados(ActionEvent event) {
              setData(dataService.buscarData());
              this.setDisplayModalAlteracaoVencimento(true);
                  }
 
                 public void alterarDados(ActionEvent
event) {

 

        dataService.salvarAlteracao(id, data, justificativa);
        this.setMensagem(TIPO_MENSAGEM_MODAL, ALTERACAO_VENCIMENTO_SUCESSO);      this.setDisplayModalAlteracaoVencimento(false);

}

 

   Bom, é isto. Espero que este
exemplo e explicações sejam úteis aos programadores que estiverem necessitando
utilizar este bom recurso do JSF.
Fiquem à vontade para comentar ou
postar dúvidas! =)

 

 

Modal Panels no JSF: como fazer.

One thought on “Modal Panels no JSF: como fazer.

Deixe uma resposta

O seu endereço de e-mail não será publicado.