使用 JSF 生成带有图标的 Bootstrap 按钮

Question

我正在尝试基于 bootstrap 原始模板创建按钮，这是原始 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>

但结果是：

<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> 确实不允许 children.

改用 <h:link>，它允许 children 和 Bootstrap 也允许在 <a> 元素上使用 supports btn 样式。

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

额外的优势，它对 SEO 更好，因为 <button> 和 <h:button> 需要 JavaScript window.location 用于导航，而 <h:link> 呈现真实的 <a href>。搜索机器人通常不会关注 JavaScript。 <h:commandButton> 是 page-to-page 导航的错误选择，因为它会触发 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>

使用 JSF 生成带有图标的 Bootstrap 按钮

Generate Bootstrap button with icon with JSF

jsf

icons

button

twitter-bootstrap