{"id":201,"date":"2015-10-01T22:14:30","date_gmt":"2015-10-01T22:14:30","guid":{"rendered":"https:\/\/aboutcsharp.wordpress.com\/?p=201"},"modified":"2015-10-01T22:14:30","modified_gmt":"2015-10-01T22:14:30","slug":"jsf-and-bootstrap-form-modal","status":"publish","type":"post","link":"https:\/\/sidroniolima.com.br\/blog\/2015\/10\/01\/jsf-and-bootstrap-form-modal\/","title":{"rendered":"JSF and Bootstrap form modal"},"content":{"rendered":"\n
Tweet<\/a><\/div>\n

Na atualiza\u00e7\u00e3o de vers\u00e3o do software twarehouse<\/a>\u00a0al\u00e9m da migra\u00e7\u00e3o do Tomcat para o Wildfly, a corre\u00e7\u00e3o de alguns bugs, o refatoramento das classes e outras melhorias\u00a0resolvi alterar o framework front-end do primefaces<\/a>\u00a0para o bootstrap<\/a>\u00a0(Twitter).<\/p>\n

Tenho enfrentado muitos desafios neste processo j\u00e1 que \u00e9 grande o trabalho para configurar templates htmls criados com bootstrap.<\/p>\n

Somado a isso ainda h\u00e1 algumas incompatibilidades de design e comportamento entre o framework e o JSF, que consomem bastante tempo e neur\u00f4nios.<\/p>\n

Uma dessas dificuldades que enfrentei foi quando surgiu a necessidade de um mensagem de confirma\u00e7\u00e3o na exclus\u00e3o de registros:<\/p>\n

\"Controle<\/a>

Controle na pesquisa dos registro.<\/p><\/div>\n

Os “bot\u00f5es” do controle na verdade correspondem ao atributo <a> do html com o atributo jsfc que permite a utiliza\u00e7\u00e3o dos atributos do componente aninhado \u00e0 tag html, no caso o <a>. Segue abaixo:<\/p>\n

[code language=”html”]<\/p>\n

<a class="btn btn-danger"
\n jsfc="h:commandLink"
\n type="button"
\n action="#{pesquisaSubgrupoBean.setSubgrupoSelecionado(subgrupo)}"
\n immediate="true">
\n <f:setPropertyActionListener
\n value="#{subgrupo}"
\n target="#{pesquisaSubgrupoBean.subgrupoSelecionado}"\/><\/p>\n

<f:passThroughAttribute name="data-toggle" value="modal" \/>
\n <f:passThroughAttribute name="data-target" value="#myModal" \/>
\n <f:ajax\/><\/p>\n

<i class="icon_close_alt2"><\/i>
\n<\/a>
\n[\/code]<\/p>\n

At\u00e9 ai tudo bem. O problema mesmo era fazer com que o form modal fosse chamado ao clicar no bot\u00e3o. Segue o c\u00f3digo do form:<\/p>\n

[code language=”html”]<\/p>\n

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
\n <div class="modal-dialog modal-sm">
\n <div class="modal-content">
\n <h:form id="myForm">
\n <div class="modal-header">
\n <button aria-hidden="true" data-dismiss="modal" class="close" type="button">\u00d7<\/button>
\n <h4 class="modal-title">Confirma\u00e7\u00e3o de exclus\u00e3o<\/h4>
\n <\/div>
\n <div class="modal-body">
\n <h:panelGroup
\n layout="block"
\n id="panelDescricao"><\/p>\n

Deseja realmente excluir o registro selecionado?<\/p>\n

<a type="submit"
\n class="btn btn-warning btn-sm"
\n jsfc="h:commandLink"
\n action="#{pesquisaSubgrupoBean.excluir()}">
\n Sim
\n <f:passThroughAttribute name="data-dismiss" value="modal" \/>
\n <f:ajax
\n execute="@this"
\n render="@form"\/>
\n <\/a><\/p>\n

<button
\n id="close"
\n type="submit"
\n class="btn btn-info btn-sm">N\u00e3o<\/button>
\n <\/h:panelGroup>
\n <\/div><\/p>\n

<\/h:form>
\n <\/div>
\n <\/div>
\n<\/div> <\/p>\n

[\/code]<\/p>\n

Ap\u00f3s muitas falhas, como Edson, s\u00f3 precisei acertar uma vez. Com a adi\u00e7\u00e3o dos atributos no c\u00f3digo do bot\u00e3o o form passou a ser chamado, mas instantaneamente era fechado:<\/p>\n

[code language=”html”]<\/p>\n

<f:passThroughAttribute name="data-toggle" value="modal" \/>
\n <f:passThroughAttribute name="data-target" value="#myModal" \/><\/p>\n

[\/code]<\/p>\n

\"Form<\/a><\/p>\n

Form modal chamado pelo bot\u00e3o excluir.<\/p>\n

Espero que tenha contribu\u00eddo e ajudado algu\u00e9m, j\u00e1 que vi algumas tantas d\u00favidas ainda n\u00e3o respondidas ou que a solu\u00e7\u00e3o fosse diferente e ineficaz.<\/p>\n

Em tempo: ainda tem um pequeno problema. N\u00e3o consegui a descri\u00e7\u00e3o das inst\u00e2ncia selecionada na mensagem de exclus\u00e3o. O componente seta a propriedade mas o valor n\u00e3o \u00e9 exibido. Vou debugar utilizando alguns phaseListeners para identificar o momento de cada a\u00e7\u00e3o.<\/p>\n

At\u00e9!<\/p>\n\n

Tweet<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

Na atualiza\u00e7\u00e3o de vers\u00e3o do software twarehouse\u00a0al\u00e9m da migra\u00e7\u00e3o do Tomcat para o Wildfly, a corre\u00e7\u00e3o de alguns bugs, o refatoramento das classes e outras melhorias\u00a0resolvi alterar o framework front-end do primefaces\u00a0para o bootstrap\u00a0(Twitter). Tenho enfrentado muitos desafios neste processo j\u00e1 que \u00e9 grande o trabalho para configurar templates htmls criados com bootstrap. Somado a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-201","post","type-post","status-publish","format-standard","hentry","category-sistema-de-informacao"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":0,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"wp:attachment":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}