[英]h:commandbutton vs h:commandlink
We are using JSF-2.1.7 and in all our form post requests. 我们正在使用JSF-2.1.7和我们所有的表单发布请求。 I am trying to justify whether to use
<h:commandButton>
or <h:commandLink>
. 我试图证明是否使用
<h:commandButton>
或<h:commandLink>
。 The appearance of <h:commandLink>
(href <a/>
) can be controlled using style and jQuery. 可以使用style和jQuery控制
<h:commandLink>
(href <a/>
)的外观。
Which is recommended <h:commandButton>
or <h:commandLink>
? 推荐哪个
<h:commandButton>
或<h:commandLink>
? Is there any real advantage? 有什么真正的优势吗?
There is no functional difference apart from the generated markup and the appearance. 除了生成的标记和外观之外没有功能差异。 The
<h:commandButton>
generates a HTML <input type="submit">
element and the <h:commandLink>
generates a HTML <a>
element which uses JavaScript to submit the form. <h:commandButton>
生成HTML <input type="submit">
元素, <h:commandLink>
生成HTML <a>
元素,该元素使用JavaScript提交表单。 Both are to be used to submit a form. 两者都将用于提交表格。 Additional styling is irrelevant to the functionality.
其他样式与功能无关。
Use the <h:commandButton>
if you need a submit button and use the <h:commandLink>
if you need a submit link . 使用
<h:commandButton>
如果你需要一个提交按钮和使用<h:commandLink>
,如果你需要一个提交链接 。 If that doesn't make sense to you, then I don't know. 如果这对你没有意义 ,那我就不知道了。 If you can't decide which one to use, just choose the one which makes the most sense in UI perspective.
如果您无法决定使用哪一个,只需选择在UI透视图中最有意义的那个。 Ask the web designer if you're unsure.
询问网页设计师是否不确定。
The difference between <h:commandLink>
and <h:outputLink>
is by the way more interesting. <h:commandLink>
和<h:outputLink>
之间的区别更有趣。 This is been answered in detail here: When should I use h:outputLink instead of h:commandLink? 这里有详细的解答: 我什么时候应该使用h:outputLink而不是h:commandLink?
For a form, I prefer the h:commandbutton 对于表单,我更喜欢h:commandbutton
h:commandbutton is like a button in HTML where you can set the action of a backing bean. h:commandbutton就像HTML中的一个按钮,您可以在其中设置辅助bean的操作。 h:commandlink is like a link in HTML (the tag a) where you also can set the action of a backing bean
h:commandlink就像HTML中的链接(标签a),您也可以在其中设置辅助bean的操作
To use the css style in JSF, you can use the attribute 'styleClass'. 要在JSF中使用css样式,可以使用属性“styleClass”。
In short, my recommendation is a mix of <h:commandButton type="submit">
for the primary (default) submit button and <h:commandLink>
s for any additional buttons (eg filter, sort, lookup, preview, generate password, ...). 简而言之,我的建议是主要(默认)提交按钮的
<h:commandButton type="submit">
和任何其他按钮的<h:commandLink>
(例如过滤,排序,查找,预览,生成密码) ,...)。
Lengthy explanation follows: 冗长的解释如下:
First, some background: One should probably also be aware of the different <h:commandButton>
type
attributes. 首先,一些背景知识:应该也应该知道不同的
<h:commandButton>
type
属性。 (The type
attribute translates directly to the generated <input type="">
attribute.) I haven't found this explicitly stated anywhere, but some tests showed that: (
type
属性直接转换为生成的<input type="">
属性。)我没有在任何地方明确说明这一点,但有些测试显示:
type="submit"
(defaults to this if omitted) does the normal "submit" behaviour of the form (ie POSTing the form) as well as the action
and/or actionListener
. type="submit"
(如果省略则默认为this)执行表单的正常“提交”行为(即POST表单)以及action
和/或actionListener
。 type="reset"
does the normal "reset" behaviour (ie clearing/resetting the form fields) without calling any action
and/or actionListener
s. type="reset"
执行正常的“重置”行为(即清除/重置表单字段), 而不调用任何action
和/或actionListener
。 type="button"
generates a button (apparently <input type="button">
is a bit more limited than the <button>
tag) without calling any action
and/or actionListener
s. type="button"
生成一个按钮(显然<input type="button">
比<button>
标签更有限), 而不调用任何action
和/或actionListener
。 Apart from resetting the fields, the latter two seem to be useful only to activate eg Javascript. 除了重置字段,后两个似乎只对激活例如Javascript有用。 They don't POST the form.
他们没有POST表格。
So to answer the question: in a form context: 所以回答这个问题: 在表单上下文中:
<h:commandButton>
(which is equivalent to <h:commandButton type="submit">
, remember) is often the most useful, especially as most browsers now implement activation of the first submit button found in the DOM tree of the form when Enter is pressed. <h:commandButton>
(相当于<h:commandButton type="submit">
,请记住)通常是最有用的,特别是因为大多数浏览器现在都实现了在表单的DOM树中找到的第一个提交按钮的激活按Enter键。 This might improve your form's user experience Eg it is somewhat faster to log with: 例如,使用它更快一些:
as opposed to 而不是
Also keep in mind that any <input>
buttons (optionally CSS-styled) can still be reached via keyboard by Tab ing until the <a>
(CSS-styled as a button) has focus, and then Spacebar . 此外,还要注意的是任何
<input>
按钮(任选CSS样式)仍然可以通过键盘通过标签达到操作直到所述<a>
(CSS样式的按钮)具有焦点,然后空格键 。
<h:commandLink>
would be more appropriate. <h:commandLink>
会更合适。 This can still be reached via keyboard by Tab ing until the <a>
(CSS-styled as a button) has focus, and then Enter . <a>
(CSS样式的按钮)具有焦点,然后回车 。 Note that this is inconsistent with buttons generated with <h:commandButton>
, which may be CSS-styled to look identical, but are handled differently by the browser ( Tab ... Spacebar ). <h:commandButton>
生成的按钮不一致,这些按钮可能是CSS样式,看起来相同,但浏览器( Tab ... Spacebar )的处理方式不同。 That is the general explanation, BUT there are some issues you might want to take note of... 这是一般性的解释, 但是你可能需要注意一些问题......
When you do not have a <h:commandButton type="submit">
button on a form, only a <h:commandLink>
button (or even no buttons at all), when the user presses Enter the form is still submitted, but without the benefit of a action{Listener}
running. 当您在表单上没有
<h:commandButton type="submit">
按钮时,只有<h:commandLink>
按钮(甚至根本没有按钮),当用户按Enter键时 ,表单仍然会被提交,但是没有action{Listener}
运行的好处。 Which might not be too big a problem, as the form values get stored in the backing bean and shown again when the page loads, so apart from the server roundtrip the user will often not notice anything is amiss. 这可能不是一个太大的问题,因为表单值存储在支持bean中并在页面加载时再次显示,因此除了服务器往返之外,用户通常不会注意到任何错误。 But that might not be how you want Enter to be handled.... The only way I can think of at the moment circumventing that, is to put an
onSubmit
event on the form which activates your default <h:commandLink>
button via Javascript.... Arghhhh!! 但是,这可能不是你想怎么输入要处理的....我当时可以规避该想到的唯一办法,就是把一个
onSubmit
事件激活您的默认表单上<h:commandLink>
按钮通过Javascript ...... Arghhhh !!
You should also make sure that your CSS style selectors are sound. 您还应该确保CSS样式选择器是合理的。
A.mystyle
is applied to <h:commandLink>
; A.mystyle
适用于<h:commandLink>
; INPUT[type=submit].mystyle
to <h:commandButton type="submit">
; INPUT[type=submit].mystyle
to <h:commandButton type="submit">
; INPUT[type=reset].mystyle
to <h:commandButton type="reset">
; INPUT[type=reset].mystyle
to <h:commandButton type="reset">
; INPUT[type=button].mystyle
to <h:commandButton type="button">
; INPUT[type=button].mystyle
to <h:commandButton type="button">
; These can of course be concatenated with a comma as the selector for a single style definition. 这些当然可以用逗号连接作为单个样式定义的选择器。 Or if you want to take the risk of something else being styled as a mystyle button, you could omit the
A
/ INPUT
specifiers. 或者如果你想冒一些其他东西被设计为mystyle按钮的风险,你可以省略
A
/ INPUT
说明符。 However, I have styled my buttons as above, so that I could also use this: 但是,我已按上面的方式设置了按钮,这样我也可以使用它:
SPAN.mystyle
definition for when the link or button is disabled (eg via the disabled
attribute) - this allows you to supply a toned-down (greyed) look for a disabled button. SPAN.mystyle
定义(例如,通过disabled
属性) - 这允许您为禁用按钮提供淡化(灰色)外观。 I have also run into some height differences (line height on Button vs. content height on Link - which may be a problem if your button includes a background image as icon instead of text), and also some slight differences in how :before
/ :after
pseudoclasses are handled. 我也遇到了一些高度差异(按钮上的行高与链接上的内容高度 - 如果你的按钮包含背景图像作为图标而不是文本,这可能是一个问题),以及如何
:before
/ :before
一些细微差别:after
处理伪类:after
。 All I'm saying: test and retest your CSS on both <h:commandButton>
s and <h:commandLink>
s to make sure they look (essentially) the same! 我只是说:在
<h:commandButton>
和<h:commandLink>
上测试并重新测试你的CSS,以确保它们看起来(基本上)相同!
Here is my summary cheat sheet: 这是我的摘要备忘单:
JSF <h:commandButton <h:commandButton <h:commandButton <h:commandLink> type="submit"> type="reset"> type="button"> Translates to <input <input <input <a> type="submit"> type="reset"> type="button"> Submit form POST no, clears flds no POST Javascript events YES YES YES YES action{Listener} YES no no YES Enter on form activates YES no no no Tab...+Enter activates YES(*) YES YES YES Tab...+Space activates YES(*) YES YES no Highlight on Tab-focus: - Firefox 32 YES no no no - Chrome 41 YES YES YES YES - Internet Explorer 11 YES YES YES YES - Opera 28 YES YES YES no(*) (*=Opera 28 seems not to allow tabbing (or Alt+Arrow) to hyperlinks to activate them.)
Correct me if I'm wrong but the first difference between these two is the fact, that <h:commandButton>
doesn't need JavaScript to be enabled in a browser. 如果我错了,请纠正我,但这两者之间的第一个区别在于,
<h:commandButton>
不需要在浏览器中启用JavaScript。 If your webpage is JS heavy then you can use <h:commandLink>
, otherwise it might be better to keep it JS free in case your user wants to use sth like Tor Browser and you are ok with it. 如果您的网页是JS重,那么您可以使用
<h:commandLink>
,否则最好保持JS免费,以防您的用户想要像Tor浏览器一样使用它并且您可以使用它。 The second one is how these two will behave in a webpage. 第二个是这两个在网页中的表现。 The
<h:commandLink>
will just do what it is supposed to do or sometimes also fire a method from backing bean that has @PostConstruct
annotation. <h:commandLink>
将执行它应该执行的操作,或者有时也从具有@PostConstruct
注释的辅助bean触发方法。 While <h:commandButton>
may also fire inline JavaScripts which may lead to firing other methods from backing bean. 虽然
<h:commandButton>
也可能触发内联JavaScripts,这可能导致从辅助bean触发其他方法。 However it will also automatically refresh the view. 但是它也会自动刷新视图。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.