如何在 Java Server Faces 中处理引导模式？答案

【问题标题】：How to handle bootstrap modal in Java Server Faces?如何在 Java Server Faces 中处理引导模式？
【发布时间】：2015-09-06 07:00:21
【问题描述】：

我喜欢复合组件的原理，但是这个和引导模式不能一起工作。

管理多个自定义复合组件对话框并在 JSF 表中使用此示例的最佳实践是什么。将选定行中的托管 Bean 值传递给对话框。

仅当我将所有内容都写在一个页面文件中时，这才适用于我。看最后一个。

bootstrapModal.xhtml 封装在复合组件中的模态

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:cc="http://xmlns.jcp.org/jsf/composite">

<cc:interface>

    <cc:attribute name="title" />
    <cc:attribute name="linkNameLable" />
    <cc:attribute name="linkNameValue" />
    <cc:attribute name="urlNameLable" />
    <cc:attribute name="urlNameValue" />
    <cc:attribute name="saveButtonText" />
    <cc:attribute name="saveButtonAction" 
                  method-signature="java.lang.String action()" />

</cc:interface>

<cc:implementation>

    <div id="#{cc.clientId}" class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" >
        <div class="modal-dialog">  
            <div class="modal-content">
                <div class="modal-body">
                    <h:form>
                        <h:outputLabel   value="#{cc.attrs.linkNameLable}" />
                        <h:inputText     value="#{cc.attrs.linkNameValue}" />
                        <h:outputLabel   value="#{cc.attrs.urlNameLable}" />
                        <h:inputText     value="#{cc.attrs.urlNameValue}"  /> 
                        <h:commandButton value="#{cc.attrs.saveButtonText}" action="#{cc.attrs.saveButtonAction}" />
                    </h:form>
                </div>
            </div>
        </div>
    </div>

</cc:implementation>
</html>

包装 div 不起作用。

<div id=#{cc.clientId}>...</div>

我也尝试将 id 传递给里面的表单。

<h:form id=#{cc.clientId}

view.xhtml 包含不起作用的复合组件。 f:ajax 无法从复合组件中渲染 id

...
<script>
    function showModal() {
        $('#myModal').modal('show');
    }
</script>
...
<h:dataTable id="myTable" value="#{linkController.linkList}" var="o">   
...          
    <h:column>
        <f:facet name="header">Actions</f:facet>
        <h:form>
            <h:commandLink value="edit" onclick="showModal()" action="#{linkController.setLinkFromParam}">
                <f:ajax render="myModal value1 value2" />
                <f:param name="name" value="#{o.name}"  />
                <f:param name="url"  value="#{o.url}"   />
            </h:commandLink>
        </h:form>
    </h:column>
</h:dataTable>

<!-- 1.outside the Table rendering works fine -->

<h:outputText id="value1" value="#{linkController.name}" /><br />
<h:outputText id="value2" value="#{linkController.url}" />


<!-- 2.The render for this id does not work -->

<mahi:bootstrapModal    title="Edit Link" 
                        id="myModal" 
                        linkNameLable="Link Name:" 
                        linkNameValue="#{linkController.name}"
                        urlNameLable="URL:"
                        urlNameValue="#{linkController.url}"
                        saveButtonText="Save"
                        saveButtonAction="#{linkController.updateLink(link)}" />

view.xhtml 包含来自复合组件的内容可以正常工作。因为我可以直接使用 id="myModalForm" 渲染 h:form。

...
<script>
    function showModal() {
        $('#myModal').modal('show');
    }
</script>
...
<h:dataTable id="myTable" value="#{linkController.linkList}" var="o">   
...          
    <h:column>
        <f:facet name="header">Actions</f:facet>
        <h:form>
            <h:commandLink value="edit" onclick="showModal()" action="#{linkController.setLinkFromParam}">
                <f:ajax render="myModalForm" />
                <f:param name="name" value="#{o.name}"  />
                <f:param name="url"  value="#{o.url}"   />
            </h:commandLink>
        </h:form>
    </h:column>
</h:dataTable>

<!-- The Content from the Custom Composite Component works -->

<div id="myModal" class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myLinkModal" aria-hidden="true" >
    <div class="modal-dialog">  
        <div class="modal-content">
            <div class="modal-body">
                <h:form id="myModalForm">
                    <h:outputLabel   value="Name:" />
                    <h:inputText     value="#{linkController.name}" />
                    <h:outputLabel   value="URL:" />
                    <h:inputText     value="#{linkController.url}" /> 
                    <h:commandButton value="Save" action="#{linkController.saveLink(link)}" />
                </h:form>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： twitter-bootstrap jsf dialog modal-dialog composite-component

【解决方案1】：

简单的解决方案：

将类添加到您的模态以调用它，并将您的模态称为类而不是像 id 一样：

模态：>

<div id="#{cc.clientId}" class="modal fade myModal"

脚本：>

<script>
function showModal() {
    $('.myModal').modal('show');
}

【讨论】：