个人中心
gpt4 book ai didi

twitter-bootstrap - 推特 Bootstrap + JSF2

转载 作者：行者123 更新时间：2023-12-04 08:59:07 25 4
gpt4 key购买 nike

我正在尝试将 twitter-boostrap 合并到第一个 JSF2 项目中。最终设法让它按照来自 http://rkovacevic.blogspot.com/2012/05/jsf-2-twitter-bootstrap.html 的示例工作。

我的问题是如何从数据表中获取选定的索引，以便在我单击编辑按钮时显示包含选定信息的模态表单

我的想法是用 h:link 替换普通的 html href 标签，这样我就可以添加一个 Action 事件来在我的托管 bean 中设置选定的记录，但是 h:link 结果没有获取“#myModal”引用，h:link 的 URL 末尾缺少“#myModal”。

希望这是有道理的

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

最佳答案

对于遇到同样问题的任何人，这就是我如何让它工作的:

  • 你必须自己用 javascript 打开模式。
  • 如果您不希望模态框在页面重新加载时消失，您必须使用<f:ajax />。防止页面重新加载
  • 我发现将变量(此处:#{_member})获取到支持 bean 的唯一方法是评估 ajax 监听器中的 EL 表达式

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>

支持 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;
    }
}

这样，模式将打开，您可以通过模式中的#{ajaxBean.member} 从数据表访问#{_member}。

如果您点击“关闭”按钮，有时模态框不会在第一次点击时关闭。如果是这样，您可以将其替换为

<h:commandLink onclick="$(#myModal).modal('hide');" />

我几乎可以肯定有一种更优雅的方法可以做到这一点。如果有人知道我会很高兴收到他/她的来信。

关于twitter-bootstrap - 推特 Bootstrap + JSF2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17316933/

25 4 0
文章推荐： twitter-bootstrap - 使用 RequireJS 在 Ladda 中未定义 Spinner
文章推荐： java - Spring Reactive Web - 异常总是包含在 500 中
文章推荐： python - 如何在字符串中动态更改变量的值？
文章推荐： asp.net - 在哪里存储应用程序设置？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com