1

As you may know that you can render button in HTML5 in 2 methods:

  • Using void element <input type="button" /> or
  • If you want content, use the <button></button> element (which isn't a void element).

In JSF2, there are 2 ways to generate buttons; either with UICommand or UIOutcomeTarget component. I understand what these 2 components are for, my question what would be the best component for the 2 HTML5 button types, should one create these HTML5 components in JSF2?

So far, the best aspects is to create a UICommand and UIOutcomeTarget for each HTML5 elements.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Buhake Sindi
  • 87,898
  • 29
  • 167
  • 228

1 Answers1

4

The UICommand component should be used for a POST button like <h:commandButton type="submit"> and the UIOutcomeTarget component should be used for a GET button like <h:button>. The void button is in JSF represented by <h:commandButton type="button"> which is essentially UICommand, but it doesn't do anything.

JSF2 doesn't have any component which generates a <button>. The mentioned components generate a <input>. PrimeFaces' <p:commandButton> and <p:button> however generates a fullworthy <button> (for the sole reason because it allows easier control over look'n'feel by CSS).

If you intend to create a custom component which generates a <button> and want to decide between UICommand and UIOutcomeTarget, then you should base it on whether the desired HTML representation of the button ultimately fires a POST or a GET request. If your button should support both, then go for UICommand.

See also:

Unrelated to the concrete problem, none of those buttons are HTML5 specific. They existed in previous HTML versions already.

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Then my first question to this is, must `UIForm` component always allow for HTTP POST only or is an HTTP GET allowed? – Buhake Sindi Jul 24 '13 at 20:09
  • Yes. JSF is primarily designed as MVC framework for postback form based applications. The `` doesn't support any other method. If you want GET, just use plain HTML `
    `. See also the example in bottom of my answer on http://stackoverflow.com/questions/6377798/what-can-fmetadata-and-fviewparam-be-used-for
     – BalusC Jul 24 '13 at 20:10
  • Thanks @Balusc, the reason is due to the [submit button](http://www.w3.org/TR/html-markup/button.submit.html#button.submit) (for both void and non-void elements). You can see the element `formmethod` attribute is allowed, thus allowing forms to be set to `get` or `post`. Your suggestion would be to `UICommand` both components all together? – Buhake Sindi Jul 24 '13 at 20:24
  • Those new attribtues are in turn indeed specific to HTML5. For JSF that shouldn't matter. They are like every other attribute: print it as a plain string. Yes, `UICommand` is your only option anyway if you want to support JSF POST. Alternatively you could also implement alone the `ActionSource` interface, but then you'd have to write a lot of additional boilerplate which is already sufficiently done in `UICommand`. – BalusC Jul 24 '13 at 20:25
  • Thanks BalusC. I am busy writing UIComponents and renderers that conforms to HTML5 elements and their respective tags (and learning JSF in the process). These tedious tags are making it difficult for me to me decisions of whether I should include some of these new attributes or not. – Buhake Sindi Jul 24 '13 at 20:55
  • Also, the `` element still was an issue in IE. Never tried using it in IE10 though. – Buhake Sindi Jul 24 '13 at 20:56