JSF and Bootstrap form modal

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:

Controle na pesquisa dos registro.

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é!