h:button和h:commandButton之间的区别

In JSF 2, what is the difference between h:button and h:commandButton ?

在JSF 2中，h:button和h:commandButton的区别是什么?

5 个解决方案

#1

<h:button>

The <h:button> generates a HTML <input type="button">. The generated element uses JavaScript to navigate to the page given by the attribute outcome, using a HTTP GET request.

生成HTML 。生成的元素使用JavaScript导航到属性结果给出的页面，使用HTTP GET请求。

E.g.

如。

<h:button value="GET button" outcome="otherpage" />

will generate

将生成

<input type="button" onclick="window.location.href='/contextpath/otherpage.xhtml'; return false;" value="GET button" />

Even though this ends up in a (bookmarkable) URL change in the browser address bar, this is not SEO-friendly. Searchbots won't follow the URL in the onclick. You'd better use a <h:outputLink> or <h:link> if SEO is important on the given URL. You could if necessary throw in some CSS on the generated HTML <a> element to make it to look like a button.

尽管这会导致浏览器地址栏中的URL更改(可书签)，但这并不友好。Searchbots不会跟随onclick中的URL。如果SEO在给定的URL上很重要，您最好使用 或

Do note that while you can put an EL expression referring a method in outcome attribute as below,

请注意，虽然您可以在输出属性中放入引用方法的EL表达式，如下所示，

<h:button value="GET button" outcome="#{bean.getOutcome()}" />

it will not be invoked when you click the button. Instead, it is already invoked when the page containing the button is rendered for the sole purpose to obtain the navigation outcome to be embedded in the generated onclick code. If you ever attempted to use the action method syntax as in outcome="#{bean.action}", you would already be hinted by this mistake/misconception by facing a javax.el.ELException: Could not find property actionMethod in class com.example.Bean.

当您单击按钮时，它将不会被调用。相反，当仅为获取要嵌入到生成的onclick代码中的导航结果而呈现包含按钮的页面时，就已经调用了它。如果您曾经尝试过像在result ="#{bean中那样使用操作方法语法。action}”，通过面对java .el，您可能已经被这个错误/误解所暗示。ELException:在类com.example.Bean中找不到属性actionMethod。

If you intend to invoke a method as result of a POST request, use <h:commandButton> instead, see below. Or if you intend to invoke a method as result of a GET request, head to Invoke JSF managed bean action on page load or if you also have GET request parameters via <f:param>, How do I process GET query string URL parameters in backing bean on page load?

如果您打算调用一个方法作为POST请求的结果，那么可以使用 ，如下所示。或者，如果您打算调用一个方法作为GET请求的结果，那么head在页面加载上调用JSF托管bean操作，或者如果您也通过

---

<h:commandButton>

The <h:commandButton> generates a HTML <input type="submit"> button which submits by default the parent <h:form> using HTTP POST method and invokes the actions attached to action, actionListener and/or <f:ajax listener>, if any. The <h:form> is required.

生成一个HTML 按钮，该按钮默认情况下使用HTTP POST方法提交父

，并调用附加到action、actionListener和/或 的操作(如果有的话)。< h:form >是必需的。

E.g.

如。

<h:form id="form">
    <h:commandButton id="button" value="POST button" action="otherpage" />
</h:form>

will generate

将生成

<form id="form" name="form" method="post" action="/contextpath/currentpage.xhtml" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="form" value="form" />
    <input type="submit" name="form:button" value="POST button" />
    <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="...." autocomplete="off" />
</form>

Note that it thus submits to the current page (the form action URL will show up in the browser address bar). It will afterwards forward to the target page, without any change in the URL in the browser address bar. You could add ?faces-redirect=true parameter to the outcome value to trigger a redirect after POST (as per the Post-Redirect-Get pattern) so that the target URL becomes bookmarkable.

注意，它因此提交到当前页面(表单动作URL将显示在浏览器地址栏中)。之后，它将转发到目标页面，而不会在浏览器地址栏中的URL发生任何更改。您可以向输出值添加?faces-redirect=true参数，以触发POST后的重定向(按照POST -redirect - get模式)，从而使目标URL成为书签。

The <h:commandButton> is usually exclusively used to submit a POST form, not to perform page-to-page navigation. Normally, the action points to some business action, such as saving the form data in DB, which returns a String outcome.

通常只用于提交POST表单，不用于执行页面到页面的导航。通常，操作指向一些业务操作，比如在DB中保存表单数据，这会返回一个字符串结果。

<h:commandButton ... action="#{bean.save}" />

with

与

public String save() {
    // ...
    return "otherpage";
}

Returning null or void will bring you back to the same view. Returning an empty string also, but it would recreate any view scoped bean. These days, with modern JSF2 and <f:ajax>, more than often actions just return to the same view (thus, null or void) wherein the results are conditionally rendered by ajax.

返回null或void将返回到相同的视图。还返回一个空字符串，但它将重新创建任何视图作用域bean。现在，有了现代的JSF2和 ，操作常常只返回到相同的视图(因此，null或void)，其中结果是由ajax有条件地呈现的。

public void save() {
    // ...
}

---

See also:

• How to navigate in JSF? How to make URL reflect current page (and not previous one)
• 如何在JSF中导航?如何使URL反映当前页面(而不是以前的页面)
• When should I use h:outputLink instead of h:commandLink?
• 我应该什么时候使用h:outputLink而不是h:commandLink?
• Differences between action and actionListener
• 动作和动作监听器的区别

#2

h:button - clicking on a h:button issues a bookmarkable GET request.

h:按钮——单击h:按钮发出可书签的GET请求。

h:commandbutton - Instead of a get request, h:commandbutton issues a POST request which sends the form data back to the server.

命令按钮——不是get请求，而是h:commandbutton发出POST请求，将表单数据发送回服务器。

#3

h:commandButton must be enclosed in a h:form and has the two ways of navigation i.e. static by setting the action attribute and dynamic by setting the actionListener attribute hence it is more advanced as follows:

h:commandButton必须包含在h:form中，有两种导航方式，即通过设置动作属性实现静态导航，通过设置actionListener属性实现动态导航，因此它的先进性如下:

<h:form>
    <h:commandButton action="page.xhtml" value="cmdButton"/>
</h:form>

this code generates the follwing html:

此代码生成以下html:

<form id="j_idt7" name="j_idt7" method="post" action="/jsf/faces/index.xhtml" enctype="application/x-www-form-urlencoded">

whereas the h:button is simpler and just used for static or rule based navigation as follows

而h:按钮更简单，只用于静态或基于规则的导航，如下所示

<h:button outcome="page.xhtml" value="button"/>

the generated html is

生成的html

 <title>Facelet Title</title></head><body><input type="button" onclick="window.location.href='/jsf/faces/page.xhtml'; return false;" value="button" />

#4

Contributing from Ed Burns & Chris Schalk book The Complete Reference

埃德·伯恩斯和克里斯·沙尔克合著的《完整参考》

Comparing h:commandButton and h:button

比较h:命令按钮和h:按钮

What’s the difference between h:commandButton/h:commandLink and h:button/ link?

h:commandButton/h:commandLink与h:button/ link之间有什么区别?

The latter two components were introduced in 2.0 to enable bookmarkable JSF pages, when used in concert with the “View Parameters” feature.

后两个组件是在2.0中引入的，以便在与“视图参数”特性一起使用时启用可书签的JSF页面。

There are 3 main differences between h:button/h:link and h:commandButton/h:commandLink.

h:button/h:link和h:commandButton/h:commandLink有三个主要区别。

First, h:button/h:link causes the browser to issue an HTTP GET request, while h:commandButton/h:commandLink does a form POST. This means that any components in the page that have values entered by the user, such as text fields, checkboxes, etc., will not automatically be submitted to the server when using h:button/h:link. To cause values to be submitted with h:button/h:link, extra action has to be taken, using the “View Parameters” feature.

首先，h:button/h:link会导致浏览器发出HTTP GET请求，而h:commandButton/h:commandLink则执行表单POST。这意味着在使用h:button/h:link时，页面中任何包含用户输入值的组件(如文本字段、复选框等)都不会自动提交给服务器。要使值与h:button/h:链接，必须使用“视图参数”特性来执行额外的操作。

The second main difference between the two kinds of components is that h:button/ h:link has an outcome attribute to describe where to go next while h:commandButton/ h:commandLink uses an action attribute for this purpose. This is because the former does not result in an ActionEvent in the event system, while the latter does.

这两种组件之间的第二个主要区别是:h:button/ h:link有一个结果属性来描述下一步要去哪里，而h:commandButton/ h:commandLink为此使用了一个动作属性。这是因为在事件系统中，前者不会导致ActionEvent，而后者则会。

Finally, and most important to the complete understanding of this feature, the h:button/h:link components cause the navigation system to be asked to derive the outcome during the rendering of the page, and the answer to this question is encoded in the markup of the page. In contrast, the h:commandButton/h:commandLink components cause the navigation system to be asked to derive the outcome on the POSTBACK from the page. This is a difference in timing. Rendering always happens before POSTBACK.

最后，最重要的是对这个特性的完整理解，h:button/h:link组件使导航系统在页面呈现过程中被要求获得结果，这个问题的答案被编码在页面的标记中。相反，h:commandButton/h:commandLink组件导致导航系统被要求从页面的回发中派生出结果。这是时间上的不同。呈现总是在回发之前发生。

#5

Here is what the JSF javadocs have to say about the commandButton action attribute:

以下是JSF javadocs对commandButton动作属性的看法:

MethodExpression representing the application action to invoke when this component is activated by the user. The expression must evaluate to a public method that takes no parameters, and returns an Object (the toString() of which is called to derive the logical outcome) which is passed to the NavigationHandler for this application.

method dexpression表示当用户激活该组件时要调用的应用程序动作。表达式必须对不带参数的公共方法进行计算，并返回一个对象(调用其toString()来派生逻辑结果)，该对象将传递给该应用程序的NavigationHandler。

It would be illuminating to me if anyone can explain what that has to do with any of the answers on this page. It seems pretty clear that action refers to some page's filename and not a method.

如果有人能解释一下这和本页上的答案有什么关系的话，对我来说会很有启发。很明显，action是指某个页面的文件名，而不是方法。