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:
[code language=”html”]
<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>
[/code]
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:
[code language=”html”]
<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>
[/code]
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:
[code language=”html”]
<f:passThroughAttribute name="data-toggle" value="modal" />
<f:passThroughAttribute name="data-target" value="#myModal" />
[/code]
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é!