生成带有 JSF 图标的 Bootstrap 按钮

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>

但结果是错误的：

<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 也可以在<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> 是页面到页面导航的错误选择，因为它会触发 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>