JSF 2 button and commandButton example

In JSF 2.0, both

<h:button />

and

<h:commandButton />

tags are used to render HTML input element of type button, with different mechanism to handle the navigation.

1. JSF

h:commandButton

example

The “

h:commandButton

” tag is released since JSF 1.x, you can declare the bean, which return the navigation outcome in the “

action

” attribute. If browser’s with JavaScript disabled, the navigation is still working, because the navigation is handled via form post.

1. Submit button

//JSF
<h:commandButton value="submit" type="submit" action="#{user.goLoginPage}" />

//HTML output
<input type="submit" name="xxx" value="submit" />

2. Reset button

//JSF
<h:commandButton value="reset" type="reset" />

//HTML output
<input type="reset" name="xxx" value="reset" />

3. Normal button

//JSF
<h:commandButton value="button" type="button" />

//HTML output
<input type="button" name="xxx" value="button" />

4. Normal button with onclick event

//JSF
<h:commandButton value="Click Me" type="button" onclick="alert('h:commandButton');" />

//HTML output
<input type="button" name="xxx" value="Click Me" onclick="alert('h:commandButton');" />

2. JSF h:button example

The “

h:button

” is a new tag in JSF 2.0, you can declared the navigation outcome directly in the “

outcome

” attribute, no need to call a bean to return an outcome like “

h:commandButton

” above. But, if browser’s with JavaScript disabled, the navigation will failed, because the “

h:button

” tag is generate an “

onclick

” event to handle the navigation via “

window.location.href

”. See examples :

1. Normal button without outcome

//JSF
<h:button value="buton" />

//HTML output
<input type="button"
onclick="window.location.href='/JavaServerFaces/faces/currentpage.xhtml; return false;"
value="buton" />

2. Normal button with an outcome

//JSF
<h:button value="buton" outcome="login" />

//HTML output
<input type="button"
onclick="window.location.href='/JavaServerFaces/faces/login.xhtml; return false;"
value="buton" />

3. Normal button with JavaScript.

//JSF
<h:button value="Click Me" onclick="alert('h:button');" />

//HTML output
<input type="button"
onclick="alert('h:button');window.location.href='/JavaServerFaces/faces/page.xhtml;return false;"
value="Click Me" />

My thought…

No really sure why JSF 2.0 released this “

h:button

” tag, the JavaScript redirection is not practical, especially in JavaScript disabled browser. The best is integrate the “outcome” attribute into the “

h:commandButton

” tag, hope it can be done in future release.