twitter-bootstrap Twitter Bootstrap + JSF2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17316933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap + JSF2
提问by user1682594
I'm trying to incorporate twitter-boostrap into one of first JSF2 project.Finally managed to get it working following example from http://rkovacevic.blogspot.com/2012/05/jsf-2-twitter-bootstrap.html
我正在尝试将 twitter-boostrap 合并到第一个 JSF2 项目之一中。最后设法让它工作以下示例来自http://rkovacevic.blogspot.com/2012/05/jsf-2-twitter-bootstrap.html
My question is how to get the selected index from the datatable so that when I click on the edit button is shows the modal form with the selected information
我的问题是如何从数据表中获取选定的索引，以便当我单击编辑按钮时显示带有选定信息的模态表单
My thinking was to replace the normal html href tag by h:link so that I can add an action event to set the selected record in my managed bean,but the h:link outcome is not picking up the "#myModal" reference,the URL of h:link is missing "#myModal" at the end.
我的想法是用 h:link 替换普通的 html href 标签，这样我就可以添加一个动作事件来在我的托管 bean 中设置选定的记录，但是 h:link 结果没有选择“#myModal”引用， h:link 的 URL 末尾缺少“#myModal”。
Hope this makes sense
希望这是有道理的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="WEB-INF/templates/default.xhtml">
<ui:define name="content">
<div class="well">
<h2>Members</h2>
<br />
<h:panelGroup rendered="#{empty members}">
<em>No registered members.</em>
</h:panelGroup>
<h:dataTable id="dataTable" var="_member" value="#{members.memberList}"
rendered="#{not empty members}" styleClass="table table-striped table-bordered">
<h:column>
<f:facet name="header">Id</f:facet>
#{_member.memberId}
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
#{_member.firstName}
</h:column>
<h:column>
<f:facet name="header">Email</f:facet>
#{_member.lastname}
</h:column>
<h:column>
<f:facet name="header">Phone #</f:facet>
#{_member.contactNumber}
</h:column>
<h:column>
<f:facet name="header">REST URL</f:facet>
<a href="#{request.contextPath}/rest/members/#{_member.memberId}">/rest/members/#{_member.memberId}</a>
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Edit</a>
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<h:link href="#myModal" role="button" class="btn" data-toggle="modal" value="Edit"></h:link>
</h:column>
</h:dataTable>
</div>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</ui:define>
</ui:composition>
</html>
回答by Areo
For anyone having the same problem, this is how I got it to work:
对于任何有同样问题的人，这就是我让它工作的方式：
- you have to open the modal by javascript yourself.
- if you don't want the modal to disappear on page-reload, you have to use
<f:ajax />to prevent page-reload - the only way I found to get the variable (here:
#{_member}) to a backing bean is to evaluate the EL expression in the ajax-listener
- 你必须自己用javascript打开模态。
- 如果您不希望模式在页面重新加载时消失，则必须使用
<f:ajax />来防止页面重新加载 - 我发现将变量（此处
#{_member}：）获取到支持 bean的唯一方法是评估 ajax-listener 中的 EL 表达式
xhtml/javascript:
xhtml/javascript：
<h:form>
<h:dataTable id="dataTable" var="_member" value="#{members.memberList}"
rendered="#{not empty members}"
styleClass="table table-striped table-bordered">
<h:column>
<f:facet name="header">Action</f:facet>
<h:commandLink value="Edit">
<!-- the listener sets the variable in backing bean and onevent opens the modal -->
<!-- you also have to render the form inside the modal, so the values get updated with new ones from backing bean -->
<f:ajax listener="#{ajaxBean.handleEvent}" onevent="openModal('myModal');" render=":modalForm" />
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<h:form id="modalForm>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Use backing Bean property here... <h:outputText value="#{ajaxBean.member.name}</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</h:form>
</div>
<script type="text/javascript">
function openModal(modalName) {
$(modalName).modal('show');
return false;
}
</script>
Backing Bean:
支持豆：
package somePackage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;
@ManagedBean
public class AjaxBean {
private Member member;
public final void handleEvent(final AjaxBehaviorEvent event) {
//get the member from the FacesContext.
FacesContext context = FacesContext.getCurrentInstance();
this.member = context.getApplication().evaluateExpressionGet(context, "#{_member}", Member.class);
}
public Member getMember() {
return member;
}
public void setMember(Member member) {
this.member = member;
}
}
This way, the modal will open and you can access the #{_member} from the dataTable via #{ajaxBean.member} in the modal.
这样，模态将打开，您可以通过模态中的#{ajaxBean.member} 从数据表访问#{_member}。
Sometimes the modal won't close on first click this way if you hit the "close" button. If so, you can replace it with
如果您点击“关闭”按钮，有时模态不会在第一次点击时关闭。如果是这样，您可以将其替换为
<h:commandLink onclick="$(#myModal).modal('hide');" />
I'm almost certain that there is a more elegant way of doing this. If anyone knows how I'd be glad to hear from him/her.
我几乎可以肯定有一种更优雅的方式来做到这一点。如果有人知道我会很高兴收到他/她的来信。
