15

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

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

4

4 回答 4

27

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

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

<h:commandLink>顺便说一句，和之间的区别<h:outputLink>更有趣。此处已对此进行了详细回答：何时应该使用 h:outputLink 而不是 h:commandLink？

于 2012-05-21T16:19:03.997 回答
5

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

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

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

于 2012-05-21T16:20:01.277 回答
5

简而言之，我的建议是<h:commandButton type="submit">主要（默认）提交按钮和<h:commandLink>任何附加按钮（例如过滤器、排序、查找、预览、生成密码......）的混合。

冗长的解释如下：

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

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

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

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

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

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

  1. 用户名 Tab 密码 Enter

与

  1. 用户名 Tab 密码... 将手从键盘移到鼠标，寻找指针并在按钮上定位，单击。

还要记住，任何<input>按钮（可选的 CSS 样式）仍然可以通过键盘通过Tabing 到达，直到<a>（CSS 样式的按钮）具有焦点，然后Spacebar.

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

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

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

您还应该确保您的 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 上的内容高度 - 如果您的按钮包含背景图像作为图标而不是文本，这可能是一个问题），并且在处理方式:before/:after伪类方面也存在一些细微差异. 我要说的是：在<h:commandButton>s 和<h:commandLink>s 上测试和重新测试你的 CSS 以确保它们看起来（基本上）相同！

这是我的摘要备忘单：

JSF <h:commandButton <h:commandButton <h:commandButton <h:commandLink>
                      type="submit"> type="reset"> type="button">

转换为 <input <input <input <a>
                      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+箭头）来激活超链接。）
于 2015-04-08T16:46:58.813 回答
0

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

于 2015-08-29T16:15:43.717 回答