如何在Java Server Faces中處理引導模式？

我喜歡複合材料組件的原理，但這和bootstraps模式不會一起工作。如何在Java Server Faces中處理引導模式？

什麼是管理多個自定義複合組件對話框的最佳實踐，並在JSF表中使用像這樣的示例。將Managed Bean Value從選定行傳遞給對話框。

這隻對我有用，如果我在一個頁面文件中寫全部。查看最後一個。

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着從複合材料部件

... 
<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與複合組件的內容正常工作。因爲我可以用id =「myModalForm」直接渲染h：表單。

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

來源

2015-06-20 user3623194

簡單的解決方案：

添加類到您的模式，以調用它，並打電話給你的模式爲類而不是ID，如：

模式：>

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

腳本：>

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

來源

2015-07-22 14:02:15 Ayoun

如何在Java Server Faces中處理引導模式？

回答

相關問題