H：命令按钮VS H：commandlink(h:commandbutton vs h:comman

我们使用JSF-2.1.7，并在我们的所有表单POST请求。我试图证明是否使用<h:commandButton>或<h:commandLink> 。的外观<h:commandLink> （HREF <a/> ）可使用样式和jQuery来控制。

这是推荐<h:commandButton>或<h:commandLink> ？是否有任何真正的优势在哪里？

Answer 1:

存在从生成的标记和外观没有分开的功能差异。所述<h:commandButton>生成HTML <input type="submit">元件和所述<h:commandLink>产生一个HTML <a>元件，其使用JavaScript来提交表单。两者都被用来提交表单。另外的造型是无关的功能。

使用<h:commandButton>如果你需要一个提交按钮和使用<h:commandLink> ，如果你需要一个提交链接。如果这样做没有意义的你，然后我就不知道了。如果你不能决定使用哪一个，只要选择一个，这使得在UI角度看，最感。问问网页设计师，如果你不确定。

之间的差<h:commandLink>和<h:outputLink>是由方式更有趣。这已经回答了在这里详细：什么时候应该使用高：outputLink的，而不是H：commandLink？

Answer 2:

对于一个形式，我更喜欢H：命令按钮

H：命令按钮就像HTML按钮，您可以设置一个支持bean的作用。 H：commandlink就像HTML链接（Tag的），您还可以设置一个支持bean的作用

使用的CSS样式在JSF中，你可以使用属性“的styleClass”。

Answer 3:

总之，我的建议是的混合物<h:commandButton type="submit">用于主要（默认）提交按钮和<h:commandLink> S表示任何其他按钮（例如过滤，排序，查找，预览，生成密码，...）。

冗长的解释如下：

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

type="submit" （默认为此，如果省略）做形式的正常“提交”行为（即张贴形式），以及所述action和/或actionListener 。
type="reset"不正常的“复位”的行为（即，清除/复位表单字段），而不调用任何action和/或actionListener秒。
type="button"生成一个按钮（显然<input type="button">比更有限位<button>标记），而不调用任何action和/或actionListener秒。

除了重置场，后两者似乎只有激活如Java描述语言很有用。他们不张贴的形式。

因此，要回答这个问题： 在形式方面：

<h:commandButton>其相当于<h:commandButton type="submit">记住）通常是最有用的，特别是作为大多数浏览器现在实现在形式时的DOM树找到的第一个提交按钮的激活按下回车键。这可能会提高你的表单的用户体验

例如，它是稍快登录使用：

用户名 标签 密码 输入

相对于

用户名 密码 选项卡从...移动键盘手鼠标，狩猎指针和位置上的按钮，单击。

此外，还要注意的是任何<input>按钮（任选CSS样式）仍然可以通过键盘通过标签达到操作直到所述<a> （CSS样式的按钮）具有焦点，然后空格键 。

然而，对于在表格上的附加按钮，应该做一些其它的动作不提交的（或“仅仅”清除字段）， <h:commandLink>会更合适。这仍然可以通过选项卡荷兰国际集团，直到通过键盘达到<a> （CSS样式的按钮）具有焦点，然后回车 。注意，这是与生成的按钮不一致<h:commandButton>其可以是CSS样式看起来是相同的，而是由浏览器（ 选项 ... 空格键 ）的处理不同。

这是一般的解释， 但也有你可能要注意的一些问题...

当你没有一个<h:commandButton type="submit">窗体上按钮，只有一个<h:commandLink>按钮（或甚至没有任何按键的话），当用户按下回车键的形式仍然是提交，但没有的好处action{Listener}运行。这可能不是太大的问题，因为表单值存储在后端bean，并再次显示在页面加载时，从服务器往返用户因此除了通常不会注意到有什么不妥。但是，这可能不是你想怎么输入要处理的....我当时可以规避该想到的唯一办法，就是把一个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属性） -这允许您提供一个调子降（变灰）寻找一个残疾人按钮。

我也碰到一些高差（线高度上的按钮与内容高度上的链接-这可能是一个问题，如果你的按钮包括背景图片图标代替文本），以及在一些细微的差别如何:before / :after伪类进行处理。我想说：初试和复试两个你的CSS <h:commandButton> S和<h:commandLink>这个来确保他们看（基本上）相同的！

这里是我的总结小抄：

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.)

Answer 4:

纠正我，如果我错了，但是这两者之间的第一个区别是一个事实，即<h:commandButton>并不需要的JavaScript在浏览器中启用。如果你的网页是JS重那么你可以使用<h:commandLink> ，否则可能会更好，以保持它在你的用户要使用某物像Tor浏览器JS的情况下自由和你都OK吧。第二个是这两个将如何在网页中的行为。该<h:commandLink>只会做它应该做的，有时也火从后台bean，有一个方法@PostConstruct注解。而<h:commandButton>也可以点火直列JavaScript的，这可能导致从击发支持bean其他方法。然而，它也会自动刷新视图。