h:commandbutton vs h:commandlink答案

【问题标题】：h:commandbutton vs h:commandlinkh:commandbutton vs h:commandlink
【发布时间】：2012-05-28 03:50:58
【问题描述】：

我们正在使用 JSF-2.1.7 并以我们所有的形式发布请求。我试图证明是使用 <h:commandButton> 还是 <h:commandLink> 。 <h:commandLink> (href <a/> ) 的外观可以使用样式和jQuery进行控制。

推荐<h:commandButton> 或<h:commandLink> 哪个？有什么真正的优势吗？

【问题讨论】：

阅读this。它可能会帮助你...

标签： jsf jsf-2 commandbutton commandlink

【解决方案1】：

除了生成的标记和外观之外，没有任何功能差异。 <h:commandButton> 生成 HTML <input type="submit"> 元素，<h:commandLink> 生成 HTML <a> 元素，该元素使用 JavaScript 提交表单。两者都用于提交表单。附加样式与功能无关。

如果您需要提交按钮，请使用<h:commandButton>；如果您需要提交链接，请使用<h:commandLink>。如果这对您没有意义，那么我不知道。如果您无法决定使用哪一个，只需选择从 UI 角度来看最有意义的一个。如果您不确定，请咨询网页设计师。

<h:commandLink> 和 <h:outputLink> 之间的区别顺便说一句更有趣。此处已详细回答：When should I use h:outputLink instead of h:commandLink?

【讨论】：

【解决方案2】：

对于表单，我更喜欢 h:commandbutton

h:commandbutton 就像 HTML 中的一个按钮，您可以在其中设置支持 bean 的操作。 h:commandlink 就像 HTML 中的链接（标签 a），您还可以在其中设置支持 bean 的操作

要在 JSF 中使用 css 样式，可以使用属性 'styleClass'。

【讨论】：

【解决方案3】：

简而言之，我的建议是将<h:commandButton type="submit"> 用于主要（默认）提交按钮，<h:commandLink>s 用于任何其他按钮（例如过滤、排序、查找、预览、生成密码……）。

详细解释如下：

首先，一些背景知识：人们可能还应该知道<h:commandButton> type 的不同属性。（type 属性直接转换为生成的<input type=""> 属性。）我没有在任何地方发现这一点，但一些测试表明：

type="submit" （如果省略则默认为这个） 执行表单的正常“提交”行为（即发布表单）以及action 和/或actionListener。
type="reset" 执行正常的“重置”行为（即清除/重置表单字段）没有调用任何 action 和/或 actionListeners。
type="button" 生成一个按钮（显然<input type="button"> 比<button> 标签更受限制）没有调用任何action 和/或actionListeners。

除了重置字段外，后两者似乎仅对激活例如有用。 Javascript。他们不发布表单。

所以回答这个问题：在表单上下文中：

<h:commandButton>（相当于<h:commandButton type="submit">，记住）通常是最有用的，尤其是当大多数浏览器现在实现了在 Enter 时激活在表单的 DOM 树中找到的第一个提交按钮按下。这可能会改善表单的用户体验

例如使用以下方式登录会更快一些：

用户名 标签 密码 输入

相对

用户名 Tab 密码 ...将手从键盘移到鼠标，寻找指针和按钮的位置，点击。

另外请记住，任何 <input> 按钮（可选 CSS 样式）仍然可以通过键盘通过 Tabing 访问，直到 <a>（CSS 样式为按钮）获得焦点，然后是 空格键。

但是，对于表单上应该执行其他操作而不是提交（或“只是”清除字段）的其他按钮，<h:commandLink> 会更合适。这仍然可以通过键盘通过Tabing 直到<a>（CSS 样式的按钮）获得焦点，然后Enter。 请注意，这与使用<h:commandButton> 生成的按钮不一致，可能是 CSS 样式看起来相同，但浏览器处理方式不同（Tab...空格键）。

这是一般解释，但您可能需要注意一些问题...

当您在表单上没有<h:commandButton type="submit"> 按钮时，只有<h:commandLink> 按钮（甚至根本没有按钮），当用户按下Enter 时，表单仍然提交，但没有 action{Listener} 运行的好处。这可能不是太大的问题，因为表单值存储在支持 bean 中并在页面加载时再次显示，因此除了服务器往返之外，用户通常不会注意到任何问题。但这可能不是您希望处理 Enter 的方式.... 目前我能想到的唯一方法是在激活您的表单上放置一个 onSubmit 事件默认<h:commandLink>按钮通过Javascript....啊啊啊！！

您还应该确保您的 CSS 样式选择器是正确的。

A.mystyle 应用于<h:commandLink>；
INPUT[type=submit].mystyle转<h:commandButton type="submit">；
INPUT[type=reset].mystyle 到 <h:commandButton type="reset">;
INPUT[type=button].mystyle 到 <h:commandButton type="button">;

这些当然可以用逗号连接作为单个样式定义的选择器。或者，如果您想冒险将其他东西设置为 mystyle 按钮，则可以省略 A/INPUT 说明符。但是，我已经按照上面的方式设置了按钮的样式，因此我也可以使用它：

SPAN.mystyle 定义链接或按钮何时被禁用（例如，通过disabled 属性） - 这允许您为禁用的按钮提供一个淡化（灰色）的外观。

我也遇到了一些高度差异（Button 上的行高与 Link 上的内容高度 - 如果您的按钮包含背景图像作为图标而不是文本，这可能是一个问题），并且在如何 @处理了 987654362@/:after 伪类。我的意思是：在 <h:commandButton>s 和 <h:commandLink>s 上测试和重新测试你的 CSS，以确保它们看起来（基本上）相同！

这是我的摘要备忘单：

JSF type="submit"> type="reset"> type="button"> 转换为 type="submit"> type="reset"> type="button"> 提交表单 POST no，清除 flds no POST Javascript 事件是是是是 action{Listener} 是否否是输入表格激活是否否否 Tab...+Enter 激活 YES(*) YES YES YES Tab...+空格激活 YES(*) YES YES no 突出显示选项卡焦点： - Firefox 32 是不不不 - Chrome 41 是是是是 - Internet Explorer 11 是是是是 - Opera 28 是是是否 (*) （*=Opera 28 似乎不允许使用制表符（或 Alt+箭头）来激活超链接。）

【讨论】：

您基本上是在回答 <input type="submit"> 与 <a href="#" onclick="form.submit()"> 而不是 <h:commandButton> 与 <h:commandLink>。
有罪，Bauke。我正试图摆脱我严格按照字面意思理解人们的话的旧迂腐方式 - 在我看来，问题更多是关于使用一个与另一个的实用性，而 JSF 留下了一个缺乏经验的人用户的印象是它从 HTML 中抽象出来，这不一定是这种情况，幸运和/或不幸。对于一个已有 3 年历史的问题，它的价值……关注 HTML 功能方面可能会也可能不会达到问题的目标，但我认为您的回答很好地涵盖了 JSF 功能方面，不需要重复。跨度>
感谢您的努力。

【解决方案4】：

如果我错了，请纠正我，但这两者之间的第一个区别是<h:commandButton> 不需要在浏览器中启用 JavaScript。如果您的网页 JS 很重，那么您可以使用 <h:commandLink>，否则最好保持 JS 免费，以防您的用户想要使用 Tor 浏览器之类的东西并且您可以接受。第二个是这两者在网页中的行为方式。 <h:commandLink> 只会做它应该做的事情，或者有时也会从具有 @PostConstruct 注释的支持 bean 中触发一个方法。而<h:commandButton> 也可能会触发内联 JavaScript，这可能会导致从支持 bean 触发其他方法。但是它也会自动刷新视图。

【讨论】：