Na atualização de versão do software twarehouse além da migração do Tomcat para o Wildfly, a correção de alguns bugs, o refatoramento das classes e outras melhorias resolvi alterar o framework front-end do primefaces para o bootstrap (Twitter).
Tenho enfrentado muitos desafios neste processo já que é grande o trabalho para configurar templates htmls criados com bootstrap.
Somado a isso ainda há algumas incompatibilidades de design e comportamento entre o framework e o JSF, que consomem bastante tempo e neurônios.
Uma dessas dificuldades que enfrentei foi quando surgiu a necessidade de um mensagem de confirmação na exclusão de registros:
Os “botões” do controle na verdade correspondem ao atributo <a> do html com o atributo jsfc que permite a utilização dos atributos do componente aninhado à tag html, no caso o <a>. Segue abaixo:
<a class="btn btn-danger" jsfc="h:commandLink" type="button" action="#{pesquisaSubgrupoBean.setSubgrupoSelecionado(subgrupo)}" immediate="true"> <f:setPropertyActionListener value="#{subgrupo}" target="#{pesquisaSubgrupoBean.subgrupoSelecionado}"/> <f:passThroughAttribute name="data-toggle" value="modal" /> <f:passThroughAttribute name="data-target" value="#myModal" /> <f:ajax/> <i class="icon_close_alt2"></i> </a>
Até ai tudo bem. O problema mesmo era fazer com que o form modal fosse chamado ao clicar no botão. Segue o código do form:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <h:form id="myForm"> <div class="modal-header"> <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button> <h4 class="modal-title">Confirmação de exclusão</h4> </div> <div class="modal-body"> <h:panelGroup layout="block" id="panelDescricao"> Deseja realmente excluir o registro selecionado? <a type="submit" class="btn btn-warning btn-sm" jsfc="h:commandLink" action="#{pesquisaSubgrupoBean.excluir()}"> Sim <f:passThroughAttribute name="data-dismiss" value="modal" /> <f:ajax execute="@this" render="@form"/> </a> <button id="close" type="submit" class="btn btn-info btn-sm">Não</button> </h:panelGroup> </div> </h:form> </div> </div> </div>
Após muitas falhas, como Edson, só precisei acertar uma vez. Com a adição dos atributos no código do botão o form passou a ser chamado, mas instantaneamente era fechado:
<f:passThroughAttribute name="data-toggle" value="modal" /> <f:passThroughAttribute name="data-target" value="#myModal" />
Form modal chamado pelo botão excluir.
Espero que tenha contribuído e ajudado alguém, já que vi algumas tantas dúvidas ainda não respondidas ou que a solução fosse diferente e ineficaz.
Em tempo: ainda tem um pequeno problema. Não consegui a descrição das instância selecionada na mensagem de exclusão. O componente seta a propriedade mas o valor não é exibido. Vou debugar utilizando alguns phaseListeners para identificar o momento de cada ação.
Até!