產生引導按鈕與JSF

Question

我想基於引導原始模板創建一個按鈕圖標，這是原始的HTML按鈕：

<button class="btn btn-default btn-sm"> 
    <i class="fa fa-plus-square"></i> 
</button> 

我這樣嘗試：

<h:button 
    outcome="#{cc.attrs.managedBeanName.redirectCriarBean(cc.attrs.targetPage)}" 
    rendered="#{cc.attrs.showButtonCadastrar}" 
    styleClass="btn btn-default btn-sm"> 
    <i class="fa fa-plus-square"></i> 
</h:button> 

但是，這是生成的HTML：

<input type="button" onclick="window.location.href='/cardoso/core/banca/manter_banca.xhtml?action=novo'; return false;" value="" class="btn btn-default btn-sm"> 
<i class="fa fa-plus-square"></i> 

我試着用這樣的：

<h:commandButton action="#{cc.attrs.managedBeanName.redirectCriarBean(cc.attrs.targetPage)}" 
    rendered="#{cc.attrs.showButtonCadastrar}" 
    styleClass="btn btn-default btn-sm"> 
    <i class="fa fa-plus-square"></i> 
</h:commandButton> 

但結果是wrost：

<input type="submit" name="j_idt40:j_idt72" value="" class="btn btn-default btn-sm"> 
<i class="fa fa-plus-square"></i> 

始終將圖標拖出按鈕：

Answer 1

的<h:button>和<h:commandButton>確實不允許孩子。

改爲使用<h:link>，它允許兒童和Bootstrap也可以supportsbtn樣式上的<a>元素。

<h:link ... styleClass="btn btn-default btn-sm"> 
    <i class="fa fa-plus-square" /> 
</h:link> 

額外的優勢，它的搜索引擎優化的更好，因爲<button>和<h:button>需要的JavaScript window.location爲導航，而<h:link>呈現一個真實<a href>。 Searchbots通常不會遵循JavaScript。 <h:commandButton>是頁面到頁面導航的不錯選擇，因爲它會觸發POST請求而不是GET請求。

如果你真的想擁有的加價<button>元素，那麼你可以隨時使用純HTML。它在JSF中也受到支持。對於有條件的渲染，請將其包裝在<ui:fragment>中。

<ui:fragment rendered="..."> 
    <button ... onclick="window.location.href='#{cc.attrs.managedBeanName.redirectCriarBean(cc.attrs.targetPage)}';return false"> 
     <i class="fa fa-plus-square" /> 
    </button> 
</ui:fragment>