JSF 2.1 中的 HTML 4 <按钮>

Posted 2023-02-23

【中文标题】JSF 2.1 中的 HTML 4 <按钮>

【英文标题】：HTML 4 <button> in JSF 2.1

【发布时间】：2012-09-28 05:48:54

【问题描述】：

我想使用命令：

JSF <h:commandButton> 生成一个 <input...>，但我希望这样而不是生成 <input> 我希望这会生成一个 html 4 标准<button>。

【问题讨论】：

你想使用什么命令？

另外，JSF 在精细控制 HTML 输出方面有点糟糕。如果您的图形设计需求远远超出“选择 RichFaces 主题”，我强烈建议您不要使用它。我认为在这种情况下，您可以将常规 HTML <button type="button"> 放在 <h:commandLink> 中。

JSF 默认不生成<button> HTML 标签。有必要添加为什么需要它？如果您想要一个带有图像的按钮，请参阅How to create a button in JSF page with custom label

我正在使用引导程序，我的 css 需要是

才能在底部显示图标。我不想自定义我的 CSS 来支持它。我认为如果 JSF 生成它会更好。

PrimeFaces has since recently a Bootstrap theme.

【参考方案1】：

您可以使用标准 JSF 组件集获得的最接近的是 <input type="button">，它由 <h:button> 生成。

<h:button value="Button" />

生成

<input id="j_id_1" name="j_id_1" type="button" value="Button" onclick="window.location.href = '/context/currentpage.xhtml'" />

如果你真的因为一些不清楚的原因坚持使用<button>，那么你有以下选择：

只需使用纯 HTML。 创建自定义组件和/或渲染器。 获取第 3 方组件库。例如。 PrimeFaces' <p:button> 生成一个<button>。

【讨论】：

我正在将 CSS + HTML 网站转换为 JSF 网站。在设置中更改 CSS 是不切实际的。如果生成的是输入而不是按钮，则现有 CSS 不会设置生成的输入组件的样式。添加 PrimeFaces 按钮会带来不需要的样式。我对创建自定义组件一无所知。

【参考方案2】：

您应该查看 Primefaces p:commandButton。这将呈现到客户端上的<button> 标记。

http://www.primefaces.org/showcase/ui/commandButton.jsf

【参考方案3】：

如果您使用的是 JSF 2.2，则可以将 <button> 标记与 jsf 命名空间混合使用。这里的秘密是来自jsf 命名空间的process 属性，用于发布表单数据，以及action 属性。

<button type="submit" class="btn btn-primary" 
    jsf:action="#profileController.updateProfile"
    jsf:process="@form">
        <i class="fa fa-floppy-o" aria-hidden="true"></i>
            #bundle['button.store']
</button>

在 JSF 2.2 中，您可以将任何 HTML 标记与 JSF 标记混合使用。

【讨论】：

这救了我。太感谢了。我正在将基于 HTML + CSS 的站点转换为 JSF。插入 PrimeFaces 按钮会购买不必要的样式。任何其他 JSF 组件（如命令按钮或命令链接）在 Html 中生成输入，从而导致意外样式。由于我不是负责 CSS 编辑的人，因此修改 CSS 很困难。这就是你回答的价值对我来说非常方便。

【参考方案4】：

将<button> 替换为<h:commandLink> 对我有用，例如： 替换

<button class="RUIFW-btn-primary pull-right" 
        type="submit" 
        name="action" 
        value="Find" 
        onClick="return submitPage(this);">
     <span class="icon-search"></span>Find
</button> 

与

<h:commandLink styleClass="RUIFW-btn-primary pull-right" 
title="#msg['view.button.Find']"
action="#anotherAccountController.doFind"
onclick="return submitPage(this.form)">
<span class="icon-search"></span>#msg['view.button.Find']
</h:commandLink>