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.s

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:

[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.

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

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *